Position Liste in div Container

knuessel · 11 August 2009

Hi,

ich habe als Neuling folgendes Problem:

1. Der Text steht zu tief im Container, soll mittig stehen
2. Wenn ich padding im div Container 0 setze, dann hab ich oben einen Rand nicht in Farbe. Kommt der aus der übergeordneten div Klasse?

Wer kann mir helfen den Text mittig zu setzen, somit etwas höher als jetzt.

DIV Code:

HTML:

  <div id="navigation">
    <ul id="navi">
        <li><a class="navi" href="#" >Item one</a></li>
        <li><a class="navi" href="#">Item two</a></li>
        <li><a class="navi" href="#">Item three</a></li>
        <li><a class="navi" href="#">Item four</a></li>
        <li><a class="navi" href="#">Item five</a></li>
    </ul>
 </div>

style.css

HTML:

#navigation {
height:35px;
padding:5px;
background-color:#464649;
font-family:Arial, Helvetica, sans-serif;
}

#navi li
{
display: inline;
list-style-type: none;
padding-right: 20px;

}

a.navi {
 display:inline;
 text-align:center;
 color:#fff;
 text-decoration:none;
 font-size:13px;
 }
a.navi:link, a.navi:visited
{
  color:#fff;
 text-decoration:none; 
}
a.navi:active
{
  color:#fff; 
  font-weight:bold;
}

Vielen Dank.

mfg
knuessel

neuroleptika · 12 August 2009

knuessel schrieb:
nicht in Farbe. Kommt der aus der übergeordneten div Klasse?

Jain,
Das ist der margin von ul.

Cascading Style Sheets { Grundlegendes : Zusammenfallende Abstände (Collapsing Margins) }

Allerdings kann man das Problem in deinem Beispiel nicht gut erkennen.
So wird es sichtbar:

Code:

#alles {
border: 1px solid green;
}

#navigation {
height:35px;
/*padding:5px;*/
background-color:#464649;
font-family:Arial, Helvetica, sans-serif;
}

Entferne height für #navigation und setze ul auf margin: 0;

Code:

#alles {
border: 1px solid green;
}

#navigation ul {
margin: 0;
}

#navigation {
/*height:35px;*/
padding:5px;
background-color:#464649;
font-family:Arial, Helvetica, sans-serif;
}

Height ist für Textinhalte ungeeignet.

Edit:
html-Code vergessen

Code:

[COLOR="DarkRed"][B]<div id="alles">[/B][/COLOR]
<div id="navigation">
    <ul id="navi">
        <li><a class="navi" href="#" >Item one</a></li>
        <li><a class="navi" href="#">Item two</a></li>
        <li><a class="navi" href="#">Item three</a></li>
        <li><a class="navi" href="#">Item four</a></li>
        <li><a class="navi" href="#">Item five</a></li>
    </ul>
 </div> 
[COLOR="#8b0000"][B]</div>[/B][/COLOR]

knuessel · 12 August 2009

Problem:

HTML:

#wrapper {background-color:#BDBEC6;border:0 solid #000000;margin:0 auto;text-align:left;width:880px;}

Darin ist praktisch die komplette Seite.

Nun sieht die Navigation Klasse besser aus, habe aber das Problem, dass zwischen den verschiedenen Div's soviel Abstand ist.

S. Screenshot.

neuroleptika · 12 August 2009

Hallo knuessel,
Zeige mal ein Link zur deiner Seite.

Toastbrot · 12 August 2009

neuroleptika schrieb:

Code:

[COLOR=DarkRed][B]<div id="alles">[/B][/COLOR]
<div id="navigation">
    <ul id="navi">
        <li><a class="navi" href="#" >Item one</a></li>
        <li><a class="navi" href="#">Item two</a></li>
        <li><a class="navi" href="#">Item three</a></li>
        <li><a class="navi" href="#">Item four</a></li>
        <li><a class="navi" href="#">Item five</a></li>
    </ul>
 </div> 
[COLOR=#8b0000][B]</div>[/B][/COLOR]

Müll, sry.
Divs sind zum Gruppieren von Elementen, und hier ist noch nichtmal einer notwendig, ul reicht da völlig aus.

Probier mal:

HTML:

<ul id="navi">
        <li><a class="navi" href="#" >Item one</a></li>
        <li><a class="navi" href="#">Item two</a></li>
        <li><a class="navi" href="#">Item three</a></li>
        <li><a class="navi" href="#">Item four</a></li>
        <li><a class="navi" href="#">Item five</a></li>
</ul>

Code:

ul#navi {
height: 35px;
background-color: #464649;
border-top: /* Rand den du oben drunter willst */;
border-bottom: /* Rand den du unten drunter willst */;
line-height: 35px;
}

Musst ein bisschen mit rumspielen und eventuell noch was hinzufügen, dass jetzt nur so auf die schnelle.

