Problemer med display inline

oyvindardal · 18. desember 2008

Hei jeg holder på med en helt enkel sak her, og vil ha 4 bokser på rad ved siden av hverandre som skal vises inline. Jeg har brukt en UL og vil at hver av de fire LI skal vises INLINE. Men uansett hva jeg prøver på, så kommer boksene under hverandre :S Noen hjelp å få?

Kode:

<html>

<head>

<title>HAFFEN.no</title>

</head>

div.nav

{

width: 80px;

height: 20px;

background-color: #1485CC;

border: 2px solid #0971B2;

}

li.inline

{

display: inline;

padding-left: 3px;

padding-right: 7px;

border-right: 1px dotted #066;

}

</style>

<body>

<ul>

</ul>

</body>

</html>

PHPdude · 18. desember 2008

Selv om du har satt liste-elementene til inline, så er allikevel <div>'ene innafor block-elementer, det er der problemet ligger.

<div> betegner en ny seksjon av siden, og vises naturlig som et block-element, men det virker ikke som du egentlig lister opp en mengde side-seksjoner. Viss du absolutt trenger en wrapper inni liste-elementene dine bør du heller bruke <span>.

Haraldson · 18. desember 2008

I tillegg vil IE* komme til å trenge float: left; på li-ene og elementene inni li-ene for å vise dette korrekt.

Vurder også om du trenger class="inline" på hvert listeelement, eller om du kanskje klarer deg med en ID eller en klasse på ul-en.

oyvindardal · 18. desember 2008

Skjønte ikke helt hva du mente.

Hvordan, på beste måte, lager jeg en slik navigasjon som på vedlagt bilde?

PHPdude · 18. desember 2008

<ul class="navigation">
<li>Lenke</li>
<li>Lenke</li>
<li>Lenke</li>
<li>Lenke</li>
</ul>

.navigation li {
display:inline; /* Evt. inline-block, men da sier IE stopp */
}

Endret 18. desember 2008 av PHPdude

oyvindardal · 18. desember 2008

<ul class="navigation">
<li>Lenke</li>
<li>Lenke</li>
<li>Lenke</li>
<li>Lenke</li>
</ul>

.navigation li {
display:inline; /* Evt. inline-block, men da sier IE stopp */
}

Takk, men hvordan få bokser med bakgrunnsfarge og ramme bak linkene?

Haraldson · 18. desember 2008

display: inline; og float: left; på li, display: block; og float: left; på a. Deretter kan du sette boks-stilene dine på a.

oyvindardal · 19. desember 2008

Jeg er veldig nybegynner, skjønner ikke helt hva du mener med a etc :S Kan noen gi meg en forklaring (for DUMMIES) hvordan jeg får til den menyen jeg har bilde av?

PHPdude · 19. desember 2008

Det blir meningsløst for oss å guide deg gjennom grunnleggende ting du uansett er nødt til å lære deg ordentlig skal du drive med webutvikling. Ta deg heller den høyst nødvendige tiden til å lese deg ordentlig opp på HTML og CSS: http://htmldog.com/guides/ er greie, også har du http://dev.opera.com/articles/view/1-intro...ndards-cur/#toc som er en del tyngre, men av desto bedre kvalitet.

Logg inn

Problemer med display inline

Anbefalte innlegg

oyvindardal

Lenke til kommentar

Videoannonse

PHPdude

Lenke til kommentar

Haraldson

Lenke til kommentar

oyvindardal

Lenke til kommentar

PHPdude

Lenke til kommentar

oyvindardal

Lenke til kommentar

Haraldson

Lenke til kommentar

oyvindardal

Lenke til kommentar

PHPdude

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer