---

Hej allesammen

Jeg har lavet en boks med scroll, hvori jeg har et billede.
Hvordan og hvor centrerer jeg dette billede?
Jeg har prøvet med align i både min html og css, men kan ikke få
det til at virke på nogen måde
Jeg har også sat farve på min scrollbar, men det virker kun i
Explorer, ikke i Mozilla. Hvorfor?
Hjælp!

HTML:
<div class="scroll">
<h1>Behandlinger</h1>
<p>
Massage du Corps tilbyder en dybdegående massage af hele kroppen,
eller massage koncentreret om de områder, hvor du har brug for
det.
<ul>
<li>Helkropsmassage</li>
<li>Ryg/nakke/skulder</li>
<li>Fodmassage</li>
<li>Hovedbundsmassage</li>
<li>Arme/ben</li>
</ul>
</p>
<p>
Derudover tilbyder Massage du Corps også graviditets-massage, og
har en dertil indrettet briks.
</p>
<div id="Billede2">
<img src="billeder/graviditetsbriks.jpg" title="Briks"
alt="Briks" />
</div>

CSS:
div.scroll {
   overflow: auto;
   height: 340px;
   width: 320px;
   padding-right: 10px;
   position:absolute;
   top: 200px;
   left: 508px;
   scrollbar-base-color:#7C5619;
}

--
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

---

Grith Hodal kom med denne ide:
> Hej allesammen
>
> Jeg har lavet en boks med scroll, hvori jeg har et billede.
> Hvordan og hvor centrerer jeg dette billede?
> Jeg har prøvet med align i både min html og css, men kan ikke få
> det til at virke på nogen måde
> Jeg har også sat farve på min scrollbar, men det virker kun i
> Explorer, ikke i Mozilla. Hvorfor?
> Hjælp!
>
> HTML:
> <div class="scroll">
> <h1>Behandlinger</h1>
> <p>
> Massage du Corps tilbyder en dybdegående massage af hele kroppen,
> eller massage koncentreret om de områder, hvor du har brug for
> det.
> <ul>
> <li>Helkropsmassage</li>
> <li>Ryg/nakke/skulder</li>
> <li>Fodmassage</li>
> <li>Hovedbundsmassage</li>
> <li>Arme/ben</li>
> </ul>
> </p>
> <p>
> Derudover tilbyder Massage du Corps også graviditets-massage, og
> har en dertil indrettet briks.
> </p>
> <div id="Billede2">
> <img src="billeder/graviditetsbriks.jpg" title="Briks"
> alt="Briks" />
> </div>
>
> CSS:
> div.scroll {
>    overflow: auto;
>    height: 340px;
>    width: 320px;
>    padding-right: 10px;
>    position:absolute;
>    top: 200px;
>    left: 508px;
>    scrollbar-base-color:#7C5619;
> }

#Billede2 {
display : block;
marign : 0px auto;
}
i CSS, skulle vist få billedet centreret - hvis du med det mener lige
stor afstand til siderne.
Hvorfor absolut positioneret div? Og hvorfor lige i den position
(200,508)?
Et link til noget der ikke virker, er at foretrække - det er ikke
nødvendigvis den kode du har skrevet der fejler...

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

Birger Sørensen wrote in dk.edb.internet.webdesign.html:
> Grith Hodal kom med denne ide:
> > Hej allesammen
> >
> > Jeg har lavet en boks med scroll, hvori jeg har et billede.
> > Hvordan og hvor centrerer jeg dette billede?
> > Jeg har prøvet med align i både min html og css, men kan ikke få
> > det til at virke på nogen måde
> > Jeg har også sat farve på min scrollbar, men det virker kun i
> > Explorer, ikke i Mozilla. Hvorfor?
> > Hjælp!
> >
> > HTML:
> > <div class="scroll">
> > <h1>Behandlinger</h1>
> > <p>
> > Massage du Corps tilbyder en dybdegående massage af hele kroppen,
> > eller massage koncentreret om de områder, hvor du har brug for
> > det.
> > <ul>
> > <li>Helkropsmassage</li>
> > <li>Ryg/nakke/skulder</li>
> > <li>Fodmassage</li>
> > <li>Hovedbundsmassage</li>
> > <li>Arme/ben</li>
> > </ul>
> > </p>
> > <p>
> > Derudover tilbyder Massage du Corps også graviditets-massage, og
> > har en dertil indrettet briks.
> > </p>
> > <div id="Billede2">
> > <img src="billeder/graviditetsbriks.jpg" title="Briks"
> > alt="Briks" />
> > </div>
> >
> > CSS:
> > div.scroll {
> >    overflow: auto;
> >    height: 340px;
> >    width: 320px;
> >    padding-right: 10px;
> >    position:absolute;
> >    top: 200px;
> >    left: 508px;
> >    scrollbar-base-color:#7C5619;
> > }
>
> #Billede2 {
> display : block;
> marign : 0px auto;
> }
> i CSS, skulle vist få billedet centreret - hvis du med det mener lige
> stor afstand til siderne.
Ja, jeg mener lige stor afstand til siderne...centreret. Ovenstående gør
ingen forskel...?

