holla leute!
hab jetz langsam den code so hingebracht wie ich das layout haben will, nämlich:
1.oben einen header, der in links (logo) und rechts (banner) geteilt ist
2. darunter den content bereich, der in navi + ein weiterer div block darunter (links), postit und ein weiter div block wo ne animation rein soll (rechts) und text mitte unterteilt ist
3. einen footer
mein hauptproblem zur zeit (bin sicher wird jeden tag ein anderes sein :hmpf ist, dass ich ein hintergrundbild nur für den textbereich machen möchte. und das schaff ich einfach nicht, ich habs 100x versucht unter der "text"id als background einzugeben, er färbt mir immer den kompletten content bereich ein (sprich + linken und rechten bereich)
irgendwelche hinweise was ich falsch mach?
ich will eigentlich möglichst wenig mit absolut positionieren.
hier mal der arbeitsquellcode um ein bild zu machen:
<body>
<div id="container">
<div id="header">
<div id="logo">logo</div>
banner</div>
<div id="content">
<div id="navigation">navigation
<div id="news">
<p>weitere div-box</p>
</div>
</div>
<div id="postit">
<p>Nicht vergessen:</p>
<div id="animation">Raum für den Inhalt von id "animation"</div>
</div>
<div id="text"> Raum für den Inhalt von id</div>
</div>
<div id="footer">Raum für den Inhalt von id "footer" </div>
</div>
</body>
</html>
body {
background-color: #000000;
text-align: center;
margin: 0px;
padding: 0px;
font-family: "Comic Sans MS", Verdana, Arial, sans-serif;
color: #FFFFFF;
}
#container {
text-align: left;
width: 900px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#header {
margin-top: 12px;
margin-bottom: 12px;
padding-bottom: 12px;
padding-top: 0px;
}
#content {
float: none;
}
#text {
background-color: #00FF33; die farbe sollt nur im mittleren text bereich stehen
padding-top: 0em;
padding-right: 12em;
padding-bottom: 1em;
padding-left: 10em;
}
#logo {
float: left;
height: auto;
padding-bottom: 12px;
width: 210px;
padding-left: 8px;
}
#navigation {
margin-top: 0px;
padding-top: 0px;
float: left;
width: 210px;
height: 300px;
}
#news {
}
#postit {
float: right;
width: 200px;
}
#animation {
}
#footer {
clear: both;
text-align: center;
}
hab jetz langsam den code so hingebracht wie ich das layout haben will, nämlich:
1.oben einen header, der in links (logo) und rechts (banner) geteilt ist
2. darunter den content bereich, der in navi + ein weiterer div block darunter (links), postit und ein weiter div block wo ne animation rein soll (rechts) und text mitte unterteilt ist
3. einen footer
mein hauptproblem zur zeit (bin sicher wird jeden tag ein anderes sein :hmpf ist, dass ich ein hintergrundbild nur für den textbereich machen möchte. und das schaff ich einfach nicht, ich habs 100x versucht unter der "text"id als background einzugeben, er färbt mir immer den kompletten content bereich ein (sprich + linken und rechten bereich)
irgendwelche hinweise was ich falsch mach?
ich will eigentlich möglichst wenig mit absolut positionieren.
hier mal der arbeitsquellcode um ein bild zu machen:
<body>
<div id="container">
<div id="header">
<div id="logo">logo</div>
banner</div>
<div id="content">
<div id="navigation">navigation
<div id="news">
<p>weitere div-box</p>
</div>
</div>
<div id="postit">
<p>Nicht vergessen:</p>
<div id="animation">Raum für den Inhalt von id "animation"</div>
</div>
<div id="text"> Raum für den Inhalt von id</div>
</div>
<div id="footer">Raum für den Inhalt von id "footer" </div>
</div>
</body>
</html>
body {
background-color: #000000;
text-align: center;
margin: 0px;
padding: 0px;
font-family: "Comic Sans MS", Verdana, Arial, sans-serif;
color: #FFFFFF;
}
#container {
text-align: left;
width: 900px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#header {
margin-top: 12px;
margin-bottom: 12px;
padding-bottom: 12px;
padding-top: 0px;
}
#content {
float: none;
}
#text {
background-color: #00FF33; die farbe sollt nur im mittleren text bereich stehen
padding-top: 0em;
padding-right: 12em;
padding-bottom: 1em;
padding-left: 10em;
}
#logo {
float: left;
height: auto;
padding-bottom: 12px;
width: 210px;
padding-left: 8px;
}
#navigation {
margin-top: 0px;
padding-top: 0px;
float: left;
width: 210px;
height: 300px;
}
#news {
}
#postit {
float: right;
width: 200px;
}
#animation {
}
#footer {
clear: both;
text-align: center;
}