css problem!

2010-06-08 15:34

Permalänk

tomten_alle

Medlem

Plats: Norrland
Registrerad: Jun 2006

●

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

Rapportera Redigera

Citera flera Citera

2010-06-08 15:48

Permalänk

You

Medlem

Plats: Göteborg
Registrerad: Jan 2007

●

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.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Rapportera Redigera

Citera flera Citera

2010-06-08 16:18

Permalänk

tomten_alle

Medlem

Plats: Norrland
Registrerad: Jun 2006

●

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.

Gå till inlägget

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

Rapportera Redigera

Citera flera Citera

2010-06-08 16:25

Permalänk

johey

Medlem

Plats: Stockholm
Registrerad: Feb 2004

●

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.

Rapportera Redigera

Citera flera Citera

2010-06-08 16:36

Permalänk

jocke92

Medlem ★

Registrerad: Dec 2008

●

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;
}

Senast redigerat 2010-06-08 17:37

Visa signatur

Car pc (bygglogg) | Fishtank server (galleri) | HTPC (galleri)

Rapportera Redigera

Citera flera Citera

2010-06-08 17:20

Permalänk

You

Medlem