Eget stilark for spesifikk oppløsning?

[Kimmeham]

Jeg vet at det går an å lage egne spesifikke stilark for hver nettleser.

Hvordan er mulighetene for hver oppløsning?

[Ståle]

Det går ikke an med vanlig (X)HTML. Men du kunne jo eventuelt ha et lite form med radiobuttons som de kunne velge hvilken oppløsning de bruker, og så lagre den verdien i databasen for senere besøk.

Endret 31. januar 2007 av Ståle

[eigan]

Du kan bruke prosent på forskjellige størellser.

 

Eks:

 

stil {

width: 80&;

font-size: 90%;

}

 

Hvis du skjønner..

[Vindstille]

A List Apart har en fin guide om det. Men den forutsetter at man bruker Javascript. Mao. bør du også ha et stilsett som passer til de fleste oppløsninger for folk som har skrudd av javascript.

[Kimmeham]

Du kan bruke prosent på forskjellige størellser.

 

Eks:

 

stil {

width: 80&;

font-size: 90%;

}

 

Hvis du skjønner..

7837005[/snapback]

Hvordan fungerer dette?

[Svinat]

Det er slik at bredden dekker f.eks 80% av siden i nettleseren, slik som i eksempelet over. Dette blir da altså 80% uansett oppløsning.

[Kimmeham]

Bruker % i stilsettet, men Mr. Chief snakket noe om %&. Var det det du snakket om, Svinat?

[Svinat]

Jeg er ganske sikker på at Mr.Chief mente prosent men skrev & med et uhell.

[Kimmeham]

Åja, da så!

Men altså, problemet løser seg ikke av %. Noen som kan hjelpe meg? Siden validerer, og alt er egentlig fryd og gammen.

Problemet er noen bokser jeg har øverst på denne siden. Alt ettersom hvilken oppløsning (og nettleser) vi snakker, så blir bredden (ikke høyden) forskjellig.

[Ståle]

Det er vel litt feil å bruke <p>-taggen til menyen. Bruk heller <ul>

 

Har du ihvertfall satt margin:0; og padding: 0; ?IE setter default padding

[Kimmeham]

Jepp, bruker margin og padding:0;.

Når det gjelder dette med menyen, bruker jeg en hvit border på høyresiden av boksene for å få de stå fra hverandre. For å unngå en kjedelig hvit strek på høyre ende, måtte jeg ta i bruk <p> til dette, altså lage 2 forskjellige typer bokser.

 

Tar i mot andre måter å gjøre dette på med stor glede!

[Ståle]

hvit border?

 

ul li {

margin-right: 2px;

}

 

burde vel klare den biffen? også mange classes hvis de skal være forskjellig.

[Kimmeham]

Har aldri vært borti ul li før. Hvordan lager man klasser med dette?

[Ståle]

ul li betyr bare li-elementene som er inni ul-elementer

Sånn at koden ikke forstyrrer eventuelle <ol>-elementer.

 

Koden blir da à la:

 

<ul>

<li class="forste">Hjem</li>

<li>neste</li>

<li>vanlige</li>

<li>link</li>

<li class="siste">siste</li>

</ul>

[Kimmeham]

Ja det vet jeg. Men mener i css. blir det da

.ul li forste {

blabla

}

?

[Ståle]

nei

 

ul li.forste {

}

[Dustwave]

gjør livet lett for deg selv, bruk JS til den oppgaven...

[eigan]

Du har en veldig rar css...

 

Det er en grunn til at du starter siden din med

 

* {
margin: 0;
padding 0;
}

 

da nullstiller du alle margin og padding, trenger ikke skrive margin 0; noen andre steder da

 

Men du kan bytte ut:

ul li .ende a

ul li a

#midtbolk

 

Så legger du inn

Klikk for å se/fjerne innholdet nedenfor

#midtbolk ul {

text-align:left;

background-image:url(menybg.png);

background-repeat: repeat-y;

background-position:right;

width:600px;;

border-left: 1px solid #000;

border-right: 1px solid #000;

background-color:#FFF;

min-height:100%;

float:left;

}

 

#midtbolk ul li .ende {

background-color:#5a9caf;

list-style-type:none;

font-family: "Century Gothic";

font-size:18px;

color:#000;

text-decoration:none;

display:block;

padding-top:10px;

width:98px;

height:25px;

float:left;

list-style: none;

}

#midtbolk ul li a {

display:block;

list-style-type:none;

background-color:#5a9caf;

font-family: "Century Gothic";

font-size:20px;

color:#000;

text-decoration:none;

width:98px;

height:25px;

padding:10px 0 0 0;

margin-right:2px;

float:left;

text-align:center;

}

 

*Du kan sikkert kutte ned mye på den koden der også

 

EDIT:

Klikk for å se/fjerne innholdet nedenfor

#midtbolk ul {

background-image:url(menybg.png);

background-repeat: repeat-y;

background-position:right;

width:600px;;

border-left: 1px solid #000;

border-right: 1px solid #000;

background-color:#FFF;

min-height:100%;

float:left;

font-family: "Century Gothic";

list-style-type: none;

}

 

#midtbolk ul li .ende {

background-color:#5a9caf;

font-size:18px;

text-decoration:none;

width:98px;

height:25px;

float:left;

}

#midtbolk ul li a {

display:block;

background-color:#5a9caf;

font-size:20px;

text-decoration:none;

width:98px;

color:#000;

height:25px;

padding:10px 0 0 0;

margin-right:2px;

float:left;

text-align:center;

}

Endret 4. februar 2007 av Mr Chief