eine DIV wie das gute alte schlechte tabellendesign

[bauchidgw]

hallo

schön das mein lieblingsforum mit all seinen kompetenten mitmachern wieder online ist. hatte die letzte woche ne dringe frage und obwohls ws. nicht allzu schwer ist hab i keine ahnung.

bin b gerade dabei alle tabellen von einer meiner neuen alten seiten zu eleminieren. hab aber ein problem und googel hilft mir nicht weiter.

also

<table width="100%" border="1px">
 <tr>
  <td>eins</td>
  <td>zwei</td>
  <td>drei</td>
  <td>vier</td>
  <td>fünf</td>
  <td>sechs</td>
  <td>sieben</td>
 </tr>
</table>

will ich durch

<div id="nav" style="width: 100%">
  <div id="navelement">eins</div>
  <div id="navelement">zwei</div>
  <div id="navelement">drei</div>
  <div id="navelement">vier</div>
  <div id="navelement">fünf</div>
  <div id="navelement">sechs</div>
  <div id="navelement">sieben</div>
</div>

ersetzen, und die styles so machen, die <div id="navelement"> sich gleichmäßig über die weite des übergeordnetne divs erstrecken. also sich wie die tabelle oben verhält. jo. eine ahnung wie das geht? oder eine gute resourcentip für mich? tips?

danke für die aufmerksamkeit

mfg
bauchidgw

[Elya]

Hallo bauchidgw,

<div id="nav" style="width: 100%">
  <div id="navelement">eins</div>
  <div id="navelement">zwei</div>
  <div id="navelement">drei</div>
  <div id="navelement">vier</div>
  <div id="navelement">fünf</div>
  <div id="navelement">sechs</div>
  <div id="navelement">sieben</div>
</div>

Mit Verlaub, das ist Unsinn ;-)

sich wie die tabelle oben verhält. jo. eine ahnung wie das geht? oder eine gute resourcentip für mich? tips?

CSS-basierte Navigationsleisten sollte Dir weiterhelfen.

Gruß aus Köln-Ehrenfeld,

Elya

[bauchidgw]

leider

mal abgesehen, dass ich probleme habe mit der <ul> <li> formatierung habe, weil mir der mozilla-browser (ie nicht getestet) unerfindlicherweise (obwohl ich die elemente auf "dispaly: inline" stellt) mir einen umbruch zuviel reinmachen.

ist meine frage dennoch eine andere......

ich würde gerne haben, dass sich die <div>s (oder auch die <li>s) gleichmäßig übert die 100% breit des übergeordenten elements (eben ein <div>  könnt theoretisch aber auch ein <ul> sein) verteilen.

anscheinende scheint das unter
http://de.selfhtml.org/css/layouts/anzeige/nav_float.htm

• der code dazu http://de.selfhtml.org/css/layouts/navigationsleisten.htm#horizontal  (und etwas runterscrollen)
  zu versprochen zu werden.

wird aber nicht so angezeigt.

irgendwelche tips? oder sehe ich da was falsch?

bitte um hilfe da ich sonst wieder auf tabellen ausweichen muss und ich mich dann selber hasse. danke.

ligrü
bauchidgw

[Elya]

Hallo bauchidgw,

irgendwelche tips? oder sehe ich da was falsch?

sorry, ich hatte die ganze Zeit eine vertikale Liste vor Augen, jetzt weiß ich was Du meinst. Spontat habe ich keine Lösung, vielleicht schaust Du mal, ob Du unter listamatic etwas findest, was Du gebrauchen kannst.

bitte um hilfe da ich sonst wieder auf tabellen ausweichen muss und ich mich dann selber hasse.

Unsinn (es gibt bei weitem Wichtigeres im Leben als sauberen HTML/CSS-Code ;-))

Gruß aus Köln-Ehrenfeld,

Elya

[Elya]

P.S.:

Spontan habe ich keine Lösung

...außer den li-Elementen eine entsprechende Breite in % zu geben, das macht es aber nicht gerade flexibel, da es von der Anzahl der Elemente im ul abhängt.

Gruß aus Köln-Ehrenfeld,

Elya

[bauchidgw]

danke für den listmatic tip. tolle seite.

bin jetzt nach den angucken mehrer beispiele zu einer solchen lösung gekommen, mit welcher ich halbwegs glücklich bin.

display: inline;
width: 12.5%;
float: left;
white-space: nowrap;

12.5% für die width, da ich 8 elemente habe. das ganze funkt allerdings nur, wenn man "float: left" dazuschreibt (sonst (komischerweise) bringen bei inline-elementen die width angaben in prozent gar nichts)

problem ist jetzt, dass ein navigationspunkt mehr als die 12.5% (bei  800pixel gesamtweite) in anspruch nimmt und es dadurch zu einen überschneidungseffekt kommt. jezt muss ich mich mit den prozentpunkten herumspielen... wie du gesagt hat, eben nicht sehr flexibel.

dank

mfg
bauchidgw

[Elya]

Hallo bauchidgw,

display: inline;
width: 12.5%;
float: left;
white-space: nowrap;

12.5% für die width, da ich 8 elemente habe. das ganze funkt allerdings nur, wenn man "float: left" dazuschreibt (sonst (komischerweise) bringen bei inline-elementen die width angaben in prozent gar nichts)

du brauchst für horizontale Listen nur *entweder* float *oder* display:inline; - Breiten auf inline-Elemente anzuwenden, bringt nichts. Faustregel: float + breite (für gleich breite Elemente) oder inline mit span/margin (für Elemente mit einer Breite, die sich an den Inhalt anpaßt).

Gruß aus Köln-Ehrenfeld,

Elya

[Axel Richter]

Hallo,

bin b gerade dabei alle tabellen von einer meiner neuen alten seiten zu eleminieren. hab aber ein problem und googel hilft mir nicht weiter.
also
<table width="100%" border="1px">
<tr>
  <td>eins</td>
  <td>zwei</td>
  <td>drei</td>
  <td>vier</td>
  <td>fünf</td>
  <td>sechs</td>
  <td>sieben</td>
</tr>
</table>
will ich ersetzen, und die styles so machen,... also sich wie die tabelle oben verhält.

Die richtige[TM] Lösung wäre wohl:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Navigation in TD-Elementen vs. UL/LI</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<style type="text/css">  
<!--  
ul {display:table; list-style-type:none; margin:0; padding:0; width:100%; border:2px outset gray;}  
li {display:table-cell; border:2px inset gray;}  
-->  
</style>  
</head>  
<body>  
<table width="100%" border="1px">  
 <tr>  
  <td>eins</td>  
  <td>zwei</td>  
  <td>drei</td>  
  <td>vier</td>  
  <td>fünf</td>  
  <td>sechs</td>  
  <td>sieben</td>  
 </tr>  
</table>  
<hr>  
<ul>  
  <li>eins</li>  
  <li>zwei</li>  
  <li>drei</li>  
  <li>vier</li>  
  <li>fünf</li>  
  <li>sechs</li>  
  <li>sieben</li>  
</ul>  
</body>  
</html>  

Natürlich kann der IE das nicht. Vorteil der UL/LI-Struktur wäre aber, dass sie auch ohne CSS eine Auflistung erkennen lassen würde.

Allerdings, sollen wirklich die Menüpunkte alle unterschiedlich breit werden, wie bei der Tabelle ohne Breitenangabe für die TDs? Die Tabelle vermittelt zwar, aber macht per default ja nicht alle TDs gleich breit, sondern richtet sich nach dem Inhalt der Zellen. Soll weiterhin die Breite der Menüpunkte wirklich schmaler werden, wenn man die Breite des Viewports verkleinert? Oder sollen sie eventuell irgendwann in eine neue Zeile umbrechen? Oder soll man irgendwann horizontal scrollen müssen? All dies spräche für LIs mit float:left und einer _fixen_ Breite (in ex bzw. in px, wenn Rahmen in px ins Spiel kommen) und ggf. für eine fixe Breite des ULs (in ex bzw. in px).

viele Grüße

Axel

[Ashura]

Hallo bauchidgw.

<div id="nav" style="width: 100%">

<div id="navelement">eins</div>
  <div id="navelement">zwei</div>
  <div id="navelement">drei</div>
  <div id="navelement">vier</div>
  <div id="navelement">fünf</div>
  <div id="navelement">sechs</div>
  <div id="navelement">sieben</div>
</div>

  
Da ich mir nicht sicher bin, ob dies schon deutlich geworden ist:  
  
1\. Eine ID mehrfach in einem Dokument zu verwenden ist sinnfrei. (Eine ID ist ein eindeutiger Bezeichner.)  
  
2\. Die (deshalb passenderen) Klassenzuweisungen für die (hier eigentlich angemessenen) Listenelemente sind überflüssig, da die Listenelemente schon eindeutig über die ID „nav“ der (hier eigentlich angemessenen) Liste selektiert werden können.  
Siehe hierzu die Beschreibungen zum <http://de.selfhtml.org/css/formate/zentrale.htm#verschachtelte_elemente@title=Nachfahrenselektor>.  
  
  
Einen schönen Montag noch.  
  
Gruß, Ashura  

-- 
[The End of an Era...](http://www.nightwish.com/english/lettertotarjaen.html)

[Sven Rautenberg]

Moin!

1. Eine ID mehrfach in einem Dokument zu verwenden ist sinnfrei.

Nicht sinnfrei, sondern verboten!

Wenn IDs eigentlich mehrfach verwendet werden sollen, nimmt man stattdessen eine Klasse (Faustregel) - wenn es aus Sicht von CSS überhaupt notwendig ist, denn mit passenden Selektoren geht das oft auch ohne...

- Sven Rautenberg

[Ashura]

Hallo Sven.

1. Eine ID mehrfach in einem Dokument zu verwenden ist sinnfrei.

Nicht sinnfrei, sondern verboten!

An den Sinn für Sinn zu appellieren ist oft erfolgreicher, als etwas zu verbieten.
(Ja, ich bin mir bewusst, dass es verboten ist, habe meine Anmerkung aber aus eben genanntem Grund nicht dieserart formuliert.)

Wenn IDs eigentlich mehrfach verwendet werden sollen, nimmt man stattdessen eine Klasse (Faustregel) - wenn es aus Sicht von CSS überhaupt notwendig ist, denn mit passenden Selektoren geht das oft auch ohne...

Was ich bereits schrieb.

Einen schönen Montag noch.

Gruß, Ashura

[bauchidgw]

ups, sorry. das mit den vielen gleichen <id>'s war ne copy/paste fehlerei. sollte natürlich eine "class" sein.

mfg
bauchidgw

[MudGuard]

Hi,

1. Eine ID mehrfach in einem Dokument zu verwenden ist sinnfrei.
   Nicht sinnfrei, sondern verboten!

Verboten WEIL sinnfrei ;-)

cu,
Andreas