CSS <div>
ik ben een beetje aan het stoeien met de div's.
ik wil graag Menu en News naast elkaar.
maar als menu uitrekt gaat de news naar beneede.
hoe kan ik dit oplossen?
Alvast bedankt.
<div>
<div>
<div> menu </div>
<div> Tekst </div>
</div>
<div>
<div> News </div>
<div> Tekst news </div>
</div>
</div>
Mag hopen dat bij je geposte code de css al inzit?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
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>';
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:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
.menu {
margin-left: 20px;
width: 200px;
position: relative;
}
.midden {
margin-top: 0;
margin-left: 240px;
margin-right: 20px;
}
margin-left: 20px;
width: 200px;
position: relative;
}
.midden {
margin-top: 0;
margin-left: 240px;
margin-right: 20px;
}
Gewijzigd op 01/01/1970 01:00:00 door Mitch
moet het goedkoomen.
Iets in de geest van:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<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>
<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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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;
}
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;
}
Code (php)
1
2
3
4
2
3
4
div.clear {
width: 410px;
overflow: hidden;
}
width: 410px;
overflow: hidden;
}
Edit: ik zie dat je deze methode al gebruikt. De class 'clearer' is verwarrend als naam.
Gewijzigd op 01/01/1970 01:00:00 door Jan Koehoorn
Jan Koehoorn schreef op 04.09.2009 18:46:
Als je even had gekeken was dit de container div die Leon had gebruikt om zijn ul's. Daar ben ik van uit gegaan. ;)@ 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: Geen probleem, en ja, die benaming is inderdaad verwarrend.
Gewijzigd op 01/01/1970 01:00:00 door Mitchell
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:
Code (php)
1
2
3
4
5
2
3
4
5
<h1>titel</h1>
<p> tekst</p>
<h1>titel</h1>
<p> tekst</p>
<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.
Gewijzigd op 01/01/1970 01:00:00 door - Ariën -
Mitchell schreef op 04.09.2009 18:37:
@ Leon: Daar bestaat ook al een betere oplossing voor.
That's it, geen :after nodig.
Code (php)
1
2
3
4
2
3
4
div.clear {
width: 410px;
overflow: hidden;
}
width: 410px;
overflow: hidden;
}
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.
Edit: ik zie dat je deze methode al gebruikt. De class 'clearer' is verwarrend als naam.
Dank u beiden