login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Div positioneren aan een al gecentreerde div (Opgelost)

Offline html_user - 18/10/2011 19:28
Avatar van html_userLid Io,

Mijn probleem is als volgt:
Ik heb een grote div waar heel mijn website instaat.
Nu wil ik aan deze div een andere dunnere verticale div aanplakken.
Maar ik weet niet hoe ik dat juist kan positioneren.
Omdat jullie waarschijnlijk nog niet te veel snappen van
deze uitleg omdat ik het niet goed kan uitleggen heb ik
een tekening gemaakt.

Deze kan je hier bekijken:
de tekening

Alvast bedankt,
Html_user

13 antwoorden

Gesponsorde links
Offline Pieter - 18/10/2011 19:41
Avatar van Pieter Gouden medaille

SEO guru		 Het zou gemakkelijker zijn als je je containerdiv centreert met margin: 0px auto en het een breedte meegeeft. Dan kan je gewoon iets breder nemen en met een linkse float je div 'ertegen plakken'.
Offline html_user - 18/10/2011 20:10
Avatar van html_user Lid Maar het is dus wel degelijk de bedoeling dat de tweede div niet in de eerste div zit.
Of begrijp ik je verkeerd??

Html_user
Offline vinTage - 18/10/2011 20:14
Avatar van vinTage Nieuw lid Een container div, ter breedte van je contentdiv plus je 'andere' div (plus evt marge).
Die container centreer je in je body.

In die container, float je 2 divs links (content en die andere).
Offline html_user - 18/10/2011 20:49
Avatar van html_user Lid Vintage,

Ik heb eens uitgetekend wat ik heb afgeleid uit jouw uitleg.
Zou je willen bevestigen of ik het juist heb begrepen.
Hier nogmaals de link.
De tekening

Alsvast bedankt, ik denk dat ik nu al verder kan.
Html_user
Offline Pieter - 18/10/2011 20:50
Avatar van Pieter Gouden medaille

SEO guru		 @Vintage, werkt ook, maar geeft wat meer code. Maar is misschien gemakkelijker als html_user echt alles wil scheiden.
Offline html_user - 18/10/2011 20:56 (laatste wijziging 18/10/2011 20:56)
Avatar van html_user Lid Jah dat is nodig omdat dat balkje eigenlijk een soort van toggle menu is.
Als je daarop klikt schuift er nog een andere div van achter de website.
Een soort van keuze menuutje maar allé dat zijn details.
Offline vinTage - 18/10/2011 21:13
Avatar van vinTage Nieuw lid
html_user schreef:
Zou je willen bevestigen of ik het juist heb begrepen.
Html_user

Zo zou ik het persoonlijk wel doen iig.
Offline larssy1 - 19/10/2011 14:36
Avatar van larssy1 MySQL beginner
html_user schreef:
Vintage,

Ik heb eens uitgetekend wat ik heb afgeleid uit jouw uitleg.
Zou je willen bevestigen of ik het juist heb begrepen.
Hier nogmaals de link.
De tekening

Alsvast bedankt, ik denk dat ik nu al verder kan.
Html_user

Om eerlijk te zijn klopt je tekening niet. Je website word alsnog niet gecentreerd.

bij deze show ik mijn paint skillz.
http://imagesha...skillz.png/
Offline html_user - 19/10/2011 16:33
Avatar van html_user Lid Maar als ik op jouw tekening de blauwe div rechts float tegen de groene dan komt hij volgens mij op zijn plaats en da andere float ik ook recht maar met margin van 900px (de blauwe is 900px breed). Deze komt dan mooi tegen de blauwe div.

Alvaste allemaal bedankt.
En ik zal het nu proberen of het lukt en
ik zal nog een linkje posten als het werkt.
Offline Pietje - 19/10/2011 19:24
Avatar van Pietje Lid Hmm... Als je nou es dit doet:

HTML
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="right">
  2. //Inhoud
  3. </div>
  4. <div class="left">
  5. //Inhoud
  6. </div>


