/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
Vertikal positionering i blokelement
Fra : Steen


Dato : 11-05-04 16:43

Jeg skal style et overskriftsniveau, h1, så teksten kommer til at stå i en
boks med en baggrundsfarve. Teksten skal stå i *bunden* af feltet. HTMLen
ser altså således ud:

<h1>Overskrift</h1>

....og jeg har forsøgt mig med følgende CSS:

background-color: #CCCCCC;
height: 100px;
vertical-align: bottom;

....men teksten bliver *ved* med at stå i toppen af feltet. Vertical-align:
middle; kan heller ikke flytte teksten fra toppen.

Gode ideer efterlyses.

Steen



 
 
jopa (11-05-2004)
Kommentar
Fra : jopa


Dato : 11-05-04 16:09

Steen <virker@ikke.invalid> skrev bla:
>
> ...men teksten bliver *ved* med at stå i toppen af feltet.
> Vertical-align: middle; kan heller ikke flytte teksten fra toppen.
>

Har du prøvet at style din <h1>
h1 {
padding-top:0px;
}



--
Mvh. John
www.jp-web.dk
www.johns-web.dk



Tommy J (11-05-2004)
Kommentar
Fra : Tommy J


Dato : 11-05-04 16:24

Steen wrote in dk.edb.internet.webdesign.html:
> Jeg skal style et overskriftsniveau, h1, så teksten kommer til at stå i en
> boks med en baggrundsfarve. Teksten skal stå i *bunden* af feltet. HTMLen
> ser altså således ud:
>
> <h1>Overskrift</h1>
>
> ....og jeg har forsøgt mig med følgende CSS:
>
> background-color: #CCCCCC;
> height: 100px;
> vertical-align: bottom;
>
> ....men teksten bliver *ved* med at stå i toppen af feltet. Vertical-align:
> middle; kan heller ikke flytte teksten fra toppen.
>
> Gode ideer efterlyses.
>
Hejsa -
Igår spurgte jeg om næsten det samme. Jeg ønsker bare 'vertical-align:
middle' i et link (som bruger 'display: block'). Min overskrift var
'vertical-align: middle; ?'. Svaret er imidlertid at 'vertical-align' slet
ikke virker i et blok-element. øv!! Se for øvrigt Ryan Kristensens forslag.
Mvh Tommy


--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Tine Müller (11-05-2004)
Kommentar
Fra : Tine Müller


Dato : 11-05-04 16:39

"Steen" skrev
> Jeg skal style et overskriftsniveau, h1, så teksten kommer til at stå i en
> boks med en baggrundsfarve. Teksten skal stå i *bunden* af feltet. HTMLen
> ser altså således ud:
>
> <h1>Overskrift</h1>
>
> ...og jeg har forsøgt mig med følgende CSS:
>
> background-color: #CCCCCC;
> height: 100px;
> vertical-align: bottom;
>
> ...men teksten bliver *ved* med at stå i toppen af feltet. Vertical-align:
> middle; kan heller ikke flytte teksten fra toppen.
>
> Gode ideer efterlyses.


Måske kan du bruge nedenstående.


------------------
<!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>Untitled Document</title>


<style type="text/css">
<!--
h1 {
background: #CCCCCC;
height: auto;
line-height: 50px;
}
-->
</style>
</head>

<body>
<h1>
<br>
Overskrift</h1>
</body>
</html>
-------------



KH
Tine Müller

homepage: http://tine_muller.homepage.dk/




Tommy J (11-05-2004)
Kommentar
Fra : Tommy J


Dato : 11-05-04 17:10

Tine Müller wrote in dk.edb.internet.webdesign.html:
.....
>h1 {
>background: #CCCCCC;
>height: auto;
>line-height: 50px;
}
....
Jo, Tine, måske en ide for Steen med fast 'line-height' tricket. Den vil jeg da
også lege videre med. Havde overvejet det før. Men muligvis skal man også
bruge;

padding-top: 0px;
padding-bottom: 0px;
border-collapse: collapse;

for at være sikker på at padding og border ikke forstyrrer højden.
Mvh Tommy

--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Erik Ginnerskov (11-05-2004)
Kommentar
Fra : Erik Ginnerskov


Dato : 11-05-04 17:22

Tommy J wrote:
> border-collapse: collapse;

Øh, er det ikke til tabeller, hvor man ikke ønsker mellemrum mellem de
enkelte celler?

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://hjem.get2net.dk/egin



