Zur Navigation

Problem

1 tommik

Hallo,
ich habe mal wieder ein Problem :-D

Und zwar:

<span id="top"><img src="images/top_left.gif" width="55" height="19" alt="" /></span>


span#top {
top:5px;
position:relative;
width:70%;
height:19px;
display:block;
background-image:url(images/top.gif);
}

.. jetzt habe ich mein top.gif oben am Bildschirmrand hängen. Dadrauf habe ich am Anfang die Grafik top_left. Wie kriege ich jetzt noch eine Abschlussgrafik (top_right) rauf gesetzt?
Und wie kriege ich anschließend alles in die Mitte versetzt, so dass es sich der Auflösung anpasst?

Gruß,
tommik.

05.06.2006 13:58 | geändert: 05.06.2006 13:59

2 Jörg

Ich würde statt des spans ein div nehmen, das ist von sich aus ein Blockelement, so dass du auf display:block verzichten kannst. Wenn du das Element statt mit top und position:relative mit margin nach oben ausrichtest, kannst du es auch mit margin (auto) zentrieren. Die zwei Bilder top_left.gif und top_right.gif könntest du mit float:left und float:right an den jeweiligen Rand platzieren - also in etwa so:

<div id="top"><img src="images/top_left.gif" id="top_left" width="55" height="19" alt="" /><img src="images/top_right.gif" id="top_right" width="55" height="19" alt="" /></div>

div#top {
margin:5px auto 0;
width:70%;
height:19px;
background-image:url(images/top.gif);
}
img#top_left {
float:left;
}
img#top_right {
float:right;
}

05.06.2006 16:57 | geändert: 05.06.2006 16:59

3 tommik

Danke, erstmal.
Ich habe gleich noch eine Frage... Und zwar will ich darunter jetzt noch Content, Menü usw. machen.
Allerdings soll das Menü immer die gleiche Größe haben und an der rechten (und linken) Ecke unten des Headers anliegen. Der Content soll sich je nach Auflösung vergrößeren / verkleinern.
Wie kann ich das realisieren?

06.06.2006 15:32

4 Jörg

Das beste wäre es vielleicht, wenn du alles in einem Gesamt-Container packst, den du mit margin:auto zentrierst und für den du die Breite angibst. Die Menüs kannst du dann mit float:left und float:right unterhalb des Headers am linken und rechten Rand platzieren, z.B.:


<div id="gesamt">
<div id="header"></div>
<div id="menu-1"></div>
<div id="menu-2"></div>
<div id="content"></div>
<br class="clear" />
</div>


#gesamt { margin:auto; width:70px; }
#header { height:80px; }
#menu-1 { float:left; width:100px; }
#menu-2 { float:right; width:100px; }
.clear { clear:both; }

06.06.2006 17:41 | geändert: 06.06.2006 17:43

Beitrag schreiben (als Gast)





[BBCode-Hilfe]