Liste (ul) in div zentrieren

CroweHammer

Hi Leute,

ich hab eine Tabellenzelle in der liegt ein Div-Container, der genauso groß ist, als die Tabellenzelle (1000px). In diesem Div-Containter liegt eine Tabelle, welche mittig angezeigt werden soll. Die Liste ist horizontal also mit display:inline;.
Mein Quellcode dazu:

HTML

#navi-header 
{
  border:0px solid #000000;
  width:1000px;
  text-align:center;
}


#navi-header ul 
{
  list-style:none;
  margin:0px;
  padding:0px;
}


#navi-header li 
{
  display:inline;
  float:left;
  list-style:none;
  margin:0px;
  padding:0px;
}


#navi-header li a:link , #navi-header li a:visited , #navi-header li a:active ,
#navi-header li a:hover
{
  display:block;
  height:40px;
  line-height:40px;
  padding-right:5px;
  color:#000000;
  text-decoration:none;
  text-align:center;
  font-family: verdana, sans-serif;
  font-size:12px;
}

Alles anzeigen

Ich hoffe ihr könnt mir schnell Abhilfe schaffen.
Danke im voraus
Mit freundlichem Gruß
CroweHammer

synaptic

div drum herum, breite verpassen und des ganze im style mit margin:0 auto; zentrieren

CroweHammer

Um mein div nochmal ein Div-Container drumherum mit ner festen Größe und diesem den style margin:0 auto; zuweisen, versteh ich das richtig?

Elvis

Zitat von CroweHammer

versteh ich das richtig?

Auf jeden Fall richtiger als eine Tabelle in eine Tabelle zu stecken, die dann irgendwie noch Div-Container dazwischen hat. Hört sich irgendwie schrecklich nach veraltetem Tabellenlayout an....

thilda

Er hat doch aber schon ein Div mit fester brite. Also brauch er doch nur das ul mit margin: 0 auto; zentrieren oder?

Zumal ein Div in einer Tabelle... das klingt wirklich nicht gut.

CroweHammer

Um weitere Ungereimtheiten aus dem Weg zu gehen, werde ich jetzt den Div-Container außerhalb der Tabelle anlegen und in ihm drin ein zweiten in dem meine Liste integriert ist.
Wenn ich das gemacht hab, werd ich hier noch einmal meinen Quellcode posten.

CroweHammer

PS: Ob Tabellenlayout oder nicht, ist meiner Meinung nach immer noch eine Sache die dem Webdesigner offen steht. Wie es sich mit DIVs in Tabellen verhält weis ich nicht, aber größere Probleme waren mir diesbezüglich bisher nicht bekannt!

synaptic

also ich würd nicht dem ul den style verpassen, sondern wirklich nem anderen div, auch wenns schwer fällt..^^

aber nen div is halt nen container und daher soll des auch das machen wozu es gedacht ist.. elemente aufnehmen

CroweHammer

Neuer Quelltext:

Hier, der CSS-Code, welcher dem äußeren DIV zugewiesen ist:

HTML

#header
 {
  margin:0 auto;
  width:100%;
  height:40px;
 }

Hier, der CSS-Code, welcher dem inneren DIV zugewiesen ist:

HTML

#navi-header 
{
  border:1px solid #000000;
}


#navi-header ul 
{
  list-style:none;
  margin:0 auto;
  padding:0px;
}


#navi-header li 
{
  display:inline; 
  float:left;
  list-style:none; 
  margin:0px;
  padding:0px;
}


#navi-header li a:link , #navi-header li a:visited , #navi-header li a:active ,
#navi-header li a:hover
{
  display:block;
  height:40px;
  line-height:40px;
  padding-right:5px;
  color:#000000;
  text-decoration:none;
  font-family: verdana, sans-serif;
  font-size:12px;
}

Alles anzeigen

Hier der Code zu meinen Divs- die jetzt außerhalb jeglicher Tabelle liegen:

HTML

<div id="header">
    <div id="navi-header">
      <ul>
        <li><a href="index.php" onfocus="this.blur()">Startseite</a></li>
        <li><a href="index.php" onfocus="this.blur()">&Uuml;ber uns</a></li>
        <li><a href="index.php" onfocus="this.blur()">Impressum</a></li>
      </ul>
    </div>
  </div>

Was mach ich falsch?

Elvis

Zitat von CroweHammer

PS: Ob Tabellenlayout oder nicht, ist meiner Meinung nach immer noch eine Sache die dem Webdesigner offen steht.

Bitte verzeih meine anmaßende Anmerkung. Wird nicht wieder vorkommen.

CroweHammer

Wenn wir es hier nicht gelöst kriegen, werde ich mich wohl noch an ein zweites Forum wenden müssen, schade.

synaptic

also dir zu helfen ist ja auch net grad einfach...
zumal du zuerst deinen "code" postest, es aber lediglich css-angaben sind (die ich nichma als code bezeichnen würde, aber das ist wohl einstellungssache)
dann bekommste ne lösung gesagt und diskutierst lieber rum.

also nochmal du brauchst einen qualifizierten doctype, damit die browser das boxmodell richtig interpretieren können, dann musst du deinen zu zentrierenden divs ne breite geben (keine 100% sondern eben so gross, wie der inhalt maximal an breite einnimmt, dann verpasst du diesen divs ein margin:0 auto; und dann sind die auch zentriert.
wenn du deine listen-elemente floaten lässt, würd ich dem div noch nen overflow:hidden geben, dann ist es eben so gross, wie der inhalt.

und wenn du partielle beratungsresistenz als unseren fehler siehst, stell deine frage ruhig in einem anderem forum, aber bitte hinterlass hier nen link dahin, damit man das ganze spektakel dort mitverfolgen kann

edit: und siehe da was passiert, wenn man es richtig macht:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
    <title>Untitled</title>
    <style type="text/css">
#navi-header 
{
  border:1px solid red;
  width:500px;
  margin:0 auto;
}


#navi-header ul 
{
  list-style:none;
  margin:0 auto;
  padding:0px;
}


#navi-header li 
{
  display:inline; 
  float:left;
  list-style:none; 
  margin:0px;
  padding:0px;
}


#navi-header li a:link , #navi-header li a:visited , #navi-header li a:active ,
#navi-header li a:hover
{
  display:block;
  height:40px;
  line-height:40px;
  padding-right:5px;
  color:#000000;
  text-decoration:none;
  font-family: verdana, sans-serif;
  font-size:12px;
}
#header
 {
  margin:0 auto;
  width:100%;
  height:40px;
 }
    </style>
</head>


<body>


<div id="header">
    <div id="navi-header">
      <ul>
        <li><a href="index.php" onfocus="this.blur()">Startseite</a></li>
        <li><a href="index.php" onfocus="this.blur()">&Uuml;ber uns</a></li>
        <li><a href="index.php" onfocus="this.blur()">Impressum</a></li>
      </ul>
    </div>
  </div>    


</body>
</html>

Alles anzeigen

wenn man schon die hälfte von nichts kann, sollte man zumidnest ratschläge von denen annehmen, die es können!

Elvis

[Offtopic]
synaptic
Ich hab es auch schon mal versucht sejuma zu erklären.... Ich weiß es eigentlich auch nicht wirklich. Mein Wissen ist deutlich geringer, als wie es viele vermuten. Was ich in der Regel weiß ist wie es nicht geht. Für mich ist das aber schon mal ein guter Anfang.
[/Offtopic]

synaptic

naja wenn du weisst wie es nicht geht und eben genau DAS nicht machst, wirste auch kein probleme bekommen

CroweHammer

Hab es heute morgen auf meine eigene Art gelöst auch wenn mir hier, meine fachliche Inkompetenz, immer wieder unter die Nase gerieben wird. Ich bin zufrieden mit meiner Lösung und sie funktioniert in allen gängigen Browsern:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>test</title>    <style type="text/css">    .container     {       clear:both;        float:left;        width:100%;        overflow:hidden;    }    #menu2     {        padding:0;        margin:0 auto;        list-style-type:none;        float:left;        position:relative;        left:50%;    }    #menu2 li     {        float:left;         position:relative;         right:50%;    }    #menu2 a     {        width:auto;        display:block;        padding-left:4px;        color:#000000;        text-decoration:none;     }    </style></head><body><div class="container">    <ul id="menu2">        <li><a href="index.php">List 1</a></li>        <li><a href="index.php">List 2</a></li>        <li><a href="index.php">List 3</a></li>    </ul></div></body></html>

Danke trotzdem an alle Beteiligten.

Mit freundlichem Gruß

CroweHammer

PS:
Ein Forum dient zur Diskussion und Erörterung von Themen! Hilfe nehm ich gerne an, aber wenn ich den Gedankengang des Helfenden nicht versteh komm ich halt auch nicht auf einen grünen Zweig. In dem Sinne schönen Tag noch! Achja gibt es hier im Forum ein Button "Thema abgehakt" oder dergleichen?

synaptic

wenn du den gedankengang des helfenden nicht verstehst, frag nach!
nur dem sprechenden kann geholfen werden und kommunikation ist der schlüssel zur gesellschaft!

jojo87

Zitat

Achja gibt es hier im Forum ein Button "Thema abgehakt" oder dergleichen?

Ja, gibt es.
Einfach den Anfangspost editieren und als Prefix "gelöst" auswählen.
Hab das mal für dich gemacht

CroweHammer

alles klar, vielen Dank!

Elvis

Zitat von CroweHammer

Hab es heute morgen auf meine eigene Art gelöst

Das freut mich.

Zitat von CroweHammer

auch wenn mir hier, meine fachliche Inkompetenz, immer wieder unter die Nase gerieben wird.

Also ich habe das nicht gemacht. Wenn es so ankam, dann tut es mir leid.

Zitat von CroweHammer

PS:
Ein Forum dient zur Diskussion und Erörterung von Themen! Hilfe nehm ich gerne an, aber wenn ich den Gedankengang des Helfenden nicht versteh komm ich halt auch nicht auf einen grünen Zweig.

Sorry, aber wenn Du gleich so tust als wollte man Dir Deine Freiheit zu persönlichen Entfaltung weg nehmen, dann hat das wenig mit der von Dir angesprochenen Forenkultur zu tun.

Tags