Logo im Header zentrierer

[waynegal]

Hallo alles zusammen,

leider bin ich kein HTML, CSS, PHP ect. Profi und komme bei einer Sache absolut nicht weiter:

Auf meiner neunen Website "www.dawidjakubowski.de" möchte ich mein Logo, das in der oberen linken Ecke platziert ist, vertikal zentrieren. Momentan sitzt es am unteren Rand des Headers! Vergeblich habe ich schon herumprobiert, jedoch ohne erfolg!
Ob ich nun die relevanten "css" Zeilen kopiert habe? Ich hoffe es einfach mal :)

Ich hoffe jemand kann mir helfen. Danke schon einmal im Voraus.

-------------------------
.header {
height:52px;
background:url(images/header_bg.png) 0 0 repeat-x;
z-index:20;
padding:24px 0 0 0;
position:fixed;
top:0;
width:100%;}

#header_pane {
width:52px;
height:24px;
background:url(images/header_pane_arrow.png) 0 0 no-repeat;
position:fixed;
z-index:21;
top:76px;
left:48%;
cursorointer;}

#header_pane.closed {
background-position:0 -24px;}

.header .logo {
width:185px;
height: 52px;
float:left;
padding:0 0 0 40px;}

.header .logo h1,
.header .logo strong {
display:block;
text-indent:-9000px}

.header_play_box {
float:left;
background:url(images/progress_bar_bg.png) left 0 no-repeat;
padding:4px 0 0 33px;
height:30px;
width:185px;
position:relative}

.header_play_box .play_button {
display:block;
background:url(images/play_button.png) 0 0 no-repeat;
width:23px;
height:24px;
overflow:hidden;
cursorointer}

.header_play_box .play_button.play {
background-position:0 -24px;}

.progress_bar_bg {
background:url(images/progress_bar_line.png) 0 0 no-repeat;
width:151px;
height:3px;
padding:1px 0 2px 0;
position:absolute;
top:13px;
left:64px;
z-index:5;
overflow:hidden;}

.header_social {
position:absolute;
top:28px;
right:50px;
width:110px;
height:23px;
text-align:right}

.header_social a {
margin:0 5px;}

.header_social a:hover {}

 

[threadi]

Da dein .header eine feste Höhe hat würde es ausreichen, wenn das Logo innerhalb des .header per margin positioniert wird. Eine automatische vertikale Zentrierung ist da nicht unbedingt nötig. Damit das klappt müsstest Du bei .header das padding entfernen, dafür aber die Höhe vergrößern und darin liegenden Elementen ggfs. auch einen zusätzlichen Abstand nach oben geben um alle insgesamt korrekt auszurichten.

 

[waynegal]

Danke, hat wunderbar funktioniert. Komischerweise zeigt er die Veränderung Lokal richtig an, nur online leoder nicht. Habe die indek.html bereits mehrere Male auf den FTP-Server geladen, leider ohne Erfolg. Hast du eine Idee woran das liegen kann?

Anbei meine Veränderungen!
----------

.header {
height:100px;
background:url(images/header_bg.png) 0 0 repeat-x;
z-index:20;
position:fixed;
top:0;
width:100%;}

.header .logo {
width:185px;
height: 52px;
float:left;
margin: 11px 0 0 26px;
}

.header_play_box {
float:left;
background:url(images/progress_bar_bg.png) left 0 no-repeat;
padding:4px 0 0 33px;
height:30px;
width:185px;
margin: 24px 0 0 30px;
position:relative}

 

[waynegal]

Fehler ist behoben :)