Inhalte von DIVs neu anordnen

Status
Nicht offen für weitere Antworten.

BastianW

Mitglied
Hi,

ich habe mit mühe mein Layout nun soweit von Tabellen auf CSS umgebaut das es mir gefällt... ABER wenn ein Browser meine Seite ansuft der kein CSS macht bekommt er z.B. den Banner der im Quellcode ganz am Anfang ist auch zuerst zu sehen.

Besteht die möglichkeit das ich mein Divs im großen und ganzen so lasse wie sie sind, und nur einen Container ganz nach unten in den HTML Quelltext verschiebe, dem Browser via CSS aber sage... so den Banner zeigste im Container mit der ID xy an?

Ach, ich kann nicht mit TOP, Left usw. arbeiten, wegen den unterschiedlichen Auflösungen.

Ich hoffe hier findet sich ein CSS Guru der mir da etwas helfen kann :-)

P.S. Die Webseite ist noch nicht online, daher kann ich keine Link Posten.
 
Hi,

ohne CSS-Formatierung, bei deaktiviertem CSS, oder bei mangelnder CSS-Unterstützung werden die Elemente vom Browser in der Reihenfolge ausgegeben / angezeigt, wie er sie im HTML-Quelltext vorfindet.

Ansonsten stellt es kein Hindernis dar, ein absolut positioniertes Element im Quellcode am Ende zu notieren, seine Anzeige aber zu Seitenbeginn festzulegen.
 
Ansonsten stellt es kein Hindernis dar, ein absolut positioniertes Element im Quellcode am Ende zu notieren, seine Anzeige aber zu Seitenbeginn festzulegen.

Hm, das klingt so wie ich es brauchen würde... Kannst du mir vielleicht kurz anhand eines Beispiels erklären wie ich so etwas hin bekomme?

z.B. ein Banner der bei den meisten Webseiten auf der Rechten seite oben links hängt. Wie bekomme ich den Banner an sich ganz nach unten im Quelltext und zeige ihn dann nur in der von mir Definierten Box an?
 
z.B. ein Banner der bei den meisten Webseiten auf der Rechten seite oben links hängt.
Wie jetzt, rechts oder links?

Egal, such es dir selber aus:

Code:
#banner {
   position:absolute;
   right:0; /* oder left:0; */
   top:0;
   width:500px;
   height:80px;
   background:#ddd;
}
Code:
<body>

<p>some dummy text</p>
<p>some dummy text</p>
<p>some dummy text</p>
<p>some dummy text</p>
<p>some dummy text</p>
<p>some dummy text</p>
<p>some dummy text</p>
<p>some dummy text</p>
<p>some dummy text</p>
<p>some dummy text</p>
<p>some dummy text</p>
<p>some dummy text</p>
<p>some dummy text</p>
<p>some dummy text</p>
<p>some dummy text</p>
<p>some dummy text</p>
<p>some dummy text</p>
<p>some dummy text</p>
<p>some dummy text</p>
<p>some dummy text</p>
<p>some dummy text</p>
<p>some dummy text</p>
<p>some dummy text</p>
<p>some dummy text</p>
<p>some dummy text</p>
<p>some dummy text</p>
<p>some dummy text</p>
<p>some dummy text</p>
<p>some dummy text</p>
<p>some dummy text</p>
<p>some dummy text</p>
<p>some dummy text</p>
<p>some dummy text</p>
<p>some dummy text</p>
<p>some dummy text</p>
<p>some dummy text</p>
<p>some dummy text</p>
<p>some dummy text</p>
<p>some dummy text</p>
<p>some dummy text</p>
<p>some dummy text</p>
<p>some dummy text</p>

<div id="banner">banner</div>

</body>
 
hm, das problem bei dem ganzen ist... irgendwann einmal legt sich der Banner genau über den Text drauf... und leider nicht daneben...
 
Dann definierst du für das Element, das den Text enthält, einen, der Banner-Breite entsprechend, rechten (oder linken) Außen- oder Innenabstand.
 
@Maik

Gerade mal deine Lösung ausprobiert. Um zu schauen ob ich nen Bug bei mir drinn habe... Wenn ich bei deiner Lösung das Browserfenster auf ca. 6cm zusammenschiebe, dann packt er mir das Logo an ganz unterschiedliche stellen hin. Bedeutet das pringt hin und her :-(.
 
Dann zeig mal deine Fassung des HTML- und CSS-Codes, denn hellsehen kann ich nicht, und die tutorials.de-Glaskugel ist aus dem letzten Sommerurlaub noch immer nicht zurückgekehrt, um darauf einen sachdienlichen Hinweis geben zu können.
 
@Maik

sorry so war das nicht gemeint... ich denke ich habe ein paar Wissenslücken was verschachtelte klassen angeht. Deshalb klappt das bei mir nicht und es zerreist es jedesmal das Design. Aber dafür stelle ich ein neues Thema online. Vielleicht kann ich wenn ich verstanden habe wie verschaltelungen laufen hier weitermachen :)
 
Status
Nicht offen für weitere Antworten.
Zurück