CSS
css code - Bekijk de code zonder highlighting - Klap code in 
  1. .right{float: right; height: //HOOGTE; position: relative; width: //BREEDTE}
  2. .left{float: left; height: //HOOGTE; position: relative; width: //BREEDTE}
Offline Pietje - 19/10/2011 19:24 (laatste wijziging 19/10/2011 19:31)
Avatar van Pietje Lid Hmm... Als je nou es dit doet:

HTML
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="right">
  2. //Inhoud
  3. </div>
  4. <div class="left">
  5. //Inhoud
  6. </div>


CSS
css code - Bekijk de code zonder highlighting - Klap code in 
  1. .right{float: right; height: //HOOGTE; position: relative; width: //BREEDTE}
  2. .left{float: left; height: //HOOGTE; position: relative; width: //BREEDTE}


EDIT: Je wilt de linker div gecenteert naar het midden hebben hé?
Doe dan dit:

CSS
css code - Bekijk de code zonder highlighting - Klap code in 
  1. .left{float: left; height: //HOOGTE; margin-top: //HOOGTE*; position: relative; width: //BREEDTE}


* Stukje boven je linker div
Bedankt door: html_user
Offline html_user - 21/10/2011 19:34 (laatste wijziging 21/10/2011 19:41)
Avatar van html_user Lid Alles is mij tot nu toe gelukt maar nu krijg ik mijn website niet meer gecentreerd.
Weet iemand waarom?

Mijn html code.
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <title>Socializ - Home</title>
  5. <link rel="stylesheet" href="Css sz.css" type="text/css" />
  6. </head>
  7.  
  9.  
  10. <div id="content">
  11. <div id="uitschuif">
  12. </div>
  13. <div id="page">
  14. <div id="werkblad">
  15. <!------------------------Werkblad------------------>
  16. <p> Hier staat normaal een heleboel informatie maar dit is
  17. weggelaten voor de vraag te stellen op sitemasters.be.
  18. </p>
  19. </div>
  20. <br /><br />
  21. </div>
  22. </div>
  23. </body>
  24. </html>

Mijn css code.
css code - Bekijk de code zonder highlighting - Klap code in 
  1. @charset "utf-8";
  2. /* CSS Document */
  3. body{
  4. 	background: -moz-linear-gradient(top, #CFFB5B, #E0FA9A)fixed;    
  5. 	background: -webkit-gradient(linear, left top, left bottom, from(#CFFB5B), to(#E0fA9A))fixed;
  6. 	filter: progid:DXImageTransform.Microsoft.Gradient(
  7.                 StartColorStr='#CFFB5B', EndColorStr='#E0FA9A', GradientType=1); 
  8. 	/*background-color:#CEE680;*/
  9. }
  10.  
  11. #content{
  12. 	position:absolute;
  13. 	height:auto;
  14. 	width: 936px;
  15. 	left:50%;
  16.     margin-left:-450px;
  17. 	padding:0;
  18. 	margin: 0;
  19. }
  20. #uitschuif{
  21. 	background-color:#99FF00;
  22. 	position:absolute;
  23. 	top: 100px;
  24. 	left: 1px;
  25. 	float: left;
  26. 	z-index: 2;
  27. 	width: 30px;
  28. 	height: 500px;
  29. 	border: 1px solid #000;	
  30. 	margin: 0;
  31. }
  32.  
  33. #page{
  34. 	position:absolute;
  35. 	float: right;
  36. 	right: 1px;
  37. 	z-index: 2;
  38. 	background-color: #eeeefc;
  39. 	width: 900px;
  40. 	height: auto;
  41. 	border: 2px solid #000;
  42. 	margin:0px;
  43. }
  44.  
  45. #werkblad{
  46. 	z-index: 3;
  47. 	background-color: #f0f0f0;
  48. 	width: 652px;
  49. 	border-bottom: 12px; 
  50. 	padding-bottom: 6px;
  51. 	padding: 8px;
  52. 	padding-top: 6px;
  53. 	position: relative;
  54. 	margin-left: 210px;
  55. 	margin-right: 40px;
  56. 	margin-top: 100px;
  57. 	margin-bottom: 20px;
  58. 	min-height: 450px;
  59. 	border: 1px solid #999;
  60.  
  61. }


Ik hoop dat jullie iets zien en als jullie nog andere fouten zien in mijn code mag je die natuurlijk ook posten.

Alvast bedankt,
Html_user
Offline icemar - 22/10/2011 09:28 (laatste wijziging 22/10/2011 09:31)
Avatar van icemar Lid Je heb de margin:0px te laag gezet te veel in de content div gezet deze overschrijft de margin-left.

Als je deze bovenaan zet dan werkt het correct.
php code - Bekijk de code zonder highlighting - Klap code in 
  1. #content{
  2. /*  de margin en padding boven aan zetten wat lager in de  regels staat overschrijft het eerste.*/
  3.     margin: 0;
  4.     padding:0;
  5.     position:absolute;
  6.     height:auto;
  7.     width: 936px;
  8.     left:50%;  
  9.     margin-left:-450px;    
  10.  }
Bedankt door: html_user
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.201s