kostenloser Webspace werbefrei: lima-city


CSS Menü erstellen

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    mmc

    mmc hat kostenlosen Webspace.

    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. 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.

    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. 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

    [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. 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 :-D 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.

    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?

Über lima-city

Login zum Webhosting ohne Werbung!