Liste mittels padding anpassen zerschießt das Layout

dropdown

Mitglied
Hallo zusammen,

habe folgendes Problem.
Im Container "header" habe ich das Logo als bg eingefügt.
Im gleichen Container ist noch eine Liste, die als Menu dienen soll.
Kommt dann in den unteren Bereich des Logos.
Wenn ich jetzt versuche, die Liste mittels padding-top auszurichten, dann verschiebt es mir auch das Logo.
Irgendwo hat sich ein Fehler eingeschlichen.

Hier erstmal der HTML Code:

HTML:
<div id="main">
  <div id="header">
  	<ul>
    	<li>1</li>
    	<li>2</li>
    	<li>3</li>
    	<li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
     </ul>
  </div>
  <div id="content"></div>
  <div id="footer"></div>
</div>

Hier der CSS Code:
Code:
#main{
	width: 760px;
	position: absolute;
	left: 50%;
	margin-left: -380px;
	border-right-color: #50565f;
	border-left-color: #50565f;
	}
	
#header {
	height: 150px;
	background-image:url('../images/banner.jpg');

	}
#header ul{
	text-align: center;
	color: #233445;
	margin-top: 122px;
}
	
#header ul li {
	list-style-type: none;	
	display: inline;
	margin-right: 15px;

	
	}
Das "margin-top: 122px;" im #header ul drückt auch das Logo runter.
Was mache ich hier falsch ?

Gruß
 
M

Maik

Hi,

setz es mal so um, damit es den Block #header nicht nach unten verschiebt:
CSS:
#header ul{
        text-align: center;
        color: #233445;
        padding-top: 122px;
        margin-top: 0;
}

Alternativ ginge es auch so:
CSS:
#header ul{
        text-align: center;
        color: #233445;
        position: relative;
        top: 122px;
}


mfg Maik