Div-Problem

[Shalana]

Hallo zusammen,

hab schon wieder ein Div - Problem.

Das ist der Entwurf der Seite:

http://test.leben-ist-kunst.de/stephanie.htm

Das Problem ist leicht zu sehen:

Ich möchte gerne dass der Hintergrund da wo der Text steht dunkel (#0b0c0c) ist. Ich hab dem "main" Div eine Hintergrundfarbe gegeben, denn der body background soll ja grau (#484848 ) bleiben. Aber irgendwie funktioniert das nicht so wie ich will Es bleibt alles grau... wie kann ich es hinbekommen, dass der "Design-Teil" (sorry weiß nicht wie ich es besser ausdrücken soll) dunkel ist und außen das halt grau?? Und warum geht das nicht wenn ich das beim "Main" div einstelle?

Hoffe mir kann jemand helfen!

lg

Shalana

PS:

Quellcode:

<div id="main">
<div id="stephanie_r1_c1">
</div>
<br class="clearfloat" />
<div id="stephanie_r2_c1">
</div>
<br class="clearfloat" />
<div id="stephanie_r3_c1">
</div>
<div id="stephanie_r3_c4">
</div>
<br class="clearfloat" />
<img src="bilder/stephanie_r4_c1.png" id="stephanie_r4_c1" alt="" />
<div id="stephanie_r4_c2"><div id="show"></div>
</div>
<div id="colwrap1">
<div id="stephanie_r4_c3">
</div>
<br class="clearfloat" />
<div id="stephanie_r5_c3"><div id="content">
<p>&nbsp;</p>
<p>TEST</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Test</p>
</div>
</div>
<br class="clearfloat" />
</div>
</div>
</div>

und css

body {
background-color: #484848;
margin:0px;
padding:0px;
}

.p {
margin:0px;
padding:0px;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
text-align: inherit;
color: inherit;
line-height: inherit;
vertical-align: top;
}
p {
padding-top:0px;
margin-top:0px;
}
img {
border:0px;
}
div {
margin:0px;
padding:0px;
font-family:verdana; font-size:12px;
}
.AbsWrap {
width: 100%;
position: relative;
}
.rowWrap {
width: 100%;
}
.clearfloat {
clear:both;
height:0px;
}
a:link, a:visited{
COLOR:inherit;
text-decoration:inherit;
}
#main {

width:1024px;
margin: 0px auto 0px auto;
border: 0px solid #f0f0f0;
}
#stephanie_r1_c1 {
margin-left:0px;
margin-top:0px;
width:1024px;
height:162px;
margin-bottom:0px;
float:left;
display:inline;
background-image: url(bilder/stephanie_r1_c1.png);
overflow:hidden;

}
#stephanie_r2_c1 {
margin-left:0px;
margin-top:0px;
width:1024px;
height:29px;
margin-bottom:0px;
float:left;
display:inline;
background-image: url(bilder/stephanie_r2_c1.png);
overflow:hidden;

}
#stephanie_r3_c1 {
margin-left:0px;
margin-top:0px;
width:542px;
height:106px;
margin-bottom:0px;
float:left;
display:inline;
background-image: url(bilder/stephanie_r3_c1.png);
overflow:hidden;

}
#stephanie_r3_c4 {
margin-left:0px;
margin-top:0px;
width:482px;
height:106px;
margin-bottom:0px;
float:left;
display:inline;
background-image: url(bilder/stephanie_r3_c4.png);
overflow:hidden;

}
#stephanie_r4_c1 {
margin-left:0px;
margin-top:0px;
width:8px;
height:471px;
margin-bottom:0px;
float:left;
display:inline;

}
#stephanie_r4_c2 {
margin-left:0px;
margin-top:0px;
width:354px;
height:471px;
margin-bottom:0px;
float:left;
display:inline;
background-image: url(bilder/stephanie_r4_c2.png);
overflow:hidden;

}
#colwrap1 {
float:left;
width:662px;
margin-top:0px;
margin-left:0px;
border: 0px solid #f0f0f0;

}
#stephanie_r4_c3 {
margin-left:0px;
margin-top:0px;
width:662px;
height:48px;
margin-bottom:0px;
float:left;
display:inline;
background-image: url(bilder/stephanie_r4_c3.png);
overflow:hidden;

}
#stephanie_r5_c3 {
margin-left:0px;
margin-top:0px;
width:662px;
height:423px;
margin-bottom:0px;
float:left;
display:inline;
background-image: url(bilder/stephanie_r5_c3.png);
overflow:visible;
background-repeat:no-repeat;

}

#show {
float:left;
width:330px;
margin-left:1px;
margin-top:10px;
overflow:auto;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
background-repeat:no-repeat;
color:#FFF;
}

#content{
float:left;
width:500px;
margin-left:30px;
margin-top:15px;
overflow:auto;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:#FFF;
background-repeat:no-repeat;
}

[His.Master's.Voice]

Hallo Shalana,

versuche mal folgendes. Bei den CSS Anweisungen für #stephanie_r5_c3 fast du background-image und background-repeat zu einer Anweisung zusammen.

background: #0b0c0c url(bilder/stephanie_r5_c3.png) no-repeat;

[Shalana]

funktioniert leider nicht

Es bleibt irgendwie gleich...

[rednug]

Ich hab dem "main" Div eine Hintergrundfarbe gegeben

#main {

width:1024px;
margin: 0px auto 0px auto;
border: 0px solid #f0f0f0;
}

da fehlt doch "background-color:;"

Gunder

[Shalana]

Ja in dem obigen Quellcode ist keine background-color in main drin, aber mittlerweile schon, bleibt sich trotzdem gleich...

So sieht er momentan aus:

body {
	background-color: #484848;
	margin:0px;
	padding:0px;
}

.p {
	margin:0px;
	padding:0px;
	font-size: inherit;
	font-family: inherit;
	font-weight: inherit;
	text-align: inherit;
	color: inherit;
	line-height: inherit;
	vertical-align: top;
}
p {
	padding-top:0px;
	margin-top:0px;
	color: #FFF;
}
img {
	border:0px;
}
div {
	margin:0px;
	padding:0px;
	font-family:verdana; font-size:12px;
}
.AbsWrap {
	width: 100%;
	position: relative;
}
.rowWrap {
	width: 100%;
}
.clearfloat {
	clear:both;
	height:0px;
}
a:link, a:visited{
	COLOR:inherit;
	text-decoration:inherit;
}
#main {

	width:1024px;
	margin: 0px auto 0px auto;
	border: 0px solid #f0f0f0;
	background-color:#0e0e0e;
	}
#stephanie_r1_c1 {
	margin-left:0px;
	margin-top:0px;
	width:1024px;
	height:162px;
	margin-bottom:0px;
	float:left;
	display:inline;
	background:#0e0e0e url(bilder/stephanie_r1_c1.png);
	overflow:hidden;

}
#stephanie_r2_c1 {
	margin-left:0px;
	margin-top:0px;
	width:1024px;
	height:29px;
	margin-bottom:0px;
	float:left;
	display:inline;
	background:#0e0e0e url(bilder/stephanie_r2_c1.png);
	overflow:hidden;

}
#stephanie_r3_c1 {
	margin-left:0px;
	margin-top:0px;
	width:542px;
	height:106px;
	margin-bottom:0px;
	float:left;
	display:inline;
	background:#0e0e0e url(bilder/stephanie_r3_c1.png);
	overflow:hidden;

}
#stephanie_r3_c4 {
	margin-left:0px;
	margin-top:0px;
	width:482px;
	height:106px;
	margin-bottom:0px;
	float:left;
	display:inline;
	background:#0e0e0e url(bilder/stephanie_r3_c4.png);
	overflow:hidden;

}
#stephanie_r4_c1 {
	margin-left:0px;
	margin-top:0px;
	width:8px;
	height:471px;
	margin-bottom:0px;
	float:left;
	display:inline;

}
#stephanie_r4_c2 {
	margin-left:0px;
	margin-top:0px;
	width:354px;
	height:471px;
	margin-bottom:0px;
	float:left;
	display:inline;
	background:#0e0e0e url(bilder/stephanie_r4_c2.png) no-repeat;
	overflow:hidden;

}
#colwrap1 {
	float:left;
	width:662px;
	margin-top:0px;
	margin-left:0px;
	border: 0px solid #f0f0f0;

}
#stephanie_r4_c3 {
	margin-left:0px;
	margin-top:0px;
	width:662px;
	height:48px;
	margin-bottom:0px;
	float:left;
	display:inline;
	background:#0e0e0e url(bilder/stephanie_r4_c3.png) no-repeat;
	overflow:hidden;

}
#stephanie_r5_c3 {
	margin-left:0px;
	margin-top:0px;
	width:662px;
	height:423px;
	margin-bottom:0px;
	float:left;
	display:inline;
	overflow:visible;
	background:#0e0e0e url(bilder/stephanie_r5_c3.png) no-repeat;
	}

#show {
	float:left;
	width:330px;
	margin-left:30px;
	margin-top: 20px;
	overflow:auto;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	color:#FFF;
	}
	
#content{
	float:left;
	width:500px;
	margin-left:30px;
	margin-top:15px;
	overflow:auto;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	color:#FFF;
	}

[hero-master]

Hi Shalana,
du hast ein sehr merkwürdiges HTML-Markup, der wohl in sich selbst Fehler produziert, die man auch nicht so einfahc mit einer Zeile CSS beheben kann...
Warum diese Div-Suppe zu beginn? Wozu benötigst du die Reihe mit "stephanie_..." außer um das Hintergrundbild einzubinden?
Hau den oberen Teil in ein Bild und den Textbereich als ein Objekt, dann gehen die Probleme von alleine weg (btw: http://www.css-technik.de/css-examples/219_9 . Das scheint eines der Probleme zu sein)

[Shalana]

Wie meinst du das, in ein Bild?? Sorry steht auf dem Schlauch

Sollte vielleicht dazu sagen, dass ich das ganze in Fireworks gesliced habe und es dann als HTML/CSS exportiert habe...

Ich weiß jetzt ehrlich gesagt nicht, was ich genau machen soll... ich mach das nur so hobbymäßig für ne Bekannte, ich bekomm auch nix großartig dafür...

[hero-master]

Wie meinst du das, in ein Bild?? Sorry steht auf dem Schlauch

Ich habe dir das mal aufskizziert. Es wäre eine Möglichkeit und das Markup dann könnte so aussehen:

<div id="seite"><!-- blauer Teil -->
      <h1><a href="/"><img src="bilder/logo.png" alt="" /></a></h1><!-- roter Teil -->
      <ul id="navi"><!-- gelber Teil -->
            <li><a href="ueber-uns.htm">Über uns</a></li>
            <li><a href="ueber-uns.htm">Aktuelles</a></li>
            <li><a href="ueber-uns.htm">Marken</a></li>
            <li><a href="ueber-uns.htm">Modeschauen</a></li>
            <li><a href="ueber-uns.htm">Impressum</a></li>
      </ul>
      <div id="inhalt"><!-- violetter Teil -->
            <h2>Herzlich Willkommen</h2>
      </div>

Ich weiß jetzt ehrlich gesagt nicht, was ich genau machen soll... ich mach das nur so hobbymäßig für ne Bekannte, ich bekomm auch nix großartig dafür...

Jetzt sieht es doch einigermaßen gut aus, oder gibts noch Probleme?

[Shalana]

Jetzt sieht es doch einigermaßen gut aus, oder gibts noch Probleme?

Meinst du in der aktuellen Version? Nein, leider ist das Problem noch das gleiche, überlanger Inhalt wird grau hinterlegt und nicht schwarz

Deinen Vorschlag probier ich morgen mal! Müsste dann den Lila-Teil allerdings nochmal unterteilen... wegen der animation links

Lg

Shalana

[wildmieze]

.. und wenn du #content eine Hintergrundfarbe gibst ..? ok, dann siehste da nix mehr von dem hintergrundbild .. *kratzamkopp* ..

wie ist das denn überhaupt gedacht? daß der text unten unter dem kasten weitergeht? fände ich eh sehr ungünstig, da würde er ja optisch "die seite verlassen" .. ich würde eher ein scrollbares div in den bereich setzen, damit die seite die form behält .. dann ist die hintergrundfarbe auch wurscht

EDIT: ok, sorry, ich glaub jetzt weiß ich was du vorhast .. hmm .. wenns mit der main-hintergrundfarbe nicht klappt .. *kratzamkopp* .. dann solltest du vielleicht wirklich den aufbau nochmal überdenken, den fireworks dir da gezaubert hat .. oder vielleicht doch ein div zum scrollen einbauen^^

[Shalana]

Also das mit dem scrollbaren Div möchte ich eigentlich nicht... finde das immer irgendwie so gequetscht...

Ich hatte heute noch keine Zeit mich drum zu kümmern, aber ich denke gerade drüber nach ob ich nicht vielleicht doch einfach den kompletten Hintergrund schwarz mache

EDIT

Oh manno Jetzt wirds in Dreamweaver richtig angezeigt aber sobald ich es im Browser öffne ist es wieder falsch *grummel*

[Shalana]

Uah ich könnte echt heulen...

Irgendwie steh ich dermaßen auf dem Schlauch

http://test.leben-ist-kunst.de/test.html

Warum in aller Welt ist das so verschoben und warum ist der "navi" Teil so breit????

css:

body {
	background-color: #0e0e0e;
	margin:0px;
	padding:0px;
}

#seite {

	margin-left:0px;
	margin-top:0px;
	width:1024px;
	height:192px;
	margin-bottom:0px;
	background-image: url(bilder/banner.png);
	overflow:hidden;
	float:left;
	}
	
