Hintergrundpositionierung

[thorben]

hi,

#head li {
 float    : left;
 margin-left   : 10px;
 margin-right  : 5px;
 background-image  : url("../pix/head/LiBg.jpg");
 background-postion : left center;
 background-repeat  : no-repeat;
}

mit diesem quelltext lässt sich das bild nicht vertikal zentrieren. woran liegt das und geht das überhaupt?

[wahsaga]

hi,

mit diesem quelltext lässt sich das bild nicht vertikal zentrieren.

Das Hintergrundbild? Doch, das dürfte mit dem CSS linksbündig und vertikal zentriert dargestellt werden - natürlich bezogen auf die Ausmaße des Elements, auf das du diese Formatierung anwendest.

woran liegt das und geht das überhaupt?

Was möchtest du eigentlich wissen?
Möchtest du deine Frage vielleicht ein wenig präzisieren?

gruß,
wahsaga

[thorben]

Was möchtest du eigentlich wissen?
Möchtest du deine Frage vielleicht ein wenig präzisieren?

ich stelle ein paar links in der liste da. und ich möchte das bild
dafür links und vertikal zentriert sehen. teste es derzeit auf opera
und dort geht es nicht.

jetzt möchte ich einfach wissen: was mach ich falsch!? wie zentriere
ich ein hintergrundbild vertikal zentriert?

[wahsaga]

hi,

ich stelle ein paar links in der liste da.

In welcher Liste? (HTML-Code, und zutreffendes CSS)

jetzt möchte ich einfach wissen: was mach ich falsch!?

Hast du meinen Hinweis auf die Maße des Elementes, dem du diese Formatierung zuweist, berücksichtigt?

gruß,
wahsaga

[thorben]

Ich hab schon viel mit maßen ausprobiert. Aber hier ist der Quelltext:

CSS-Ausschnitt:
/************************************************************/
/***  H E A D                                             ***/
/************************************************************/
#head {
   float: left;
   padding: 2px;
   width: 600px;
   display: block;
   color: #fcfcfc;
   text-align: right;
   background-color: #555;
}

#head ul {
list-style-type: none;
}

#head li {
   float: left;
   margin-left: 10px;
   margin-right: 5px;
   padding-left: 8px;
   background-image: url("../pix/head/headLiBg.jpg");
   background-postion: center center;
   background-repeat: no-repeat;
}

#head a {
 color: #fcfcfc;
 text-decoration: none;
 padding-left: 8px;
}

HTML-Ausschnitt:
<!-- H E A D / L O G O / B A N N E R -->
<div id="head">
   <ul>
      <li><a href="#" target="_self">Registration</a></li>
      <li><a href="#" target="_self">Rules</a></li>
      <li><a href="#" target="_self">FAQ</a></li>
      <li><a href="#" target="_self">Contact</a></li>
      <li><a href="#" target="_self">Impressum</a></li>
   </ul>
</div>

So und nun möchte ich bei dem Link das Bild "links vertikal zentriert"
haben!

[Felix Riesterer]

Lieber thorben,

ich sehe da einen kleinen Widerspruch in Deinem CSS zu Deiner Absicht:

#head li {
   background-image: url("../pix/head/headLiBg.jpg");
   background-postion: center center;
   background-repeat: no-repeat;
}
<div id="head">
   <ul>
      <li><a href="#" target="_self">Registration</a></li>
   </ul>
</div>
So und nun möchte ich bei dem Link das Bild "links vertikal zentriert"
haben!

Zum einen verpasst Du nicht den Links, sondern den list items jeweils ein Hintergrundbild, zum andern lässt Du dieses Bild sowohl horizontal, als auch vertikal mittig darstellen.

Liebe Grüße aus Ellwangen,

Felix Riesterer.