Logo legt sich über die Topnavigation, diese ist nicht klickbar

[Neodym]

Hallo,
ich habe nun das Problem, das sich offensichtlich das Logo über die Topnavigation gelegt hat.
Es lappt zwar nicht drüber das man es sieht, wenn ich aber auf einen der Buttons von der Topnavigation klicken will, klicke ich anscheinend auf das Logo weil ich immer auf die Startseite komme. Es ist also "unsichtbar" über allen Buttons der Topnavigation.




Das merkt man daran dass das Logo blau markiert wird, sobald man auf die Topnavigation doppelklickt.

Wie bekomme ich das weg?

 

[mitlaser]

AW: Logo legt sich über die Topnavigation, diese ist nicht klickbar

hast du dich an die abmessungen für das logo gehalten? irgendwo in der wiki ist die pixelzahl vorgegeben..

 

[ag-websolutions.de]

AW: Logo legt sich über die Topnavigation, diese ist nicht klickbar

Wenn dein Logo höher ist, als die Maße die beim Logo-Upload im Shop-Admin angegeben sind, dann muss du auch via css die Höhe für #header und #header_wrapper anpassen.

Denke dran: css-Änderungen werden in einem benutzerdefiniertem Theme umgesetzt!

 

[John]

AW: Logo legt sich über die Topnavigation, diese ist nicht klickbar

Du hast die Höhen und Abstände von #logo img, #headlinks_wrapper und #headlinks_wrapper falsch zueinander gesetzt. Dadurch kommt es zu einer Überlagerung.

Auf die schmutzige Art kannst Du es durch

#headlinks_wrapper {
margin-top: 25px;
z-index: 102;}

lösen. Das Logo ist in diesem Fall aber nicht mehr klickbar.
Imho. solltest Du nochmal beim ursprünglichen Theme.css ansetzen und die Abstände und Größen sauber aufbauen.

 

[Neodym]

AW: Logo legt sich über die Topnavigation, diese ist nicht klickbar

Ich habs einigermaßen geschafft.

Sobald ich mich aber auf "Mein Account" (jtl.php) oder auf "Kontakt" (kontakt.php) befinde, scheinen meine Anweisungen nicht mehr ganz zu gelten.
So springt mein Loginfenster und Sprachauswahl woanders hin, dessen Position ich in #settings { top: 60px; right: 80px; } definiert habe.

Auch die Breite meiner Seite die ich in .page_width { width: 82%; } definiert habe, stellt sich dort anscheinend wieder auf die Standardbreite ein.

Warum das?





Die Theme.css:

/*     JTL-Shop3 Tiny Theme "Lucid" 
** 
**     @author JTL-Software.de
**    
*/

/* Tiny-Styles zuruecksetzen */
#headlinks, #headlinks.active { background: transparent url(images/main_backgrounds.png) no-repeat top left; height: 48px; 

border: none; }
#headlinks ul li > a, #headlinks ul li > a:hover, #headlinks li.basket > a, #headlinks li.basket > a:hover { background-

color: transparent;  margin: 0; padding: 0 0 0 10px; -moz-border-radius: 0; border-radius: 0; }
#headlinks li { padding: 0; }
#speciallinks { display: none; }
#headlinks_wrapper { margin-left: 0; }
.form fieldset select, .form fieldset textarea, .form fieldset input[type="text"], .form fieldset input[type="password"] { 

font-size: 1em; }
#styled_view li.gallery { width: 32.9%; }

/* Base Styles */
.page_width { width: 82%; }
body { color: #444; background: #F4F4F4 url(images/page_bg.jpg) repeat-x top left; }
#page { background: transparent none; }
#content { background: #fff; border: 1px solid #ccc; padding: 10px; -moz-border-radius:5px 5px 5px 5px; }
.sidebox { background: #fff; }
a, a:visited, a:link { color: #666; }
a:hover, a:focus { color: #fc7f20; }
h1, h2 { text-transform: uppercase; }
#breadcrumb, #breadcrumb a { color: #999; }
#logo a { position:relative; display: block; margin-top: 10px; z-index: 999; }
#logo img { position: inherit; top: 0; }
#headlinks ul li > a, .sidebox h3 { font: 12px "Trebuchet MS", sans-serif; font-weight: bold;  color: #fff !important; 

text-transform:uppercase; text-shadow:0 0 2px #AC5F24; }
#page_wrapper { margin-top: 10px; }


/* Eigene Header-Styles */


#header { height: 150px; position: relative; }



#header_wrapper { height: 150px; position: relative; }
#style, #settings { top: 60px; right: 80px;  }

/* Suche */
#search { background:none repeat scroll 0 0 transparent; padding:0; position:relative; text-align:right; top:-100%; }
#search-form { width:300px; padding-right:10px; position:absolute; right:0; top:0; height: 40px; padding: 15px 0 0 0; }
#search input[type="text"], #submit_search { vertical-align: top; }
#search input[type="text"] { width:180px; border: none; background: transparent url(images/search_input_bg.png) top left 

no-repeat; height: 25px; line-height: 25px; padding: 0 10px; }
#submit_search { width: 76px; border: none; background: transparent url(images/search_button_bg.png) top left no-repeat; 

height: 25px; line-height: 25px; padding: 0 20px 0 0px; font-size: 12px; }
#submit_search:hover span, #submit_search:focus span { text-decoration: underline; }

/* Headlinks */
#headlinks ul li > a, #headlinks ul li > a > span { line-height: 48px; height: 48px; display: block; }
#headlinks ul li > a, #headlinks ul li.basket { background: transparent url(images/main_backgrounds.png) repeat-y 0 144px; 

padding-right: 0; }
#headlinks ul li > a:hover, #headlinks ul li > a:focus, #headlinks ul li.current > a { background-position: 0 96px !

important; }

#headlinks ul li.first > a { background-position: top left; }
#headlinks ul li.first > a:hover, #headlinks ul li.first > a:focus, #headlinks ul li.first.current > a { background-

position: 0 192px !important; }
#headlinks ul li > a > span { padding-right: 10px; }

#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; }

#headlinks li.basket div { top: 48px; }
#headlinks li.basket div.articles { border-color: #ccc; right: -10px; -moz-border-radius:5px 5px 5px 5px; }

/* Sidepanels */
.panel_left #sidepanel_left { width: 200px; }
.panel_left #content { margin-left: 210px; }
.panel_right #content { margin-right:210px; }

.sidebox { border: none; }
.sidebox h3 { background: transparent url(images/main_backgrounds.png) 0 288px repeat-y; border: none; }
.sidebox .sidebox_content { border: 1px solid #ccc; border-top: none; }

 border-top: none; }

 

[John]

AW: Logo legt sich über die Topnavigation, diese ist nicht klickbar

Hmm, bei mir sieht Deine aktuelle Version der Seite aber im Firefox OK aus.

Wenn Du viel CSS änderst, empfehle ich die Firefox erweiteung CSS Reloader. Damit kann man mit der F9 Taste das CSS neu laden und manchmal hat Firefox noch eine alte Version im Cache.