h1 {
	margin-left:0px;
	margin-top:0px;
	width:538px;
	height:106px;
	float:left;
	overflow:hidden;
}
	
#show {
	background-image: url(bilder/show.png);
	float:left;
	margin-left:0px;
	margin-top:0px;
	margin-bottom:0px;
	overflow: auto;
	width:385px;
	height:470px;
}

#navi {
    background-image: url(bilder/navigation.png);
	margin-left:0px;
	margin-top:0px;
	width:486px;
	height:106px;
	margin-bottom:0px;
	display:inline;
	overflow:auto;
	float:left;
}

#content {
	background-image:url(bilder/content.png);
	float:left;
	margin-left:0px;
	margin-top:0px;
	margin-bottom:0px;
	overflow: auto;
	width:639px;
	height:470px;
}

[hero-master]

Hi
genau, h1-Tag steht für die Überschrift und da gehört das Logo eben rein, weil es generell das Thema der Website ist. Es gehört auch als Bild rein, da es wichtig für den Content ist und kein Schmuckelement.

Der Überschrift (h1) und der Navi (ul) gibst du eine Briete und Höhe mit und floatest die dann links, so dass sie nebeneinander stehen. Achtung: Float und Clear beachten.

In den Inhalts-Div kannst du natürlich dann deine Separationen machen, links das Bild rechts der Text. Auch hier wieder mit Float arbeiten und das Hintergrundbild und die Farbe für #inhalt definieren. Auch hier wieder das Float clearen, da #inhalt sonst nicht mit der Höhe mitgeht (hasLayout googlen).

Schau dir mal Artikel zum Thema float und clear an bzw. fang einfach mal damit an zu gestalten und wenn du nicht weiterkommst, schreist du hier laut

[Shalana]

Ich hatte meinen obigen Beitrag mit dem jetzigen ersetzt weil ich es dann doch kapiert hatte

Aber s.o. hab ich jetzt wieder ein Problem. Lese mich aber gerade durch den von dir geposteten Artikel und hoffe dadurch weiterzukommen

[Shalana]

http://test.leben-ist-kunst.de/test.html

WO in aller Welt kommt dieser kleine Kasten rechts neben der "Navi" her??

Und warum ist da so ne Lücke zwischen dem Banner/Navi oben und dem Content unten?