ausgelagerte CSS

[Manitu71]

folgendes banales Prob

eine ausgelagerte CSS angelegt.

In der will ich zusätzlich einen extra div ansprechen.

Eigentlich keine große Sache, weil im Quelltext jeder div seine eigene ID hat.

Nunja, aber es lüppt halt ned.

Auszug aus dem Quelltext:

<div id="Layer1" style="position:absolute; width:210px; height:96px; z-index:1;"><img src="logo.gif" alt="CSH Logo" width="210" height="96"></div>

<div id="Layer2" style="position:absolute; width:578px; height:96px; z-index:2; right: 10px;">

<img src="schriftzug.gif" alt="CSH-Schriftzug" width="578" height="97"></div>

<div id="Layer3" style="position:absolute; top:50%; left:350px; z-index:-10; filter:alpha(opacity=30); -moz-opacity: 0.3;"><img src="transparent.gif" width="523" height="240"></div>

<p> </p>

<!-- Content -->

<div id="Content">

wie sprech ich denn den div Content in der ausgelagerten jetzt an? ich kanns schimpfen wie ich will. Er machts ausgelagert nicht und wirft mir zudem die anderen Layer auch durcheinander. Im Quelltext lüppts. Auszug aus der CSS:

div id="Content" { width:760px; margin:0px auto; text-align:left; z-index: 1; word-break: break-all; word-wrap:break-word; }

[geloescht_JesterDay]

Auszug aus der CSS:

#Content { width:760px; margin:0px auto; text-align:left; z-index: 1; word-break: break-all; word-wrap:break-word; }

so lüppts...

[Manitu71]

Huch das ging ja wie der Wind

Danke dir. Auf die Möglichkeit wär ich nie gekommen. Probiers gleich mal aus

[kills]

so lüppts...

jo muss su lüppen

aber dazu noch ne Kleinigkeit:

so sprichst du alle Elemente an deren ID "Content" ist:

#Content { width:760px; margin:0px auto; text-align:left; z-index: 1; word-break: break-all; word-wrap:break-word; }

so sprichst du alle DIV-Elemente an deren ID "Content" ist:

div #Content { width:760px; margin:0px auto; text-align:left; z-index: 1; word-break: break-all; word-wrap:break-word; }

[Manitu71]

stimmt, hat auch gelüppt.

Spitze, jetzt an das zusätzliche div hätte ich auch nicht gedacht. Wär momentan aber auch nicht so tragisch gewesen.

Allerdings hab ich komischerweise aus der CSS was rausnehmen müssen.

Bei Content das text-align left und beim body das text-align center

Das hat mir die anderen Layer durcheinandergewirbelt. War vorher noch nicht und nach Rausnahme funktionierts komischerweise richtig. Liegt wohl an den beiden word-break/wrap, das er es richtig interpretiert.

[tobias-digital]

so sprichst du alle DIV-Elemente an deren ID "Content" ist:

div #Content { width:760px; margin:0px auto; text-align:left; z-index: 1; word-break: break-all; word-wrap:break-word; }

Ich will ja nicht kleinlich sein, aber um das div mit der ID Content anzusprechen schreibt man:

div#Content { 

} /* Kein Leerzeichen zwischen div und # */

In dieser Schreibweise würdest Du ein Element ansprechen, welches sich innerhalb eines div Containers befindet und als ID Content hat:

<style>

<!--

  div #Content { 

  }

-->

</style>

<div>

  <p id="Content">Hallo Welt!</p>

</div>

Und noch ein Tipp, eine ID darf man nur einmal und für genau ein Element vergeben. So was ist nicht valide:

<div id="Content"></div>

<p id="Content"></p>

Man würde in diesem Fall auf eine Klasse zurückgreifen:

<div class="Content"></div>

<p class="Content"></p>

Gruß Tobias

[Manitu71]

mit dem einmal vergeben war mir klar. wußte aber ned das es mit der Klasse aber funktioniert

wollte mir grade noch mein Scrollayout farblich verschönern, dabei ist der ganze Mist wieder ned W3 konform

[Manitu71]

falscher Alarm. Haut doch mit der Farbe hin. Hatte mich nur vertippselt.

Aber andere Sache. Habe unter den zwei Layern noch ne kleine Tabelle wo das Menü ... drin ist.

Da ich die auch noch in die CSS einbinden wollte, hab ich ihr die Position absolut und top halt 100 px gegeben, so das sie unter den Layern ist.

Nur hab ich das Teil jetzt ganz am oberen Rand :confused:

[kills]

Ich will ja nicht kleinlich sein, aber um das div mit der ID Content anzusprechen schreibt man:

div#Content { 

} /* Kein Leerzeichen zwischen div und # */

In dieser Schreibweise würdest Du ein Element ansprechen, welches sich innerhalb eines div Containers befindet und als ID Content hat:

<style>

<!--

  div #Content { 

  }

-->

</style>

<div>

  <p id="Content">Hallo Welt!</p>

</div>

Und noch ein Tipp, eine ID darf man nur einmal und für genau ein Element vergeben. So was ist nicht valide:

<div id="Content"></div>

<p id="Content"></p>

Man würde in diesem Fall auf eine Klasse zurückgreifen:

<div class="Content"></div>

<p class="Content"></p>

Gruß Tobias

Sorry, hab das leerzeichen zu viel gemacht :floet: