• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Wo ist mein Fehler?

S

SN-Moderator

Neues Mitglied
Hi Freunde,
ich habe ein kleines Problem und damit meine ich auch klein ... sehr klein:

Auf meiner Seite SmartNews.de - Tech, Specs & More habe ich unter der Navigationsleiste eine zweite Leiste mit dem selben Design, wo die am meist geklicktesten Unterseiten und Themen verlinkt werden. Diese Leiste hat eine Höhe von 20 Pixeln, wenn mich nicht alles täuscht. Doch die Schrift in der Leiste steht etwas tiefer. Ich will, dass die Schrift in der Mitte steht und nicht in der unteren Hälfte. Habe schon die mir bekannten Befehle wie padding und margin ausprobiert, doch bin nicht weit gekommen. Ich kann die Schrift zwar mit diesen Befehlen tiefer setzen, doch nicht höher.

Hier ist das Stylesheet:
Code: 
#submenu{
	width: 100%;
	height: 20px;
	margin: 0;
	margin-top: 0px;
	margin-bottom: 10px;
	padding: 10px 0 0 0;
	list-style: none;  
	background: #111;
	background: -moz-linear-gradient(#444, #111); 
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));	
	background: -webkit-linear-gradient(#444, #111);	
	background: -o-linear-gradient(#444, #111);
	background: -ms-linear-gradient(#444, #111);
	background: linear-gradient(#444, #111);
	-moz-border-radius: 50px;
	border-radius: 50px;
	-moz-box-shadow: 0 2px 1px #9c9c9c;
	-webkit-box-shadow: 0 2px 1px #9c9c9c;
	box-shadow: 0 2px 1px #9c9c9c;
}


#submenu li
{
	float: left;
	position: relative;
	padding-bottom: 10px;
	line-height: 0;
}


#submenu a 
{
	float: left;
	height: 25px;
	padding-top: 5px;
	padding: 0 25px;
	color: #999;
	text-transform: uppercase;
	font: bold 12px/25px Arial, Helvetica;
	text-decoration: none;
	text-shadow: 0 1px 0 #000;
	padding-top: -30px;
}


#submenu li:hover > a
{
	color: #fafafa;
}


*html #submenu li a:hover /* IE6 */
{
	color: #fafafa;
}


#submenu li:hover > ul
{
	display: block;
}


/* Sub-menu */


#submenu ul
{
    list-style: none;
    margin: 0;
    padding: 0;    
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;    
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);    
    background: -o-linear-gradient(#444, #111);	
    background: -ms-linear-gradient(#444, #111);	
    background: linear-gradient(#444, #111);
    -moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
    -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
    box-shadow: 0 0 2px rgba(255,255,255,.5);	
    -moz-border-radius: 5px;
    border-radius: 5px;
}


#submenu ul ul
{
  top: 0;
  left: 150px;
}


#submenu ul li
{
    float: none;
    margin: 0;
    padding: 0;
    display: block;  
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}


#submenu ul li:last-child
{   
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;    
}


#submenu ul a
{    
    padding: 10px;
	height: 10px;
	width: 130px;
	height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
	text-transform: none;
}


*html #submenu ul a /* IE6 */
{    
	height: 10px;
}


*:first-child+html #submenu ul a /* IE7 */
{    
	height: 10px;
}


#submenu ul a:hover
{
    background: #0186ba;
	background: -moz-linear-gradient(#04acec,  #0186ba);	
	background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
	background: -webkit-linear-gradient(#04acec,  #0186ba);
	background: -o-linear-gradient(#04acec,  #0186ba);
	background: -ms-linear-gradient(#04acec,  #0186ba);
	background: linear-gradient(#04acec,  #0186ba);
}


#submenu ul li:first-child > a
{
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}


#submenu ul li:first-child > a:after
{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}


#submenu ul ul li:first-child a:after
{
    left: -8px;
    top: 12px;
    width: 0;
    height: 0;
    border-left: 0;	
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    border-right: 8px solid #444;
}


#submenu ul li:first-child a:hover:after
{
    border-bottom-color: #04acec; 
}


#submenu ul ul li:first-child a:hover:after
{
    border-right-color: #04acec; 
    border-bottom-color: transparent; 	
}




#submenu ul li:last-child > a
{
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}


/* Clear floated elements */
#submenu:after 
{
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}


* html #submenu             { zoom: 1; } /* IE6 */
*:first-child+html #submenu { zoom: 1; } /* IE7 */

Ich habe alle Änderungen versucht am #Submenue li vorzunehmen ... Ist das Falsch. Wie gesagt, das ist nur KrimsKrams, dieses Problem.
Wäre hilfreich für schnelle Antworten.

Danke.
 
Hatte das Problem auch mal, glaube, display:block hat geholfen,
ansonsten, irgendwo hier müsste stehen, was du suchst:

#navigation li {
position: relative;
font-size: 10pt;
color: #ffffff;
text-align: center;
display: block;
float: left;
list-style: none;
padding: 0px;
padding-right: 15px;
padding-left: 15px;
line-height: 50px;
text-decoration: none;
font-style: normal;
font-size: large;
margin: 0px;
}

Hoffe, ich konnte helfen
 
Nein, hat leider nichts geholfen. Der Text den ich verschieben will, liegt doch aber eigentlich in #submenue li ?

Display Block hat nichts geholfen.
 
Ändere in #submenu das padding auf "2px 0 8px".

Tipp: Das kriegt man mit Firebug ganz schnell heraus.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben