CSS Padding eines Elements nicht veränderbar

[Furtano]

Hi,

ich habe ein Padding-Problem in CSS. Ich will dass das Rechteck mit einem Hover das gleiche Padding / Form hat wie wenn man drauf klickt.

Ich bekomme es nicht hin!

Hier ist es hochgeladen: www.furtano.de/error/


Hover:

Click: So soll das oberste Rechteck auch mit Hover aussehen.

menu.js

$(document).ready(function(){

	$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)
	
	$("ul.topnav li span").click(function() { //When trigger is clicked...
		
		//Following events are applied to the subnav itself (moving subnav up and down)
		$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

		$(this).parent().hover(function() {
		}, function(){	
			$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
		});

		//Following events are applied to the trigger (Hover events for the trigger)
		}).hover(function() { 
			$(this).addClass("subhover"); //On hover over, add class "subhover"
		}, function(){	//On Hover Out
			$(this).removeClass("subhover"); //On hover out, remove class "subhover"
	});

});

#navi {
	height: 72px;
	width: 	950px;
	
	background-color: white;
	
	border-color: #DCDCDC;
	border-style: solid;
	border-width: 1px;
	
	float: left;	
	padding-left: 0px;
	margin-top: -1px;
}

#navibar {
	padding-top: 10px;
	padding-left: 10px;
	list-style: none;
}

#navibar li {
	display: inline;	
}

#navibar li a {
	text-decoration: none;
	color: #4D6968;
}	


#navibar li a:hover{
	display: inline;
	background-color:  #f5f5f5;
}

ul.topnav {
	list-style: none;
	padding: 0 20px;	
	margin: 0;
	float: left;
	width: 920px;
	background: #222;
	font-size: 15px;
	background: url(topnav_bg.gif) repeat-x;
	font-family: Verdana;
	
}
ul.topnav li {
	float: left;
	margin: 0;	
	padding: 0 15px 0 0;
	position: relative; /*--Declare X and Y axis base for sub navigation--*/
	
}
ul.topnav li a{
	padding: 10px 5px;
	color: #fff;
	display: block;
	text-decoration: none;
	float: left;
}
ul.topnav li a:hover{
	background-color: black;	
}
ul.topnav li span { /*--Drop down trigger styles--*/
	margin-top: 13px;
	width: 48px;
	height: 25px;
	float: left;
	
	padding-left:35px;
	
	background: url(../images/auto3.png) no-repeat center top;
	
}
ul.topnav li span.subhover {
	
	background-color: #F5F5F5;
	
} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
	
	list-style: none;
	position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
	left: 0; top: 35px;
	margin: 0; padding: 0;
	display: none;
	float: left;
	width: 170px;
	font-size: 16px;
}
ul.topnav li ul.subnav li{
	border-top: 1px solid white; /*--Create bevel effect--*/
	border-bottom: 1px solid white; /*--Create bevel effect--*/
	clear: both;
	width: 125px;
}
html ul.topnav li ul.subnav li a {
	float: left;
	width: 115px;
	background-color: white;
	padding-left: 20px;
	background-color: #f5f5f5;
	

	
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
	background-color: #2763FF !important;
	color: white !important;
}

		<div id="navi">
			<ul class="topnav" id="navibar">
			    <li id="mainList">
			        <ul class="subnav">
			            <li><a href="#">Suchen</a></li>
			            <li><a href="#">Verkaufen</a></li>
			            <li><a href="#">Vorteile von Händler</a></li>
			            <li><a href="#">Sicherheit</a></li>
			            <li><a href="#">Kaufvertrag</a></li>
			        </ul>
			    </li>
                         </ul>
                 </div>

Vielen Dank,
Furtano

 

[Shagg]

Dein "Auto" ist keine Schrift, sondern ein Bild für den entsprechenden Div. Wenn du padding befehle benutzt wirkt das padding auf den div oder hier auf span, aber nicht auf dein bild angewendet. Du willst doch, dass "auto" nicht so oben rangeklatscht ist oder? Wieso machst du im Bild nicht einfach nach oben etwas mehr Abstand? Sonst musst du das Bild nochmal in ein extra Element stecken und dann padding benutzen. die positionierung des bildes ist in zeile 74 geregelt.

Wenn du die graue box genau so breit haben willst, wie die boxen im menue, dann musst du die breite verändern. die findest du in zeile 68.

sonst hab ich dein problem noch nicht richtig verstanden.

 

[Furtano]

Ich möchte das Padding haben ohne das Bild ändern zu müssen, denn das ist nicht so einfach.

 

[Daaron]

Warum nutzt du überhaupt ein Bild für die Navi?
- räudige Ladezeiten.
- miserabel zu warten. Was, wenn man mal einen neuen Menüpunkt braucht oder die Seite mehrsprachig anbieten will?
- meist ekligst hinsichtlich SEO und Barrierefreiheit

Was denkst du, wozu es Webfonts und Cufon gibt?

Übrigens solltest du dir erst einmal Gedanken um so Sachen Encoding und Doctype machen. Ein Doctype ändert die Darstellung der Seite eh noch einmal... und Chrome reagiert allergisch auf dein "ä" mangels Encoding-Deklaration.