---

Hej.

Vedr. www.familen-pultz.dk

Når jeg skriver magin-left: 20px i CSS´ens .spalte2, sker der
noget ganske uventet..., så sådan kan man åbenbart ikke gøre.
Hvordan kan jeg så få lidt gul margin til venstre for teksten?

Venlig hilsen Kirsten.

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

---

"Kirsten Elizabeth Pultz" <k-kpultz@mail.dk> skrev

> Når jeg skriver magin-left: 20px i CSS´ens .spalte2, sker der
> noget ganske uventet..., så sådan kan man åbenbart ikke gøre.
> Hvordan kan jeg så få lidt gul margin til venstre for teksten?

Jeg vil tro at du skal bruge padding i stedet.
Margin giver margin udenfor boksen, mens padding giver luft mellem indholdet
og kanten af boksen.

Om boksmodellen (som html.dk har stavet "boks modellen"):
http://www.html.dk/tutorials/css/lektion9.asp

---

Kirsten Elizabeth Pultz skrev:
> Hej.
>
> Vedr. www.familen-pultz.dk
>
> Når jeg skriver magin-left: 20px i CSS´ens .spalte2, sker der
> noget ganske uventet..., så sådan kan man åbenbart ikke gøre.
> Hvordan kan jeg så få lidt gul margin til venstre for teksten?
>
> Venlig hilsen Kirsten.
>

Hvis du kigger efter i mit eksempel
http://webdesign101.dk/x/pulz/
vil du se, at der skal skabes plads
til venstre spalte ved at sætte en
margin på 2. spalte. In casu 23 procent bredde
og 25 procent plads.

Betragt float som en slags relativ position:
Det floatede element optager stadig plads
på websiden. Det eneste der sker, at /tekst/
skubbes til højre af et left-floatet element.

--
Med venlig hilsen

Jørgen Farum Jensen
http://webdesign101.dk

---

Jørgen Farum Jensen forklarede den 09-08-2008:
> Kirsten Elizabeth Pultz skrev:
>> Hej.
>>
>> Vedr. www.familen-pultz.dk
>>
>> Når jeg skriver magin-left: 20px i CSS´ens .spalte2, sker der
>> noget ganske uventet..., så sådan kan man åbenbart ikke gøre.
>> Hvordan kan jeg så få lidt gul margin til venstre for teksten?
>>
>> Venlig hilsen Kirsten.
>>
>
> Hvis du kigger efter i mit eksempel
> http://webdesign101.dk/x/pulz/
> vil du se, at der skal skabes plads
> til venstre spalte ved at sætte en
> margin på 2. spalte. In casu 23 procent bredde
> og 25 procent plads.
>
> Betragt float som en slags relativ position:
> Det floatede element optager stadig plads
> på websiden. Det eneste der sker, at /tekst/
> skubbes til højre af et left-floatet element.

Har lidt problemer - den side du refererer til kan ikke vises.
Du skal huske at størrelsen sat med width er på indholdet - padding og
margin lægges til for at få den samlede størrelse på elementet.
Hvis tingene skal fylde det samme, men have en margin (padding er IMHO
i dette tilfælde det rigtige at bruge) på 20 px, skal du trække de 20px
fra width.
Nu kan jeg ikke se hvad du har gjort - men det kunne være årsagen til
at tingene opfører sig anderledes end forventet.

Birger

---

Birger Sørensen skrev:

> Har lidt problemer - den side du refererer til kan ikke vises.

Det forstår jeg ikke, jeg har lige kontrolleret det?
Måske den fuldstændige sti er bedre:
http://webdesign101.dk/x/pulz/index.html

> Du skal huske at størrelsen sat med width er på indholdet - padding og
> margin lægges til for at få den samlede størrelse på elementet.
> Hvis tingene skal fylde det samme, men have en margin (padding er IMHO i
> dette tilfælde det rigtige at bruge) på 20 px, skal du trække de 20px
> fra width.

Nu er det sådan set ikke mig der har problemet. Og husker
jeg ret havde Kirsten sat en bredde på det float'ede element
på 23 procent af forældre-elementets - i hendes tilfælde
body-elementet. Jeg har så givet det samlede indhold en
bredde på 90 procent.

Men det er sådan set ligegyldigt: Har du et venstre-
float'et element og har dette element en bredde på X, vil
det skubbe /indholdet/ af de efterfølgende elementer X
til højre, indtil der "ikke er mere" venstre-floatet
i højden. Så vil indholdet af det efterfølgende element
række helt ud i venstre margin.

Det er svært at forklare, men let at eftervise med nogle
simple eksperimenter.

Og det snyder mange, fordi man umiddelbart tror at det er
tilstrækkeligt at sætte noget margin eller padding på
det efterfølgende indhold.

Med fare for at blive skældt ud vil jeg alligevel
tillade mig at henvise til kapitel 12 i min nedennævnte
bog Webdesign med stylesheets (kan lånes på biblioteket).



--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

---

Jørgen Farum Jensen forklarede:
> Birger Sørensen skrev:
>
>> Har lidt problemer - den side du refererer til kan ikke vises.
>
> Det forstår jeg ikke, jeg har lige kontrolleret det?
> Måske den fuldstændige sti er bedre:
> http://webdesign101.dk/x/pulz/index.html
>
>> Du skal huske at størrelsen sat med width er på indholdet - padding og
>> margin lægges til for at få den samlede størrelse på elementet.
>> Hvis tingene skal fylde det samme, men have en margin (padding er IMHO i
>> dette tilfælde det rigtige at bruge) på 20 px, skal du trække de 20px fra
>> width.
>
> Nu er det sådan set ikke mig der har problemet. Og husker jeg ret havde
> Kirsten sat en bredde på det float'ede element
> på 23 procent af forældre-elementets - i hendes tilfælde
> body-elementet. Jeg har så givet det samlede indhold en
> bredde på 90 procent.
>
> Men det er sådan set ligegyldigt: Har du et venstre-
> float'et element og har dette element en bredde på X, vil
> det skubbe /indholdet/ af de efterfølgende elementer X
> til højre, indtil der "ikke er mere" venstre-floatet
> i højden. Så vil indholdet af det efterfølgende element
> række helt ud i venstre margin.
>
> Det er svært at forklare, men let at eftervise med nogle
> simple eksperimenter.
>
> Og det snyder mange, fordi man umiddelbart tror at det er
> tilstrækkeligt at sætte noget margin eller padding på
> det efterfølgende indhold.
>
> Med fare for at blive skældt ud vil jeg alligevel
> tillade mig at henvise til kapitel 12 i min nedennævnte
> bog Webdesign med stylesheets (kan lånes på biblioteket).

OK ;>)
Det link der ikke virker, er det Kirsten gav i det oprindelige indlæg :
www.familen-pultz.dk
Ofte, er den slags problemer, at der opsættes en eller flere floatede
elementer. Når der så efterfølgende sættes margin eller padding på dem,
fylder de mere, og der er ikke længere plads, som der var før, og der
sker "noget ganske uventet", som Kirsten skriver...

Birger

---

> Det link der ikke virker, er det Kirsten gav i det oprindelige indlæg :
> www.familen-pultz.dk

Det er nok fordi, jeg har rodet med siden. Den virker nu.

Venlig hilsen Kirsten.



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

---

Kirsten Elizabeth Pultz udtrykte præcist:
>> Det link der ikke virker, er det Kirsten gav i det oprindelige indlæg :
>> www.familen-pultz.dk
>
> Det er nok fordi, jeg har rodet med siden. Den virker nu.
>
> Venlig hilsen Kirsten.

Nej - det er stavet forkert. Har ikke set efter det før, men der
mangler et i for at "familien" er stavet rigtigt..
www.familien-pultz.dk
det hjælper

Umiddelbart er den tekst, du vil have rykket, ikke i noget element, så
det du kan gøre, er at sætte en margin på det grønne felt, men til
højre side.

margin-right : 20px;

Birger

---

>
> Nej - det er stavet forkert.

Pinligt

....stavet rigtigt..
> www.familien-pultz.dk

>
> Umiddelbart er den tekst, du vil have rykket, ikke i noget element, så
> det du kan gøre, er at sætte en margin på det grønne felt, men til
> højre side.
>
> margin-right : 20px;

Jeg har prøvet alle mulige ting. Enten bliver siden delt med den grønne del
foroven og den gule del forneden, eller også bliver marginen hvid og linierne
brudt.
(Jeg forsøgte at snyde, ved at sætte en ekstra, meget smal, gul spalte ind
mellem den grønne og den gule spalte. Den grønne spalte1 -float left; den
store gule spalte3 -float right; men hvad skulle jeg få den lille tynde
spalte2 til???Jeg synes, at sådan en snydeløsning burde kunne fungere)

Venlig hilsen Kirsten.




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

---

Kirsten Elizabeth Pultz formulerede lørdag:
>>
>> Nej - det er stavet forkert.
>
> Pinligt
>
> ...stavet rigtigt..
>> www.familien-pultz.dk
>
>>
>> Umiddelbart er den tekst, du vil have rykket, ikke i noget element, så
>> det du kan gøre, er at sætte en margin på det grønne felt, men til
>> højre side.
>>
>> margin-right : 20px;
>
> Jeg har prøvet alle mulige ting. Enten bliver siden delt med den grønne del
> foroven og den gule del forneden, eller også bliver marginen hvid og linierne
> brudt.
> (Jeg forsøgte at snyde, ved at sætte en ekstra, meget smal, gul spalte ind
> mellem den grønne og den gule spalte. Den grønne spalte1 -float left; den
> store gule spalte3 -float right; men hvad skulle jeg få den lille tynde
> spalte2 til???Jeg synes, at sådan en snydeløsning burde kunne fungere)
>
> Venlig hilsen Kirsten.

Det er ikke lige sådan, at putte en ekstra spalte ind - selvom det
selvfølgelig skal kunne lade sig gøre...

Du har
..spalte2 {
float:right;
width: 77%;
background-color: #FFFFCC;
height: 100%;
}
hvis du ændrer til f.eks
..spalte2 {
float:right;
width: 75%;
padding-left : 2%;
background-color: #FFFFCC;
height: 100%;
}
skal teksten rykke ind fra den grønne.
(Du kan selv fifle med værdierne - width og padding, skal bare
tilsammen give 77...)
Det vil dine linie til gengæld også gøre.
Det ville jeg løse med en absolut positioned div der indeholder
linierne, og lade css sætte afstanden i de øvrige elementer, så det
passer sammen lodret.
Det giver mulighed for senere at ændre til et billede, et nodebillede
af en melodistump, en stribe portrætbilleder - eller hvad man nu kunne
finde på, uden at skulle ændre andre steder.

Birger

---

> >> www.familien-pultz.dk

>
> Du har
> ..spalte2 {
> float:right;
> width: 77%;
> background-color: #FFFFCC;
> height: 100%;
> }
> hvis du ændrer til f.eks
> ..spalte2 {
> float:right;
> width: 75%;
> padding-left : 2%;
> background-color: #FFFFCC;
> height: 100%;
> }
Philip Nunnegaard sagde også, at padding var den rette løsning; jeg forstod bare
ikke hvordan.
Nu forstår jeg! Mange tak.

> Det vil dine linie til gengæld også gøre.
> Det ville jeg løse med en absolut positioned div der indeholder
> linierne, og lade css sætte afstanden i de øvrige elementer, så det
> passer sammen lodret.
> Det giver mulighed for senere at ændre til et billede, et nodebillede
> af en melodistump, en stribe portrætbilleder - eller hvad man nu kunne
> finde på, uden at skulle ændre andre steder.

Dette lyder også som den rette løsning, for jeg har faktaisk overvejet at bruge et
nodebillede... jeg må dog lige lære at kravle, før jeg kan gå!

Venlig hilsen Kirsten.



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

---

www.familien-pultz.dk

> Det ville jeg løse med en absolut positioned div der indeholder
> linierne, og lade css sætte afstanden i de øvrige elementer, så det
> passer sammen lodret.

Jeg bruger først og fremmest Firefox, og det ser vældig godt ud der. Så tjekkede
jeg lige i Internet Explorer...bob, bob, bob...

Nå, men det er der vel en løsning på.

Venlig hilsen Kirsten.





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

---

Kirsten Elizabeth Pultz skrev den 09-08-2008:
> www.familien-pultz.dk
>
>> Det ville jeg løse med en absolut positioned div der indeholder
>> linierne, og lade css sætte afstanden i de øvrige elementer, så det
>> passer sammen lodret.
>
> Jeg bruger først og fremmest Firefox, og det ser vældig godt ud der. Så
> tjekkede jeg lige i Internet Explorer...bob, bob, bob...
>
> Nå, men det er der vel en løsning på.
>
> Venlig hilsen Kirsten.


;>)
Sæt margin på de felter du har i overskrifterne i de to spalter. Så har
du lige stor afstand, og kan styre det, og er uafhængig af hvor meget
dit billede (nodelinierne) fylder. Plus, hvis du vil ændre det senere,
er det enkelt, fordi der kun skal ændres eet sted.

<H1><FONT color="00CC00">Musik</FONT></H1>
er ikke så godt
<font> bruges ikke længere - og slet ikke sammen med css.
Så definer en css:
..over {
margin-bottom : 75px;
}
og erstat linien med
<h1 class="over">&nbsp;</h1>
og giv overskriften i den anden spalte samme class...
<h1 class="over">Familien Pultz</h1>
så kan du lege med de 75px, indtil det passer...

Tror i øvrigt at forskellen på linierne skyldes forskelle i default
værdier.
Så prøv med en css
hr {
padding : 0px;
margin : 5px 0px;
}
Så skulle det gerne blive ens - og du kan ændre de 5px til linierne ser
ud som du vil have dem.

Birger

---

www.familien-pultz.dk

Efter at have bakset uhyggeligt længe med den der absolut positioned div
opgav jeg og lavede 4 spalter: 1, 2, 1a og 2a, så jeg havde nodelinierne
for sig.
Hvordan jeg så ved en senere lejlighed vil indsætte et nodebillede, må
ligge hen i det uvisse.

Venlig hilsen Kirsten.


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