kostenloser Webspace werbefrei: lima-city

CSS Ich hab ne Blockade im Kopf. Bitte helfen.

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

1. Autor dieses Themas

   noll

   noll hat kostenlosen Webspace.

   14:49, 27.9.2006

   Also eigentlich ganz einfach.
   
   Ich h?tte gerne ein Men? in der Form
   
                 |               |
   Eintrag 1 | Eintrag 2 | Eintrag 3 | ... | Eintrag n
   
   Dabei sollen die | keine Pipes sein, sondern eine border, ein image oder was Euch einf?llt. Mir f?llt nix mehr ein. Die | sollen nur zwischen den Eintr?gen sein, keiner am Anfang keiner am Ende. Das Men? soll sp?ter in einem CMS benutzt werden, also dynamisch aufgebaut werden. Aber noch bin ich am Template bauen.
   
   Ich h?tte den HTML-Code gerne so.
   
   <div class="level-1-normal">Eintrag 1</div>
   <div class="level-1-active">Eintrag 2</div>
   <div class="level-1-normal">Eintrag 3</div>
   ...
   <div class="level-1-normal">Eintrag n</div>
   
   Kann ich das mit CSS alleine so gestalten?
   
   Ach so, der aktive Men?punkt hat immer eine border rechts und links. Egal ob er
   vorne oder hinten oder in der Mitte steht. Bzw. k?nnte das auch direkt ?ber das background-image gel?st werden.
   
   Aja und das mir der Schriftausrichtung klappt. das habe ich mit einem margin-top bei den inaktiven ?nd einem padding-top bei dem aktiven Men?punkt gel?st. Es geht also nur um die Border, oder was auch immer zwischen den Men?punkten.
   
   
   Beitrag ge?ndert: 27.9.2006 14:58:01 von noll

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

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

3. e********l

   14:32, 28.9.2006

   das ist ganz einfach.
   Du erstellst einen DIV Container der alle Menuelemente zusammenh?lt, und dann erstellst du f?r jeden Menupunkt einen weiteren DIV Container. Diese ben?tigen die Style-Eigenschaft "display: inline". Das Padding/Margin kannst du dann nach belieben bestimmen. F?r das aktive Element f?gst du einfach einen weiteren Style dem Class Attribut hinzu.
4. Autor dieses Themas

   noll

   noll hat kostenlosen Webspace.

   19:07, 3.10.2006

   Das Problem bleibt dabei leider auch bestehen. Denn wenn ich den inline-elementen ein margin gebe, dann bezieht sich das auch auf das Elternelement und das hei?t ich bekomme einen Abstand zu diesem und damit auch einen Strich.
   
   Gel?st habe ich das Problem jetzt so:
   
   Ich habe die Menuitems mit float:left ausgerichtet. Dann jedem ein border-left:1px solid #xxx gegeben. Somit hatte ich nur links einen Strich zuviel. Daf?r habe ich dann einen extra div spendiert der genau so gro? war wie die Border und die Hintergrundfarbe des Men?s hatte. Dieser div hat dann die ?bersch?ssige Border ?bermalt.
   
   Das ist vielleicht nicht das sch?nste Vorgehen, aber es hat funktioniert.
   
   Vielen Dank dennoch evil-devil, wenn ich irgendetwas falsch verstanden haben sollte bin ich f?r ein anders Design immer offen.
   
   Deins hab ich mal so umgesetzt.
   
   CSS
   

   .menu-background{
   	margin:0;
   	padding:0;
   	margin-left:100px;
   	height:20px;
   	background-color:black;
   }
   
   .menu-item{
   	margin:0 1px 0 0;
   	padding:0 6px;
   	display:inline;
   	background-color:yellow;
   	height:40px;
   }

   
   
   HTML
   

   <div class="menu-background">
   	<div class="menu-item" class="active">Active Menu Item</div><div
   	class="menu-item" class="inactive">Inactive Menu Item</div><div 
   	class="menu-item" class="inactive">Inactive Menu Item</div><div
   	class="menu-item" class="inactive">Inactive Menu Item</div>
   </div>

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

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

Dir gefällt dieses Thema?