Layout und dazwischen eine 1px zeile vom Hintergrund ...

exitboy · 29. Mai 2005

Hallo @ All,

ich fang grade erst mit CSS an, hab Euch mal den Code reingepackt. Dort wo Empty Line steht, ist bei mir eine 1pixel hohe Zeile zu sehen, die wohl vom <div id="content"> kommt, da hier dei Hintergrundfarbe durchschaut.
Vielleicht ist auch ein grundlegender Fehler drin ...

<body>
<div id="header">
<div id="logoarea"></div>
<div id="main-nav"><br>

</div>
</div>
<div id="main">
<div id="sub-nav"></div>
<div id="content">
<div id="promoborder">
<div id="promolarge"></div>
<div id="promownd1"></div>
<div id="promownd2"></div>
<div id="promownd3"></div>
</div>
EMPTY LINE
<div id="promoborder">
<div id="promownd1"></div>
<div id="promownd2"></div>
<div id="promownd3"></div>
</div>

</div></div>
</body>

CSS:

#header {
margin: 0px;
padding: 0px;
width: 952px;
height: 80px;

}
#logoarea {
width: 150px;
background-color: #336699;
float: left;
height: 80px;
border-top: 1px dotted;
border-right: 0px;
border-bottom: 1px dotted;
border-left: 1px dotted;
margin-top: 5px;
margin-left: 5px;
background-image: url(web-content/logo.jpg);

}
#main-nav {
background-color: #336699;
width: 792px;
float: left;
padding: 0px;
height: 80px;
border-top: 1px dotted;
border-right: 1px dotted;
border-bottom: 1px dotted;
margin-right: 5px;
margin-left: 0px;
margin-top: 5px;
background-image: url(web-content/wallpaper.jpg);

}
#main {
width: 952px;
height: 820px;
margin: 0px;
padding: 0px;

}
#sub-nav {
float: left;
width: 160px;
background-color: #336699;
height: 800px;
border: 1px dotted #000000;
margin: 5px;

}
#content {
width: 772px;
float: left;
background-color: #A8C5E1;
border: 1px dotted;
margin: 5px;

}
#promownd1 {
float: left;
height: 220px;
width: 242px;
background-color: #CCCCCC;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 10px;

}
#promownd2 {
float: left;
height: 220px;
width: 242px;
background-color: #CCCCCC;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;

}
#promownd3 {
float: left;
height: 220px;
width: 244px;
background-color: #CCCCCC;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 5px;

}
#promolarge {
background-color: #CCCCCC;
float: left;
height: 120px;
width: 747px;
margin-top: 10px;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 10px;

}
#promoborder {
background-color: #999999;
width: 768px;
margin: 0px;
float: left;

}

Maik · 29. Mai 2005

Grundsätzlich gilt:

Eine ID darf in einem Dokument / einer Seite nur einmal vergeben werden.

Du hast die ID's #promoborder, #promownd1, #promownd2, #promownd3 aber zweimal in deiner Seite verwendet - in diesem Fall musst du mit CSS-Klassen arbeiten, die mehrfach vergeben werden dürfen:

Code:

div.promoborder { }

div.promownd1 { }

div.promownd2 { }

div.promownd3 { }

HTML:

<div class="promoborder">
<div class="promownd1"></div>
<div class="promownd2"></div>
<div class="promownd3"></div>
</div>

<div class="promoborder">
<div class="promownd1"></div>
<div class="promownd2"></div>
<div class="promownd3"></div>
</div>

Da die drei DIVs #promownd1 - 3 die gleichen CSS-Eigenschaften besitzen, würde auch eine einzige CSS-Klasse für alle DIVs ausreichen:

Code:

div.promoborder { }

div.promownd { }

HTML:

<div class="promoborder">
<div class="promownd"></div>
<div class="promownd"></div>
<div class="promownd"></div>
</div>

Layout und dazwischen eine 1px zeile vom Hintergrund ...

exitboy

Erfahrenes Mitglied

Maik

Neue Beiträge