✔ Probleme mit Link-Ausrichtung

Status
Nicht offen für weitere Antworten.
S

Setherial

Mitglied
hallo!

ich hab ein problem mit dem ausrichten meiner navigation. ich hab mir ein horizontales menu in mein layout gebastelt. mein problem ist nur, dass der text im menu container irgentwo im oberen drittel der box klebt und ich es bi sjetzt nicht geschafft habe, diesen zu zentrieren oder gar am boden der box auszurichten, wie das eigentlich mal gedacht war. ich hab alles ausprobiert, was mir einfällt aber es wird einfach nichts. habt ihr eine idee, was ich falsch mache?

hier mal das stylesheet:

Code: 
/* CSS Document */

body
	{
		background-image: url(bg.jpg);
		margin: 0px;
		padding: 0px;
	}

#container
	{
		margin-top: 100px;
		width: 600px;
		height: 400px;
		margin-left: auto;
		margin-right: auto;
		background-color: #f4f3f2;
		border-top: dashed;
		border-bottom: dashed;
		border-width: 2px;
		border-color: #674e49;
	}
	
#incontainer
	{
		width: 580px;
		height: 380px;
		margin-bottom: 10px;
		margin-top: 10px;
		margin-left: 10px;
		margin-right: 10px;
		background-color: #e2e1e1;
	}

#menu
	{
		width: 580px;
		height: 20px;
		background-color: #b3aba9;
	}
	
#linetop
	{
		width: 440px;
		height: 2px;
		background-color: #674e49;
	}
	
#content
	{
		width: 430px;
		height: 348px;
		margin-top: 10px;
		background-color: #d6d2d0;
		float: left;
		margin-right: 10px;
	}
	
#ticker
	{
		width: 140px;
		height: 230px;
		float: right;
		background-color: #674e49; 
	}
	
#menu li
	{
		font-weight: bolder;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 10px;
		text-decoration: none;
		color: #d2ebf2;
		display: inline;
		vertical-align: bottom;
	}
	
#menu li a
	{
		text-decoration: none;
		color: #d2ebf2;
	}
	
#menu li a:hover
	{
		text-decoration: none;
		color: #fff;
		background-color: #e2eef2;
	}

und hier die datei, in der das stylesheet angewand wird...

HTML: 
<body>
<div id="container">
<div id="incontainer">
<div id="menu">						  <li><a href="#">Section 1</a></li>
									  <li><a href="#">Section 2</a></li>
									  <li><a href="#">Section 3</a></li>
									  <li><a href="#">Section 4</a></li>
									  <li><a href="#">Section 5</a></li>
									  <li><a href="#">Section 6</a></li>


</div>
<div id="ticker"></div>
<div id="linetop"></div>
<div id="content"></div>
</div> <!--incontainer end-->
</div> <!--container end-->
</body>
 
Du hast für die Liste das einleitende ul-Element vergessen. Desweiteren sollten für dieses Element die Polsterungseigenschaften auf null gesetzt werden, also:

Code: 
#menu ul {
        margin: 0;
        padding: 0;
}
HTML: 
<div id="menu">
     <ul>
         <li><a href="#">Section 1</a></li>
         <li><a href="#">Section 2</a></li>
         <li><a href="#">Section 3</a></li>
         <li><a href="#">Section 4</a></li>
         <li><a href="#">Section 5</a></li>
         <li><a href="#">Section 6</a></li>
     </ul>
</div>

Und bitte achte in deinen Beiträgen auf die Groß- und Kleinschreibung, siehe auch Netiquette Nr.15.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück