Layout aber wie?
Slayer
- css
Hallo, ich versuche grad eine css basirende seite zu erstellen. komme aber nicht so ganz zurecht. Ich hoffe jemand von euch kann mir da mal einen Top geben. hier mal meine codes:
Die CSS Datei:
* { padding: 0; margin: 0; }
html>body {
width:800px;
min-width:800px;
height: 600px;
min-height:100px;
position:relative;
margin: 0 auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
background-color:#00ff00;
}
#ol {
position:absolute; left:0px; top:0px;
height: 50px;
width: 100px;
background-color:blue;
background-image:url(images/mr.png);
background-repeat:no-repeat;
}
#om {
position:absolute; left:100px; top:0px; right:100px;
background-color:blue;
height: 50px;
width: 600px;
}
#or {
position:absolute; left:700px; top:0px;
height: 50px;
width: 100px;
background-image:url(images/mr.png);
background-repeat:no-repeat;
background-color:blue;
}
#ml {
position:absolute; left:0px; bottom:50px; top:50px;
width: 100px;
background-image:url(images/ml.png);
background-repeat:repeat-y;
}
#c {
position:absolute; left:100px; top:50px; right:100px; bottom:50px;
background-color:red;
width: 600px;
}
#mr {
position:absolute; left:700px; bottom:50px; top:50px;
width: 100px;
background-image:url(images/mr.png);
background-repeat:repeat-y;
background-color:red;
}
#ul {
position:absolute; left:0px; bottom:0px;
height: 50px;
width: 100px;
background-image:url(images/ul.png);
background-repeat:no-repeat;
background-color:#ffffff;
}
#um {
position:absolute; left:100px; bottom:0px; right:100px;
height: 50px;
width: 600px;
background-color:#ffffff;
}
#ur {
position:absolute; left:700px; bottom:0px;
height: 50px;
width: 100px;
background-image:url(images/ur.png);
background-repeat:no-repeat;
background-color:#ffffff;
}
und meine html Datei:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Seite Ohne Rahmen</title>
<link rel="stylesheet" type="text/css" href="css/18492.css" />
</head>
<body>
<div id="ol"><img border="0" src="css/images/ol.png"></img></div>
<div id="om">logo</div>
<div id="or"><img border="0" src="css/images/or.png"></img></div>
<div id="ml"></div>
<div id="c">
<p><br><br><br><br><br><br><br>INHALT<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>ff<br><br><br><br><br></p>
</div>
<div id="mr"></div>
<div id="ul"><img border="0" src="css/images/ul.png"></img></div>
<div id="um">footer</div>
<div id="ur"><img border="0" src="css/images/ur.png"></img></div>
</body>
</html>
Mit freundlichem Gruß,
Slayer
Hi,
Hallo, ich versuche grad eine css basirende seite zu erstellen. komme aber nicht so ganz zurecht.
Dann liefere eine Problembeschreibung, die diese Bezeichnung auch verdient.
</hilfe/charta.htm#tipps-fuer-fragende>
Ich hoffe jemand von euch kann mir da mal einen Top geben.
Ach, du bist weiblichen Geschlechts? Oder Transvestit?
MfG ChrisB
Dann liefere eine Problembeschreibung, die diese Bezeichnung auch verdient.
Mein Problem ist, das die äusseren Säulen nun wo ich es hinbekommen habe das sie auch liks und rechts, sind nicht mehr bis nach unten gehen. Ich denke mal das es an den absoluten zuweisungen liegt, komme aber nicht auf die lösung, wenn ich die zuweisung auf relativ stelle, zerhackt es mein layout
Meine Seite
Hi,
Mein Problem ist, das die äusseren Säulen nun wo ich es hinbekommen habe das sie auch liks und rechts, sind nicht mehr bis nach unten gehen.
Standardstichwort für dieses absolut gängige Problem: Faux Columns.
MfG ChrisB
@@Slayer:
html>body {
Gibt es einen Grund, IE < 7 wegen mangeldem Verständnis für Kindselektoren auszuschließen?
<div id="ol"><img border="0" src="css/images/ol.png"></img></div>
In XHTML 1.0 Strict darf das 'img'-Element kein 'border'-Attribut haben (Darstellung in Sache von CSS). Allerdings muss es ein http://de.selfhtml.org/html/grafiken/einbinden.htm#referenz@title='alt'-Attribut haben.
</img>-End-Tags sind keine gute Idee. Schreibe HTML-kompatibel!
<p><br><br><br><br><br><br><br>INHALT<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>ff<br><br><br><br><br></p>
Der Code ist sinnlos und http://de.selfhtml.org/html/xhtml/unterschiede.htm#leere_elemente@title=fehlerhaft.
Andersrum sollte er sein: sinnhaft und fehlerlos. Bei zweitem hilft der Validator.
Live long and prosper,
Gunnar