kostenloser Webspace werbefrei: lima-city

CSS Menü erstellen

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

1. Autor dieses Themas

   mmc

   mmc hat kostenlosen Webspace.

   21:24, 12.10.2009

   Ich möchte ein menü der Form: abcd | abcd | abcd
   erstellen, wobei "abcd" für einen Link steht
   
   css definiton:
   

   /*Topmenü rechts*/
   
   div#topmenurechts{
   	font-size: 12px;
   	margin-top: 10px;
   	float: right;
   	color: #000000;
   	font-weight: bold;
   	width: 30%;
   	float: right;
   	text-align: right;
   }
   
   #topmenurechts { 
   	margin: 0; 
   	padding: 0;
   }  
   #topmenurechts ul, #topmenurechts li{ 
   	padding: 0;
   	display: inline-block; 
   	list-style-type: none;
   }  
   #topmenurechts a:link, #topmenurechts a:visited { 
   	float: right; 
   	line-height:0px; 
   	font-weight: normal; 
   	padding: 7px 0 2px 0; 
   	margin: 0px 2px 0px 10px; 
   	color: #0066cc; 
   	text-decoration: none;
   	font-size: 12px; 
   	text-align: center;
   	} 
   #topmenurechts #akt{ 
   	margin-top: 0px; 
   	color: #0066cc; 
   	border-top: 0px solid #000000; 
   	border-bottom: 0px solid #000000;
   	font-size: 12px; 
   } 
   #topmenurechts a:hover, #topmenurechts a:hover#akt { 
   	margin-top: 0px; 
   	color: #063b83; 
   	border-top: 0px solid #000000; 
   	border-bottom: 0px solid #000000;
   	font-size: 12px; 
   }

   
   
   wie kann ich dann noch die senkrechten Striche ( | ) einfügen (mit abstand)
   
   mmc
   

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

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

3. illuxio

   

   illuxio hat kostenlosen Webspace.

   21:50, 12.10.2009

   indem du sagst
   
   

   #topmenurechts li{
   padding: 0;
   padding-left: 5px;
   padding-right: 5px;
   display: inline-block;
   list-style-type: none;
   }
   
   #topmenurechts li + li{
   border-left-width: 1px;
   border-left-color: #000000;
   border-left-style: solid;
   }
   

   
   
   Fett ist das was neu ist:
   
   li + li heißt nur, dass es nur für ein li gilt, wenn vor diesen schon ein solches steht
   Siehe: http://de.wikipedia.org/wiki/Cascading_Style_Sheets#Definition_des_Syntaxschemas
   
   Gruß
   illuxio
4. Autor dieses Themas

   mmc

   mmc hat kostenlosen Webspace.

   20:20, 13.10.2009

   code sieht jetzt so aus:
   

   div#topmenurechts{
   	font-size: 12px;
   	margin-top: 10px;
   	float: right;
   	color: #000000;
   	font-weight: bold;
   	width: 30%;
   	float: right;
   	text-align: right;
   }
   
   #topmenurechts { 
   	margin: 0; 
   	padding: 0;
   }  
   #topmenurechts ul, #topmenurechts li{ 
   	padding: 0;
   	display: inline-block; 
   	list-style-type: none;
   }  
   #topmenurechts a:link, #topmenurechts a:visited { 
   	float: right; 
   	line-height:0px; 
   	font-weight: normal; 
   	padding: 10px 0 2px 0; 
   	margin: 0px 2px 0px 10px; 
   	color: #0066cc; 
   	text-decoration: none;
   	font-size: 12px; 
   	text-align: center;
   	} 
   #topmenurechts #akt{ 
   	margin-top: 0px; 
   	color: #0066cc; 
   	border-top: 0px solid #000000; 
   	border-bottom: 0px solid #000000;
   	font-size: 12px; 
   } 
   #topmenurechts a:hover, #topmenurechts a:hover#akt { 
   	margin-top: 0px; 
   	color: #063b83; 
   	border-top: 0px solid #000000; 
   	border-bottom: 0px solid #000000;
   	font-size: 12px; 
   }
   
   #topmenurechts li{ 
   	padding-top: 0px;
   	padding-left: 5px;
   	padding-right: 5px;
   	display: inline-block; 
   	list-style-type: none;
   } 
   
   #topmenurechts li + li{ 
   	border-left-width: 1px;
   	border-left-color: #000000;
   	border-left-style: solid;
   }

   
   
   ich möchte aber jetzt den | ein wenig weiter unten platzieren. wie geht das?
   

5. psd

   psd hat kostenlosen Webspace.

   9:09, 14.10.2009

   wie meinst du das weiter unten ?? den " | " unterhalb des textes oder wie ??
   
   
   
   Beitrag zuletzt geändert: 14.10.2009 9:20:57 von psd

6. e********l

   9:24, 14.10.2009

   [quoteich möchte aber jetzt den | ein wenig weiter unten platzieren. wie geht das?[/quote]
   Gar nicht. Jedenfalls nicht als Text-Element. Du kannst die Art und Weise wie ein Zeichen gezeichnet wird nicht direkt beeinflussen. Du könntest zwar versuchen mit Zeilenabstand und all den Gedöhns herumzuwerkeln, aber wenn das Pipe Zeichen direkt an der Kante ansetzen soll empfiehlt es sich eine Grafik oder auf einen Border zurückzugreifen.

7. psd

   psd hat kostenlosen Webspace.

   9:41, 14.10.2009

   ich hab da noch was
   
   wenn du ganz einfach das tasten-zeichen | verwendest gehts auch
   lösch einfach das li+li und vergess den boarder
   
   

   <ul><li>LINK</li>|<li>LINK</li>|<li>LINK</li><ul>

   
   
   LINK | LINK | LINK
   
   also ich persöhnlich würde es so machen. Somit hast du den oberen rand des textes auf der höhe des | gemacht oder so versuchs einfach mal im browser!
   
   edit// dazu kannst du dann auch noch die größe der striche durch einen span definieren.
   
   

   .bold {
   	line-height: 20px;
   	vertical-align: top;
   	font-size: 20px;
   }

   
   
   html
   

   <ul><li>LINK</li><span class="bold">|</span><li>LINK</li><span class="bold">|</span><li>LINK</li><ul>

   
   
   Beitrag zuletzt geändert: 14.10.2009 9:51:04 von psd
8. Autor dieses Themas

   mmc

   mmc hat kostenlosen Webspace.

   16:21, 15.10.2009

   ok geht schon!
   danke
   
   
   Beitrag zuletzt geändert: 16.10.2009 20:27:04 von mmc

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

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

Dir gefällt dieses Thema?