Knappene mine vises ikke etterhverandre

[kake_fisk]

Dette er min kode:

<div class="menu">
hello
</div>
<div class="menu">
hello
</div>

 

menu klassen innholder dette:

cursor: pointer;
text-align: center;
font-weight: bold;
background: #FFFFFF;
border: 1px solid black;
margin: 1px;
width: 20%;

 

Men knappene mine vises under hverandre og ikke ved siden av hverandre, noen som vet hvorfor?

[Haraldson]

Dette er veldig grunnleggende.

 

Skal du ha to blokkelementer, slike som div-elementene er, til å ligge ved siden av hverandre, må du på en eller annen måte si at de skal gjøre nettopp det.

 

Jeg foreslår float: left;

 

 

Dette er uansett som en veldig dårlig måte å lage en meny på. Sjekk ut denne siden om lister, og begynn på nytt.

Endret 29. september 2008 av Haraldson

[kake_fisk]

Mener du at jeg skal bruke en liste til å lage meny?

Vil de ikke komme under hverandre da?

 

Edit: Jeg fant den her:

list-style-type: none;

Tror du jeg kan bruke den?

 

 

Meen hvorfor er det galt med den måten jeg gjorde det før?

Endret 29. september 2008 av kake_fisk

[Haraldson]

Det gir ikke mening å ha en div for hver side du skal lenke til i en meny. En meny er en utlisting av sider på et nettsted, ergo bruker man en liste.

 

list-style: none; på ul samt float: left; display: inline; på li skulle fungere bra.

[PHPdude]

Mener du at jeg skal bruke en liste til å lage meny?

Vil de ikke komme under hverandre da?

HTML er et format for å definere innholdet og strukturen på en webside, utseendet/presentasjonen av innholdet er ikke hva HTML er bygd for.

Det er ganske tricky å få ordentlig grep på det, men utseendet av siden bør altså knapt være i tankene dine i det hele tatt når du bygger HTML, men kun hva som er den mest logiske strukturen for innholdet ditt.

 

Hvorfor spør du kanskje, og det er flere grunner, men den letteste å forklare er at man ved å definere utseendet på et sentralt sted har enkel mulighet til å gjøre omfattende endringer og å lage alternative stiler til det samme innholdet, for f.eks utskrift eller mobil-tilpasset utseende.

 

Det er altså CSS som er løsningen for å style innholdet, Haraldson ga deg noen hint som bør løse akkurat dette problemet.

[kake_fisk]

Det gjorde faktisk det, takk for svaret

Men så er det jo det med å kunne trykke på knappen, kan jeg ikke bruke onClick?

Men isåfall hvor skal jeg putte den?

 

Edit:

Jeg fant det ut

<li class="menu" onclick="parent.location='http://www.google.com'
">Home</li>

Endret 29. september 2008 av kake_fisk

[PHPdude]

Javascript brukes absolutt ikke til å lage lenker, lenker defineres med <a>

<li class="menu"><a href="http://www.google.com">Home</a></li>

 

http://dev.opera.com/articles/view/1-intro...ndards-cur/#toc

http://dev.opera.com/articles/view/18-html...-s-build-a-web/

[Steinmann]

Utrolig god lærdom å bruke class="menu" på <li> istedenfor <ul> PHPdude.

 

Man bør alltid prøve å bruke minst mulig klasser for å motvirke classmania.

[PHPdude]

Jeg gjorde med vilje eksempelet mitt så likt kake_fisk sitt jeg kunne for å unngå forvirring.

 

Uansett er det ikke noe mål i seg selv å bruke minst mulig klasser, de skal brukes der det gir mening.

Du har selvfølgelig rett i at menu bør settes på listen og ikke hvert enkelt element.

[kake_fisk]

@PHPdude

men vil ikke det gjøre sånn at jeg bare kan trykke på teksten ikke selve kanppen?

 

@Steinmann

jeg kunne heller bare gjort hele <li> om til meny, men da kunne jeg ikke bruke flere lister på siden.

men det er nødvendig å ha den i <li> fordi jeg lager jo knappene med border og background.

 

Her er siden min, hvis du lurer på hvilke knapper jeg tenker på.

Du kan også se at jeg har byttet til nedover meny.

Og at det er et par feil med margin eller noe sånnt.

http://www.sacredwater.uni.cc/files/SacredWater.htm

[Haraldson]

Du kan jo sette akkurat samme stilene på a som på li. Sett display: block; på a.

[kake_fisk]

Ojaa, det tenkte jeg ikke på

 

Men når jeg prøvde det ble det mye mer annerledes enn med å bare bruke <li> til å lage knappene.

Men jeg skjønner egentlig ikke hva som er galt med javascript :o

[Thomas.]

Enkelt å greit skriver du: display:inline; på <li> elementet, i css.

 

Eksempel:

 

<style type="text/css">
ul#meny {
widht:500px;
margin:0 auto;
}

ul#meny li{
display:inline;
}

ul#meny li a{
padding:5px;
}
</style>


<ul id="meny">
<li><a href="">test;)</a></li>
<li><a href="">test;)</a></li>
<li><a href="">test;)</a></li>
<li><a href="">test;)</a></li>
</ul>

Endret 4. oktober 2008 av php_user