Søg
Avatar billede rudi1234 Nybegynder
22. juli 2005 - 17:00 Der er 18 kommentarer og
1 løsning

Relativ font-size og nestede elementer

Jeg har følgende ønsker for en hjemmeside:
1. Der skal være relativ angivelse af font-size.
2. Nogle elementer, fx div-klasser, skal have en font-size i fx 80% af standardstørrelsen, og de skal have samme størrelsen selvom elementerne nogle gange er indlejret i hinanden (det skyldes at jeg ikke kan være sikker på hvor mange gange de bliver indlejret i hinanden).

Det er illustreret i nedenstående kode hvor mit problem netop er at teksten i den div.div2 der er indlejret i div.div1 er mindre end teksten i den div.div2 der _ikke_ er indlejret.

Hvordan løser jeg dette problem?


<html>
<head>
<style>
    body {
        font-size:2em;
    }
    div.div1 {
        font-size:75%;
    }
    div.div2 {
        font-size:55%;
    }
</style>
</head>

<body>
Tekst i body.<br><br>
<div class="div1">
    DIV.div1 tekst.<br><br>
    <div class="div2">
        DIV.div2 tekst indlejret i DIV.div1.<br><br>
    </div>
</div>

<div class="div2">
    DIV.div2 IKKE indlejret.
</div>
   
</body>
</html>
Avatar billede roenving Novice
22. juli 2005 - 17:05 #1
-- det ligner den umulige opgave, for relative størrelser _skal_ forholde sig til den umiddelbart satte !-)
Avatar billede roenving Novice
22. juli 2005 - 17:49 #2
Nåh, nej, du kan jo bare benytte dig af de generiske størrelser, som svarer til font-størrelse 1-7:

xx-small | x-small | small | medium | large | x-large | xx-large || larger | smaller !-)
Avatar billede rudi1234 Nybegynder
22. juli 2005 - 18:09 #3
Jeg synes stadig jeg har samme problem - også med disse størrelse... Men måske løser jeg problemet ved at have bedre styr på hvordan mine elementer er indlejret i hinanden... (så jeg kan lave klasser for hver enkelt grad af indlejring).
Avatar billede olebole Juniormester
22. juli 2005 - 18:28 #4
<ole>

Skriftstørrelser angivet med enhederne 'em' eller 'ex' skal ifølge CSS beregnes udfra det omkransende elements skriftstørrelse - hvorfor det vel egentlig ikke er logisk at sætte body-elementets til 2em  :)

Er der nogen grund til, du ikke sætter skriftstørrelserne til faste værdier?

/mvh
</bole>
Avatar billede rudi1234 Nybegynder
22. juli 2005 - 19:27 #5
Grunden til at jeg gerne vil gøre det relativt er: Så brugerne kan skifte tekststørrelse via deres browser - så fx svagtseeende kan gøre den større.
Avatar billede roenving Novice
22. juli 2005 - 22:42 #6
Så brug de generiske størrelser, de tillader jo den slags !-)
Avatar billede olebole Juniormester
22. juli 2005 - 23:51 #7
- f.eks:

body {
    font-size: xx-large;
}
div.div1 {
    font-size: x-large;
}
div.div2 {
    font-size: large;
}

- og husk, CSS er (eller bør være) case-sensitive og type-selectors staves med småt  :)
Avatar billede rudi1234 Nybegynder
22. juli 2005 - 23:55 #8
Tak for kommentarerne. Det med de små bogstaver skal jeg huske...! ;o)
Avatar billede rudi1234 Nybegynder
23. juli 2005 - 00:01 #9
olebole: Jeg kan godt se at ...

body {
    font-size: xx-large;
}
div.div1 {
    font-size: x-large;
}
div.div2 {
    font-size: large;
}

... virker!

Faktisk leder det mig så til næste problem: Nu har jeg styr på de indlejrede elementer, men det næste problem handler om at IE og Firefox viser teksten i forskellige størrelser. (med følgende kode):

<html>
<head>
<style>
body {
    font-size: small;
}
div.div1 {
    font-size: xx-small;
}
div.div2 {
    font-size: x-small;
}

</style>
</head>

<body>
Tekst i body.<br><br>
<div class="div1">
    DIV.div1 tekst.<br><br>
    <div class="div2">
        DIV.div2 tekst indlejret i DIV.div1.<br><br>
    </div>
</div>

<div class="div2">
    DIV.div2 IKKE indlejret.
</div>
   
</body>
</html>

I IE ser det fint ud, men i Firefox er det ret lille - man er næsten nødt til at trykke Ctrl + for at det ser ordentligt ud...

Er der noget at gøre ved det - bortset fra et stylesheet til hver browser?
Avatar billede roenving Novice
23. juli 2005 - 00:51 #10
Nej !-)

-- det er jo netop overladt til browseren at bestemme den slags ...
Avatar billede rudi1234 Nybegynder
23. juli 2005 - 08:23 #11
Ja....
Nå, jeg lukker spm. - jeg ved jo at I ikke vil have point når I bare kommenterer...

:o)
Avatar billede rudi1234 Nybegynder
23. juli 2005 - 08:39 #12
En enkelt ting: Dette virker tilsyneladende, men kan jeg være sikker på det i alle browsere?

/* Uddrag af stylesheet */
html,body {
    font-family:Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
    <script type="text/javascript">
    if(navigator.appName == 'Microsoft Internet Explorer') {
        document.write('font-size:small;');
    } else {
        document.write('font-size:x-small;');
    }
    </script>
    <noscript>font-size:small;</noscript>
}
Avatar billede rudi1234 Nybegynder
23. juli 2005 - 08:58 #13
... øhh... det virkede nu alligevel ikke, kan jeg nu se.... :-)
Avatar billede roenving Novice
23. juli 2005 - 11:09 #14
Hvordan ved du, at vi ikke vil have point, når vi laver kommentarer ?-)

-- jeg hylder selv den måde at agere på, at man ikke begynder at lægge et svar, før man har en rimelig sikker overbevisning om, at spørgeren kan bruge reaktionerne og også har en forståelse af det ...

-- hvilket betyder, at jeg lægger ca. et uopfordret svar om ugen eller måneden, og forventer, at spørgerne stiller alle de spørgsmål, de har brug for, for at bruge svarene ...

-- måske kan du bruge conditional comments til noget, f.eks. sådan (ganske utestet !-)

html,body {
    font-family:Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size:x-small;
<![if IE]>
    font-size:small;
<![endif]>
}

-- kan være, at man skal benytte sig af noget kommentar-værk for at få det til at fungere, men en simpel løsning på den slags problemer !-)
Avatar billede rudi1234 Nybegynder
24. juli 2005 - 08:20 #15
> -- jeg hylder selv den måde at agere på, at man ikke begynder at lægge et svar, før man har en rimelig sikker overbevisning om, at spørgeren kan bruge reaktionerne og også har en forståelse af det ...

Det kan jeg godt se... det vil jeg huske til næste gang! :o)


Mht. conditional comments, så skal jeg da lige afprøve dem ved lejlighed (er på ferie nu ... ).
Avatar billede roenving Novice
24. juli 2005 - 12:00 #16
-- og hov, der var en fejl i den konditionelle kommentar:

html,body {
    font-family:Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size:x-small;
<!--[if IE]>
    font-size:small;
<![endif]-->
}
Avatar billede rudi1234 Nybegynder
24. juli 2005 - 12:55 #17
Det virker super - det virker dog kun i html-kode, ikke i stylesheets. Så jeg gjorde sådan:

<HEAD>
    <TITLE>DOCUMENT TITLE</TITLE>
    <link href="style.css" rel="stylesheet" type="text/css">
    <!--[if IE]>
    <style>
        body, div, span, p {
        font-size: x-small;
        }
    </style>
    <![endif]-->
</HEAD>
Avatar billede roenving Novice
24. juli 2005 - 12:59 #18
Virker det monstro, hvis man indhylder det i css-kommentarer ?-)

html,body {
    font-family:Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size:x-small;
/*<!--[if IE]>*/
    font-size:small;
/*<![endif]-->*/
}
Avatar billede rudi1234 Nybegynder
24. juli 2005 - 13:02 #19
Nej, desværre. Jeg har lige prøvet...
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 16:05 Samsung Galaxy vil ikke ud af "Sikker tilstand" Af ErikHg i Mobiltelefoner
08/0812:15 morf bilede Af knuldefar1942 i Fri debat
07/0822:13 Gemme største værdi Af Lemming@privat.dk i Excel
07/0821:39 Kvindelig journalist ved DR - hvad er hendes navn. Af ErikHg i Fri debat
06/0817:10 Windows 10 Home 22H2 produktnøgle Af Uvanga i Windows
White papers
Flere white papers »