Menü zentrieren

lima-city → Forum → Die eigene Homepage → Homepage Allgemein

Autor dieses Themas

11:36, 11.10.2009

Hallo,

diese Webseite istnoch im Rohbau, aber wie kann ich das "topmenu" zentrieren?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="template.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div id="container"> 
	
		<div id="oben">
		
			<div id="logo">
			Logo
			</div>
			<div id="suche">
			Suche
			</div>
			<div id="topmenurechts">
			Topmenü rechts
			</div>
			<div id="topmenu">
			</div>
			<ul id="topmenu"> <li> <a href="sf" id="akt">Startseite</a> </li> <li> <a href="sd">News</a> </li> </ul> 
		</div>
		
		<div id="werbung">
		Werbung
		</div>
		
		<div id="mitte">
		
			<div id="breadcrumbs">
			Breadcrumbs
			</div>
			<div id="linkespalte">
			Linke Spalte
			</div>
			<div id="content">
			Content
			</div>
		
		</div>
		
		<div id="footer">
		
			<div id="logofooter">
			Logo Footer
			</div>
			<div id="menüfooter">
			Menü Footer
			</div>
			
		</div>
		
	</div>
	
</body>

</html>

css-datei:

/*PcundSoftware.de*/

html{
	height: 100%;
}

body{
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 12px;
	background: #daf3fd;
	margin-top: 0px;
	margin-bottom: 0px;
}

/*Gesamtcontainer*/

#container{
	background: #ededed;
	width: 984px;
	margin: 0 auto;
}

/*Große Bereiche*/

#oben{
	background: #993366 url('header.jpg') no-repeat; 
	width: 924px;
	height: 144px;
	padding-left: 30px;
	padding-right: 30px;
}

#werbung{
	background: gray url('content.jpg') repeat-y;
	width: 924px;
	padding-left: 30px;
	padding-right: 30px;
}

#mitte{
	background: aqua url('content.jpg') repeat-y;
	width: 924px;
	padding-left: 30px;
	padding-right: 30px;
}

#footer{
	background: navy url('footer.jpg') no-repeat;
	width: 924px;
	padding-left: 30px;
	padding-right: 30px;
	height: 131px;
}

/*Links Topmenü*/
													
div#topmenu{
	text-align: center;
	width: 100%;
	font-size: 16px;
	margin-top: 58px;
	float: left;
	color: #0066cc;
	font-weight: normal;
	z-index: 4;
}											
/*
div#topmenu a:link{
	color: #0066cc; font-weight: normal; text-decoration: none;
}

div#topmenu a:visited{
	color: #0066cc; font-weight: normal; text-decoration: none;
}

div#topmenu a:active{
	color: #0066cc; font-weight: normal; text-decoration: none;
}

div#topmenu a:hover{
	color: #063b83; font-weight: normal; text-decoration: none;
}
*/
/*Logo*/

div#logo{
	float: left;
	padding-top: 10px;
}

/*Rechte Menüleiste*/
div#topmenurechts{
	float: right;
	padding: 10px;
}

/*Suche*/
div#suche{
	float: left;
	padding: 10px;
}

/*Testmenü*/

#topmenu { 
	margin: 0; 
	padding: 0;
	text-align: center;
	width: 100%; 
}  
#topmenu ul, #topmenu li{ 
	margin: 0; 
	padding: 0;
	display: inline; 
	list-style-type: none;
	text-align: center; 
}  
#topmenu a:link, #topmenu a:visited { 
	float: left; 
	line-height:0px; 
	font-weight: normal; 
	padding: 3px 0 2px 0; 
	margin: 0px 10px 0px 10px; 
	color: #0066cc; 
	text-decoration: none;
	font-size: 16px; 
	text-align: center;
	} 
#topmenu #akt 
	{ margin-top: 0px; 
	color: #0066cc; 
	border-top: 0px solid #000000; 
	border-bottom: 0px solid #000000;
	font-size: 16px; 
} 
#topmenu a:hover, #topmenu a:hover#akt { 
	margin-top: 0px; 
	color: #063b83; 
	border-top: 0px solid #000000; 
	border-bottom: 0px solid #000000;
	font-size: 16px; 
}

mmc

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
julian101

julian101 hat kostenlosen Webspace.
11:51, 11.10.2009
mach das am besten mit dem Befehl:
```
<center></center>
```
Da wo sich der code mit dem Menü befindet.
staymyfriend

staymyfriend hat kostenlosen Webspace.
13:09, 11.10.2009
```
<div id="oben">

[...]

			<div id="topmenu">
				<ul id="topmenu"> <li> <a href="sf" id="akt">Startseite</a> </li> <li> <a href="sd">News</a> </li> </ul> 
			</div>
		</div>
```
Sollte das "<ul id="topmenu [...] </ul>" nicht auch in den gleichnamigen Container?! Das aber nur am Rande...

In Deiner CSS solltest Du auch "ul#topmenu" anstatt nur "#topmenu" definieren...
Autor dieses Themas
mmc

mmc hat kostenlosen Webspace.

15:20, 11.10.2009
<center></center> funktioniert nicht!!!
illuxio

illuxio hat kostenlosen Webspace.
15:32, 11.10.2009
Mach es doch so:

#topmenu ul, #topmenu li{
margin: 0px auto;
padding: 0;
display: inline-block;
list-style-type: none;
text-align: center;
}

Fett ist das was ich hinzugefügt habe:

zudem solltest du das korregieren:
```
<div id="topmenu"></div>
<ul> <li> <a href="sf" id="akt">Startseite</a> </li> <li> <a href="sd">News</a> </li> </ul>
```
zu
```
<div id="topmenu">
<ul> <li> <a href="sf" id="akt">Startseite</a> </li> <li> <a href="sd">News</a> </li> </ul> 
</div>
```
Gruß
illuxio

Beitrag zuletzt geändert: 11.10.2009 15:33:35 von illuxio
Autor dieses Themas
mmc

mmc hat kostenlosen Webspace.

15:51, 11.10.2009
Danke, hat funktioniert.
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city

Menü zentrieren

lima-city → Forum → Die eigene Homepage → Homepage Allgemein

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!