• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[Suche Hilfe] Auto Ausrichten von z-index Boxen!

Loones

Neues Mitglied
Hi,

hab da mal eine Frage, denn irgendwie bekomm ich es nicht hin das sich die Boxen automatisch der Bildschirmgröße anpassen.
Und zwar hab ich folgenden Code geschrieben bekomm es aber nicht hin, darum hab ich es versucht an feste Punkte zu setzen,
was aber zur folge hat das es sich auf "Meinen" Bildschirm anpasst aber nicht auf kleinere oder größere.

Vielleicht kann mir ja jemand helfen.
Hier der Code:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>Test Title</title>

<style type="text/css">
body { background-color:#000000; }
.bg1 { position:absolute; margin:10px 0px 0px 0px; z-index:1; }
.box1 { position:absolute; margin:165px 0px 0px 500px; z-index:2; }
.box2 { position:absolute; margin:255px 0px 0px 500px; z-index:3; }
.box3 { position:absolute; margin:345px 0px 0px 500px; z-index:4; }
.box4 { position:absolute; margin:435px 0px 0px 500px; z-index:5; }
.box5 { position:absolute; margin:543px 0px 0px 500px; z-index:6; }
</style>
</head><body>

<div class="bg1"><img src="http://www.html.de/css/css/.../Bilder/....jpg"/></div>

<div class="box1"><a href="http://www.html.de/css/css/..."><img src="http://www.html.de/css/css/.../Bilder/....jpg" onmouseover="this.src='.../Bilder/....jpg'" onmouseout="this.src='.../Bilder/....jpg'" border="0"/></a></div>
<div class="box2"><a href="http://www.html.de/css/css/..."><img src="http://www.html.de/css/css/.../Bilder/....jpg" onmouseover="this.src='.../Bilder/....jpg'" onmouseout="this.src='.../Bilder/....jpg'" border="0"/></a></div>
<div class="box3"><a href="http://www.html.de/css/css/..."><img src="http://www.html.de/css/css/.../Bilder/....jpg" onmouseover="this.src='.../Bilder/....jpg'" onmouseout="this.src='.../Bilder/....jpg'" border="0"/></a></div>
<div class="box4"><a href="http://www.html.de/css/css/..."><img src="http://www.html.de/css/css/.../Bilder/....jpg" onmouseover="this.src='.../Bilder/....jpg'" onmouseout="this.src='.../Bilder/....jpg'" border="0"/></a></div>
<div class="box5"><a href="http://www.html.de/css/css/..."><img src="http://www.html.de/css/css/.../Bilder/....jpg" onmouseover="this.src='.../Bilder/....jpg'" onmouseout="this.src='.../Bilder/....jpg'" border="0"/></a></div>
</body></html>

Thanks Anyway

Loones
 
Zuletzt bearbeitet:
Werbung:
Willkommen im Forum.

irgendwie bekomm ich es nicht hin das sich die Boxen automatisch der Bildschirmgröße anpassen

Das ist eine Aussage, unter der zumindest ich mir nichts vorstellen kann. Könntest du da genauer werden?

Dein Beispiel ergibt außerdem bei mir eine rein schwarze Seite.
 
Webseiten passt man nicht auf Bildschirme oder Auflösungen an sondern an Viewports.

Auf absolute Positionierung solltest Du verzichten. Die bereitet nur Probleme.

Du musst die Elemente nebeneinander positionieren. Dafür verzichtest Du auf die position-Eigenschaft. Um Elemente nebeneinander zu bringen, musst Du float verwenden. Wenn Du float verwendest, musst Du auch clear verwenden um das floaten wieder beenden zu können, wenn benötigt.

Die so gefloateten Elemente musst Du auch feste Breiten bringen - entweder mit px-Angaben oder (was in deinem Fall eher richtig wäre) in Prozent. Prozentuale Angaben richten sich immer nach der Breite des umliegenden Elements. Ausgehend vom <body> kannst Du so auch eine Webseite erstellen die in ihrer Breite flexibel ist, so dass sie einen Viewport ausfüllt.
 
Werbung:
Das ist eine Aussage, unter der zumindest ich mir nichts vorstellen kann. Könntest du da genauer werden?

Ich möchte das wenn man die Indexseite (Siehe Code oben) im Browser aufruft, das die Seite auf jeder Bildschirmauflösung zentriert ist.

Dein Beispiel ergibt außerdem bei mir eine rein schwarze Seite.

Ja liegt vielleicht daran das in dem Code keine Bilddatein angegeben sind, geht ja keinen was an. :)

Webseiten passt man nicht auf Bildschirme oder Auflösungen an sondern an Viewports.
Du musst die Elemente nebeneinander positionieren. Dafür verzichtest Du auf die position-Eigenschaft. Um Elemente nebeneinander zu bringen, musst Du float verwenden. Wenn Du float verwendest, musst Du auch clear verwenden um das floaten wieder beenden zu können, wenn benötigt.
Die so gefloateten Elemente musst Du auch feste Breiten bringen - entweder mit px-Angaben oder (was in deinem Fall eher richtig wäre) in Prozent. Prozentuale Angaben richten sich immer nach der Breite des umliegenden Elements. Ausgehend vom <body> kannst Du so auch eine Webseite erstellen die in ihrer Breite flexibel ist, so dass sie einen Viewport ausfüllt.

Hmm, ich glaube da hab ich mich doch nicht klar genug ausgedrückt, sorry. Wie du warscheinlich siehst sind in dem Code "z-index" drinne,
was bedeuten soll das ich die Bilder übereinandern legen möchte/muss. Sprich .box1 - .box5 sollen/müssen auf .bg1 liegen.
Das ganze soll dann aber egal mit welchem Bildschirm man es aufruft im Browser, immer zentriert sein.
Hab ja jetzt durch die festen margins das Problem, das das ganze nur auf meinem Bildschirm zentriert ist.
Hoffe das ich es jetzt etwas deutlicher gemacht habe. :)


Auf absolute Positionierung solltest Du verzichten. Die bereitet nur Probleme.

By the Way, ohne die absolute positionierung, funktioniert doch "z-index" nicht, oder Irre ich mich da ?


Thx Loones
 
Zuletzt bearbeitet:
So kannst du Elemente horizontal im Viewport zentrieren:

HTML:
<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>New</title>
        <style type="text/css">

        .bg1 {
            margin: 0 auto;
        }

        </style>
    </head>

    <body>

        <div class="bg1"></div>

    </body>

</html>

Horizontal und vertikal:

- Horizontale und vertikale Zentrierung mit CSS

Was die absolute Positionierung angeht:

Denk mal über Schachtelung nach.
 
Das ganze soll dann aber egal mit welchem Bildschirm man es aufruft im Browser, immer zentriert sein.

Welche Zentrierung? horizontal und/oder vertikal? Zu beidem hat mermshaus schon eine Lösung gepostet. Damit solltest Du dann auch auf absolute Positionierung verzichten können.

[quoteBy the Way, ohne die absolute positionierung, funktioniert doch "z-index" nicht, oder Irre ich mich da?[/quote]

Ja, du irrst dich. z-index wirkt auf alle Positionierungen die ungleich static sind.
 
Werbung:
So kannst du Elemente horizontal im Viewport zentrieren:

Vielen lieben Dank! Oh man, sowas in der Richtung hatte ich auch versucht, nur hab ich die absolute nicht weggelassen...
Dann kanns ja auch nit gehen. Made my Day
:)

Ja, du irrst dich. z-index wirkt auf alle Positionierungen die ungleich static sind.

Ja du hast vollkommen Recht. Hab mir heute mal wieder nen HTML/CSS Buch unter den Nagel gerissen und mir ist aufgefallen,
das ich ganz schön Eingerostet bin.

Fazit: Danke für den super schnellen Support! Werd dann wohl öffters mal hier vorbei schauen.


Best Regards
Loones
 
Zurück
Oben