CSS <div>

Float?
Mag hopen dat bij je geposte code de css al inzit?

zit er nog niet bij in:

echo '<div>';
echo '<br><div class="menu">
<div class="title">Menu</div>
<div class="text">opties<br> meer gebeure<br>rekt hij dan uit?<br>Hoop het niet.<br><br><br><br></div>
</div>';

echo '<div class="midden">
<div class="title">News</div>
<div class="text">blablabla</div>
</div>';
echo '</div>';

css:

.menu {
	margin-left: 20px;
	width: 200px;
	position: relative;
}
.midden {
	margin-top: 0;
	margin-left: 240px;
	margin-right: 20px;
}

met float: left;
moet het goedkoomen.

Sowieso zou ik van zowel het menu al van het news onderdeel een (un)ordered list maken.

Iets in de geest van:

<div class="clear">
<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/">Menuitem</a></li>
</ul>
<ul id="news">
<li><a href="/">Item 1</a></li>
<li><a href="/">Item 2</a></li>
</ul>
</div>

Met de volgende CSS:

div.clear { 
width: 410px;
height: 1%;  // IE meuk
}
div.clear:after {
display: block;
height: 0;
clear: both;
content: '.';
visibility: none;
}
ul#menu {
float: left;
width: 200px;
border: 1px solid red;
}
ul#news {
float: left;
width: 200px;
border: 1px solid yellow;
}

@ Leon: Daar bestaat ook al een betere oplossing voor.

div.clear { 
width: 410px;
overflow: hidden;
}

That's it, geen :after nodig.

@ Mitchell: clearer divs zijn al vrij lang ook niet meer nodig. Je geeft gewoon de container div een overflow: hidden; en een widht en klaar ben je. Geen overbodige divs meer in je code.

Edit: ik zie dat je deze methode al gebruikt. De class 'clearer' is verwarrend als naam.

Jan Koehoorn schreef op 04.09.2009 18:46

@ Mitchell: clearer divs zijn al vrij lang ook niet meer nodig. Je geeft gewoon de container div een overflow: hidden; en een widht en klaar ben je. Geen overbodige divs meer in je code.

Als je even had gekeken was dit de container div die Leon had gebruikt om zijn ul's. Daar ben ik van uit gegaan. ;)

Edit: Geen probleem, en ja, die benaming is inderdaad verwarrend.

@ Mitchell: ik had ook gekeken. Zie mijn edit.

Hoezo gebruik je divjes, om tekst in te plaatsen?
Ik weet dat het erg luxe klinkt, maar het is nog niet helemaal netjes.

Als je echt goed bezig wilt zijn, kijk je naar mogelijke HTML elementen om tekst mee te bewerken, en die style je met CSS.

Dit heet semantiek:

<h1>titel</h1>
<p> tekst</p>

<h1>titel</h1>
<p> tekst</p>

Pas als je echt een element niet kan gebruiken. Dan moet je pas naar divjes kijken. (bijvoorbeeld paginaindeling; links menu, rechts je inhoud)

Google eens op Semantiek. Dan vind je vast wel meer informatie.

Mitchell schreef op 04.09.2009 18:37

@ Leon: Daar bestaat ook al een betere oplossing voor.

div.clear { 
width: 410px;
overflow: hidden;
}

That's it, geen :after nodig.

Jan Koehoorn schreef op 04.09.2009 18:46

@ Mitchell: clearer divs zijn al vrij lang ook niet meer nodig. Je geeft gewoon de container div een overflow: hidden; en een widht en klaar ben je. Geen overbodige divs meer in je code.

Edit: ik zie dat je deze methode al gebruikt. De class 'clearer' is verwarrend als naam.

Dank u beiden