Layout erstellen
jord
- css
0 jord0 Thomas Luethi0 suit
Abendm
habe mich versucht folgendes Layout zu erstellen, bin aber gescheitert, aber kann ja nicht so schwer sein...
<a href="http://image-upload.de/file/KgXWnL/7ed241e181.jpg" target="_blank">Link</a>
Das sind meine Anfänge...
<head>
<title>Kothes</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="language" content="de" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!-- ###DOKUMENT### begin -->
<div id="container">
<div id="logo">
###logo###
</div>
<div id="sprache">
###sprache###
</div>
<div id="menuOben">
###menu###
</div>
<div id="suche">
##suche###
</div>
</div>
<!-- ###DOKUMENT### end -->
</body>
</html>
body{
}
div#container{
margin:0px auto;
width: 950px;
}
div#logo{
float: left;
width: 900px;
margin: 0; padding: 0;
border: 1px solid black;
}
div#sprache{
width: 250px;
margin-left: 700px;
padding: 0 1em;
border: 1px solid black;
}
div#menuOben{
float: left;
width: 600px;
border: 1px solid black;
}
div#suche{
margin-left: 600px;
width: 350px;
border: 1px solid black;
}
hier der Link, der wollte den nicht einpflanzen Xd
Hallo,
Beschäftige Dich mal intensiv mit dem http://de.selfhtml.org/css/formate/box_modell.htm@title=Box-Modell.
Und dann noch mit dem kaputten Box Modell des MS IE bis 5.5
(sowie 6.0 u.s.w. im Quirks Modus).
Die volle Breite, die ein Element (exkl. margin) braucht,
errechnet sich so:
border + padding + width
div#logo{
float: left;
width: 900px;
margin: 0; padding: 0;
border: 1px solid black;
}
=> Total Breite: 902px
div#sprache{
width: 250px;
margin-left: 700px;
padding: 0 1em;
border: 1px solid black;
}
=> Total Breite: 252px+2em
Total Breite #logo+#sprache = 1154px+2em
Das ist deutlich mehr als die 950px, die der Container breit ist...
Das gleiche Problem hast Du mit der zweiten Zeile.
HTH, mfg
Thomas
<!-- ###DOKUMENT### begin -->
###logo###
###sprache###
###menu###
##suche###
<!-- ###DOKUMENT### end -->
Eine Frage nebenbei: da du offensichtlich ein Template für TYPO3 erstellst - warum verwendest du Subparts und Marker gemischt?
Warum heisst dein Marker für das Element mit der id "menuOben" nur ###menu### (bzw. umgekehrt - menuOben ist ein unkluger Name). bzw. warum heißt der Subpart für den body ###DOKUMENT### (jaja, ich weiß - die Doku schlägt das so vor) obwohl es sich offensichtlich nicht um das Dokument handelt sondern nur um einen Teil davon.
Diese kleinen Dinge werden dich (oder andere) irgendwann zu Verzweiflung treiben, wenn nicht mehr klar ist wie welche Rlemente heissen und man wegen jeder Kleinigkeit im HTML-Template, im CSS und im TypoScript nachschlagen muss.