Hvordan gjøre denne menyen om til CSS?

[carro]

Hei!

 

Noen som vet hvordan jeg koder denne menyen i CSS? Hva er greiest å bruke? Lister?

 

 

 

På forhånd takk!

[halvardm]

Bruk lister ja.

Og her må du bruke span tagger.

 

http://css.maxdesign.com.au/listamatic/ <-- Sjekk den linken og jobb deg ut fra det. Les gjennom det som står på den siden. Du lærer mye da.

[carro]

Mange takk! Skal ta en kikk på den.

[haugsand]

For meg virker dette som en definisjonsliste:

 

<dl>
 <dt>Hverdagen</dt>
 <dd>Et innblikk i tre studentforeldres hverdag.</dd>
</dl>

 

Stylinga av overskriftene og teksten skal gå greit, men du kan komme borti noen problemer når du skal begynne med layouten.

 

Den letteste løsningen vil være å bruke to dl-lister, én for hver kolonne, som plasseres ved siden av hverandre ved hjelp av float: left;

[carro]

Tusen takk! Jeg går heller for definisjonsliste, jeg. Hvordan lager jeg to ulike definisjonslister? Går det an å lage disse som klasser?

[Arve Systad]

Tusen takk! Jeg går heller for definisjonsliste, jeg. Hvordan lager jeg to ulike definisjonslister? Går det an å lage disse som klasser?

Sett klasser eller IDer på kver overskrift (dl-elementet)sida du skal ha forskjellig farge på teksten der

 

Du kan sette klasser/IDer på alle elementer

[carro]

Takker for alle svar igjen! Jeg har nå forsøkt meg på definisjonsliste, men jeg får rett og slett ikke til å plassere de ulike menyvalgene ved siden av hverandre.

 

Nå ser menyen slik ut:

 

 

CSS koden er slik:

 

/* Menyvalg venstre*/


dl. blaa {
padding: 1px;
margin-top: 15px;
margin-left:-10px; 
} 






dt.blaa { 
padding: .4em 4% 2em 5%; 
margin: 0 0 -25px -20px;  
font-weight: bold; 
color: #85D5F2;
font-size: 1.0em;
} 


dt.oransje { 
padding: .4em 4% 2em 5%; 
margin: 0 0 -25px -20px;  
font-weight: bold; 
color: #FFBA00;
font-size: 1.0em;
} 



dt.rosa { 
padding: .4em 4% 2em 5%; 
margin: 0 0 -25px -20px;  
font-weight: bold; 
color: #FF76BA;
font-size: 1.0em;
} 


dd.rosa { 
padding: .4em 4% 1em 5%; 
margin: 0; 
font-size: 0.7em;
clear: left; 
width: 50%;
} 



/* Menyvalg høyre*/


dl.gronn {
width: 50%;
float: right; 
padding: 1px;
margin-top: 15px;
margin-left:0px; 
} 




dt.gronn { 
padding: .4em 4% 2em 5%; 
margin: 0 0 -25px 0;  
font-weight: bold; 
color: #BFE04E;
font-size: 1.0em;
} 




dd.gronn { 
padding: .4em 4% 1em 5%; 
margin: 0; 
font-size: 0.7em;
clear: right; 
} 





dt.brun { 
padding: .4em 4% 2em 5%; 
margin: 0 0 -25px 0;  
font-weight: bold; 
font-size: 1.0em;
color: #D96D17;
} 




dd.brun { 
padding: .4em 4% 1em 5%; 
margin: 0; 
font-size: 0.7em;
clear: right; 
} 



dt.blaagraa { 
padding: .4em 4% 2em 5%; 
margin: 0 0 -25px 0;  
font-weight: bold; 
font-size: 1.0em;
color: #6F9DBC;
} 




dd.blaagraa { 
padding: .4em 4% 1em 5%; 
margin: 0; 
font-size: 0.7em;
clear: right; 
} 

 

 

HTML-koden er slik:

 

 

<dl class="blaa">
<dt class="blaa">Hverdagen</dt>
<dd class="rosa">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the 

industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 

to make a type specimen book. </dd>



<dt class="oransje">Studentaktiviteter</dt>
<dd class="rosa">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the 

industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 

to make a type specimen book. </dd>

<dt class="rosa">Særordninger</dt>
<dd class="rosa">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the 

industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 

to make a type specimen book. </dd>

</dl>




<dl class="gronn">
<dt class="gronn">Økonomi</dt>
<dd class="gronn">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been 

the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled 

it to make a type specimen book. </dd>

<dt class="brun">Lenker</dt>
<dd class="brun">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the 

industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 

to make a type specimen book. </dd>


<dt class="blaagraa">Om denne siden</dt>
<dd class="blaagraa">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been 

the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled 

it to make a type specimen book. </dd>

</dl>

 

Noen som ser hva jeg gjør galt?

[haugsand]

la begge dl-elemtenene få float: left;

[carro]

Beklager, jeg som formulerte meg noe upresist her. Jeg ønsker å ha menyen slik jeg viste i det første bildet i dette innlegget, dvs. at "Hverdagen", "Studentaktiviteter" og "Særordninger" er plassert til venstre. Rett ved siden av denne teksten, til høyre, ønsker jeg å ha valgene "Økonomi", "Lenker" og "Om denne siden". Problemet er at menyvalgene til høyre ikke plasserer seg rett ved siden av menyvalgene til venstre.

 

Jeg ser det at jeg glemte float på dl-elementene til menyvalgene på venstre side, men det hjalp uansett ikke. Noe annet jeg kan gjøre?

[Gronz]

Du må bruke "clear: none;".

[carro]

Takk for svar! Men det fungerer ikke det heller. Har forsøkt å sette det inn på både dl, dt og dd.

 

Lurer på om jeg skal droppe definisjonslister heller... Finnes det en enklere måte å gjøre det på?

[halvardm]

Ja, udefinerte lister.

<ul>