✔ UL-Liste einrahmen

R

RolfD

Hallo zusammen,

ich bin noch recht "neu" mit CSS und gerade dabei, eine 3-Spaltige Seite mit Kopf zu basteln, in der die linke Spalte ein Navi-Menu (als unsort Liste) erhalten soll. Kopf, Menuspalte und Hautspalte sind da, stehen auch hablwegs richtig.

Ich möchte aber einen einfachen Rahmen um alle Menupunkte haben (also im die gesamte Navigation).

Ich habe also einen DIV-Cont. gemacht, wo die Navi-Punkte untereiander stehen, liststyle auf "none", um die Listenpunkte wegzubekommen. Funtioniert alles.

Aber wie und ggf. wo muss ich die Border-Regel hinstellen? Egal, wo ich die Hinstelle, egal ob ich die Linie dick oder dünn mache, es erschein kein Rahmen. :(

Übrigens ist für den "Body" ein schwarzer Hintergrund definiert, dem Nav-Bereich habe ich ein leichtes Grau gegeben, damit man die Ausdehnung und Position sehen kann. Das soll aber später wieder weg, si dass der Rahmen frabigt auf Schwar erscheinen würde (border-color: yellow, oder sowas).

Hauptproblem ist allein, dass einfach kein Rahmen erzeugt wird, nicht mal ein falscher....

Vielen Dank schon mal,

Rolf

Kann mit da jemand einen Hinweis geben?
 
Hi,

eigentlich sollte es ausreichen, die border-Eigenschaft auf das <ul>-Element anzuwenden.

Falls innerhalb dieses Element die float-Eigenschaft zum Einsatz kommt, muß die Floatumgebung abschliessend aufgehoben ("gecleart") werden, damit der Rahmen das Element in voller Höhe umschließt - siehe hierzu meinen Webmaster-FAQ-Artikel CSS Warum passt sich die Boxenhöhe nicht dem Inhalt an?

Und wie sieht dein Versuch nun konkret aus?

mfg Maik
 
Hallo Maik,

erst mal danke für die Hinweise, ich muss es noch mal probieren, habe es gerade nicht vor mir. Float kommt natürlich mindestens im Haupttext-Teil vor, evtl aber auch links in der Navi spalte ("left"). Uch habe solwas bisher nur ohne Ragmen gemacht, das geht alles. Vilelleicht kann ich mal ein Stück Code hier reinkopieren.

Ich komme aber erst säter oder morgen dazu!

Besten Dank noch mal,

Rolf


Maik hat gesagt.:
Hi,

eigentlich sollte es ausreichen, die border-Eigenschaft auf das <ul>-Element anzuwenden.

Falls innerhalb dieses Element die float-Eigenschaft zum Einsatz kommt, muß die Floatumgebung abschliessend aufgehoben ("gecleart") werden, damit der Rahmen das Element in voller Höhe umschließt - siehe hierzu meinen Webmaster-FAQ-Artikel CSS Warum passt sich die Boxenhöhe nicht dem Inhalt an?

Und wie sieht dein Versuch nun konkret aus?

mfg Maik
Zum Vergrößern anklicken....
 
Hallo Maik,

da bin ich wieder. Es folgt nur ein Teil des Codes. Es sind die Definitionen und ein kleines Stück Haupttext, was ja richtig erscheint.

Was man nicht sieht: Der Haupttext ist mit "/div" abgeschlossen, danach kommt, ebenfalls als DIV-Container, der Inhalt der rechten Spalte. Der klebt momentan einfach unten drunter, weil er nich keinerlei besondere Formatierung hat.

------------------------ ab hier Code Ausschnitt

body {
background-color: black;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
#kopf {
background-color: silver;
color: gray;
}

#navi {

background-color: silver;
border-color: Window;
border-width: thick;
width: 10em;
float: left;
margin-left: 3px;
display: inline;
}


#Haupttext {
width:80%;
padding: 4px;
text-align: left;
}


.ulmenue {
list-style-type:none;
margin-left:0px;
padding-left: 0px;
}


</style>
</head>
<body alink="#000088" link="#0000ff" vlink="#ff0000">
<div id="kopf"><h1 >Mk Black Horse Nomads g.e.V.</h1></div>
<div id="navi">
<div>
<ul class="ulmenue">
<li>Impressum</li>
<li>Start</li>


..... hier einige Listenpunkte weggelassen ..........

<li>Kalender</li>

</ul></div>
</div>
<div id="Haupttext">Dieses hier wird die Hauptspalte, wo das Bild mit dem Gaul steht.

------------- Hier Ende des Code-Ausschnitts ----------------

Wenn Du Dich wundern solltest, dass es zwei DIVs umeinender gint, um den Navi-Bereich; Das habe ich genacht, als der Rahmen nicht erschien, in der Hoffnung, dadurch einen "Aussenconräiner" zu erhalten, dem man allein der Rahmen geben kann, und in dem dann die Navigation eingebettet würde.

Hat aber im Browser (Firefox 3) keinerlei optische Veränderung gebracht.

Villeicht habe ich auch bloss ein en Flüchtigkeitfehler gemacht, eine fehlende schliessende Klammer hatte ich bereits selber gefunden und inzwischen eingesetzt. Und der hellgraue Hintergrund um die Navi ist nur, damit man sehen kann, wo sie zu stehen kommt und welchen Raum sie einnimmt, einen gelben Rand würde man ja auf dem Grau trotzdem sehen...

So, ich hoffe das obige gibt ein wenig mehr Aufschluss als die reine verbale Beschreibung.

Schon mal schönen Dank, wenn Du was findest....

Gruss
Rolf

Maik hat gesagt.:
Das wäre von Vorteil, um dir hier konkret weiterhelfen zu können ;)

mfg Maik
Zum Vergrößern anklicken....
 
Falls es dir um den Rahmen für #navi geht, dort fehlt eine Angabe zum Rahmentyp, weshalb die Browser keinen Rahmen darstellen:

CSS: 
#navi {
background-color: silver;
border-color: Window;
border-width: thick;
border-style: solid; /* Rahmentyp */
width: 10em;
float: left;
margin-left: 3px;
display: inline;
}


mfg Maik
 
Oh!

Vielen Dank erst mal für die schnelle Antwort, habe es gar nicht bemerkt.....

Ich versuche es mal damit und melde mich ggf. nich mal kurz.

Schöne Grüße

Rolf


Maik hat gesagt.:
Falls es dir um den Rahmen für #navi geht, dort fehlt eine Angabe zum Rahmentyp, weshalb die Browser keinen Rahmen darstellen:

CSS: 
#navi {
background-color: silver;
border-color: Window;
border-width: thick;
border-style: solid; /* Rahmentyp */
width: 10em;
float: left;
margin-left: 3px;
display: inline;
}


mfg Maik
Zum Vergrößern anklicken....
 
Hallo Maik!

Spät in der Nacht - konnte nicht schlafen, fiel mir ein, noch mal "Danke" zui sagen :)

Denn Dein Tip war goldrichtig. Eigentlich ein simpler Fehler. Ich hatte angenommen, dass der Rahmen nur dann wegbleiben würde, wenn man dafür beim Style "none" sagt, war mit aber nicht klar, dass man generell einen Style angeben muss, auch wenn man ger keine besondere Form will.

Ich habe viele Sachen mit NOF (alle Versionen bis 10) gemacht, wo ja auch CSS eingesetzt wird, aber das eher "im Hintergrund". Dies ist meine erste Seite, die ich seit langem mal wieder "freihändig" mache, wenn auch mit Hilfe von Topstyle und Phase 5.

Das ist aber eher fürs bequeme codieren und eine gewisse Sicherheit gegen Schreibfehler (Syntax).

Eigentlich soll hinter dem gelben Rahmen noch mal ein weisser zu liegen kommen, natürlich ensprechend breiter. Deswegen ja auch meine Überlegungen mit den verschachtelten DIVs. Die Lösung scheint mir allerdings kritisch, weil ich nicht weiss, wie sich das auf die anderen wichtigen Elemente der Seite auswirkt, bzw. die Positionierung der Elemente.

Der Mensch, der mir die Vorgaben gegeben hat, ist sich eh noch unschlüssig. Ich möchte es als "Übung" aber trotzdem realisieren.

Also nochmal schönen Dank für die schnelle und Gründliche Hilfe

Rolf
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück