CSS spørsmål (<li>)

Tha_Zaynt · 3. november 2004

jeg har et lite problem med menyen min...den vil ikke vise seg bortover (horisontalt) bare nedover..

hvis dere ikke skjønte se her

CSS

*{
margin: 0;
padding: 0;
}

body{
margin: 5em;
}

#menu{
margin: 0 auto;
}

#menu ul{
list-style: none;
height: 12px;
overflow: hidden;
}

#menu li{
margin-top: 2px;
text-align: left;
}

#menu li a {
display: block;
overflow: hidden;
padding: 12px 0 0 0;
height: 0 !important;
height /**/ : 12px;
background-repeat: no-repeat;
}

#menu li a:hover {
background-position: 0 -12px;
}

.home{
background-image: url(images/home.png);
width: 47px;
}
.personal{
background-image: url(images/personal.png);
width: 67px;
}

.archive{
background-image: url(images/archive.png);
width: 60px;
}

.contact{
background-image: url(images/contact.png);
width: 57px;
}

<!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">
<head>
<title>Menytest</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style2.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="menu">
 <ul>
   <li><a class="home" href="#">Home</a></li>
   <li><a class="personal" href="#">Personal</a></li>
   <li><a class="archive" href="#">Archive</a></li>
   <li><a class="contact" href="#">Contact</a></li>
 </ul>
</div>
</body>
</html>

Arve Systad · 3. november 2004

sett float: left; på li

Tha_Zaynt · 3. november 2004

ahh..tror jeg skjønner..fordi ul'en automatisk collapser ved float?

funket iallefall..takker for raskt svar!

Endret 3. november 2004 av Tha_Zaynt

Tha_Zaynt · 3. november 2004

hmm..sjekket litt i forskjellige browsere,...menyen funka fint i Firefox(seff) og i IE(oversaksende nok, selv om resten av siden ser helt føkka ut), men ikke i Opera, der vises menyen fortsatt nedover...

Er det feil koden som gjør at siden ser helt feil ut i IE og delvis feil i Opera? Eller er det bare Opra og IE som ikke er helt i vater?

EDIT1: link

EDIT2: innlegg 404, lol

Endret 3. november 2004 av Tha_Zaynt

Simon Zimmermann · 3. november 2004

Glem det, så ikke editen din.

Skal se om jeg finner ut av det.

Endret 3. november 2004 av Waldmeister

FuLu · 3. november 2004

Dette er en bug i Opera Prøv å sett f.eks width: 100%; på UL'en?

http://www.quirksmode.org/css/tests/opera_float.html

Tha_Zaynt · 3. november 2004

satte width: 100%; på ul, men da funket det ikke, når jeg satte width: 100%; på #menu funket det, men da funka ikke float: right;...

du kan forresten følge linken nedenfor, der bruker jeg ikke width: 100% på noen elementer, men det funker likevel i Opera..

link

Endret 3. november 2004 av Tha_Zaynt

Tha_Zaynt · 3. november 2004

fungerer i firefox og opera nå...bare en ting vertical-align: bottom; fungerer ikke så godt i firefox, så bladet i bunnen kommer litt høyt opp...vil at det skal være ned i høyre hjørne..som i Opera.

FuLu · 3. november 2004

Lekte litt med inline UL LI, lærte litt nytt av det og Brukte ikke noe float i heletatt her nå, fungerer alt fra IE5.01, 5.5, 6 og FF1.0PR og Opera 7.54

http://home.chello.no/alexholm/hw.no/csstemp5/

Ellers styrer jeg hvor langt ned/opp de linkene i footer skal komme med bruk av padding i #footerN. Men eksemplet mitt er kanskje noe annerledes enn det du skal ha det. Slang på litt kommentarer i CSS'en og: http://home.chello.no/alexholm/hw.no/csstemp5/default.css

Haraldson · 3. november 2004

Funker med bare display:inline; på siden min og -> www.undeclined.net (All cred til FuLu )

Med float bugger det faktisk i Opera.

Edit: Det er fortsatt footeren min som brukes i eksempelet, ja. Uansett viser det at det funker i forskjellige sammenhenger, siden jeg vel har litt andre koder enn FuLu.

Endret 3. november 2004 av Mr.Berg

Tha_Zaynt · 3. november 2004

display: inline funka ikke på menyen til meg..men jeg fikk det til med float..problemet nå er at bladet (footeren) ikke holder seg ned i høyre hjørne (det funker i Opera) Se helt nederst på siden med oppløsning 800x600 i firefox så ser dere problemet...

link

FuLu · 3. november 2004

Edit: Det er fortsatt footeren min som brukes i eksempelet, ja.

Hehe jo, gadd ikke endre farger eller linker fra forrige test jeg mekka

@Tha_Zaynt: Ser at du har <div id="blad"></div> etter <div id="contentbottom"></div>, hva med å bytte dem plass? For #contentbottom har clear: both; i seg, og denne skal jo vel hindre at #blad kommer utenfor?

Ellers kræsja den siden totalt i IE6.

Tha_Zaynt · 3. november 2004

har ikke begynt på buggene i IE enda, IE nedprioriteres Men det meste av buggene i IE skyldes doublefloated margin (eller hva det nå het..) Enste buggen jeg ikke skjønner er glippen mellom #content og #contenttop...

Tha_Zaynt · 3. november 2004

@Tha_Zaynt: Ser at du har <div id="blad"></div> etter <div id="contentbottom"></div>, hva med å bytte dem plass? For #contentbottom har clear: both; i seg, og denne skal jo vel hindre at #blad kommer utenfor?

Det tror jeg blir feil, husk at #contentbottom ikke er en footer men bunnen på den runde boksen innholdet står i..

Logg inn

CSS spørsmål (<li>)

Anbefalte innlegg

Tha_Zaynt

Lenke til kommentar

Videoannonse

Arve Systad

Lenke til kommentar

Tha_Zaynt

Lenke til kommentar

Tha_Zaynt

Lenke til kommentar

Simon Zimmermann

Lenke til kommentar

FuLu

Lenke til kommentar

Tha_Zaynt

Lenke til kommentar

Tha_Zaynt

Lenke til kommentar

FuLu

Lenke til kommentar

Haraldson

Lenke til kommentar

Tha_Zaynt

Lenke til kommentar

FuLu

Lenke til kommentar

Tha_Zaynt

Lenke til kommentar

Tha_Zaynt

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer