Fehler bei Warenkorb rechts im header

[unicato]

Hi,

ich hab in der Suche Nichts zu meinem Problem finden können. Daher schildere ich das mal hier:

Ich hab den Warenkorb wie in der Anleitung beschrieben rechts im Header eingebaut und die Searchbox dort links daneben getan. Um die Warenkorb div hab ich auch wie in der Anleitung beschrieben die Verlinkung gelegt.
Funktioniert auch wunderbar, solang man keine Artikel im Warenkorb hat.
Sobald ich jedoch einen Artikel in den WK lege, rutscht die Anzeige (Bsp:  1 Artikel | Summe: 17,79 EUR) ca. 50px nach unten. Ausserdem verschwindet fast die ganze Schriftformatierung, lediglich die Farbe der Schrift bleibt.

Vorher
[ Für Gäste sind keine Dateianhänge sichtbar ]
Nachher
[ Für Gäste sind keine Dateianhänge sichtbar ]

Meine stylesheet.css sieht in dem Abschnitt so aus:

Code: CSS  [Auswählen]

/* HEADER WITH LOGO, SEARCH BOX AND CART BOX */
#header {
        height:140px;
        background: #000000 url(img/top_logo.png) no-repeat;
        border-top: 6px solid #fff;
        border-bottom:1px solid #fff;
}
#header #logo {
    float:left
}
#header #cart {
    background: url(img/cart.png) no-repeat;
    background-position:right;
    width: 202px;
    height:65px;
    float:right;
    color:#000;
    padding:0;
    margin:57px 13px 0 0;
}
#header #cart a {
    padding:1px 0 0 10px;
    display:block;
    height:64px;
    color:#000;
    font-size:11px;
    outline: none;
}
#header #cart h2 {
    color:#000;
    font-size:11px;
    outline: none;
}
#header #search {
        width: 220px;
        height:55px;
        float:right;
        color:#000000;
        padding:0px 0px 0px 0px
}
#header #search a {
        color:#000000;
        font-size:11px;
        outline: none;
}
#header td {
        padding-top:1px;
        padding-right:4px;
}

Wenn ich mir aber den Quelltext anschau, dann gibt er mir folgendes aus:

Code: PHP  [Auswählen]

    <div id="cart">

            <h2 class="boxcartheader-menu"><a href="https://ssl-account.com/shop.caboom-fashion.de/shopping_cart.php?XTCsid=b33e63d08d9ce0e63e8503ede95bd252"><strong>Warenkorb:</strong></a></h2>
        <div class="boxcartbody-menu">
            <strong>1</strong> Artikel | Summe:<strong> 17,79 EUR</strong>

        </div>

    </div><div id="search">
<form id="quick_find" action="http://www.shop.caboom-fashion.de/advanced_search_result.php" method="get">
<table border="0" class="search_header" cellspacing="0" cellpadding="0">
     <tr>
          <td><input type="text" name="keywords" value="Suchen" style="width:160px;" maxlength="30" onfocus="if(this.value==this.defaultValue) this.value='';" onblur="if(this.value=='') this.value=this.defaultValue;" /></td>
          <td><input type="image" src="templates/xtc5/buttons/german/button_quick_find.gif" alt="Suchen" title=" Suchen " /></td>
     </tr>
     <tr>
          <td colspan="2"><a href="http://www.shop.caboom-fashion.de/advanced_search.php">Erweiterte Suche »</a></td>

     </tr>
</table>
</form></div>
</div>

Hat Jemand ne Idee, was da falsch ist?   Ich finde den Fehler einfach nicht.



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

[Modulfux]

Das die Anzeige nach unten rutscht liegt daran, dass der Inhalt, sprich Artikel + Preis zu weit wird.

Ich habe bei meinem letzten Kundenprojekt den Warenkorb in den Navigationsleiste gepackt und stark verkürzt, siehe hier
Testshop (Login: modified eCommerce Shopsoftwareod und testshop)

So sieht mein Quellcode aus:

Code: PHP  [Auswählen]

{config_load file="$language/lang_$language.conf" section="boxes"}
{if $deny_cart neq 'true'}
<div class="cart-bg">
  <span><a href="{$LINK_CART}" rel="nofollow">{#heading_cart#}</a>:</span>
 {if $empty=='false'}
    {foreach name=aussen item=products_data from=$products}
      {#text_cart#}: <a href="{$LINK_CART}">{$products_data.QTY} {#text_item#}</a>
   {/foreach}
  {else}
  {#text_cart#}: <a href="{$LINK_CART}">0 {#text_item#}</a>
 {/if}
</div>
{/if}
 

Die Lösung mit dem <div> außenherum ist ja mal nicht so pralle. Schade, dass er Anleitungsbeitrag geschlossen wurde, denn da hätte man bzw. ich mal die semantisch richtige Lösung posten können.

Gruß
Ronny

[Tomcraft]

Der zur Verfügung gestellte Platz reicht bei dir nicht aus.

Hast du mal einen Link zum Shop?

Grüße

Torsten

[Modulfux]

Wollte auch gerade noch nach dem Link fragen.

Gruß
Ronny

[unicato]

www.caboom-fashion.de/shop

Aber die Formatierung der Schrift geht ja auch verloren.  

@Webkiste: Du kannst ja die richtige Lösung hier posten

[Tomcraft]

Gib dem DIV #cart einfach mal ein wenig mehr Raum. Hat derzeit 202px, erhöhe mal auf 220px.

Grüße

Torsten

[unicato]

da rutscht das Ganze nur n stück nach links, aber das Problem bleibt... siehe obige URL

Wie schon geschrieben geht auch die Schriftgröße verloren.

[Modulfux]

Nimm mal bei #header #cart a das height ganz raus.

Desweiteren stimmt der Aufbau bei einem gefüllten Warenkorb nicht mit einem leeren Warenkorb überein.

leerer Warenkorb:

Code: PHP  [Auswählen]

<div id="cart">
<!-- cart has no content -->
<a href="https://ssl-account.com/shop.caboom-fashion.de/shopping_cart.php?XTCsid=53a7c493912762e01f31199c90e8493f">
<h2 class="boxcartheader-menu"><strong>Warenkorb:</strong></h2>
  <div class="boxcartbody-menu">
  <strong>0</strong> Artikel | Summe: <strong>0,00 EUR</strong>
</div>
</a>
</div>
 

gefüllter Warenkorb:

Code: PHP  [Auswählen]

<div id="cart">
<h2 class="boxcartheader-menu">
<a href="https://ssl-account.com/shop.caboom-fashion.de/shopping_cart.php?XTCsid=53a7c493912762e01f31199c90e8493f"><strong>Warenkorb:</strong></a></h2>
        <div class="boxcartbody-menu">
        <strong>1</strong> Artikel | Summe:<strong> 18,98 EUR</strong>
        </div>
</div>
 

Fällt dir etwas aus?

Da sind aber noch einige andere Klinken drin. Du benutzt eine Klasse "boxcartheader-menu" hast diese aber in deiner CSS Datei nicht deklariert.

Gruß
Ronny

[unicato]

doch, die ist drin

Code: CSS  [Auswählen]

/* CART BOX */
h2.boxcartheader {
        background: #000000 url(img/bg_boxheader_cart.gif);
        height:28px;
        font-size:11px;
        color:#fff;
        padding:2px 8px 0px 8px;
        margin:0;
        line-height:28px;
        vertical-align:middle;
}
h2.boxcartheader a {
        text-decoration:none;
        color:#fff;
        outline: none;
}
.boxcartbody {
        padding:4px 8px 4px 8px;
        margin-bottom:15px;
        background-color:#EDEDED;
        border: solid #ccc;
        border-width:0px 1px 1px 1px;
}
.boxcartbody p {
        font-size:11px;
}

[Modulfux]

Diese Klasse "boxcartheader-menu" ist nicht drin.

Guck nochmal in mein letztes Posting. Du hast im leeren Warenkorb ein

Code: PHP  [Auswählen]

<a href=".."><h2>...</h2></a>
 

und im vollen Warenkorb ein

Code: PHP  [Auswählen]

<h2><a href=".."></a></h2>
 

Gruß
Ronny

[unicato]

Jo die Höhenangabe raus, das ist die Lösung  

Danke Webkiste

[Modulfux]

Gern geschehen ... so etwas sieht das HMTL und CSS Fachauge sofort *gg*

Gruß
Ronny

[unicato]

Oh

Diese Klasse "boxcartheader-menu" ist nicht drin.

Guck nochmal in mein letztes Posting. Du hast im leeren Warenkorb ein

Code: PHP  [Auswählen]

<a href=".."><h2>...</h2></a>
 

und im vollen Warenkorb ein

Code: PHP  [Auswählen]

<h2><a href=".."></a></h2>
 

Gruß
Ronny

Edit: Habs geändert: jetzt ist in beiden das A tag vorn