Modulshop - Eine große Auswahl an neuen und hilfreichen Modulen für die modified eCommerce Shopsoftware
Neuigkeiten
  • Die modified eCommerce Shopsoftware ist kostenlos, aber nicht umsonst.
    Spenden
  • Damit wir die modified eCommerce Shopsoftware auch zukünftig kostenlos anbieten können:
    Spenden
  • Thema: Header Breite verändern (Linie über die gesamte Breite)

    shakedealer

    • Frisch an Board
    • Beiträge: 85
    Ich würde gerne zwischem dem Header (Logo und Suche) und dem Content eine Linie über die gesamte Breite einfügen. Wie bekomme ich das hin, kann mir jeamnd helfen?

    Linkback: https://www.modified-shop.org/forum/index.php?topic=28254.0

    noRiddle (revilonetz)

    • Experte
    • Beiträge: 13.707
    • Geschlecht:
    Re: Header Breite verändern (Linie über die gesamte Breite)
    Antwort #1 am: 05. November 2013, 13:26:10
    Ohne irgendwelchen Code oder mindestens eine Aussage über das verwendete Template oder gar einen Link, wird man das kaum beantworten können.

    Generell:
    Mittels <hr /> bekommt man eine Linie quer in der Breite des Eltern-Containers.
    Gibt es einen Container (z.B. <div id="header">) unter welchem die Linie erscheinen soll kann man es mit border:YYpx solid #FARBE; in CSS machen.
    Dem Container evtl. noch ein padding-bottom mitgeben.

    Gruß,
    noRiddle

    Bonner

    • Fördermitglied
    • Beiträge: 848
    • Geschlecht:
    Re: Header Breite verändern (Linie über die gesamte Breite)
    Antwort #2 am: 05. November 2013, 15:41:37
    Na, da häng ich mich jetzt mal dran...nachdem ich ich einiges ausprobiert habe, was mich alles aber nicht so recht zufriedenstellt.

    Es geht letztlich darum, Header und Topmenue über die ganze Bildschirmbreite darzustellen (macht bei 26 Zoll schon Sinn) und den Contentwrap incl. Breadcrumb in der vorhandenen Größe zentriert zu belassen.
    Wenn ich Width auf auto stell klappt das, nur rutscht dann der Contentwrap nach links. Ich steh da ein bisschen auf dem Schlauch, denn ich vermute, das hängt u.a mit dem float:left zusammen..aber irgendwie will das nicht in meine graue Grütze.
    Zudem soll das Headerlogo zentriert sein..ich hatte von früher mal im Kopf das das mit Center klappt, das ist aber wahrscheinlich veraltet. Margin-left und margin right beide auf auto gestellt haut auch nicht hin.

    Ich häng mal stylesheet und index sowie Screenshot dran. Vielleicht hat ja jemand nen hilfreichen Tip!

    Danke!

    Bonner

    noRiddle (revilonetz)

    • Experte
    • Beiträge: 13.707
    • Geschlecht:
    Re: Header Breite verändern (Linie über die gesamte Breite)
    Antwort #3 am: 05. November 2013, 16:46:15
    Habe mir aus Zeitgründen die hochgeladene Datei jetzt nicht angeschaut, aber gebe dir mal ein paar Tipps.
    Das Muster müsste so aussehen (Topmenu, Footer usw. jetzt mal nicht beachtend):
    Code: XML  [Auswählen]
    <div id="wrap">
        <div id="header">
        HEADER_INHALT
        </div>
        <div id="contentwrap">
            <div id="leftcol">
            INHALT_LEFT_COL
            </div>
            <div id="content">
            INHALT_CONTENT
            </div>
            <div id="rightcol">
            INHALT_RIGHT_COL
            </div>
        </div>
    </div>

    Code: CSS  [Auswählen]
    #wrap {width:100%}
    #header {DEINE_STYLES}
    #contentwrap {
    margin:0 auto; /*das zentriert den Container*/
    width:980px; /*oder was du haben willst*/
    }
     

    Die Container #leftcol, #content und #rightcol halt gefloated oder wie immer du's hast.
    Wenn die o.g. Container gefloatet sind, dem #contentwrap noch ein overflow:hidden; zum clearen der Floats mitgeben.

    Gruß,
    noRiddle

    Bonner

    • Fördermitglied
    • Beiträge: 848
    • Geschlecht:
    Re: Header Breite verändern (Linie über die gesamte Breite)
    Antwort #4 am: 05. November 2013, 16:51:00
    Danke für den Tip!...das werde ich gleich mal ausprobieren...Feedback folgt!

    Bonner

    Bonner

    • Fördermitglied
    • Beiträge: 848
    • Geschlecht:
    Re: Header Breite verändern (Linie über die gesamte Breite)
    Antwort #5 am: 07. November 2013, 15:02:17
    jetzt hab ich es..entscheidend war das fehlende "margin:0 auto;"

    Danke, noRiddle, hast mir mal wieder sehr geholfen!

    Bonner
    1 Antworten
    2055 Aufrufe
    03. Oktober 2014, 10:15:16 von timopaul
    10 Antworten
    8844 Aufrufe
    16. Juni 2013, 22:25:19 von peterpan19
    5 Antworten
    3074 Aufrufe
    05. Mai 2015, 11:24:11 von awids
               
    anything