2 Div's naast elkaar.

Basiboy · 27 aug 2011

Hallo,
Ik ben voor m'n nieuwe website m'n layout aan het coderen,maar helaas gaat dat niet echt vlekkeloos als voorheen.
Ik wil graag 2 div's naast elkaar zetten,menu links en content rechts,maar dit zonder enig suc6. Ik heb

Code:

float:left;

al geprobeert maar dat werkte ook niet,en van google en vragen die hier voorheen zijn gesteld op het forum word ik ook niet wijzer.
Huidige code:

Code:

#box_top {
background-image: url('images/box_top.png');
text-align:center;
width:198px;
height:5px;
margin-left:35px;
}

#box_mid {
background-image: url('images/box_mid.png');
text-align:center;
width:198px;
margin-left:35px;
}

#box_bottom {
background-image: url('images/box_bottom.png');
text-align:center;
width:198px;
height:69px;
margin-left:35px;
}

#Content_top {
background-image: url('images/content_top.png');
width:569px;
height:11px;
float:left;
}

#Content_mid {
background-image: url('images/content_mid.png');
width:569px;
float:left;
}

#Content_bottom {
background-image: url('images/content_bottom.png');
width:569px;
height:20px;
float:left;
}

Mvg,
Bas

tecsman · 27 aug 2011

De layout van je pagina is een combinatie van html en css.
De html-code heb je niet gegeven,
dus nu is het gokken wat je precies op je pagina wilt zien.

Ik gok als volgt:
een kolom met drie boxen boven op elkaar en
daarnaast
een kolom met drie x content boven elkaar.

Zullen we het makkelijker maken
met 1 kolom met 1 x box en
daarnaast
een kolom met 1 x content?

Je moet dan een zgn. wrapper-div maken
en daarin de box en de content positioneren.

HTML:

<div id="wrapper">
   <div id="box">
      <p>inhoud van de box</p>
   </div>
   <div id="content">
      <p>inhoud van de content</p>
   </div>
</div>

Aandachtspunt:
denk eraan dat de box en de content qua breedte samen in de wrapper passen

csshunter · 29 aug 2011

Hoi Basiboy,
Vaak kan je ook de <body> gebruiken als #wrapper, dat scheelt weer een <div>'je.
Dan wordt het:

HTML:

<body>
   <div id="box">
      ... (inhoud van de menubox)
   </div>
   <div id="content">
      ... (inhoud van de content)
   </div>
   <div id="clearB"><!-- ! --></div>
</body>

Met bv. in de css:

Code:

body {
   width: 900px;
   margin 0 auto; /* hiermee staat de pagina horizontaal gecentreerd */
   }
#box {
   width: 200px; 
   float: left;   /* drijft links */
   }
#content {
   width: 680px;  /* 20px afstand van de #box */
   float; right;  /* drijft rechts */
   }
.clearB {
   clear: both;
   }

Het lege "clear" <div>'je zorgt ervoor, dat bv. de achtergrondkleur van de body doorloopt onder beide kolommen, dat je onder beide kolommen een #footer kan plaatsen, enz.

Vervolgens kunnen binnen de #box en de #content elk de bijbehorende ingrediënten geplaatst worden, die hoeven dan niet te floaten (want ze zitten al binnen een container). Ik gok dat de #box_top en #box_bottom enz. alleen voor de randjes bedoeld zijn. Dan wordt het bv.:

HTML:

<body>
   <div id="box">
      <div id="box_top"><!-- ! --></div>
      <div id="box_mid">
         ... (menu)
      </div>
      <div id="box_bottom"><!-- ! --></div>      
   </div>
   <div id="content">
      <div id="content_top"><!-- ! --></div>
      <div id="content_mid">
         ... (content)
      </div>
      <div id="content_bottom"><!-- ! --></div>      
   </div>
   <div id="clearB"><!-- ! --></div>
</body>

... met in de css toegevoegd:

Code:

#box-top {
   height: 5px;
   background-image: url('images/box_top.png');
   }
#box-mid {
   background-image: url('images/box_mid.png');
   }
#box-bottom{
   height: 69px;
   background-image: url('images/box_bottom.png');
   }
#content-top {
   height: 11px;
   background-image: url('images/content_top.png');
   }
#content-mid {
   background-image: url('images/content_mid.png');
   }
#content-bottom{
   height: 20px;
   background-image: url('images/content_bottom.png');
   }

Is dat de structuur die je bedoelt?

Met vriendelijke groet,
CSShunter

2 Div's naast elkaar.

Basiboy

Gebruiker

tecsman

Terugkerende gebruiker

csshunter

Meubilair

Nieuwste berichten

Wij waarderen jouw privacy