Gruß
Toast

neuroleptika · 12 August 2009

Toastbrot schrieb:
Müll, sry.
Divs sind zum Gruppieren von Elementen, und hier ist noch nichtmal einer notwendig, ul reicht da völlig aus.

#alles habe ich um #navigation gezogen um den margin von ul zu sichtbar zu machen (Collapsing Margins).

Text in enge px-Höhen zu zwängen ist keine gute idee.
Eine Zentrierung mit line-height ist nur für einzeiligen Text geeignet.

Toastbrot · 12 August 2009

neuroleptika schrieb:
Eine Zentrierung mit line-height ist nur für einzeiligen Text geeignet.

Das ist einzeiliger Text...

neuroleptika · 12 August 2009

Ja,
auf dem Bild sind die Listeneinträge einzeilig.
Die Wörter können aber auch umbrechen wenn z.B die Schrift vergrößert wird.
In deinem Beispiel würde das zu riesigen Abstände führen.

Müll, sry.

Sowas muß nicht sein.
Schreibe einfach "Hallo" wenn dir nichts besseres einfällt.

Toastbrot · 12 August 2009

Klar könnten sie das, aber ich glaube kaum, dass das der Fall sein wird, schau dir doch den Screenshot mal an, sieht doch eher nicht so aus, oder?

Was sagt den der Threadersteller dazu, der muss es ja wissen?!

knuessel · 12 August 2009

CSS 4 You - The Finest in Stylesheets: Workshop Layouten ohne Tabellen

Und bitte freundlich, ich bin ja schließlich zu doof meinen Fehler zu sehen und zu verbessern :)

Toastbrot · 12 August 2009

<div class="menucontainer">
<p class="menutitle">MENU 1</p>
<a class="menu" href="#">Hyperlink 1</a>

<a class="menu" href="#">Hyperlink 2</a>
<a class="menu" href="#">Hyperlink 3</a>

<a class="menu" href="#">Hyperlink 4</a>
<a class="menu" href="#">Hyperlink 5</a>

</div>

Steht da - ist meiner Meinung nach auch Müll. Eine Navigation ist eine Liste, dabei bleibts!

Ich würde dir empfehlen, wenn dann Selfhtml als Nachschlagewerk zu nehmen.

Aber eigentlich ist dein Codeschnipsel, den du da hast doch ganz ok?!

Gruß
Toast

neuroleptika · 12 August 2009

Zeige besser deine Seite in der es nicht funktioniert.
Wenn die Hintergrundfarbe zwischen den Blockelementen fehlt, handelt es sich meißtens um collapsing margins.

knuessel · 12 August 2009

Mein Problem ist, dass zwischen den ul Navigationselementen noch der graue Bereich ist, ich will 0px margin, sodass diese Leiste direkt anliegt und ich mit padding das ganze dann etwas von der Höhe und vom Abstand her verbessern kann.

Toastbrot · 12 August 2009

Toastbrot schrieb:
Müll, sry.
Divs sind zum Gruppieren von Elementen, und hier ist noch nichtmal einer notwendig, ul reicht da völlig aus.

Probier mal:

HTML:

<ul id="navi"> <li><a class="navi" href="#" >Item one</a></li> <li><a class="navi" href="#">Item two</a></li> <li><a class="navi" href="#">Item three</a></li> <li><a class="navi" href="#">Item four</a></li> <li><a class="navi" href="#">Item five</a></li> </ul>

Code:

ul#navi { height: 35px; background-color: #464649; border-top: /* Rand den du oben drunter willst */; border-bottom: /* Rand den du unten drunter willst */; line-height: 35px; }

Musst ein bisschen mit rumspielen und eventuell noch was hinzufügen, dass jetzt nur so auf die schnelle.

Gruß
Toast

Einfach hier keinen Rand angeben.

Und vielleicht am Anfang des CSS ein

Code:

* {
margin: 0;
padding: 0;
}

eingeben und alle margin/padding-Werte, die mit der Navi zu tun haben wegmachen.

Gruß
Toast

knuessel · 12 August 2009

Leider geht das aber nicht und der Fehler bleibt bestehen:

s. Bild

Edit:

damit geht es :)

* {
margin: 0;
padding: 0;

}

Position Liste in div Container

knuessel

Neues Mitglied

neuroleptika

Aktives Mitglied

knuessel

Neues Mitglied

neuroleptika

Aktives Mitglied

Toastbrot

Neues Mitglied

neuroleptika

Aktives Mitglied

Toastbrot

Neues Mitglied

neuroleptika

Aktives Mitglied

Toastbrot

Neues Mitglied

knuessel

Neues Mitglied

Toastbrot

Neues Mitglied

neuroleptika

Aktives Mitglied

knuessel

Neues Mitglied

Toastbrot

Neues Mitglied

knuessel

Neues Mitglied

Neueste Beiträge