Offen Warenkorblink im Header verschieben

[neimles]

Hallo!

Ich hab jetzt gerade über eine Stunde im Forum gesucht und es auch mittels SelfHTML probiert, aber leider bin ich noch nicht so fit mit CSS wie ichs gerne wäre.

Link: www.haushaltsdose.com

Die Grafik mit dem LKW will ich gerne so lassen wie sie ist, jetzt verdeckt sie mir aber den Warenkorb.

Die Ausrichtung ist in der base.css hier definiert:

#headlinks li.basket {
	float: right;
    position: relative;
    margin-right: 0;
    padding-right: 0;

Ich kann das float nach links oder rechts schieben, ich möchte es aber rechtsbündig mit abstand von 180px zum rechten rand haben.

Änderungen an position und padding bringen leider nichts, auch wenn ich das float herausnehme.

Kann mir wer kurz helfen bitte?

Vielen Dank!!!
}

 

[martinwolf]

AW: Warenkorblink im Header verschieben

Zuerst einmal schmeißt du bitte den Absatz wo du deine Versandgrafik drin hast da raus und setzt diese direkt in den DIV mit der ID header, ersetzt das <p> durch ein <div> und verpasst dem die ID versandinfo:

<div id="header">
[COLOR=#ff0000]  <div id="versandinfo">
    <a class="versand" rel="nofollow" href="Versandkosten"><img style="width: 162px; height: 180px;" src="http://www.haushaltsdose.com/mediafiles/Bilder/versand-DE-frei2.png" alt="versandkostenfreie Lieferung"></a>
  </div>[/COLOR]
  <div id="logo">...</div>
  ...
</div>

Dann in die Theme.css:

#versandinfo {
    position: absolute;
    right: 0;
    top: 50px;
    z-index: 110;


}

Kontrollier mal bitte auch deine Regelen für #headlinks ul li.basket. Da gibt es nämlich gleich mehrere in der theme.css die sich gegenseitig überschreiben.
Im Grund musst du in Zeile 54 nur das left: -10px entfernen.

 

[neimles]

AW: Warenkorblink im Header verschieben

Hallo!

Erstmal vielen Dank!

Den Versandinfo Div habe ich so definiert wie du geschrieben hast, das funktioniert.

Auch das zweite funktioniert, die Frage jetzt, was macht das "left -10px" in der Zeile 54 genau? Ich möchte ja wissen was das bedeutet, damit ich auch was gelernt hab dabei

Die Regeln habe ich aus dem Original-Template "Lucid", da hatte ich vorher nichts geändert. Habe es soeben nocheinmal Zeile für Zeile kontrolliert. Das ist aus dem Original:

#headlinks ul li.basket { position: relative; left: -10px; background-position: 9px 144px; }
#headlinks ul li.basket > a, #headlinks ul li.basket > a:hover { padding-left: 10px; position: relative; left: 10px; background: transparent url(images/main_backgrounds.png) top right !important; }
#headlinks li.basket.items > a { padding-right: 0; }
#headlinks ul li.basket > a > span { padding-left: 20px; background: transparent url(images/cart.png) no-repeat 0px 15px; }
#headlinks ul li.basket > a:hover, #headlinks ul li.basket > a:focus, #headlinks ul li.basket.current > a { background-position: right 192px !important; }

Vielen Dank für deine Hilfe!

 

[martinwolf]

AW: Warenkorblink im Header verschieben

left: -10px verschiebt das Element um 10px negativ von links. Nimm es einfach raus, dann greift das right: 180px aus Zeile 72. Dadurch wird das Elemente um 180px von rechts verschoben, also nach links eingerückt.

 

[neimles]

AW: Warenkorblink im Header verschieben

Alles klar, jetzt hab ichs verstanden. Dadurch das das left definiert war, hat mein right weiter unten nicht gegriffen....

Vielen Dank nochmal!