Problem mit Listen (HTML/CSS)

[Wullschi]

Hallo

Ich möchte gerne eine Liste als Navigation verwenden. Die Liste erstreckt sich aber nicht über die ganze Zelle. Weiss vieleicht jemand wie ich das hinbekomme? hier klicken

Ich habe diesen html-code verwendet:

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current"><font class="text5" id ="text5">Aquarell-Art</font></a></li>
<li><a href="#"><font class="text5" id ="text5">News</font></a></li>
<li><a href="#"><font class="text5" id ="text5">Bilder</font></a></li>
<li><a href="#"><font class="text5" id ="text5">Grusskarten</font></a></li>
<li><a href="#"><font class="text5" id ="text5">Die K&uuml;nstlerin</font></a></li>
<li><a href="#"><font class="text5" id ="text5">Kontak</font></a></li>
<li><a href="#"><font class="text5" id ="text5">Impressum</font></a></li>
<li><a href="#"><font class="text5" id ="text5">Partner</font></a></li>
</ul>
</div>

zur gestaltung habe ich diesen CSS-Code verwendet:

#navcontainer { /* none needed */ }

ul#navlist
{
margin: 0;
padding: 0;
list-style-type: none;
white-space: nowrap
}

ul#navlist li
{
float: left;
font-family: verdana, arial, sans-serif;
font-size: 9px;
font-weight: bold;
margin: 0;
padding: 5px 0 4px 0;
background-color:#FAC4C2;
border-top: 1px solid #FBB1B0;
border-bottom: 1px solid #FBB1B0;
}

#navlist a, #navlist a:link
{
margin: 0;
padding: 5px 9px 4px 9px;
color: #000000;
border-right: 1px dashed #FBB1B0;
text-decoration: none;
}

ul#navlist li#active
{
color: #000000;
background-color: #FC4A46;
}

#navlist a:hover
{
color: #000000;
background-color: #FC4A46;
}

mfg Wullschi

 

[DarkDonald]

Wo liegt hier das Problem? Die Navigation scheint doch soweit ok zu sein. Vielleicht steh ich ja auch auf der Leitung und erkenne dein Problem nicht...

 

[Wullschi]

Die Navi sollte sich über die ganze Zelle erstrecken, und nicht kurz davor enden.

 

[norbi]

Du meinst die Zeilenhöhe des a:hover Effekts (würde ich jetzt aus Design-Sicht so sehen)?

Meiner CSS-Anfängermeinung nach, brauchst Du ein "display: block;" in "ul#navlist li". Dann sollte der ganze "Block" ge-hover-ed werden, auch wenn man nur den Bereich, ähem block, mit der Maus trifft, nicht unbedingt nur den Link-Text.

Meiner weiteren CSS-Anfängermeinung nach, mußt Du für die Navigation nicht unbedingt eine Liste in HTML erstellen (machen aber viele).

No.

 

[DarkDonald]

Ja...dann hab ich wohl nur die hälfte gelesen...
Ich würd die Links halt über ne Tabelle machen und nicht als Liste. ( Also jeden Link in einen eigenen Rahmen.
Dann kann mans auch schön Ausrichten.

 

[norbi]

mit CSS geht's doch wunderbar, warum also Tabellentechnik aus dem letzten Jahrtausend?

No.

 

[Mauki]

ich klinke mich mal hier ein. Ich probiere gerade ne neuen navigation mit ner Liste aus, aber irgendwie hat es mir das Layout zerschossen. Wer weiß wo hier das Problem liegt.

Webseite
Stylesheet

 

[norbi]

@mauki:
mit
body {padding: 0;}
bekommst Du die Seite randlos.

Die Zwangsbreite von 950px finde ich nicht so gut.

mit margin: 0; bekommst Du die Abstände weg, sowohl bei <p> als auch bei Deinem p.kopf.

... hab's aber nur mal kurz so überflogen.

"Style Master" finde ich übrigens Klasse zum Editiren von CSS.

No.

 

[Mauki]

@norbi

ich will die Seiten doch nicht randlos, hab mich vielleich falsch ausgedrückt. Ich hätte gerne das nach der Navigation der Rest der Seite drunter kommt und nicht links drunter ganze schmal ? Ist dir auch aufgefallen, das die Seite total scheisse aussieht ???

 

[norbi]

Aaah ja, mit Safari ging's noch ganz gut, mit Firefox sieht's eher vielleicht nicht ganz so toll aus ("Herzlich willkommen..." ist rechts ganz schmal neben der Navileiste).

Deine table.start enthält keine float-Anweisung. Normalerweise isses so (schlauere verbessern mich hier bitte), daß Du mit float: left; oder float: right; steuerst, wie die Elemente verteilt werden. Hast Du zwei Elemente, die "left floaten", werden diese untereinander platziert, also z. B.:

HTML:
<div id="eins"> blablabla </div>
<div id="zwei"> blablabla </div>

CSS 1. Version, platziert Elemente untereinander
#eins {flaot; left;}
#zwei {flaot; left;}

CSS 2. Version, platziert Elemente nebeneinander, eben einer links, einer rechts:
#eins {flaot; left;}
#zwei {flaot; right;}

Ich habe mich jetzt nicht in Deinen Quelltext vertieft, vor allem, weil Du (auch..) mit tables gearbeitet hast, die bekanntlich sehr schwer zu lesen sind.

No.

 

[Wullschi]

@Mauki:

Dein Problem liegt nicht beim css sondern beim html.
Ich hab da mal was "korrigiert" (ich hoffe ich habs nicht verschlimmert ).
Die Navigation habe ich in die Tabelle gepackt und die 4 zellen mit
colspan="4" verbunden
den pfad zur css datei must du einfach noch korrigieren (den hab ich geändert)
klick hier

mfg Wullschi

 

[Mauki]

@norbi

ich hab das mal mit float probiert dann passt es fast, allerdings hängt dann die Fußzeile über der Navigation. Irgendwie stehe ich gerade auf dem Schlauch.

@Wullschi
ne die Navigation in ner Tabelle will ich nicht.

Ich glaube ich muß das nochmals etwas überarbeiten, aber das dauert mindestens ne Woche habe leider in den nächsten Tagen keinen Zeit mehr dafür.

 

[norbi]

Die Reihenfolge im HTML-Code ist natürlich wichtig. Wenn die Fußzeile eine bestimmmte Breite hat, kann die dann eigentlich nur am Ende der Seite auftreten.

Hast eine neue Version Deiner Seite (URL)?

Empfehle übrigens nochmal "Style Master" ;-), nicht spezifisch, ganz allgemein.

No.