✔ Dynamische Breite trotz margin:auto

[spex]

Hi,

folgendes...

Ich möchte ein DIV Element mit CSS so darstellen das es auf der Homepage zentriert ist, das mache ich mittels "margin:0 auto", und das der Inhalt eine dynamische Breite haben darf.

Das Ganze soll mal eine Quicknavigation ganz oben auf der Homepage darstellen, sobei der Inhalt etwa folgendermaßen aussehen wird:

Home -> Forum - > Neues Thema erstellen -> Speichern

nunja und die Breite soll sich halt dynamisch anpassen.

Ich habs bereits mit min-width und max-width probiert, aber dann ist das DIV Element nichtmehr zentriert. Gebe ich aber eine feste Größe an etwa 200px, dann ist es zwar zentriert, erzeugt jedoch einen Zeilenumbruch wenn der Inhalt breiter ist als das Div Element.

Gruß - sp3x

 

[Maik]

Hi,

und wie wäre es hiermit?

#box {
margin:0 100px;
}

Auf diese Weise legst du lediglich den horizontalen Abstand zum Fenster- bzw. Elementrand fest; die Box sitzt somit ebenfalls mittig und besitzt nun eine relative / dynamische Breite.

Ansonsten bliebe noch eine relative Breitenangabe:

#box {
width:80%;
margin:0 auto;
}

Falls sich aber die dynamische Breite auf den Elementinhalt bezieht, dürfte Centering Float Left Menus mit dem zweiten Beispiel "a centered floated left menu (unknown width)" ganz interessant sein.

mfg Maik

 

[spex]

Danke,
http://www.cssplay.co.uk/menus/centered.html
ist genau das was ich brauche.

Jedoch wird es im InternetExplorer nicht richtig angezeigt, dort ist es wieder linksbündig.
Fällt als Lösung also weg.

GIbts noch eine Möglichkeit?

 

[Maik]

Dann dürfte dir an irgendeiner Stelle des Quellcodes ein Fehler unterlaufen sein, denn das Original-Beispiel funktioniert im IE einwandfrei.

Eventuell hast du im übergeordneten Element die text-align:center-Deklaration vergessen?

Wenn nicht, wie lautet denn dein vollständiger HTML- und CSS-Code, oder ist die Seite irgendwo erreichbar, um dort einen Blick drauf werfen zu können?

mfg Maik

 

[spex]

http://nopaste.com/p/a9gaLjhVlb

Das ist der Code so wie ich ihn zum testen übernommen habe.
Und im Internetexplorer werden die DIV Elemente normal, untereinander, dargestellt.

 

[Maik]

Dein CSS-Code:

        #menu2 {
          display:table;
          padding:0; 
          margin:0 auto; 
          list-style-type:none;
          white-space:nowrap;
          }
        #menu2 li {
          display:table-cell;
          }
        * html #menu2 li {
          float:left;
          }
        #menu2 a {
          width:auto;
          display:block;
          padding:4px 16px;
          color:#fff; 
          background:#08c; 
          border:1px solid #fff; 
          text-decoration:none;
          }
        * html #menu2 a {
          float:left;
          }
        #menu2 a:hover {
          color:#000; 
          background:#d4d4d4;
          }
        .container {clear:both; text-decoration:none;}
        * html .container {display:inline-block;}

ist in dieser Form falsch umgesetzt, denn anstelle der rotmarkierten Star-HTML-Hacks, wird die nachfolgend fettmarkierte Passage nach dem Stylesheet eingebunden, da im standardkonformen Modus der Star-HTML-Hack vom IE7 nicht unterstützt wird, er aber diese CSS-Regeln ebenfalls benötigt, wofür der Operator "lte" (=kleiner-gleich) des "Conditional Comments" steht:

<style type="text/css">
        #menu2 {
          display:table;
          padding:0; 
          margin:0 auto; 
          list-style-type:none;
          white-space:nowrap;
          }
        #menu2 li {
          display:table-cell;
          }
        #menu2 a {
          width:auto;
          display:block;
          padding:4px 16px;
          color:#fff; 
          background:#08c; 
          border:1px solid #fff; 
          text-decoration:none;
          }
        #menu2 a:hover {
          color:#000; 
          background:#d4d4d4;
          }
        
        .container {clear:both; text-decoration:none;}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#menu2 li {
  float:left;
  }
#menu2 a {
  float:left;
  }
.container {display:inline-block;}
</style>
<![endif]-->

Zudem fehlt, wie von mir vermutet, die text-align:center-Deklaration für das übergeordnete body-Element.

Mit diesem Quellcode kann ich, wie im Original-Beispiel, im IE (5.5, 6 & 7) keine Fehldarstellungen entdecken:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST</title>

<style type="text/css">
        body {
          text-align:center;
          }
        #menu2 {
          display:table;
          padding:0;
          margin:0 auto;
          list-style-type:none;
          white-space:nowrap;
          }
        #menu2 li {
          display:table-cell;
          }
        #menu2 a {
          width:auto;
          display:block;
          padding:4px 16px;
          color:#fff;
          background:#08c;
          border:1px solid #fff;
          text-decoration:none;
          }
        #menu2 a:hover {
          color:#000;
          background:#d4d4d4;
          }
        .container {clear:both; text-decoration:none;}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#menu2 li {
  float:left;
  }
#menu2 a {
  float:left;
  }
.container {display:inline-block;}
</style>
<![endif]-->
</head>

<body>

    <del class="container">
        <ul id="menu2">
            <li><a href="#nogo">Tab One</a></li>
            <li><a href="#nogo">Tab Two: Longer</a></li>
            <li><a href="#nogo">Tab Three: Longest</a></li>
            <li><a href="#nogo">Tab Four</a></li>
        </ul>
    </del>

</body>
</html>

mfg Maik

 

[spex]

Das ist gut, sehr gut. Danke.

Aber nicht perfekt .

Im ANhang findest du einen Screenshot von SeaMonkey 2.0 unter Ubuntu 8.04 LTS. Dort befinden sich die Elemente linksbündig.

Aber egal, so ists gut genug und allen Browsern kann man es sowieso nicht recht machen.
Schade nur weil viele User die auf Linux umsteigen auch Seamonkey nutzen, und das auch in der aktuellen Version 2.0. In der 1.9er wirds korrekt dargestellt.

Gruß sp3x

 

[spex]

Mal eine ganz andere Frage, was bewirkt dieses DEL-Tag?

 

[Maik]

Da hat sich der Autor das Element zur Auszeichung eines nicht mehr gültigen Inhalts ausgesucht.

Alternativ könnte der Quellcode aber auch so lauten:

<!--[if lte IE 7]><table class="container"><tr><td><![endif]-->
<ul id="menu2">
...
</ul>
<!--[if lte IE 7]></td></tr></table><![endif]-->

mfg Maik

 

[spex]

Also mit einem stinknormalem DIV wäre es auch möglich ? Das macht jetzt keine grundlegenden Unterschiede?

//EDIT: OK also mit DIV geht es nicht, mit "ins", "del" und einer normalen Tabelle wie du gezeigt hast, geht es.



//EDIT:

<!--[if lte IE 7]> hab ich beim ganzen kopie'n paste total übersehen. Wusste garnicht das es bei CSS sowas gibt. Kannte ich bisher nur von C "#include #ifdef"