kostenloser Webspace werbefrei: lima-city


Menü zentrieren

lima-cityForumDie eigene HomepageHomepage Allgemein

  1. Autor dieses Themas

    mmc

    mmc hat kostenlosen Webspace.

    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
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

  3. mach das am besten mit dem Befehl:

    <center></center>


    Da wo sich der code mit dem Menü befindet.
  4. <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...
  5. Autor dieses Themas

    mmc

    mmc hat kostenlosen Webspace.

    <center></center> funktioniert nicht!!!
  6. 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
  7. Autor dieses Themas

    mmc

    mmc hat kostenlosen Webspace.

    Danke, hat funktioniert.
  8. 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

Login zum Webhosting ohne Werbung!