PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
M

Div hoogtes verschillen...

Door Michel W op 29-01-2009 20:19
431 views
Dames en Heren,

Ik ben een beetje aan het stoeien met divs en ik loop tegen het volgende op:
Ik heb een grote div met meerdere divs erin en alles werkt in IE maar niet in FF..

Ik heb 2 divs naast elkaar en als 1 van die 2 langer is als de ander rekt de ander niet mee uit..

Iemand enig idee met deze code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
div.forumblock
{
	width: 690px;
	margin-left: auto;
	margin-right: auto;
	background-color:#000000;
	font-size: 0.75em;
	color:#FF0000;
	height: auto; 
}

div.forumheader
{
	width:100%;
	background-color:#DFDFDF;
	color:#000000;

}
div.forumonwer
{
	width:172px;
	background-color:#000000;
	color:#FFFFFF;
	float:left;
	height: auto; 
}
div.forummessage
{
	width:518px;
	background-color:#000000;
	color:#FFFFFF;
	float:left;
		height: auto; 
}
div.forumquote
{
	width:540px;
	background-color:#000000;
	color:#FFFFFF;
	float:left;
}
div.forumedit
{
	width:150px;
	background-color:#000000;
	color:#FFFFFF;
	float:left;
}
</style>

</head>

<body>
<p>
    <div class="forumblock">
        <div class="forumheader">
        Header
        </div>
        
        <div class="forumonwer">
            avatar shizzle
        </div>
        
        <div class="forummessage">
            bericht
            <br />
            <br />
            <br />
            test
        </div>
        <div class="forumquote">
            test
        </div>
        <div class="forumedit">
            test
        </div>
</div>
</p>
<p>
    <div class="forumblock">
        <div class="forumheader">
        Header
        </div>
        
        <div class="forumonwer">
            avatar shizzle
        </div>
        
        <div class="forummessage">
            bericht
            <br />
            <br />
            <br />
            test
        </div>
        <div class="clear"></div>
        <div class="forumquote">
            test
        </div>
        <div class="forumedit">
            test
        </div>
</div>
</p>
</body>
</html>
Jesper Diovo
29-01-2009 20:22
[google]Faux Columns[/google]. Overigens, als dit de opbouw is van een forum: het weergeven van posts mag best met tabellen. Dat is namelijk het overzichtelijk weergeven van gegevens. Als je maar de rest wat er omheen zit in divs doet ;-).
M
Michel W
29-01-2009 20:25
haha, tabellen was toch meestal alleen voor gegevens? Dus een kruistabel etc. ?
N
Niek Weevers
29-01-2009 20:34
Jezpur schreef op 29.01.2009 20:22
[google]Faux Columns[/google]. Overigens, als dit de opbouw is van een forum: het weergeven van posts mag best met tabellen. Dat is namelijk het overzichtelijk weergeven van gegevens. Als je maar de rest wat er omheen zit in divs doet ;-).

Nee het weergeven van posts kun je beter in een ol (ordened list) zetten. Deze is het meest geschikt. Een table is echt voor tabulaire data, en dat is een forum niet.
M
Michel W
29-01-2009 20:38
niek hoe dan?

Jij zegt in een ol hoe the hell? (ik ben een n00b als het om css gaat maar wil het wel leren :P)
- SanThe -
29-01-2009 20:48
HTML Validation Output: 3 Errors
N
Niek Weevers
29-01-2009 21:19
Je bouwt een ol zo op

<ol>
<li>Inhoud reactie 1</li>
<li>Inhoud reactie 2</li>
</ol>

Je ziet dan dat de output een genummerde lijst is, dat is logisch.
De css kun je vervolgens zo doen

ol {
margin: 0;
padding: 0;
list-style: none;
}

De inhoud van elke <li> kun je natuurlijk verder stylen. De naam enz.

ps in plaats van de css hierboven kun je ook een reset.css gebruiken. Die zet alle element met hun margins ed op nul. Zo is het makkelijker crossbrowser te bouwen.
M
Michel W
30-01-2009 00:50
thnx voor jullie hulp

@niek ik zal me in dat crossbrowser eens verdiepen, heb al welgemerkt dat IE totaal anders is als FF en dat ik te lui ben om bepaalde dingen 1 px op te schuiven xD

thnx all

Reageren

Inloggen om te reageren