Avatar billede gurvic Nybegynder
19. august 2006 - 00:28 Der er 9 kommentarer og
1 løsning

% eller px?

Sidder og prøver at lave et lækkert design til en side, men hvordan gør jeg så den bliver vist ens i de forskellige browsere og samtidig tager højde for skærmopløsningen. tænker her, sætter jeg left, height, top, width i % eller i px oder was?
Pt ser det således ud:

body {
    background-color: #CCCCCC;
}


#topmenubillede {
background-color: #CCCCCC;
    position:absolute;
    top:10%;
    height:20%;
    width:10%;
    left:15%;
}

#topmenu {
background-color: white;
    position:absolute;
    top:10%;
    height:20%;
    width:60%;
    left:25%;
    font-size:50;
    font-family:verdana, arial, sans-serif;
    font-weight:bold;
    text-align:center;
    text-valign:center;

}

#venstremenu {
background-color: #CCCCCC;
    position:absolute;
    width: 10%;
    left:15%;
    top:30%;
    height:60%;
}


#hovedmenu{
background-color: #CCFF99;
    position:absolute;

    top:30%;
    height:55%;
    width:60%;
    left:25%;


    font-size:14;
    font-family:verdana, arial, sans-serif;
    font-weight:bold;
}

#bundmenu{
background-color: #CCCCCC;
    position:absolute;

    top:85%;
    left:15%;
    width:70%;
    height:5%;
    }

Men det ser sørme da skidt ud i mozilla mens IE ser det ok ud. Tænker her kun på de forskellige bokse's placering ;)
Avatar billede jesper-moeller Nybegynder
19. august 2006 - 00:31 #1
Hvad med at prøve at bruge em ??

Hvis body skrift størelsen er =100% og brugeren standart sørelse font er 16px ... så er 1 em = 16 px ;-)
På denne måde vil siden vises i størelse ud fra brugeren internet indstillinger
Avatar billede gurvic Nybegynder
19. august 2006 - 00:34 #2
Argh hvordan gør man det, mht at placere boksene?
Avatar billede mclemens Nybegynder
19. august 2006 - 00:39 #3
du skal nok have en:
html,body{margin:0px;padding:0px;height:100%;} sat ind ... men vil du skal være enig med dig selv om du vil køre height 100% og hvordan strukturen skal se ud og hvordan boksene skal placeres - når du har postet struktur forslaget er det guld værd at poste et link til et billede af hvordan det skal se ud - og hvordan det skal se ud m.h.t. scrollbarer - kombineret med lidt tekst sammen med indlægget ...

... hvis du vil rode med height:100%; hvilket jeg ikke selv normalt foretrækker så finder jeg lige et link ... men jeg plejer selv at bruge floats...
Avatar billede mclemens Nybegynder
19. august 2006 - 00:42 #4
( eksempel med height:100%; http://www.eksperten.dk/spm/717767 )
Avatar billede mclemens Nybegynder
19. august 2006 - 00:48 #5
(( så er der height 100% med tables men der driller doctype typisk... http://www.eksperten.dk/spm/716493 , alternativet er javascript alignment m.v. der er også lidt forskellige eksempler herinde http://www.eksperten.dk/spm/726088 ... men som sagt - bruger normalt selv floats og et billede og lidt test markup at flytte på vil hjælpe i tråden her))
Avatar billede mclemens Nybegynder
19. august 2006 - 00:59 #6
Forstår ikke denne her:
[ Men det ser sørme da skidt ud i mozilla mens IE ser det ok ud. Tænker her kun på de forskellige bokse's placering ;) ] Jeg synes at IE så skidt ud uden html,body{margin:0px;padding:0px;height:100%;} mens Firefox så ok ud, men det er selvfølgelig smag og behag :D

Husk at have en fuld doctype så IE ikke er i quirks ... hvordan vil du have elementerne placeret - som de står eller? % udvider sig jo afhængig af opløsningen ... og det bør dine billeder jo så også gøre - men et billede der udvider / minimerer sig "kan" få pixelerings problemer ... og jeg foretrækker af den årsag et centreret design i en fast width - og så undgå det med % en smule ... men igen, smag og behag :o)
(optimerer selv til 1024x nu ... synes at de sidste<10% skulle udvide skærm opløsning fra 800x - og evt. øge skriftstørrelse eller lege med et windows loop når det går galt - medmindre man er svagt seende...)



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">

html,body{margin:0px;padding:0px;height:100%;}
body {
    background-color: #CCCCCC;
}


#topmenubillede {
background-color: #CCCCCC;
    position:absolute;
    top:10%;
    height:20%;
    width:10%;
    left:15%;
}

#topmenu {
background-color: white;
    position:absolute;
    top:10%;
    height:20%;
    width:60%;
    left:25%;
    font-size:50;
    font-family:verdana, arial, sans-serif;
    font-weight:bold;
    text-align:center;
    text-valign:center;

}

#venstremenu {
background-color: #CCCCCC;
    position:absolute;
    width: 10%;
    left:15%;
    top:30%;
    height:60%;
}


#hovedmenu{
background-color: #CCFF99;
    position:absolute;

    top:30%;
    height:55%;
    width:60%;
    left:25%;


    font-size:14;
    font-family:verdana, arial, sans-serif;
    font-weight:bold;
}

#bundmenu{
background-color: #CCCCCC;
    position:absolute;

    top:85%;
    left:15%;
    width:70%;
    height:5%;
    }
</style>

<script type="text/javascript">

</script>

</head><body>
<div id="topmenubillede">topmenubillede</div>
<div id="topmenu">topmenu</div>
<div id="hovedmenu">hovedmenu</div>
<div id="venstremenu">venstremenu</div>
<div id="bundmenu">bundmenu</div>
</body></html>
Avatar billede gurvic Nybegynder
19. august 2006 - 12:12 #7
mclemens det var lige præcis de tanker jeg kørte rundt i igår aftes. Er godt klar over det hele ser skidt ud lige nu, var også kun ment som ex. Altså tænkte om det var godt i % eller hvodan så? og især mht billeder, men er kommet frem til, også efter dit svar at det nok er bedre at undgå det, og så bruge fast width og optimere til 1024.
Så smid et svar :) og takker for hjælpen
Avatar billede mclemens Nybegynder
19. august 2006 - 12:19 #8
Velbekom, her er et svar :o)
[ og optimere til 1024. ] Eller 800
... men det er vel snart "passe" :/
Avatar billede gurvic Nybegynder
19. august 2006 - 12:29 #9
Ja det er jo nok rigtig nok ;)
Avatar billede mclemens Nybegynder
19. august 2006 - 12:30 #10
Tak for point :o)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester