Clanintern Clanintern Clanintern

Forum

Öffentliche Foren
ZURÜCK
FORUM: Spiele & Computer THEMA: 3 Elemente float und zentrieren
AUTOR BEITRAG
Ynusis

RANG Deckschrubber

#1 - 10.05 18:47

code:

[...]

<style type="text/css">
#header h1
{
float: left;
}

#header ul
{
float: left;
}

#header p
{
float: right;
}
</style>

[...]

<div id="header">
<h1>links</h1>
<ul><li>mitte</li></ul>
<p>rechts</p>
</div>

[...]


Wie bekomme ich das <ul> zentriert, margin: 0 geht nicht? (die Elemente sollen auf der selben Höhe sein)

Praxisbezug:

<h1> Ist mein Logo, welches ganz links sein soll
<ul> Meine Navigation, soll in der Mitte sein
<p> Ist Login Schrift, welche ganz rechts sein soll

code:

<h1>   LOGO   </h1>               <ul>mitte</ul>                   <p>Login</p>
xi-on|absolut

RANG God

#2 - 11.05 05:18

code:

<style type="text/css">
#header h1
{
float: left;
}

#header ul
{
float: left;
position: absolute;
left: 50%;
right: 50%;
}

#header p
{
float: right;
}
</style>

[...]

<div id="header">
<h1>links</h1>
<ul><li>mitte</li></ul>
<p>rechts</p>
</div>


...löst die sache zwar nich mit Float...aber warum du float zur positionierung nutzen willst erschließt sich mir eh nich ganz ... was fürn Text soll denn ein Menü und die logos umfließen...stell ich mir designtechnisch merkwürdig vor.
inta

RANG Master of Clanintern

#3 - 11.05 08:10

Position absolute sollte man in der Regel vermeiden, da diese Elemente komplett aus dem Fluss des Seite entfernt werden. Natürlich gibt es auch dafür Anwendungsfälle, aber hier geht es ohne sogar einfacher.

code:
<style type="text/css">
#header h1 {
    float: left;
}

#header ul {
    width: 20%;
    margin: 0 auto;
}

#header p {
    float: right;
}
</style>

<div id="header">
    <h1>links</h1>
    <p>rechts</p>
    <ul>
        <li>mitte</li>
    </ul>
</div>


@ #2
PS: Das float bei der ul ist überflüssig.
xi-on|absolut

RANG God

#4 - 11.05 18:18

#3 sowas hatte ich mir irgendwie schon gedacht, gut zu wissen ^^ ...width hat halt andere eventuell unerwünschte nebenwirkungen
ZURÜCK