im <li></li> text positionieren

jimi77 · 10. Juli 2009

Hallo

Ich wollte heute ein menü basteln. Es hat auch ganz gut funktioniert. Nur leider bleibt bei mir der text in den aufzählungszeichen immer links-oben stehen und ich hätte gerne das er in der mitte-mitte is. Ich will dann noch buttons einfügen deswegen diese Kästchen.

Der Code:

Code:

HTML

<div id="menu">
	<ul>
    	        <li><a href="#1">Home</a></li>
	        <li><a href="#2">&Uuml;ber uns</a></li> 
		<li><a href="#3">Leistungen</a><a href="#4">Aktionen</a></li>
		<li><a href="#5">Heizung</a></li>
		<li><a href="#6">Alternative Energien</a></li>
		<li><a href="#7">Referenzen</a></li>
		<li><a href="#8">Kontakt</a></li>
    </ul>
</div>

CSS

#menu {background:url(picture_library/menu_background_fireworks.png); width:220px; 350px; margin:0 0 0 0;}

#menu ul {list-style:none; list-style-type:none; padding-left:43px;}

#menu a:link {font-size:13px; color:#FFF; text-decoration:none; display:block; margin-top:15px; width:135px; height:35px;}

Ich hoffe ihr könnt mir helfen

Danke

impressive · 10. Juli 2009

HTML

<div id="menu">
<ul>
<div align="center">
<li><a href="#1">Home</a></li>
<li><a href="#2">Über uns</a></li>
<li><a href="#3">Leistungen</a><a href="#4">Aktionen</a></li>
<li><a href="#5">Heizung</a></li>
<li><a href="#6">Alternative Energien</a></li>
<li><a href="#7">Referenzen</a></li>
<li><a href="#8">Kontakt</a></li>
</div>
</ul>
</div>

so vielleicht?

haze4real · 10. Juli 2009

denke er meint in etwa so:

#menu a:link
{
font-size:13px;
color:#FFF;
text-decoration:none;
display:block;
margin-top:15px;
width:135px;
padding: 10px 0 10px 0; /* statt height padding benutzen für vertikale zentrierung */
text-align: center; /* horizontal zentriert */
}

height muss allerdings auf jedenfall raus wennd padding benutzen willst

jimi77 · 10. Juli 2009

@haze4real stimmt das wollte danke

Kausalat · 10. Juli 2009

jimi77 schrieb:
#menu {background:url(picture_library/menu_background_fireworks.png); width:220px; 350px; margin:0 0 0 0;}

Die 350 px sind wohl ein Tippfehler. Sie gehören nicht dort hin.

impressive schrieb:
<div id="menu">
<ul>
<div align="center">
<li><a href="#1">Home</a></li>
<li><a href="#2">Über uns</a></li>
<li><a href="#3">Leistungen</a><a href="#4">Aktionen</a></li>
<li><a href="#5">Heizung</a></li>
<li><a href="#6">Alternative Energien</a></li>
<li><a href="#7">Referenzen</a></li>
<li><a href="#8">Kontakt</a></li>
</div>
</ul>
</div>

Innerhalb einer "unordered list" (also <ul>) dürfen auf nächster Ebene nur <li>s verwendet werden.

Ich habe mal ein wenig "designt" ^^ und Folgendes herausgebracht:

Code:

[COLOR="#c0c0c0"]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">

<head>
	<title>Startseite | Kausalat</title>
	
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="Content-Script-Type" content="text/javascript" />         
	<meta http-equiv="Content-Style-Type" content="text/css" />[/COLOR]

	<style type="text/css">

#menu {background: green; width: 220px; margin:0 0 0 0;}

#menu ul { list-style:none; list-style-type:none; padding: 0; }

#menu a {font-size:13px; color:#FFF; text-decoration:none; display: block; padding: 8px 15px; text-align: center; }

#menu a:hover { background: red; }

	</style>


[COLOR="#c0c0c0"]</head>

<body>[/COLOR]

<div id="menu">
	<ul>
    	        <li><a href="#1">Home</a></li>
	        <li><a href="#2">&Uuml;ber uns</a></li> 
		<li><a href="#3">Leistungen</a><a href="#4">Aktionen</a></li>
		<li><a href="#5">Heizung</a></li>
		<li><a href="#6">Alternative Energien</a></li>
		<li><a href="#7">Referenzen</a></li>
		<li><a href="#8">Kontakt</a></li>
    </ul>
</div>

[COLOR="Silver"]</body>
</html>[/COLOR]

Ich hoffe, das Ergebnis ist so oder ähnlich gewollt

TchiboMann · 10. Juli 2009

@jimi77

Du musst mal vor dem "height" bei #menu a:link ein "line-" voranstellen.

line-height bewirkt, dass der Text des Block-Elements (also dem Link) "mittig" erscheint.

Code:

#menu a:link {font-size:13px; color:#FFF; text-decoration:none; display:block; margin-top:15px; width:135px; line-height:35px;}

Wenn du der Zeile noch ein text-align:center; hinzufügst, erscheint der Text des Links dann mitte-mitte.

haze4real · 10. Juli 2009

line-height ist auf jedenfall die sauberere Lösung, zudem haste dann eine von font-size unabhängige Höhe.

jimi77 · 10. Juli 2009

@Kausalat stimmt so eine art von menü wollte ich machen und ja das war ein tippfehler :$

@TchiboMann danke das mit line-height funktioniert sehr gut

Suche

im <li></li> text positionieren

jimi77

Gast

impressive

Gast

haze4real

Lt. Junior Grade

jimi77

Gast

Kausalat

Gast

TchiboMann

Lt. Commander

haze4real

Lt. Junior Grade

jimi77

Gast

Ähnliche Themen