Tommy J (12-05-2004)
Kommentar
Fra : Tommy J


Dato : 12-05-04 02:03

Erik Ginnerskov wrote in dk.edb.internet.webdesign.html:
> Tommy J wrote:
> > border-collapse: collapse;
>
> Øh, er det ikke til tabeller, hvor man ikke ønsker mellemrum mellem de
> enkelte celler?
>
Jo, det er det... - men kan 'border-collapse: collapse;' kun bruges til
tabeller? Eller kan den anvendes på andre elementer?
-Tommy


--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Erik Ginnerskov (12-05-2004)
Kommentar
Fra : Erik Ginnerskov


Dato : 12-05-04 21:15

Tommy J wrote:
>> Øh, er det ikke til tabeller, hvor man ikke ønsker mellemrum mellem
>> de enkelte celler?
>>
> Jo, det er det... - men kan 'border-collapse: collapse;' kun bruges
> til tabeller? Eller kan den anvendes på andre elementer?

Det kræver vel pr. definition, at der er nogle tæt-på-hinanden liggende
borders, der kan collapses (celler i en tabel). Ellers kan jeg ikke se
meningen med at definere sådan.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://hjem.get2net.dk/egin



Tine Müller (12-05-2004)
Kommentar
Fra : Tine Müller


Dato : 12-05-04 13:03

> "Steen" skrev
> > ...men teksten bliver *ved* med at stå i toppen af feltet.
Vertical-align:
> > middle; kan heller ikke flytte teksten fra toppen.

> ------------------
> <!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>Untitled Document</title>
>
>
> <style type="text/css">
> <!--
> h1 {
> background: #CCCCCC;
> height: auto;
> line-height: 50px;
> }
> -->
> </style>
> </head>
>
> <body>
> <h1>
> <br>
> Overskrift</h1>
> </body>
> </html>
> -------------


Du kan også prøve at indsætte
h1 {
background-color: #CCCCCC;
padding-top:65px;
font-size:30px;
}

Hvis højden skal være 100 pixel. 65+30=95 og så er der 5 pixel til
nedhængende bogstav.
På denne måde kan du selv tilrette din baggrunds størrelse og tekster, men
husk de 5 pixel i difference.

/Tine





Steen (12-05-2004)
Kommentar
Fra : Steen


Dato : 12-05-04 14:18

Tine Müller wrote:

> Du kan også prøve at indsætte
> h1 {
> background-color: #CCCCCC;
> padding-top:65px;
> font-size:30px;
> }
>
> Hvis højden skal være 100 pixel. 65+30=95 og så er der 5 pixel til
> nedhængende bogstav.
> På denne måde kan du selv tilrette din baggrunds størrelse og
> tekster, men husk de 5 pixel i difference.

Ja, men når så overskriften fylder to linjer i højden, så skal den samlede
højde af den grå boks være uændret, teksten skal "brede sig opad" i
boksen...

/steen



Steen (12-05-2004)
Kommentar
Fra : Steen


Dato : 12-05-04 14:17

Tine Müller wrote:

> Måske kan du bruge nedenstående.

[snip]

><h1>
> <br>
> Overskrift</h1>

Jeg kan desværre ikke sætte et <br> ind i overskriften... Koden *skal* se
sådan ud:
<h1>Overskrift</h1>

/steen



Tine Müller (13-05-2004)
Kommentar
Fra : Tine Müller


Dato : 13-05-04 08:59

"Steen" skrev
> Jeg kan desværre ikke sætte et <br> ind i overskriften... Koden *skal* se
> sådan ud:
> <h1>Overskrift</h1>

Hej Steen

Kunne du ikke forklare lidt tydeligere hvor/hvad det skal bruges eller give
et link, så man nemmere helt kan forstå, hvad du skal have hjælp til?
Som jeg har forstået det, vil du have <h1>Overskrift</h1> med en farvet
baggrund på 100 pixel lavet med CSS og den skal også bruges selv om der er 2
linjer i h1 og koden skal være h1 og må ikke laves om?

Jeg har snart brugt meget tid for at løse dit problem, og er nu blevet
stædig, men har ikke givet op endnu. Jeg er selv ved at prøve at lære og
forstå CSS.



KH
Tine Müller

homepage: http://tine_muller.homepage.dk/



Erik Ginnerskov (13-05-2004)
Kommentar
Fra : Erik Ginnerskov


Dato : 13-05-04 22:06

Steen wrote:
> Jeg skal style et overskriftsniveau, h1, så teksten kommer til at stå
> i en boks med en baggrundsfarve. Teksten skal stå i *bunden* af
> feltet. HTMLen ser altså således ud:
>
> <h1>Overskrift</h1>
>
> ...og jeg har forsøgt mig med følgende CSS:
>
> background-color: #CCCCCC;
> height: 100px;

Hvis vi først får ud fra, at overskriften i sig selv er 20 px høj med den
font og størrelse, du har valgt og hvis overskriften kommer i en linje:

h1{
font-size:20px;
margin-bottom:0px;
padding-bottom:0px;
padding-top:80px;
color:#000;
background:#f00;

.... giver en sort overskrift i bunden af en 100 px høj rød kasse.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://hjem.get2net.dk/egin



Steen (15-05-2004)
Kommentar
Fra : Steen


Dato : 15-05-04 14:23

Erik Ginnerskov wrote:

> Hvis vi først får ud fra, at overskriften i sig selv er 20 px høj med
> den font og størrelse, du har valgt og hvis overskriften kommer i en
> linje:
>
> h1{
> font-size:20px;
> margin-bottom:0px;
> padding-bottom:0px;
> padding-top:80px;
> color:#000;
> background:#f00;
>
> ... giver en sort overskrift i bunden af en 100 px høj rød kasse.

Ja, det kan jeg godt se. Problemet er bare, at jeg ikke kan være sikker på,
at der kun er en linjes tekst. Der skal være mulighed for to linjers tekst,
som også skal stå i bunden af kassen.

/steen



Erik Ginnerskov (15-05-2004)
Kommentar
Fra : Erik Ginnerskov


Dato : 15-05-04 17:11

Steen wrote:

> Ja, det kan jeg godt se. Problemet er bare, at jeg ikke kan være
> sikker på, at der kun er en linjes tekst. Der skal være mulighed for
> to linjers tekst, som også skal stå i bunden af kassen.

Og skal boksen stadig være 100 px høj eller kan højden i så fald tillades at
blive en linje højere?

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://hjem.get2net.dk/egin



Tine Müller (16-05-2004)
Kommentar
Fra : Tine Müller


Dato : 16-05-04 13:11

"Steen" skrev
> Ja, det kan jeg godt se. Problemet er bare, at jeg ikke kan være sikker
på,
> at der kun er en linjes tekst. Der skal være mulighed for to linjers
tekst,
> som også skal stå i bunden af kassen.

Jeg har spurgt om hjælp til at løse "dit" problem i en engelsk nyhedsgruppe
og har fået nedenstående svar, som du måske kan bruge? Jeg ville ellers have
sendt denne mail direkte til dig, men det er jo ikke muligt.

-----------
> Mind you these two methods are both a bit hack(y). There may be others
but
> I suspect they would be variations on the theme.
>
> Browser allocate defined when drawing for <br> a new block element
> containing the second line text. <div> elements do not have predefined
> margins, but should not be used within header elements.
>
> Using the same principle (allowing for the "descenders" on both lines) but
> establishing the height with a containing div and removing any margin or
> padding from the two h1 elements something like this perhaps
>
> ------------start method 1---------
> div.header {
> background-color: #CCCCCC;
> padding-top:54px;
> font-size:20px;
> }
> .header h1 {
> margin:0;
> padding:0;
> font-size:20px;
> }
>
> and
>
> <div class="header">
> <h1>
> Overskriftj</h1>
> <h1>Second Linej</h1>
> </div>
> -----------End Method1-------
>
> The structural problem is that two headings are created instead of one, if
> this is important.
>
> Another method which maybe a little suspect is to style the <br> but
doesn't
> seem to fall over in modern browsers. So
>
> -------style br--------
>
> .header h1 {
> background-color: #CCCCCC;
> padding-top:54px;
> font-size:20px;
>
> }
>
> br {
> margin:0;
> padding:0;
> }
>
> AND
>
> <div class="header">
> <h1>
> Overskriftj<br>Second Linej</h1>
> </div>
>
> ------ end styling br ---------


--


KH
Tine Müller

homepage: http://tine_muller.homepage.dk/






Søg
Reklame
Statistik
Spørgsmål : 177559
Tips : 31968
Nyheder : 719565
Indlæg : 6408937
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste