"Width"-Weite von UL-tag bei Horizontalen Listen default 100%?

[gbennyb]

Ich habe eine Liste wie bei <http://de.selfhtml.org/css/layouts/anzeige/nav_float.htm@title=folgendem Beispiel> will aber keine Weite angeben bei dem <UL>, da ich eine dynamische Liste in dem CMS Wordpress erzeugen lasse und im vorhinenin nicht weiß wie breit die Liste wird.

Nun habe ich aber das Problem dass die Weite dann autoamtisch immer 100% breit wird (bzw. gleichzusetzen mit width: auto;), wie in dem oben gezeigten Beispiel, ich aber aus Background-IMG-Gründen einen defintiven Abschluss von </UL> hinter dem letzten </LI> brauche.

Meine Seite ist max. 912px breit, die Leiste aber nur zw. 750-800px und sie sollte eben enden. Die Struktur ist in etwa so:

<top>
  <logo></logo>
  <navtop></navtop>
</top>

Wobei jede Ebene einen eigene Background-Grafik hat und wenn moeglich die Top-Ebene auf der rechten Seite durschimmern sollte, nicht aber die navtop bis zum "bitteren" Ende nach rechts laeuft, sondern eben nur den gewuenschten Bereich abdecken sollte.

Ich befuerchte ich stosse hier an die Limits des machbaren. oder muss ich etwas wieder mit Tabellen arbeiten (wo ich mir das doch gerade abbgewoehnt habe).

Danke fuer Eure Hilfe im Voraus,
bennyb

[Harlequin]

Yerf!

Nun habe ich aber das Problem dass die Weite dann autoamtisch immer 100% breit wird (bzw. gleichzusetzen mit width: auto;),

Ist zwar nicht ganz das gleiche, aber ja: width:auto ist die voreinstellung und die bewirkt ein ausbreiten "so breit wie möglich".

wie in dem oben gezeigten Beispiel, ich aber aus Background-IMG-Gründen einen defintiven Abschluss von </UL> hinter dem letzten </LI> brauche.

Versuch mal, die Liste selbst auch zu flaoten, das sollte ihre Breite begrenzen. Evtl. musst du dann aber noch ein clear an passender Stelle einfügen.

(Ein display:inline-block würde wohl auch helfen, hat aber auch so seine Nachteile, vor allem im Firefox 2)

Gruß,

Harlequin

[gbennyb]

hm, ich habe jetzt mal folgendes probiert, hat aber leider keine Auswirkungen:

#topmenu ul {
 background-image: url(images/hintergrund_blue_verlauf.png);
 float: left;
 }

#topmenu ul li {
 background: url(images/button_rechts_2.gif) top right repeat-y;
 float: left;
 display: inline;
 }

Danke dennoch fuer die sehr rasche Antwort! Irgendeine andere Idee?

[Harlequin]

Yerf!

Danke dennoch fuer die sehr rasche Antwort! Irgendeine andere Idee?

Hm, kannst du das mal online zur Verfügung stellen? Am SelfHTML-Beispiel hat's funktioniert...

Gruß,

Harlequin

[gbennyb]

Hallo Harlequin, Hallo Liebe andere Forum-Leser,

anbei der Link zu der Testseite:
http://www.cee.de/test/topnav/

das CSS ist zu finden unter: http://www.cee.de/test/topnav/style.css

Dabei sieht man auch dass das Problem auf der rechten Seite des Bildschirmes fortbesteht, weil <div id="topmenu"> eben nicht da aufhoert, wo die Liste aufhoert sondern im Prinzip ein width:auto; macht.

Danke im Voraus nochmals fuer Euren Input und die Hilfe,
bennyb

[Harlequin]

Yerf!

Dabei sieht man auch dass das Problem auf der rechten Seite des Bildschirmes fortbesteht, weil <div id="topmenu"> eben nicht da aufhoert, wo die Liste aufhoert sondern im Prinzip ein width:auto; macht.

Irgendwie passt deine Beschreibung nicht ganz zu der Seite...

Wenn du die festen breiten aus #topnav und #topnav ul rausnimmst und dem #topnav ein float:left verpasst, dann erreichst du was du beschreibst: das die Liste nur so breit ist wie der Inhalt.

Die Seite sieht aber eher danach aus, als ob du genau das Gegenteil willst (würde ich zumindest erwarten). Die Liste sollte doch über die volle Breite gehen, damit das Hintergrundbild (die dunkelblaue Abschlußkante) erscheint, oder?

PS: Überprüf mal das Hintergrundbild von #topnav ul (url(images/hintergrund_blue_verlauf.png)), da scheint was nicht zu passen...

Gruß,

Harlequin

[gbennyb]

Hallo Harlequin,

hm, ich habe di eAenderung vorgenommen (also "width" entfernt") aber das hat ueberhauptkeine Auswirkung:

http://www.cee.de/test/topnav/

http://www.cee.de/test/topnav/style.css

Mit dem Hintergrundbild hast Du recht, das sieht nicht auf allen Brwosern gleich "schon" aus, aber das ist Kosmetik, im Gegensatz zu dem unschoenen Kasten neben der Navigation. Meine Erwartung waere das der Bereich <div id="top"> den Verlauf vorsetzt, aber das ist wegen "topmenu" (sorry nicht topnav), nicht der Fall :(

hm, soll ich also doch auf eine Tabelle umschwenken?

Gruesse,
bennyb

[Harlequin]

Yerf!

Mit dem Hintergrundbild hast Du recht, das sieht nicht auf allen Brwosern gleich "schon" aus, aber das ist Kosmetik, im Gegensatz zu dem unschoenen Kasten neben der Navigation.

Du willst also doch den hellblauen Kasten links vom Menü weghaben? (hab ich mir schon gedacht, nur deine Beschreibung passt nicht ganz, da die Ursache exakt das Gegenteil ist).

Meine Erwartung waere das der Bereich <div id="top"> den Verlauf vorsetzt, aber das ist wegen "topmenu" (sorry nicht topnav), nicht der Fall :(

#top hat doch gar keinen Verlauf? Der kommt doch durch die Hintergrundbilder der Tabs, oder seh ich da falsch? Von daher willst du *eigentlich* das Gegenteil: die Liste muss die volle Breite einnehmen und mit ihrem Hintergrundbild den verlauf fortsetzen. Allerdings bekomm ich unter der Hintergrundbild-Adresse nur ein "Die gesuchte Seite konnte leider nicht gefunden werden!"

hm, soll ich also doch auf eine Tabelle umschwenken?

Nein, schau lieber mal nach, was aus dem Hintergrundbild für die <ul> geworden ist. Danach die floats wieder entfernen, damit width:auto die Liste über die volle Breite streckt.

Gruß,

Harlequin

[gbennyb]

Hallo Harlequin,

Ja, Du hast Recht, aber das Problem liegt in den gegensaetzlichen Verlaeufen. Waehrend <top> und <logo> einem dunkelblau-Verlauf von oben nach unten folgt,
sind es bei dem <Content> Bereich und bei dem <TopMenu>-current_cat ein hellblauer Verlauf von links nach rechts, der unbedinbt ganz links aussen anfangen muss, sonst sieht es einfach seltsam aus.

Eigentlich mache ich den ganzen Aufwand nur wegen diesem "current_cat" (in dem Beispiel "Category 3"). Ich habe dort naemlich einen transparanten Button erzeugt der den Hintergrund von

#topmenu ul {
 background-image: url(images/hintergrund.png);
....

durchscheinen laesst (und ja, da war ein Fehler drinnen, das Bild gab es gar nicht, weshalb einfach der Hintergrund von der #page angezeigt wurde, was zufaelligerweise der Richtige war; aber das habe ich nun berichtigt).

ich versuche dass das #topmenu ul aeufhoert, wo der letzte Listenpunkt aufhoert und anschliessend

#topmenu {
 background-image: url(images/hintergrund_top_mit_logo.png) bottom left repeat-y;
....

den restlichen Hintergrund bildet. Geht das denn ueberhaupt, oder ist das eine Stufe zu viel? In meinem Kopf funktioniert es, aber da klappt immer einiges mehr als in echt ;)

Gruesse,
bennyb

[Harlequin]

Yerf!

Ja, Du hast Recht, aber das Problem liegt in den gegensaetzlichen Verlaeufen. Waehrend <top> und <logo> einem dunkelblau-Verlauf von oben nach unten folgt,
sind es bei dem <Content> Bereich und bei dem <TopMenu>-current_cat ein hellblauer Verlauf von links nach rechts, der unbedinbt ganz links aussen anfangen muss, sonst sieht es einfach seltsam aus.

Hm, hab mich n bissl verschaut, wie deine Verläufe zusammenhängen, aber langsam hab ich's glaub ich verstanden.

#topmenu {
background-image: url(images/hintergrund_top_mit_logo.png) bottom left repeat-y;
....

den restlichen Hintergrund bildet. Geht das denn ueberhaupt, oder ist das eine Stufe zu viel? In meinem Kopf funktioniert es, aber da klappt immer einiges mehr als in echt ;)

Im Prinzip schon, aber momentan hat dein #topmenu doch gar kein hintergrundbild, oder?

#topmenu {  
background-image:url(images/hintergrund_top_mit_logo.png);  
background-position:0px -115px;  
height:33px;  
margin:0pt;  
padding:0pt;  
}

Die Werte sind aus einer Testreihe mit FireBug entstanden, sollten aber zumindest einen passenden Verlauf ergeben. Nur dein aktueller Tab darf dann nicht mehr transparent sein (ist aber denk ich lösbar).

Ähm, streich den Abschnitt in Klammern... du hast ja nochmals einen Verlauf auf der Seite unten. Das wird vermutlich nicht gehen, da du ja für den aktuellen Tab dann den Hintergrund von #topmenu "durchbrechen" müsstest um den Hintergrund des darunter liegenden Elements anzuzeigen.

Eine Lösung könnte aber sein neben der gefloateten <ul> noch einen <div> zu plazieren und dem das Hintergrundbild zu geben. Ist zwar ein eigentlich sinnloses Element, das man eigentlich vermeiden sollte. Aber ohne einen Lückenfüller wirds wohl nicht gehen.

Gruß,

Harlequin