Permalänk

css problem!

Hej,
Nu är jag frustrerad. Jag har suttit i timmar och googlat men jag bli inte klok.
Meny.php:

<ul> <li><a id="meny" href="#">FOTO</a> </li> <li><a id="meny" href="#">FILARKIV</a> </li> <li><a id="meny" href="#">DATORRELATERAT</a> </li> <li><a id="meny" href="#">KONTAKT</a> </li> <li><a id="meny" href="#">SKOLA</a> </li> </ul>

style.css:

#meny a { display:block; width:9em; background: #000000; color: #ffffff; } #meny li { display:inline; } #meny ul { list-style-type:none; margin:0; padding:0; }

index.php:

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="sv"> <head> <title>Alexander Andersson datorexpert/fotograf</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="sidhuvud">ALEXANDER ANDERSSON</div> <div id="meny"> <?php include 'meny.php'; ?> </div> <div id="kolumn2">Välkommen till min digitala lekplats.</div> </body> </html>

Jag försöker göra en vågrät meny av "meny.php", varför fungerar inte "display : inline"? Det kan ju inte ha med php include att göra eftersom de andra ul/li/a attributen fungerar.

Tack på förhand!

Visa signatur

6600K@4,5GHz 1,25V | EVGA 980Ti | Samsung 950 Pro m.2

Permalänk
Medlem

Du lägger block-element i dina inline-element. Det fungerar inte, som du kanske märker. Testa att sätta display: inline-block på dina a-element istället.

Permalänk
Skrivet av You:

Du lägger block-element i dina inline-element. Det fungerar inte, som du kanske märker. Testa att sätta display: inline-block på dina a-element istället.

Tack,
Det fungerar nu om jag sätter inline-block på både li och a-element. Men inte om man bara gör på a-elementen.

Visa signatur

6600K@4,5GHz 1,25V | EVGA 980Ti | Samsung 950 Pro m.2

Permalänk
Medlem

Om du måste ha dina a-taggar som blockelement (för att exempelvis sätta marginal på dem), kan du prova att sätta float:left på dina li-taggar. Då kan även dessa vara block. Det medför dock andra egenheter du kanske inte önskar, men det är en avvägning man får göra.

Permalänk
Medlem

id="meny" kan du bara ha en av i varje dokument. Du får använda class istället.
edit: lösning

<div id="meny"> <ul> <li><a href="#">FOTO</a> </li> <li><a href="#">FOTO</a> </li> <li><a href="#">FOTO</a> </li> <li><a href="#">FOTO</a> </li> <li><a href="#">FOTO</a> </li> </ul> </div>

#meny a { display: inline; width:9em; background: #000000; color: #ffffff; } #meny li { display:inline; } #meny ul { list-style-type:none; margin:0; padding:0; }

Permalänk
Medlem
Skrivet av jocke92:

id="meny" kan du bara ha en av i varje dokument. Du får använda class istället.

Det TS nog egentligen bör göra är att bara ta bort id:t från a-elementen.

Permalänk
Skrivet av You:

Det TS nog egentligen bör göra är att bara ta bort id:t från a-elementen.

Jag har gjort det nu. Här har ni hemsidan, så att ni kan se fräsch kod: http://tomtenalle.kicks-ass.net

Visa signatur

6600K@4,5GHz 1,25V | EVGA 980Ti | Samsung 950 Pro m.2