Banner unabhängig von Auflösung platzieren

yolonaut

Hallo zusammen, auf meiner Seite will ich einen Banner einfügen. In der CSS (hab ich von wo fertig runtergeladen) wird das so geregelt:

Code

#templatemo_banner {
    width: 1100px;
    height: 180px;
    padding: 40px;
    margin-left: 170px;
    background: url(images/templatemo_banner.jpg) no-repeat;
}

Bei meinem ersten Bildschirm (1360 x 768) sieht das auch relativ gut aus. Hier ein Beispiel (das rot ist nur ein Beispiel für den Banner-Anfang):

[Blockierte Grafik: http://i.imagebanana.com/img/0g7xd24u/thumb/aaa.JPG]

Verschiebe ich jetzt das Browser-Fenster auf meinen zweiten Bildschirm (1920 x 1080), beginnt der Banner zu weit links und endet mittem auf der Seite (recht Farbverlauf stoppt):

[Blockierte Grafik: http://i.imagebanana.com/img/vrqhphom/thumb/bbb.JPG]

Ich habe schon gelesen, man müsse das prozentual regeln, aber ich hab keine Ahnung, wie ich auf die korrekten Werte komme. Vielleicht weiß jemand weiter. Vielen Dank schonmal MfG

sejuma

Im Prinzip ist ein prozentualer margin-left-Wert der richtige Ansatz.
Allerdings kann auch dies zu ungewollten Ergebnissen führen:

Mal angenommen du verwendest

Code

margin-left: 10%;

Dann sind das bei 1360px Fensterbreite (nicht Auflösung!) 136px und bei 1920px Fensterbreite eben 192px.
Das sieht dann eben bei jedem Bildschirm je nach Fenstergröße etwas anders aus.

Mein Vorschalg wäre folgender:

Umhülle deine ganze Seite mit einem div #center.
Gib diesem eine fixe Breite und zentriere ihn.
Darin kannst du dann alle Elemente per px-margins positionieren.
Somit sieht deine Seite unabhängig von der Fenstergröße immer gleich aus. Allenfalls muss man dann etwas scrollen.
Siehe http://www.ohne-css.gehts-gar.net/0001.php

yolonaut

Irgendwie will das nicht funktionieren. Die Hauptsache für mich ist im Moment nur, dass das Logo / der Banner vertikal parallel zu z.B. den Texten oder dem Menu steht.
Hier ist mal eine Beispiel Seite:
http://testsitehe.te.funpic.de/TEST/

die CSS ist hier:

http://testsitehe.te.funpic.de/TEST/templatemo_style.css

Eigentlich müsste doch das Logo jetzt schon unabhängig von der Auflösung, parallel zum Menu positioniert sein. Der Code ist nämlich der selbe wie z.B. beim Menu.
Vielen Dank.

wernerdeluxe

Ist das gewollt, dass das Div id="templatemo_menu_wrapper" in dem Div id="templatemo_banner_wrapper" liegt? Deine restliche Struktur lässt vermuten, dass du den Banner-Wrapper vergessen hast vor dem Menu-Wrapper zu schließen.
Wenn du das angepasst hast, kannst du dein Banner/Logo genau so Positionieren wie dein Menü und Content. Die liegen ja auch schon auf einer Linie

Gruß
Lukas

yolonaut

Danke wernerdeluxe,
Das habe ich angepasst. Aber das hat offensichtlich mein Problem noch nicht gelöst.

wernerdeluxe

Das CSS musst du jetzt natürlich auch noch anpassen

Code

#templatemo_banner {


    background: url("images/test.jpg") no-repeat scroll 0 0 transparent;
    display: block;
    height: 260px;
    margin: 0 auto;


    width: 980px;




}

Alles anzeigen

Damit sind die "Grundelemente" schon mal auf einer Linie.

Die optisch sichtbaren Elemente werden jetzt noch nicht auf einer Linie liegen. Entweder musst du jetzt das Logo als img in das Div #templatemo_banner legen und dem ein padding geben, um es genau an den anderen Elementen auszurichten, oder den anderen Elemente das Padding wegnehmen

Klar?

Gruß
Lukas

yolonaut

Hab alles kapiert jetzt ! Vielen Dank !
lg

Tags