CSS <div>

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Mitch

Mitch

03/09/2009 21:42:00
Quote Anchor link
Hallo,

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>
 
PHP hulp

PHP hulp

28/03/2024 10:21:55
 

03/09/2009 21:56:00
Quote Anchor link
Float?
Mag hopen dat bij je geposte code de css al inzit?
 
Mitch

Mitch

03/09/2009 21:59:00
Quote Anchor link
zit er nog niet bij in:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>';

css:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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;
}
Gewijzigd op 01/01/1970 01:00:00 door Mitch
 

04/09/2009 16:53:00
Quote Anchor link
met float: left;
moet het goedkoomen.
 
Leon Vosmeijer

Leon Vosmeijer

04/09/2009 18:19:00
Quote Anchor link
Sowieso zou ik van zowel het menu al van het news onderdeel een (un)ordered list maken.

Iets in de geest van:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>


Met de volgende CSS:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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;
}
 
Mitchell

Mitchell

04/09/2009 18:37:00
Quote Anchor link
@ Leon: Daar bestaat ook al een betere oplossing voor.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
div.clear {
width: 410px;
overflow: hidden;
}
That's it, geen :after nodig.
 
Jan Koehoorn

Jan Koehoorn

04/09/2009 18:46:00
Quote Anchor link
@ 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.
Gewijzigd op 01/01/1970 01:00:00 door Jan Koehoorn
 
Mitchell

Mitchell

04/09/2009 18:48:00
Quote Anchor link
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.
Gewijzigd op 01/01/1970 01:00:00 door Mitchell
 
Jan Koehoorn

Jan Koehoorn

04/09/2009 18:51:00
Quote Anchor link
@ Mitchell: ik had ook gekeken. Zie mijn edit.
 
- Ariën  -
Beheerder

- Ariën -

04/09/2009 22:30:00
Quote Anchor link
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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<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.
Gewijzigd op 01/01/1970 01:00:00 door - Ariën -
 
Leon Vosmeijer

Leon Vosmeijer

05/09/2009 13:50:00
Quote Anchor link
Mitchell schreef op 04.09.2009 18:37:
@ Leon: Daar bestaat ook al een betere oplossing voor.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
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
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.