Hallo zusammen,
ich habe ein Verständnisproblem zum Thema HTML / CSS Template:
Ich würde gerne meiner Typo3 basierten Website ein "neues Kleid" verpassen und habe dazu ein "neues Pärchen" HTML und CSS Template erstellt. Der Grundgedanke ist ein Template, das eine 3 spaltige Website (links Menue, mitte Content, rechts News) mit zwei darüber liegenden Headern und einem darunter liegenden Footer erzeugt.
Dazu habe ich ein CSS Gerüst aus dem Buch CSS-Praxis genommen und auf Typo3 bzw. meine Bedürfnisse angepasst.
Lieder erhalte ich nicht annähernd das, was ich ich mir vorgestellt habe... :-(
Die damit erzeugte Web-Site stellt alle Div Container untereinander und links orientiert dar.
Was ich absolut nicht verstehe ist folgendes:
Wenn ich im Firefox mit der Web-Developer Erweiterung die Block Level Elemente anzeigen lasse, so erscheint als oberstes Element:
html > body > div#main1 > div#main2 > div.cleaner
gefolgt von:
html > body > div#main1 > div#header > div#logo
Erwartet hätte ich jedoch als erstes Element:
html > body > div#header
und dann
html > body > div#header > div#logo
html > body > div#header > div#topmenu
Weshalb kommt mein div#header innerhalb div#main1 zu liegen, ich habe ihn doch in meiner html-Vorlage nicht "innerhalb" main1 definiert...?
Ich fürchte, ich habe da etwas grundsätzliches noch nicht verstanden...
Wer kann mir hier einen Tipp geben?
Ich habe die kompletten Vorlagen unten angehängt (Die sind sicherlich im Detail noch überarbeitungswürdig, es geht mir momentan aber erstmal um die prinzipielle Funktionsweise und die o.g. Probleme)
Vielen Dank und viele Grüsse,
Joe
---------------------------------------------------------------
HTML-Vorlage:
<link rel="stylesheet" type="text/css" href="css/denkbeeldV2.css" />
<!--###DOCUMENT_HEADER###-->
<!-- ###DOCUMENT_BODY### -->
<div id="header">
<div id="logo"> </div>
<div id="topmenu"> </div>
</div>
<div id="header2">
<div id="header-image"> </div>
<div id="header-text"> </div>
</div>
<div id="main1">
<div id="main2">
<div id="left">
<div id="leftmenu"> </div>
</div>
<div id="right">
<div id="latestnews"> </div>
</div>
<div id="content"> </div>
<div class="cleaner"> </div>
</div>
</div>
<div id="footer"> </div>
<!-- ###DOCUMENT_BODY###-->
----------------------------------------------------------------
CSS Template:
@import url (content.css);
body {
margin:0; padding:0;
font: 77% Arial, Helvetica, Verdana; sans-serif;
}
#header {
margin:0; padding:0;
height: 70px;
background:#ccc;
}
#logo {
float right;
width: 180px;
height: 70px;
background:#999;
}
#topmenu {
float: left;
margin-top: 35px;
width: 500px;
height: 35px;
background:#999;
}
#topmenu ul {
margin: 0;
padding: 0;
}
#topmenu li {
float: left;
display: block;
color: #000000;
padding: 0 10px 0 0;
font: normal 14px Verdana,Arial,Helvetica,sans-serif;
}
#topmenu li a {
text-decoration: none;
color: #000000;
}
#topmenu li a:hover {
color: blue;
}
#topmenu li.ACT,
#topmenu li.CUR {
font-size: 18px;
position: relative;
top: -4px;
}
#header2 {
margin:0; padding:0;
height: 100px;
background:#ddd;
}
#header-image {
float: left;
width: 240px;
height: 100px;
}
#header-text {
float: right;
width: 450px;
margin-right: 150px;
margin-top: 80px;
height: 20px;
}
#main1 {
margin:0; padding:0;
background: #FFCC99 url(../img/bg_links1.gif) repeat-y left top;
}
#main2 {
margin:0; padding:0;
background: url(../img/bg_rechts1.gif)repeat-y right top;
}
#left {
float:left;
width:150px;
margin:0; padding: 10px;
font-size:0.9em;
}
#leftmenu {
margin: 10px 0 0 10px;
}
#leftmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#leftmenu li {
text-decoration: none;
font: Arial, Helvetica, Verdana, sans-serif;
padding: 5px 0 5px 10px;
}
#leftmenu li a {
text-decoration: none;
}
#leftmenu li a:hover {
color: red;
}
#leftmenu li a {
color: #000000;
}
#leftmenu li.ACT,
#leftmenu li.CUR {
background: url(../img/leftmenu-bg_80.gif) no-repeat;
font-weight: bold;
color: #000000;
}
#right {
float: right;
width: 150px;
margin:0; padding: 10px;
font-size:0.9em;
}
#latestnews {
float right;
margin: 20px 20px 0px 20px;
width: 100px;
height: 200px;
}
#content {
margin:0 150px;
padding: 10px;
background:#FFCC99;
font-size:0.9em;
}
.cleaner {
clear:both;
height:1px;
font-size:1px;
border:0px none;
margin:0; padding:0;
background:transparent;
}
#footer {
margin:0; padding:0;
background:#ccc;
}