Ergebnis 1 bis 7 von 7

Thema: Banner unabhängig von Auflösung platzieren

  1. #1
    HTML Newbie
    Registriert seit
    04.03.2013
    Beiträge
    9
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Frage Banner unabhängig von Auflösung platzieren

    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 76 sieht das auch relativ gut aus. Hier ein Beispiel (das rot ist nur ein Beispiel für den Banner-Anfang):







    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):






    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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Banner unabhängig von Auflösung platzieren

    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

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    04.03.2013
    Beiträge
    9
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Banner unabhängig von Auflösung platzieren

    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/...temo_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.

  4. #4
    Kaiser(in)
    Registriert seit
    26.07.2004
    Ort
    Server 2 von 3
    Alter
    27
    Beiträge
    2.512
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Banner unabhängig von Auflösung platzieren

    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
    Maybe this world is another planet's hell

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    04.03.2013
    Beiträge
    9
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Banner unabhängig von Auflösung platzieren

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

  6. #6
    Kaiser(in)
    Registriert seit
    26.07.2004
    Ort
    Server 2 von 3
    Alter
    27
    Beiträge
    2.512
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Banner unabhängig von Auflösung platzieren

    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;
    
    
    }
    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
    Maybe this world is another planet's hell

  7. #7
    HTML Newbie
    Themenstarter

    Registriert seit
    04.03.2013
    Beiträge
    9
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Banner unabhängig von Auflösung platzieren

    Hab alles kapiert jetzt ! Vielen Dank !
    lg

Ähnliche Themen

  1. Hintergrundbild unabhängig von Bildschirmauflösung?
    Von lolek2012 im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 27.12.2012, 19:06
  2. CSS Rahmen platzieren
    Von Joe Petts im Forum HTML & CSS Forum
    Antworten: 12
    Letzter Beitrag: 21.12.2009, 17:10
  3. Plattform unabhängig?
    Von Unregistriert im Forum Forum für alle anderen Programmiersprachen
    Antworten: 17
    Letzter Beitrag: 14.02.2009, 19:46
  4. bild platzieren
    Von killruki im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 20.06.2007, 09:15
  5. Fenster platzieren
    Von Johannes im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 21.06.2004, 22:41

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •