header überarbeiten

[martin-schulz1]

Hallo Freunde,

Ich bin gerade dabei meinen Shop Header zu überarbeiten.
Die Navigation möchte ich über dem Warenkorb, der im Header ist, haben.

Eine allgemeine Frage:
Wie löse ich das mit CSS?
Wenn ich schon eine "float:left" und "float:right" Box habe, kann ich dann noch eine "float:right" Box darüber setzen?

LG Martin

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

[Tomcraft]

Aber sicherlich kannst du mehrere DIVs auch rechts oder links floaten lassen!

Grüße

Torsten

[martin-schulz1]

okay DANKE,

ich hatte nur Angst, dass ich da Probleme mit den unterschiedlichen Browsern bekomme.

Wenn ich jetzt:

logo = left
navi = right
cart = right

mach, dann stehen aber alle nebeneinander bekomme ich das irgendwie hin, dass die beiden rechts übereinander sind?

LG Martin

[Tomcraft]

Wenn du vielleicht mal ein wenig Code posten würdest, dann könnte man da vielleicht sogar helfen.

Achso... wieso denke ich eigentlich wieder voraus und ziehe die Antworten wieder aus der Nase? Die Antwort auf deine Frage ist: Ja, es geht!

Grüße

Torsten

[martin-schulz1]

okay mom.

"index.html" (Ausschnitt header)

Code: PHP  [Auswählen]

    <div id="header">
        <div id="logo"><img src="{$tpl_path}img/spacer.gif" width="400" alt="{$store_name}" /></div>
                <div id="headermenu"> <ul><li><a href="{$account}">{#link_account#}</a></li><li><a href="{$login}">{#link_login#}</a></li><li><a href="{$login}">{#link_login#}</a></li></ul> </div>
                <div id="cart">{$box_CART}</div>
    </div>

"stylesheet.css "

Code: CSS  [Auswählen]

#header #logo {
        float:left;
        border:1px solid #000;
}
#header #cart {
        #background: url(img/cart.png) no-repeat;
        #background-position:right;
        float:right;
        color:#3b3b3b;
        padding: 0px 0px 0px 0px;
        margin-right:12px;
        border:1px solid #000;
}
#header #cart a {
        color:#b30000;
        font-size:13px;
        outline: none;
}
#headermenu ul {
                float:right;
                list-style-type: none;
                border:1px solid #000;
}
   
#headermenu ul li {
                display: inline;
                margin: 0px 0px 0px 5px;
   }
   
#headermenu ul li a {
                color: #000;
                text-decoration: none;
}

die "border:1px solid #000;" sind nur vorrübergehende Rahmen damit ich das layout besser anpassen kann.

[martin-schulz1]

Okay ich hab's.

Das Zauberwort heisst:

Code: CSS  [Auswählen]

clear:float;

Grüße Martin

[Modulfux]

[...]
Das Zauberwort heisst:

Code: CSS  [Auswählen]

clear:float;

[...]

Wenn das die Zauberformel ist, dann tritt bitte niemals als Magier auf. 
Martin, lies dir bitte mal in Ruhe alle Eigenschaften auf css4you.de durch, dort wirst du feststellen, dass es dein Attribut mit der Eigenschaft gar nicht gibt. Es würde ja auch den Sinn von "clear" ad absurdum führen.

Wie soll denn bitte eine clear-Eigenschaft, gleichzeitig als Attribut floaten? Gas und Bremse funktioniert doch auch nicht, wenn man fahren möchten.

Was wohl geht wäre, einem Element ein "clear:both" und gleichzeitig ein "float:left" mitzugeben.

Deine Codezeile erinnert mich an ein Template für ein anderes Shopsystem. Dort stand in der "stylesheet.css" folgende Zeile:

Code: CSS  [Auswählen]

border:0px solid #000000

Gruß
Ronny

[martin-schulz1]

Ja du hast Recht, ich habe nochmal nachgesehen und es ist:

Code: CSS  [Auswählen]

clear:right;