kostenloser Webspace werbefrei: lima-city

Border um Inline-UL mit Zeilenumbruch

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   primenic

   primenic hat kostenlosen Webspace.

   17:13, 15.8.2010

   Hallo,
   
   ich habe auf meiner Homepage ein Navigationsmenü mit einer UL verwirklicht. Nun wollte ich, dass die Aufzählungstag/element">elemente der Liste in einer Reihe angezeigt werden. (CSS-> display: inline;...) So weit ist alles i.o. Wenn ich aber so viele Menüpunkte habe, dass ein automatischer Zeilenumbruch eingefügt wird, dann kann ich mit der CSS-Border Eigenschaft keinen Rahmen mehr um die gesamte Liste machen(, sondern nur um die erste Zeile).
   
   Gibt es eine Möglichkeit die Elemente einer UL in einer Reihe anzuzeigen und dabei die UL (vollständig) zu umranden?
   
   PS: Wenn von UL die rede ist, ist natürlich das HTML-Tag <ul> gemeint

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. limabone

   

   limabone hat kostenlosen Webspace.

   18:33, 15.8.2010

   Klar gibt es das
   Du hast Beispielsweise eine Liste mit 8 Elementen:

   <ul id="menu">
    <li><a href="#">Hallo</a></li>
    <li><a href="#">Hallo</a></li>
    <li><a href="#">Hallo</a></li>
    <li><a href="#">Hallo</a></li>
    <li><a href="#">Hallo</a></li>
    <li><a href="#">Hallo</a></li>
    <li><a href="#">Hallo</a></li>
    <li><a href="#">Hallo</a></li>
   </ul>

   und dann noch den CSS Code. Ich empfehler dir das ganze nicht mit display:inline; zu machen, benütz stattdessen lieber float:left; dann kannst du bei den Link elementen <a> display: block machen und das gesamte Segment <li> größer machen, was du bei display: inline; nie und nimmer machen könntest.

   ul {
    border: none;
   }
   
   ul#menu li {
    float: left;
    padding: 0;
   }
   
   ul#menu li a {
    padding: 10px;
    text-decoration: none;
    color: #000;
    border: 1px solid#000;
    /* DAMIT NICHT ALLE ELEMENTE ANEINANDER KLEBEN*/
    margin-right: 5px;
   }

4. Autor dieses Themas

   primenic

   primenic hat kostenlosen Webspace.

   19:11, 15.8.2010

   So habe ich doch aber den Rahmen um die einzelnen Links und nicht um die ganze Liste?
   
   Also ich habe momentan folgendes in der HTML-Datei stehen:
   
   

   <div id="nav_detail">
   	{DETAILMENU}
   </div>

   
   ({DETAILMENU} wird mit einer automatisch generierten <ul> ersetzt.)
   
   und in der CSS das:
   
   

   #nav_detail {
   	background: #858F9E;
       margin: 0; 
       padding: 0;
       height: 2.2em;
   	border: 5px solid #ee0000;
   }
   #nav_detail ul {
   	padding:0px;
   	background: #858F9E;
   	/*display: inline;*/
   	display: block;
   }
   #nav_detail li {
   	list-style-type: none;
   	line-height: 20px;
   	padding: 0;
   }
   #nav_detail li a {
   	color: #ddd;
   	font-weight: bold;
   	text-decoration: none;
   	border-right: 4px solid #eee;
   	border-bottom: 4px solid #eee;
   	padding: 3px 8px;
   	float: left;
   	/*display: block;*/
   	background-color: #858F9E;
   }

   
   
   Und als Ergebnis kommt das raus: http://primenic.lima-city.de/error_e2.png
   
   Beitrag zuletzt geändert: 15.8.2010 19:30:42 von primenic

5. nemoinho

   

   nemoinho hat kostenlosen Webspace.

   4:32, 16.8.2010

   das ist kein Problem, wenn du mit CSS etwas erfahrener bist, das geheimnis ist "overflow:hidden;"

   ul { overflow:hidden; }
   ul li { float:left; }

   Und "display:inline;" ist zwar manchmal ganz nützlich, aber wenn du Elemente nebeneinander plazieren willst eher ungeeignet.
6. Autor dieses Themas

   primenic

   primenic hat kostenlosen Webspace.

   17:09, 16.8.2010

   Hmm.
   Ich weiß nicht obs an mir liegt, aber ich hab jetzt display:inline rausgenommen und overflow:hidden; hinzugefügt.
   Aber jetzt wird nur die letzte "Zeile" angezeigt: http://primenic.lima-city.de/error_e3.png
   
   Das kann doch nicht so schwer sein
   
   PS: Ich habs auch mit den aktuellen Versionen von Firefox/Safari/Opera/MS-IE/G-Chrome versucht. Bei allen ein gleiches/ähnliches Problem.
   
   
   EDIT: Ah sorry, glaub ich hab was flasch gemacht
   Werds jetzt nochmal "richtig" versuchen, dann meld ich mich nochmal.
   
   EDIT2: Ja hab vorher vergessen, die height-Eigenschaft von "#nav_detail" rauszunehmen. Jetzt gehts. Danke für die Hilfe.
   
   Beitrag zuletzt geändert: 16.8.2010 17:49:40 von primenic

7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?