[HTML / CSS] Problem mit Ausrichtung

ExtiQ · 27. Januar 2006

Moin CBler,
ich habe folgendes Problem:
Ich möchte 4 <div> container innerhalb eines root-<div>'s ausrichten.
Alle wurden einer Klasse zugewiesen und haben das Attribut position: absolute;
Mir geht es jetzt darum, dass sich die Icons + Root( ist horizontal zentriert )
dynamisch mit der Browsergröße verändern.
Im Firefox funktioniert das auch mit Hilfe von max-height/width. Jedoch bleibt die Seite im IE entweder statisch oder ich benutze den CSS-Hack _width: 100% // _height: 100%. Was jetzt aber passiert (was auch eigentlich logisch ist), ist, dass sich die 'Icons' nun quasi am Browserrand orientieren. Meine Frage ist, gibt es einen besseren Weg der auch funktioniert?

Hier noch der Code: ( Bitte keine Rücksicht auf Validations nehmen

)

Code:

HTML Seite:
<html>
<head>
<title>Dynmische Seite</title>
<link rel="stylesheet" href="style2.css" type="text/css" />
</head>
<body>
<!-- Root Div Container: Definiert den Raum. Hier wird das 'Hintergrundbild' reingepackt -->
<div class="root">
<!-- Einzelne Div Container die beliebig im root umhergeschoben werden können (aber auch raus wenn Koordinaten + Objektgröße > Raum -->
    <div class="icon1">
        <img src="Bilder/icon1.gif" />
    </div>
    <div class="icon2">
        <img src="Bilder/icon2.gif" />
    </div>
    <div class="icon3">
        <img src="Bilder/icon3.gif" />
    </div>
    <div class="icon4">
        <img src="Bilder/icon4.gif" />
    </div>
</div>
</body>
</html>

Code:

CSS-Code:
/* Hinweis: Ich habe nur relevante Formate/Eigenschaften notiert */
.root{
max-width: 100%;
max-height: 100%;
width: 800px;
height: 600px;
background:
url(Bilder/hintergrund.jpg)
no-repeat
center;
position: absolute;
margin: auto;
/* CSS HACKS für IE */
_width: 100%;
_height: 100%;
}

.icon1{
position: absolute;
width: 32px;
height: 32px;
right: 30px;
bottom: 10px;
}

.icon2{
position: absolute;
width: 32px;
height: 32px;
right: 200px;
top: 250px;
}

.icon3{
position: absolute;
width: 32px;
height: 32px;
left: 100px;
bottom: 150px;
}

.icon4{
position: absolute;
width: 32px;
height: 32px;
left: 400px;
top: 300px;
}

GuardianAngel · 27. Januar 2006

Setzt mal die position bei den Icons auf relative. Bei absolute passen die sich ja der gesamten Seite an. Wenn du aber möchtest das sich die Icons dem root div anpassen, dann musst du position:relative nehmen. Dann werden sie von der position wo sie erscheinen ausgerichtet. Dadurch wird das root div wie ein Elternfenster behandelt.

Suche

[HTML / CSS] Problem mit Ausrichtung

ExtiQ

Gast

GuardianAngel

Ensign

Ähnliche Themen