> Hvorfor absolut positioneret div? Og hvorfor lige i den position
> (200,508)?
For at få tekstboksen placeret som ønsket. Har jeg ikke dette med,
placeres den i venstre hjørne.

> Et link til noget der ikke virker, er at foretrække - det er ikke
> nødvendigvis den kode du har skrevet der fejler...
Hvad mener du?
>
> Birger
>
> --
> http://varmeretter.dk - billig, sund og hurtig mad
> http://bbsorensen.dk
>
>


--
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

---

Grith Hodal skrev:

>> Et link til noget der ikke virker, er at foretrække - det er ikke
>> nødvendigvis den kode du har skrevet der fejler...
> Hvad mener du?

Birger mener at nogle stumper løsrevet kode ikke
er en fuldstændig beskrivelse af problemet. For
eksempel forstår jeg det beskrevne som to adskilte
problemer, nemlig en boks med rulleskakter, hvori
du vil have placeret et billede på en bestemt måde,
og et spørgsmål om placeringen af denne boks på siden.

Så et link til side, du mener er problematisk, tak!

Det er muligt følgende artikel kan hjælpe på et
at problemerne:
http://webdesign101.dk/showcase/scrollmap/

--
Med venlig hilsen
Jørgen Farum Jensen
http://webdesign101.dk

---

Grith Hodal tastede følgende:
> Birger Sørensen wrote in dk.edb.internet.webdesign.html:
8X
> Ja, jeg mener lige stor afstand til siderne...centreret. Ovenstående gør
> ingen forskel...?
>
>> Hvorfor absolut positioneret div? Og hvorfor lige i den position
>> (200,508)?
> For at få tekstboksen placeret som ønsket. Har jeg ikke dette med,
> placeres den i venstre hjørne.
>
>> Et link til noget der ikke virker, er at foretrække - det er ikke
>> nødvendigvis den kode du har skrevet der fejler...
> Hvad mener du?

Man kan også centrere i højden - deraf spørgsmålet.

Syntes nu ellers det angivne burde centrere billedet.
Du kan prøve at tilføje text-align : center; til #Billede2
(Jeg have set Billede2 som værende <img>).

Absolut positionerede elementer, placeres altid i øverste ventre hjørne
(0,0) af det element de indsættes i.
Absolut positionerede elementer tages ud af flowet for den øvrige HTML,
og er svære at arbejde med, netop fordi de ikke rigtigt "hænger sammen"
med resten af siden.

HTML indretter sig efter brugerens browservindue. Når du bruger absolut
positionering, reducerer du muligheden for denne tilpasning - og øger
risikoen for at din side ser meget anderledes ud på din nabos skærm end
din egen..

Og Jørgen har svaret på hvad jeg mener, med at et link er bedre end
løsrevne linier.
Hvis din CSS f.eks. har generele definitioner for <div> eller <img>,
kan der være andre måder at løse problemet på - eller det kan være dem
der skaber problemerne.
Det er altid nemmere at fejlfinde, når man har helheden.
Piller du rattet ud af din bil og indleverer det til mekanikeren, hvis
bilen ikke vil styre rigtigt?


Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

Hehe, meget go' pointe med rattet og bilen Husker det til næste gang. Jeg
har endnu ikke uploaded siden, så indsætter hele koden her.

Billedet er centreret med text-align, tak for hjælpen.

Jeg har brugt absolute posioneret, da jeg er nybegynder og har lært det i
CSS-tutorial, lektion 14. Jeg har ændret det til fixed, da det også er fint
her, men kan ikke helt forstå hvorfor absolute er et mærkeligt valg.

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="da">

<html>

<head>
<title>Massage du Corps - Behandlinger</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<div class="scroll">
<h1>Behandlinger</h1>
<p>
Massage du Corps tilbyder en dybdegående massage af hele kroppen, eller
massage koncentreret om de områder, hvor du har brug for det.
<ul>
<li>Helkropsmassage</li>
<li>Ryg/nakke/skulder</li>
<li>Fodmassage</li>
<li>Hovedbundsmassage</li>
<li>Arme/ben</li>
</ul>
</p>
<p>
Derudover tilbyder Massage du Corps også graviditets-massage, og har en
dertil indrettet briks.
</p>
<div id="Billede2">
<img src="billeder/graviditetsbriks.jpg" title="Briks" alt="Briks" />
</div>
<h2>Olie</h2>
<p>
Til massagen bruges kvalitetsolie uden mineralolier eller alkohol. Olien er
fremstillet af solsikke-, sød mandel- og lavendelolie, der absoberes nemt af
huden og har et højt indhold af essentielle fedtsyrer.
Tør og sart hud vil elske de blødgørende og beroligende egenskaber. Et
naturligt indhold af vitamin A, E og C, hjælper til at bevare hudens
elasticitet og smidighed.
</p>
</div>

<div id="Menu">
<a href="mdc.html" class="menu" title="Om Massage du Corps"><b>O</b>m MdC</a>
<span title="Behandlinger"><b>B</b>ehandlinger</span>
<a href="priser.html" class="menu" title="Priser"><b>P</b>riser</a>
<a href="gavekort.html" class="menu" title="Gavekort"><b>G</b>avekort</a>
<a href="galleri.html" class="menu" title="Galleri"><b>G</b>alleri</a>
<a href="kontakt.html" class="menu" title="Kontakt"><b>K</b>ontakt</a>
</p>
</div>

<div id="Bar">
<img src="billeder/bar.jpg"/>
</div>

<div id="Logo">
<a href="index.html">
<img src="billeder/logo site.jpg" title="Logo Massage du Corps" alt="Logo
Massage du Corps" />
</a>
</div>

</body>

</html>


CSS:
body {
   background-color: #FFFFFF;
   background-image: url("billeder/bckgrimage.jpg");
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: 50% 20px
}
body {
   margin-top: 40px;
   margin-right: 10%;
   margin-bottom: 10px;
   margin-left: 10%;   
}

h1 {
   color: #7C5619;
   font-family: arial, verdana, sans-serif;
   font-size: 14px
}

h2 {
   color: #7C5619;
   font-family: arial, verdana, sans-serif;
   font-size: 13px
}

img {
   border-width: 0px;
}

a:link {
   color: #7C5619;
   text-decoration:none;
}
a:visited {
   color: #7C5619;
   text-decoration:none;
}
a.menu {
   color: #7C5619;
   text-decoration:none;
   font-family: arial, verdana, sans-serif;
   font-size: 12px
}
a:hover {
   color: #7C5619;
   text-decoration:none;
   font-style: bold   
}
a:active {
   text-decoration:none;
   font-style: italic
}

span {
   color: #7C5619;
   text-decoration:none;
   font-family: arial, verdana, sans-serif;
   font-size: 12px
}

p {
   color: #7C5619;
   font-size: 80%;
   font-family: arial, verdana, sans-serif;
   font-weight: normal;
   text-align: justify;
}

ul {
   color: #7C5619;
   font-size: 80%;
   font-family: arial, verdana, sans-serif;
   font-weight: normal;
}

th {
   text-align: right;
}

td {
   font-family: arial, verdana, sans-serif;
   text-align: center;
}

#Tekstboks {
   width: 320px;
   hight: 100px;
   position:absolute;
   top: 200px;
   left: 508px;
}

div.scroll {
   overflow: auto;
   height: 340px;
   width: 320px;
   padding-right: 10px;
   position:fixed;
   top: 200px;
   left: 508px;
   scrollbar-base-color:#7C5619;
}

#Billede {
   float: right;
   margin-top: 8px;
   margin-bottom: 5px;
   margin-left: 10px;
}

#Billede2 {
   text-align: center
}

#Menu {
   position:fixed;
   top: 150px;
   left: 508px;
}

#Bar {
   position:fixed;
   top: 160px;
   left: 508px;
   width: 320px;
}

#Logo {
   position:fixed;
   top: 20px;
   left: 362px;
}

#Data {
   position:absolute;
   bottom: 50px;
   right: 50px;
}

--
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

---

Grith Hodal skrev:

> Jeg har endnu ikke uploaded siden, så indsætter
> hele koden her.

Det er altså en god ide at uploade en side der
driller, så er der mange flere der er i stand til at
hjælpe - netop fordi man med et direkte link kan
se siden i forskellige browsere i forskellige
sammenhænge.

> men kan ikke helt forstå hvorfor absolute er et
> mærkeligt valg.

Som Birger siger:

>> Absolut positionerede elementer tages ud
>> af flowet

Det vil sige at det lægger sig i et lag over alt det
andet, og kan risikere at dække for tekst og andre
ting. Det er ikke sikkert at du lægger mærke til det
i din opløsning eller i din browser, men andre kan
få en uheldig oplevelse.

Jeg har set sider hvor alt var placeret med
position:absolute; - det fungerede fint i 800 x 600,
men alt andet gik galt.

Det fungerer meget bedre hvis man stille og roligt
stabler de enkelte elementer oven på hinanden, og
skal noget stå ved siden af hinanden, bruger man
width, float og clear.

Læg lige siden ud i en test-mappe og send et link!

--
Allan Vebel
http://vebel.dk | http://html-faq.dk

---

Grith Hodal skrev:
> Hehe, meget go' pointe med rattet og bilen Husker det til næste gang. Jeg
> har endnu ikke uploaded siden, så indsætter hele koden her.
>
> Billedet er centreret med text-align, tak for hjælpen.
>
> Jeg har brugt absolute posioneret, da jeg er nybegynder og har lært det i
> CSS-tutorial, lektion 14. Jeg har ændret det til fixed, da det også er fint
> her, men kan ikke helt forstå hvorfor absolute er et mærkeligt valg.

Fordi det som hovedregel er uegnet til at opnå
det ønskede resultat. Lektion 14 er formodentlig en
lektion på HTML.DK, og de arikler giver jeg ikke
meget for.

Tak for al koden. Hvad havde du egentlig forestillet
dig - at vi skulle kopiere det ud af meddelelsen og
sætte det ind i vores egen editor og så beskue resultatet
og rådgive dig der ud fra? Det svarer til at du selv har
splittet bilen ad for at finde fejlen, og derefter
indleverer nogle af stumperne til mekanikeren.

Filnavne til billeder i koden sige jo ikke noget om
billederne, for eksempel.

Vi vil meget gerne hjælpe dig ud af de vildfarelser, du
finder på HTML.DK - men det kræver altså at du uploader
problemsiden til et webhotel og offentliggør et
link til siden her i gruppen.


--

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

---

Grith Hodal frembragte:
> Hehe, meget go' pointe med rattet og bilen Husker det til næste gang. Jeg
> har endnu ikke uploaded siden, så indsætter hele koden her.
>
> Billedet er centreret med text-align, tak for hjælpen.
>
> Jeg har brugt absolute posioneret, da jeg er nybegynder og har lært det i
> CSS-tutorial, lektion 14. Jeg har ændret det til fixed, da det også er fint
> her, men kan ikke helt forstå hvorfor absolute er et mærkeligt valg.
>
8X

Præcis som nybegynder er det endnu sværere, at få tingene til at
fungere med absolut positionering.
Der er ikke noget mærkeligt, ved hveken absolut eller fixed
positionering. Det er bare ikke altid hverken hensigtsmæssigt eller
nødvendigt, at bruge det til ret meget andet, end opbygningen af siden
- selve designet. Når man kommer til elementer der indeholder sidens
egentlig information, er "almindelig" html meget bedre egnet, fordi det
af sig selv tilpasser sig browservinduet, og derfor vises (næsten) ens
i alle browsere, og forskellige skærm/vindues-størrelser.

Lektion 14? Du mener formentlig på html.dk.
Det har sikkert engang været en udemærket tutorial. Men den har
overskredet sidste salgsdag, for flere år siden. Det eneste fornuftige
der er tilbage, er nyhedsgrupperne, som de faktisk låner fra usenet, og
lukrerer på andres gratis arbejde.
Så du skriver ikke på html.dk, men på nyhedsgrupperne på usenet.

Ellers -
du har pastet hele din kode. Hvis der er nogen der har tid, lyst og
lejlighed, kan de så oprette filer, og se den i browseren, hvor de så
formentlig vil kunne se din side - uden billeder godt nok, men man kan
måske danne sig et indtryk alligevel.
Men det er ikke ret mange der har hverken tid eller lejlighed til at
gøre det stykke arbejde for at se dit problem, som det ser ud i
virkeligheden.
De fleste af de værktøjer der bruges, er indbygget i eller tilføjelser
til browserne.
Derfor foretrækker vi et link til siden, der viser fejlen.
Vi hjælper gerne - men der er nok en grænse for hvor meget tid/arbejde
man er villig til at bruge for at få lov til at hjælpe...

Det du har givet os, giver dette resultat:
http://bbsorensen.com/gh/
(og det er positiv særbhandling - almindeligvis, går jeg ikke så langt,
for at løse andre designeres problemer, med mindre der er et specifikt
problem, jeg selv er interesseret i løsningen på.)
Der er 7 html fejl, og 3 CSS fejl på siden.
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
kan hjælpe dig med at løse dem - og gem linkene, hvis du ikke har en
browser, der kan hjælpe dig med at finde dem.
Du er selvfølgelig også stadig velkommen til at spørge her - men vi vil
nok se siden i aktion - altså et link til siden med problemet der skal
løses.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk