|
|
 | vertical-align:bottom
Fra : Kim Emax |
Dato : 30-09-09 15:54 |
|
hejsa
Jeg kan ikke få smækket min tekst ned i bunden af en block, hvilket
irriterer mig pænt meget. Jeg kan selvfølgelig bare lave en block mere
i en passende højde og smide ind først, men det irriterer mig at jeg
ikke kan få det til at virke. Gør jeg noget galt her?
..page{width:920px;height:600px;border: solid 1px;}
..top{width:762px;height:100px;}
..top{background-image:url("logo.gif");background-repeat:no-
repeat;vertical-align:text-bottom;}
..address{margin-left:100px;height:90px;vertical-
align:bottom;background:blue;}
....
<body>
<div class="page">
<div> </div>
<div class="top">
<div class="address">4212 uagadua, neverneverland</div>
</div>
teksten forbliver bare i toppen af address blokken uanset, hvad jeg
gør. Har prøvet med bottom og text-bottom og de samme attributer i
top, da jeg på http://www.elated.com/articles/css-text-properties/
læste "The following 6 values are relative to the parent element" som
at top's (som jeg anser for parent) indstillinger påvirker address
klassen.
--
Mvh
Kim Emax
| |
 Birger Sørensen (30-09-2009)
| Kommentar
Fra : Birger Sørensen |
Dato : 30-09-09 23:32 |
|
Kim Emax skrev:
> hejsa
>
> Jeg kan ikke få smækket min tekst ned i bunden af en block, hvilket
> irriterer mig pænt meget. Jeg kan selvfølgelig bare lave en block mere
> i en passende højde og smide ind først, men det irriterer mig at jeg
> ikke kan få det til at virke. Gør jeg noget galt her?
>
> .page{width:920px;height:600px;border: solid 1px;}
> .top{width:762px;height:100px;}
> .top{background-image:url("logo.gif");background-repeat:no-
> repeat;vertical-align:text-bottom;}
> .address{margin-left:100px;height:90px;vertical-
> align:bottom;background:blue;}
> ...
> <body>
> <div class="page">
> <div> </div>
> <div class="top">
> <div class="address">4212 uagadua, neverneverland</div>
> </div>
>
> teksten forbliver bare i toppen af address blokken uanset, hvad jeg
> gør. Har prøvet med bottom og text-bottom og de samme attributer i
> top, da jeg på http://www.elated.com/articles/css-text-properties/
> læste "The following 6 values are relative to the parent element" som
> at top's (som jeg anser for parent) indstillinger påvirker address
> klassen.
http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align
vertical-align virker kun på inline elementer. <div> er et blok
element.
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Kim Emax (01-10-2009)
| Kommentar
Fra : Kim Emax |
Dato : 01-10-09 00:26 |
|
On Oct 1, 12:32 am, Birger Sørensen <s...@bbsorensen.com> wrote:
> http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align
> vertical-align virker kun på inline elementer. <div> er et blok
> element.
Okay, er det så måden at løse det på eller findes der en pendant til
<td valign="bottom"> i css?
--
mvh
Kim Emax
| |
Birger Sørensen (01-10-2009)
| Kommentar
Fra : Birger Sørensen |
Dato : 01-10-09 13:11 |
| | |
N/A (09-10-2009)
| Kommentar
Fra : N/A |
Dato : 09-10-09 17:21 |
|
| |
Kim Emax (02-10-2009)
| Kommentar
Fra : Kim Emax |
Dato : 02-10-09 18:15 |
|
On Oct 1, 2:11 pm, Birger Sørensen <s...@bbsorensen.com> wrote:
> http://www.w3.org/TR/html401/struct/global.html#didx-block-level
Den blev jeg ikke lige så klog af.
> Enten giv dit blok-element en passende top-margin (eller padding),
> eller sæt display : inline; i CSS for det aktuelle element, gennem en
> klasse eller id selector - ikke for tagget, det vil give en masse andre
> problemer.
Jeg er ikke så stiv i retorikken for css, men med inline mener du vel
at jeg laver en <div style="vertical-align:bottom"> ikke?
Hvis du kan give et eksempel på dit forslag til passende top-margin &
display mv., så vil det være nice.
Jeg har forsøgt at sætte vertical-align gennem en class, det reagerer
texten ikke på overhovedet. Kan position settings i parent divs have
indflydelse på det ?
--
Mvh
Kim Emax
| |
Birger Sørensen (03-10-2009)
| Kommentar
Fra : Birger Sørensen |
Dato : 03-10-09 01:34 |
|
Efter mange tanker skrev Kim Emax:
> On Oct 1, 2:11 pm, Birger Sørensen <s...@bbsorensen.com> wrote:
>
>> http://www.w3.org/TR/html401/struct/global.html#didx-block-level
>
> Den blev jeg ikke lige så klog af.
>
>> Enten giv dit blok-element en passende top-margin (eller padding),
>> eller sæt display : inline; i CSS for det aktuelle element, gennem en
>> klasse eller id selector - ikke for tagget, det vil give en masse andre
>> problemer.
>
> Jeg er ikke så stiv i retorikken for css, men med inline mener du vel
> at jeg laver en <div style="vertical-align:bottom"> ikke?
>
> Hvis du kan give et eksempel på dit forslag til passende top-margin &
> display mv., så vil det være nice.
>
> Jeg har forsøgt at sætte vertical-align gennem en class, det reagerer
> texten ikke på overhovedet. Kan position settings i parent divs have
> indflydelse på det ?
I <head> skriver du
<style type="text/css">
..address {
display : inline;
vertical-align : bottom;
}
</style>
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
N/A (09-10-2009)
| Kommentar
Fra : N/A |
Dato : 09-10-09 17:21 |
|
| |
Kim Emax (02-10-2009)
| Kommentar
Fra : Kim Emax |
Dato : 02-10-09 18:53 |
|
Evening Birger 
On Oct 3, 2:34 am, Birger Sørensen <s...@bbsorensen.com> wrote:
> I <head> skriver du
> <style type="text/css">
> .address {
> display : inline;
> vertical-align : bottom;
> }
> </style>
Sjovt, det har jeg allerede:
..address{display:inline;margin-left:100px;height:90px;vertical-
align:text-bottom;background:blue;}
og bruger klassen således:
<div class="top">
<span class="address">ungabunga 242</span>
</div>
Jeg må lige ligge eksemplet online i morgen, kassen kalder  Sov
godt.
--
Mvh
Kim Emax
| |
Birger Sørensen (03-10-2009)
| Kommentar
Fra : Birger Sørensen |
Dato : 03-10-09 10:12 |
|
Følgende er skrevet af Kim Emax:
> Evening Birger
>
> On Oct 3, 2:34 am, Birger Sørensen <s...@bbsorensen.com> wrote:
>
>> I <head> skriver du
>> <style type="text/css">
>> .address {
>> display : inline;
>> vertical-align : bottom;
>> }
>> </style>
>
> Sjovt, det har jeg allerede:
>
> .address{display:inline;margin-left:100px;height:90px;vertical-
> align:text-bottom;background:blue;}
>
> og bruger klassen således:
>
> <div class="top">
> <span class="address">ungabunga 242</span>
> </div>
>
> Jeg må lige ligge eksemplet online i morgen, kassen kalder Sov
> godt.
Det passer så ikke med dit oprindelige indlæg, men lad os får et link -
det er nemmere at inspicere ;>)
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
N/A (09-10-2009)
| Kommentar
Fra : N/A |
Dato : 09-10-09 17:21 |
|
| |
Kim Emax (03-10-2009)
| Kommentar
Fra : Kim Emax |
Dato : 03-10-09 03:26 |
|
On Oct 3, 2:52 am, Kim Emax <kime...@gmail.com> wrote:
> Jeg må lige ligge eksemplet online i morgen, kassen kalder Sov
> godt.
Jeg har lagt det op her: http://www.test-web.dk/css_test/ -
baggrundsfarver er for at man kan se, hvor blokkene dækker
--
Mvh
Kim Emax
| |
Kim Emax (08-10-2009)
| Kommentar
Fra : Kim Emax |
Dato : 08-10-09 14:08 |
|
On Oct 3, 11:12 am, Birger Sørensen <s...@bbsorensen.com> wrote:
> Det passer så ikke med dit oprindelige indlæg, men lad os får et link -
> det er nemmere at inspicere ;>)
Fik du kigget på linket?
Anyway, jeg fandt ud af at bruge margin-top og margin-bottom til at
styre det, men jeg syns det er underligt at der ikke er en "middle"
indstilling til vertikal, når der er en center til horisontal. Er der
et godt argument for det?
--
Mvh
Kim Emax
| |
Birger Sørensen (09-10-2009)
| Kommentar
Fra : Birger Sørensen |
Dato : 09-10-09 08:15 |
|
Den 08-10-2009, skrev Kim Emax:
> On Oct 3, 11:12 am, Birger Sørensen <s...@bbsorensen.com> wrote:
>
>> Det passer så ikke med dit oprindelige indlæg, men lad os får et link -
>> det er nemmere at inspicere ;>)
>
> Fik du kigget på linket?
>
> Anyway, jeg fandt ud af at bruge margin-top og margin-bottom til at
> styre det, men jeg syns det er underligt at der ikke er en "middle"
> indstilling til vertikal, når der er en center til horisontal. Er der
> et godt argument for det?
..top {
height : 40px;
padding : 30px 0px;
width : 762px;
}
vertical align sætter har ingen indflydelse på tekst, bortset fra i
tabeller.
Det kan være man kan sætte display propertien for top, så den opfører
sig som et tabel element, og derved få teksten i midten med
vertical-align. Jeg foretrækker at gøre den slags med padding for det
omgivende element eller margin for elementet der skal centreres.
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
N/A (09-10-2009)
| Kommentar
Fra : N/A |
Dato : 09-10-09 17:21 |
|
| |
Kim Emax (09-10-2009)
| Kommentar
Fra : Kim Emax |
Dato : 09-10-09 09:36 |
|
On Oct 9, 9:15 am, Birger Sørensen <s...@bbsorensen.com> wrote:
> .top {
> height : 40px;
> padding : 30px 0px;
> width : 762px;
>
> }
Må lige læse op på padding, så jeg ved, hvad der sker der. Kan tænke
mig til det, der sker. Tak for tippet
> vertical align sætter har ingen indflydelse på tekst, bortset fra i
> tabeller.
Jeps, det er jeg også kommet frem til.
> Det kan være man kan sætte display propertien for top, så den opfører
> sig som et tabel element, og derved få teksten i midten med
> vertical-align. Jeg foretrækker at gøre den slags med padding for det
> omgivende element eller margin for elementet der skal centreres.
Ja og har du en baggrundsfarve eller image, så skubbes dette også, så
det er ikke en optimal løsning.
--
Mvh
Kim
| |
Birger Sørensen (09-10-2009)
| Kommentar
Fra : Birger Sørensen |
Dato : 09-10-09 17:16 |
|
Kim Emax formulerede spørgsmålet:
> On Oct 9, 9:15 am, Birger Sørensen <s...@bbsorensen.com> wrote:
>
>> .top {
>> height : 40px;
>> padding : 30px 0px;
>> width : 762px;
>>
>> }
>
> Må lige læse op på padding, så jeg ved, hvad der sker der. Kan tænke
> mig til det, der sker. Tak for tippet
>
>> vertical align sætter har ingen indflydelse på tekst, bortset fra i
>> tabeller.
>
> Jeps, det er jeg også kommet frem til.
>
>> Det kan være man kan sætte display propertien for top, så den opfører
>> sig som et tabel element, og derved få teksten i midten med
>> vertical-align. Jeg foretrækker at gøre den slags med padding for det
>> omgivende element eller margin for elementet der skal centreres.
>
> Ja og har du en baggrundsfarve eller image, så skubbes dette også, så
> det er ikke en optimal løsning.
Din top havde før en højde på 100px.
padding : 30px 0px; sætter en 40 px padding i top og bund, og ikke
nogen i siderne på top.
For at elementet skal bevare sin højde på de 100px, skal højden
reduceres med den nye padding, og der er altså kun de 40px tilbage. (Og
man kan godt nøjes med at sætte kun padding-top, for at rykke teksten
nedad - det her var bare lige den hurtige måde).
Den højde man angiver i CSS, er uden padding, border og margin.
Padding har samme baggrund som indholdet - men det har margin ikke.
Man skal skelne mellem padding og margin. Padding er indenfor
elementet, margin er udenfor.
Du kan også sætte margin-top på adresse-elementet til de ca. 40px (Og
det er ikke præcist - adressen står ikke nøjagtigt i midten). Det burde
give det samme resultat. Men du kan ikke sætte padding på adresse
elementet (ikke i din test her, i hvert fald), for det vil give
paddingen den blå baggrund, og det er formentlig ikke det du ønsker.
http://www.w3.org/TR/CSS2/box.html
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Rune Jensen (09-10-2009)
| Kommentar
Fra : Rune Jensen |
Dato : 09-10-09 17:21 |
|
Kim Emax skrev:
> On Oct 9, 9:15 am, Birger Sørensen <s...@bbsorensen.com> wrote:
>
>> .top {
>> height : 40px;
>> padding : 30px 0px;
>> width : 762px;
>>
>> }
>
> Må lige læse op på padding, så jeg ved, hvad der sker der. Kan tænke
> mig til det, der sker. Tak for tippet
Bare et indskud: Aht. de to boksmodeller, skal man vidst køre strict,
for det virker også i IE6 som i andre browsere. I modsat fald, skal man
ud i noget ekstra omsluttende DIV, som man sætter margin på i stedet
for, hvilket er rent design-mareridt (ved jeg af erfaring).
http://www.howtocreate.co.uk/wrongWithIE/?chapter=Box+Model
Yderligere aht. IE generelt, som ikke fatter XHTML, samt det faktum at
XHTML2 er smidt ud til højre, og HTML5 først er tidsfastsat til
godkendelse engang i 2020-2024, er det måske en idé at holde sig til
HTML4.01 Strict.
MVH
Rune Jensen
| |
N/A (09-10-2009)
| Kommentar
Fra : N/A |
Dato : 09-10-09 17:21 |
|
| |
Kim Emax (13-10-2009)
| Kommentar
Fra : Kim Emax |
Dato : 13-10-09 11:52 |
|
On Oct 9, 6:16 pm, Birger Sørensen <s...@bbsorensen.com> wrote:
> Din top havde før en højde på 100px.
> padding : 30px 0px; sætter en 40 px padding i top og bund, og ikke
> nogen i siderne på top.
Ok, den forstod jeg så ikke? Hvordan kan 30 + 0 blive til 40? Mener
du at der bliver 30 i top, 30 i bund og 0 i horisontalt, derfor er der
kun 40px tilbage til resten af det vertikale?
> Den højde man angiver i CSS, er uden padding, border og margin.
Den har jeg fanget.
> Padding har samme baggrund som indholdet - men det har margin ikke.
> Man skal skelne mellem padding og margin. Padding er indenfor
> elementet, margin er udenfor.
Den er jeg også kommet efter. Man lærer hurtigt, når man leger og
nægter at lave "genveje"
> Du kan også sætte margin-top på adresse-elementet til de ca. 40px (Og
> det er ikke præcist - adressen står ikke nøjagtigt i midten). Det burde
> give det samme resultat. Men du kan ikke sætte padding på adresse
> elementet (ikke i din test her, i hvert fald), for det vil give
> paddingen den blå baggrund, og det er formentlig ikke det du ønsker.
Niksen, den skal blive, hvor den er.
> http://www.w3.org/TR/CSS2/box.html
Nice, den lurer jeg lige på i morgen.
Tak for dine inputs.
--
Mvh
Kim
| |
Birger Sørensen (13-10-2009)
| Kommentar
Fra : Birger Sørensen |
Dato : 13-10-09 21:35 |
|
Kim Emax formulerede tirsdag:
> On Oct 9, 6:16 pm, Birger Sørensen <s...@bbsorensen.com> wrote:
>
>> Din top havde før en højde på 100px.
>> padding : 30px 0px; sætter en 40 px padding i top og bund, og ikke
>> nogen i siderne på top.
>
> Ok, den forstod jeg så ikke? Hvordan kan 30 + 0 blive til 40? Mener
> du at der bliver 30 i top, 30 i bund og 0 i horisontalt, derfor er der
> kun 40px tilbage til resten af det vertikale?
8X
Der er vist en tyrk flej. 8-o
Men du har forstået meningen, lige præcis. 30px for oven og 30px for
neden gør at der er 40px tilbage til indholdet, når den samlede højde
skal være 100px (og border og margin begge er 0px).
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
|
|