|
|
 | Skalerings-spørgsmål
Fra : Cifly |
Dato : 29-12-05 17:48 |
|
Solen er stået op for mig og jeg har set lyset; jeg skal skalere mit site,
så det følger brugerens ønsker og valg, ift. tekststørrelse og ændring af
browservinduets størrelse.
Mit spørgsmål er nu, hvor jeg i min CSS kode skal sætte ind, hvis ikke
overalt. Jeg har ændret skrifttyper fra px til em - så er det på plads. Men
mine divs etc. skalere ikke og forsøg med at ændre body, wrapper etc. fra px
til em og % - gik mildt sagt ikke så godt.
Hvis i gider at kaste et blik på min css og smide et par konstruktive
kommentarer, så skal jeg nævne jer i min aftenbøn - eller i hvertfald være
taknemlig 
Stylesheet:
http://www.flygenrings.dk/css/Standard_style_v2.1.css
--
www.flygenrings.dk
"Sometimes, when you lose, you win." - What Dreams May Come
| |
 Allan Vebel (29-12-2005)
| Kommentar
Fra : Allan Vebel |
Dato : 29-12-05 22:52 |
|
Cifly skrev:
> Solen er stået op for mig og jeg har set lyset; jeg
> skal skalere mit site
Det er et flot lys, ikke?
> Mit spørgsmål er nu, hvor jeg i min CSS kode skal
> sætte ind, hvis ikke overalt.
Du behøver faktisk kun at angive det ét sted, det er i
body, så bliver det nedarvet til alle andre elementer,
og du kan så definere noget andet i andre elementer
hvis det ønskes.
body{
font-size:0.75em;
margin:0;
padding:0;
font-family:verdana,arial,sans-serif;
}
så er du dækket godt ind. Selv plejer jeg at bruge font-
size mellem 0.8em og 1em, ellers kan det blive for småt.
Jeg tror i den forbindelse at din line-height:20px; kan være
det der driller her. Prøv med line-height:1.2em; eller hvad
der nu passer.
> Men mine divs etc. skalerer ikke og forsøg med at ændre
> body, wrapper etc. fra px til em og % - gik mildt sagt ikke
> så godt.
Bortset fra linjehøjden ser det da fint ud i IE. Så længe der
er plads til teksten i dine bokse, gør det ikke noget at
teksten laver linjeskift, bare der ikke er noget der dækker
noget andet, og det kan jeg ikke se at noget gør.
> Stylesheet:
> http://www.flygenrings.dk/css/Standard_style_v2.1.css
Jeg har kun fundet
http://www.flygenrings.dk/css/Standard_style.css
Det andet link er dødt. Se i øvrigt mine kommentarer i
tidligere tråde vedrørende <li> og <div>! Tag en ting ad
gangen - du skal nok nå at blive færdig med den fart du
har på 
--
Allan Vebel
http://html-faq.dk
| |
Cifly (01-01-2006)
| Kommentar
Fra : Cifly |
Dato : 01-01-06 21:50 |
|
Allan Vebel skrev:
>> Cifly skrev:
>>
>> Solen er stået op for mig og jeg har set lyset; jeg
>> skal skalere mit site
>>
>> Mit spørgsmål er nu, hvor jeg i min CSS kode skal
>> sætte ind, hvis ikke overalt.
> Du behøver faktisk kun at angive det ét sted, det er i
> body, så bliver det nedarvet til alle andre elementer,
> og du kan så definere noget andet i andre elementer
> hvis det ønskes.
>
> body{
> font-size:0.75em;
> margin:0;
> padding:0;
> font-family:verdana,arial,sans-serif;
> }
>
> så er du dækket godt ind. Selv plejer jeg at bruge font-
> size mellem 0.8em og 1em, ellers kan det blive for småt.
>
> Jeg tror i den forbindelse at din line-height:20px; kan være
> det der driller her. Prøv med line-height:1.2em; eller hvad
> der nu passer.
>
> Bortset fra linjehøjden ser det da fint ud i IE. Så længe der
> er plads til teksten i dine bokse, gør det ikke noget at
> teksten laver linjeskift, bare der ikke er noget der dækker
> noget andet, og det kan jeg ikke se at noget gør.
Jeg har nu ændret præcist ift. dine forslag. Men eneste tydelige ændring er
skrifttype (fra arial til verdana) og linie højde. hvis jeg trækker i
browser kanterne, skalerer min tekst ikke, men forsvinder lige så stille og
rolig ud i det uvisse.
--
Venlig hilsen www.flygenrings.dk
"Sometimes, when you lose, you win." - What Dreams May Come
| |
 Allan Vebel (02-01-2006)
| Kommentar
Fra : Allan Vebel |
Dato : 02-01-06 00:23 |
|
Cifly skrev:
>> Du behøver faktisk kun at angive det ét sted
> Jeg har nu ændret præcist ift. dine forslag. Men
> eneste tydelige ændring er skrifttype (fra arial til
> verdana) og liniehøjde
Det er meningen at body{} skal ligge øverst i koden,
og så skal du slette alle andre forekomster af font-
size: og font-family: - så skulle alle elementer gerne
nedarve det du skriver i body{} - undtaget den lidt
mindre skrift i #copyrightnote{}.
> hvis jeg trækker i browser kanterne, skalerer min
> tekst ikke
Det skal den heller ikke gøre. Den skal kun skalere
skriftstørrelsen hvis du bruger Vis => Tekststørrelse
=> Mindst | Mindre | Mellem | Større | Størst - eller
holder Ctrl-tasten nede mens du bruger scrollhjulet på
musen (Internet Explorer). Andre browsere er opbygget
på en anden måde.
> men forsvinder lige så stille og rolig ud i det uvisse.
Det er fordi dokumentet har en fast bredde i #wrapper{
på 755px. Skal det også være skalerbart på den led, skal
du bygge det op på en helt anden måde.
Du kan ikke gøre skriftstørrelsen større eller mindre ved
ved at ændre på browservinduets bredde.
--
Allan Vebel
http://html-faq.dk
| |
Cifly (02-01-2006)
| Kommentar
Fra : Cifly |
Dato : 02-01-06 08:48 |
|
Allan Vebel skrev:
>> hvis jeg trækker i browser kanterne, skalerer min
>> tekst ikke
> Det skal den heller ikke gøre. Den skal kun skalere
> skriftstørrelsen hvis du bruger Vis => Tekststørrelse
> => Mindst | Mindre | Mellem | Større | Størst - eller
> holder Ctrl-tasten nede mens du bruger scrollhjulet på
> musen (Internet Explorer). Andre browsere er opbygget
> på en anden måde.
>> men forsvinder lige så stille og rolig ud i det uvisse.
> Det er fordi dokumentet har en fast bredde i #wrapper{
> på 755px. Skal det også være skalerbart på den led, skal
> du bygge det op på en helt anden måde.
>
> Du kan ikke gøre skriftstørrelsen større eller mindre ved
> ved at ændre på browservinduets bredde.
Det var egentlig det denne tråd gik ud på. Jeg indser nu at jeg har
formuleret mig forkert.
Nå. Men jeg fik da noget ud af det alligeve
Men spørgsmålet er netop, hvor jeg sætter ind for at lave mit site
"skalerbart" således at det hele ændre sig såfremt bruger trækker i
kanterne?
--
Venlig hilsen www.flygenrings.dk
"Sometimes, when you lose, you win." - What Dreams May Come
| |
Tidemann (02-01-2006)
| Kommentar
Fra : Tidemann |
Dato : 02-01-06 10:56 |
| | |
Cifly (02-01-2006)
| Kommentar
Fra : Cifly |
Dato : 02-01-06 16:54 |
|
Tidemann skrev:
>> Men spørgsmålet er netop, hvor jeg sætter ind for at lave mit site
>> "skalerbart" således at det hele ændre sig såfremt bruger trækker i
>> kanterne?
> Hvis du kigger på www.formdinfremtid.dk ,
> http://www.ragdollys-cat-link.dk/velkommen.shtml og
> http://www.royalmontana.dk/hunkatte.shtml kan du se at de er skalerbare!!
>
> Du kan ikke have et bannerbillede i fast bredde og lave resten skalerbart.
> Så
> skal du skære billedet over som jeg har gjort på
> http://www.royalmontana.dk
> selve forsiden består af to billeder der overlapper hinanden.
Jeg er sikker på at jeg har set sider hvor det faste billede forsvinder,
mens teksten kryber sammen, når vinduet "skaleres". Bl.a. på
http://www.quirksmode.org/ (dog er jeg ikke sikker på tekniken bag - om
billedet er delt eller noget andet). Men har set flere hvor det virker.
--
Venlig hilsen www.flygenrings.dk
"Sometimes, when you lose, you win." - What Dreams May Come
| |
Cifly (02-01-2006)
| Kommentar
Fra : Cifly |
Dato : 02-01-06 19:36 |
|
Cifly skrev:
>> Tidemann skrev:
>> Hvis du kigger på www.formdinfremtid.dk ,
>> http://www.ragdollys-cat-link.dk/velkommen.shtml og
>> http://www.royalmontana.dk/hunkatte.shtml kan du se at de er skalerbare!!
>>
>> Du kan ikke have et bannerbillede i fast bredde og lave resten
>> skalerbart. Så
>> skal du skære billedet over som jeg har gjort på
>> http://www.royalmontana.dk
>> selve forsiden består af to billeder der overlapper hinanden.
> Jeg er sikker på at jeg har set sider hvor det faste billede forsvinder,
> mens teksten kryber sammen, når vinduet "skaleres". Bl.a. på
> http://www.quirksmode.org/ (dog er jeg ikke sikker på tekniken bag - om
> billedet er delt eller noget andet). Men har set flere hvor det virker.
Også webdesign101.dk kan klare opgaven. Igen ved jeg ikke hvordan det er
lavet.
--
Venlig hilsen www.flygenrings.dk
"Sometimes, when you lose, you win." - What Dreams May Come
| |
Tidemann (02-01-2006)
| Kommentar
Fra : Tidemann |
Dato : 02-01-06 20:22 |
| | |
Jørgen Farum Jensen (02-01-2006)
| Kommentar
Fra : Jørgen Farum Jensen |
Dato : 02-01-06 22:42 |
|
Cifly wrote:
>>Jeg er sikker på at jeg har set sider hvor det faste billede forsvinder,
>>mens teksten kryber sammen, når vinduet "skaleres". Bl.a. på
>> http://www.quirksmode.org/ (dog er jeg ikke sikker på tekniken bag - om
>>billedet er delt eller noget andet). Men har set flere hvor det virker.
>
>
> Også webdesign101.dk kan klare opgaven. Igen ved jeg ikke hvordan det er
> lavet.
>
Jeg kan ikke rigtig finde ud af, hvad det er du efterspørger, men hvis du
refererer til f.eks. min forside, der har et baggrundsbillede af Discory i
sidehovedet, er det indsat som et gange almindeligt CSS-baggrundsbillede:
div#banner {
position:absolute;
width:100%;
height:130px;
left:0;
top:0;
background-color:#2F414D;
background-image:url(/www/res/shuttle.jpg);
background-position:left top;
background-repeat:no-repeat;
border-bottom:1px solid black;}
I øvrigt har jeg skrevet en længere artikel om forskellige
metoder til at lave en grafisk baggrund:
http://www.webdesign101.dk/www/background/index.php
--
Med venlig hilsen
Jørgen Farum Jensen
http://www.webdesign101.dk
| |
Cifly (04-01-2006)
| Kommentar
Fra : Cifly |
Dato : 04-01-06 23:05 |
|
Jørgen Farum Jensen skrev:
>>>Jeg er sikker på at jeg har set sider hvor det faste billede forsvinder,
>>>mens teksten kryber sammen, når vinduet "skaleres". Bl.a. på
>>> http://www.quirksmode.org/ (dog er jeg ikke sikker på tekniken bag - om
>>>billedet er delt eller noget andet). Men har set flere hvor det virker.
>> Også webdesign101.dk kan klare opgaven. Igen ved jeg ikke hvordan det er
>> lavet.
> Jeg kan ikke rigtig finde ud af, hvad det er du efterspørger, men hvis du
> refererer til f.eks. min forside, der har et baggrundsbillede af Discory i
> sidehovedet, er det indsat som et gange almindeligt CSS-baggrundsbillede:
>
> div#banner {
> position:absolute;
> width:100%;
> height:130px;
> left:0;
> top:0;
> background-color:#2F414D;
> background-image:url(/www/res/shuttle.jpg);
> background-position:left top;
> background-repeat:no-repeat;
> border-bottom:1px solid black;}
Det jeg er ude efter er at kunne skalere min tekst ligesom på din side,
således at teksten tilpasser sig når bruger trækker i browservinduet og gør
det smallere eller bredere. Tidemann foreslår at jeg ikke kan opnå det
resultat, så længe mit billede har en fast bredde. Men i tilfældet på din
hjemmeside, er browseren ligeglad og bevæger sig blot ind over billedet men
skalere samtidig teksten.
| |
Tidemann (05-01-2006)
| Kommentar
Fra : Tidemann |
Dato : 05-01-06 08:03 |
|
"Cifly" <flygenring@SLETpostkasse.net> skrev i en meddelelse
news:sEXuf.176$tg6.3@news.get2net.dk...
> Jørgen Farum Jensen skrev:
>
> >>>Jeg er sikker på at jeg har set sider hvor det faste billede forsvinder,
> >>>mens teksten kryber sammen, når vinduet "skaleres". Bl.a. på
> >>> http://www.quirksmode.org/ (dog er jeg ikke sikker på tekniken bag - om
> >>>billedet er delt eller noget andet). Men har set flere hvor det virker.
>
> >> Også webdesign101.dk kan klare opgaven. Igen ved jeg ikke hvordan det er
> >> lavet.
>
> > Jeg kan ikke rigtig finde ud af, hvad det er du efterspørger, men hvis du
> > refererer til f.eks. min forside, der har et baggrundsbillede af Discory i
> > sidehovedet, er det indsat som et gange almindeligt CSS-baggrundsbillede:
> >
> > div#banner {
> > position:absolute;
> > width:100%;
> > height:130px;
> > left:0;
> > top:0;
> > background-color:#2F414D;
> > background-image:url(/www/res/shuttle.jpg);
> > background-position:left top;
> > background-repeat:no-repeat;
> > border-bottom:1px solid black;}
>
> Det jeg er ude efter er at kunne skalere min tekst ligesom på din side,
> således at teksten tilpasser sig når bruger trækker i browservinduet og gør
> det smallere eller bredere. Tidemann foreslår at jeg ikke kan opnå det
> resultat, så længe mit billede har en fast bredde. Men i tilfældet på din
> hjemmeside, er browseren ligeglad og bevæger sig blot ind over billedet men
> skalere samtidig teksten.
>
>
Det er ikke en skalering af teksten du efterlyser!
Det er en skalering af selve layoutet, ikke? Men det kræver en anden opbygning
af siden!
--
Venlig hilsen
Marianne
design af: - www.ragdollys-cat-link.dk - www.dhejne.dk
www.formdinfremtid.dk - www.royalmontana.dk
| |
Cifly (05-01-2006)
| Kommentar
Fra : Cifly |
Dato : 05-01-06 08:46 |
|
Tidemann skrev:
> Det er ikke en skalering af teksten du efterlyser!
> Det er en skalering af selve layoutet, ikke? Men det kræver en anden
> opbygning
> af siden!
Så kan det godt være jeg har blandet noget sammen og formuleret mig forkert.
Sorry!
| |
Tidemann (06-01-2006)
| Kommentar
Fra : Tidemann |
Dato : 06-01-06 17:57 |
| | |
Cifly (09-01-2006)
| Kommentar
Fra : Cifly |
Dato : 09-01-06 04:16 |
|
Tidemann skrev:
>> > Det er ikke en skalering af teksten du efterlyser!
>> > Det er en skalering af selve layoutet, ikke? Men det kræver en anden
>> > opbygning
>> > af siden!
> Sådan her:
> http://www.mariannes.frac.dk/diverse-test/web.html
Ja, lige præcis
--
Venlig hilsen www.flygenrings.dk
"Sometimes, when you lose, you win." - What Dreams May Come
| |
Cifly (02-01-2006)
| Kommentar
Fra : Cifly |
Dato : 02-01-06 08:45 |
|
"Allan Vebel" <spam@do.not> skrev i en meddelelse
news:43b8645a$0$15782$14726298@news.sunsite.dk...
> Cifly skrev:
>
>>> Du behøver faktisk kun at angive det ét sted
>
>> Jeg har nu ændret præcist ift. dine forslag. Men
>> eneste tydelige ændring er skrifttype (fra arial til
>> verdana) og liniehøjde
>
> Det er meningen at body{} skal ligge øverst i koden,
> og så skal du slette alle andre forekomster af font-
> size: og font-family: - så skulle alle elementer gerne
> nedarve det du skriver i body{} - undtaget den lidt
> mindre skrift i #copyrightnote{}.
>
>> hvis jeg trækker i browser kanterne, skalerer min
>> tekst ikke
>
> Det skal den heller ikke gøre. Den skal kun skalere
> skriftstørrelsen hvis du bruger Vis => Tekststørrelse
> => Mindst | Mindre | Mellem | Større | Størst - eller
> holder Ctrl-tasten nede mens du bruger scrollhjulet på
> musen (Internet Explorer). Andre browsere er opbygget
> på en anden måde.
>
>> men forsvinder lige så stille og rolig ud i det uvisse.
>
> Det er fordi dokumentet har en fast bredde i #wrapper{
> på 755px. Skal det også være skalerbart på den led, skal
> du bygge det op på en helt anden måde.
>
> Du kan ikke gøre skriftstørrelsen større eller mindre ved
> ved at ændre på browservinduets bredde.
>
> --
> Allan Vebel
> http://html-faq.dk
>
>
| |
ntg (08-01-2006)
| Kommentar
Fra : ntg |
Dato : 08-01-06 20:57 |
|
On Thu, 29 Dec 2005 22:52:24 +0100, "Allan Vebel" <spam@do.not> wrote:
>så er du dækket godt ind. Selv plejer jeg at bruge font-
>size mellem 0.8em og 1em, ellers kan det blive for småt.
Men læsevenligheden afhænger jo af kombinationen af fontstørrelse,
linieafstand, linielængede og fonttype (og kontrast mellem fontfarve
og baggrundsfarve), så man kan vel ikke uden videre sige, om 0.8 eller
1.0 er for små?
Er der iøvrigt nogen, der kender noget til om, der skulle være skrevet
noget sagligt om det nogen steder.
Jeg kan se, at Jørgen Farum er med på strengen. Kan ikke huske, om du
har skrevet om det i Webdesign, har intil nu kun kigget lidt i den.
Mvh
| |
Jørgen Farum Jensen (09-01-2006)
| Kommentar
Fra : Jørgen Farum Jensen |
Dato : 09-01-06 21:05 |
|
ntg wrote:
> On Thu, 29 Dec 2005 22:52:24 +0100, "Allan Vebel" <spam@do.not> wrote:
>
>
>>så er du dækket godt ind. Selv plejer jeg at bruge font-
>>size mellem 0.8em og 1em, ellers kan det blive for småt.
>
>
> Men læsevenligheden afhænger jo af kombinationen af fontstørrelse,
> linieafstand, linielængede og fonttype (og kontrast mellem fontfarve
> og baggrundsfarve), så man kan vel ikke uden videre sige, om 0.8 eller
> 1.0 er for små?
> Er der iøvrigt nogen, der kender noget til om, der skulle være skrevet
> noget sagligt om det nogen steder.
> Jeg kan se, at Jørgen Farum er med på strengen. Kan ikke huske, om du
> har skrevet om det i Webdesign, har intil nu kun kigget lidt i den.
> Mvh
http://www.webdesign101.dk/design/font_size.php
er den første af 6-7 artikler, jeg for nogle år siden skrev om
disse problemer.
Skal jeg resumere de synspunkter, jeg giver udtryk for i
disse artikler, er det følgende: Undlad at sætte nogen
skriftstørrelse overhovedet på body-elementet. Sæt kun
en skriftstørrelse på de brødskrift-elementer, der skal
have en anden størrelse end 1 em. Denne skriftstørrelse
sættes i em'er eller procenter eller ved brug af nøgleord.
På den måde er det brugerens valg af skriftstørrelse, der
bestemmer, hvor stor skriften tegnes på hendes computer -
unaset hvilken browser, der anvendes.
Skriftvalget har også betydning for, hvor stor skriften
tegnes. Verdana en en meget stor skrift i forhold til
linieafstanden, mens times er en meget lille skrift i
forhold til inieafstanden.
Jeg er nået frem til, at jeg ved at vælge
font-family: georgia, arial, sans-serif dels rammer
de hyppigste skrifter og dels får nogenlunde samme
skriftstørrelse i tilfælde af at georgia ikke findes
på brugerens computer.
--
Med venlig hilsen
Jørgen Farum Jensen
http://www.webdesign101.dk
| |
|
|