---

Jeg har en <div> som jeg har et billede i.
Dette element vil jeg gerne have horisontalt lige i midten, uanset
brugerens skærmstørrelse eller browservinduets størrelse.

Jeg har lavet et ID:

#billedContainer
{
position:absolute;
top:20px;
left:580px;
width:500px;
height:500px;
}

Når man definerer afstanden fra venstre side (i dette tilfælde 580px)
er det jo meget tvivlsomt, at det ser rigtigt ud, ret mange steder.

Hvis jeg skriver
left:50%;
i mit CSS, er det så øverste venstre hjørne der sidder lige i midten.
Men det er jo midten fra billedet (og dermed div'en) der skal være i
midten.

Hvordan klarer jeg det?

Der er vist ikke muligheder for at lave formler i CSS. Ellers kunne
man jon have forestillet sig en løsning, hvor man for eksempel havde
et billede der var 500 px bred og trække 250 px fra midten, eller
noget lignende.

Hvad gør jeg her?
--
Janus

---

Janus Høi wrote:

> #billedContainer
> {
> position:absolute;
> top:20px;
> left:580px;
> width:500px;
> height:500px;
> }
>
> Når man definerer afstanden fra venstre side (i dette tilfælde 580px)
> er det jo meget tvivlsomt, at det ser rigtigt ud, ret mange steder.

Prøv sådan i stedet:

#billedContainer
{
width:500px;
height:500px;
margin: 20px auto;
}

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://ginnerskov.dk
http://vestfynswebdesign.dk - http://html-faq.dk

---

Janus Høi skrev:
> Jeg har en <div> som jeg har et billede i.
> Dette element vil jeg gerne have horisontalt lige i midten, uanset
> brugerens skærmstørrelse eller browservinduets størrelse.
>
> Jeg har lavet et ID:
>
> #billedContainer
> {
position:relative;
> top:20px;
> width:500px;
> height:500px;
margin:auto;
> }

Ovenstående burde virke som ønsket.

--
Mvh. Kim Ludvigsen
http://pc-sikkerhed.dk

---

On 5 Dec., 22:32, Kim Ludvigsen <use...@kimludvigsen.dk> wrote:
>
>
> #billedContainer
> {
> position:relative;
> top:20px;
> width:500px;
> height:500px;
> margin:auto;
> }

Ja, nu er jeg på vej.

Men - og det fik jeg ikke sagt - 'billedContainer' skal lægge sig
henover det der i forvejen er på siden. Jeg tænder og slukker for
'billedContainer' vha. noget javascript. Det virker fint.
Derfor prøvede jeg med 'position:absolute'.
Nu kommer det blot i bunden, UNDER det indhold den skulle dække.
--
Janus

---

>Nu kommer det blot i bunden, UNDER det indhold den skulle dække.

Se her http://www.html.dk/tutorials/css/lektion15.asp

Venligst

Keld

---

On 6 Dec., 11:46, "Keld Villadsen" <villadsensnabelajyde.dk> wrote:
> >Nu kommer det blot i bunden, UNDER det indhold den skulle dække.
>
> Se herhttp://www.html.dk/tutorials/css/lektion15.asp
>
> Venligst
>
> Keld

Hmm..
Lige netop dén sad jeg og kiggede på i nat, men tænkte ikke det som
mulighed.
Det vil jeg prøve når jeg kommer hjem og får adgang til serveren.
--
Janus

---

On 6 Dec., 13:17, Janus Høi <newsgr...@hjerteknuser.dk> wrote:

> > Se her http://www.html.dk/tutorials/css/lektion15.asp


Nu har jeg kigget.

Men z-index gør jo blot at det ligger øverst. Det var ikke mit
problem.

Så vidt jeg kan se, skal z-index positioneres 'absolute', og så er jeg
jo lige dårligt stillet.

Med posiition:relative; kan jeg få det ind i midten, men jeg kan ikke
få det lagt ovenpå det andet.
--
Janus

---

Efter mange tanker skrev Janus Høi:
> On 6 Dec., 13:17, Janus Høi <newsgr...@hjerteknuser.dk> wrote:
>
>>> Se her http://www.html.dk/tutorials/css/lektion15.asp
>
>
> Nu har jeg kigget.
>
> Men z-index gør jo blot at det ligger øverst. Det var ikke mit
> problem.
>
> Så vidt jeg kan se, skal z-index positioneres 'absolute', og så er jeg
> jo lige dårligt stillet.
>
> Med posiition:relative; kan jeg få det ind i midten, men jeg kan ikke
> få det lagt ovenpå det andet.

Det er vist der, nogen begynder med negative margener.

Bortset fra det: Når du vil lægge noget ovenpå noget andet, er den
rigtige fremgangsmåde position : absolute.
margin: 0px auto;
skal da vist stadig centrere, selvom positionen er absolute.

Birger

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

---

Janus Høi skrev:
> Jeg har en <div> som jeg har et billede i.
> Dette element vil jeg gerne have horisontalt lige i midten, uanset
> brugerens skærmstørrelse eller browservinduets størrelse.
>
> Jeg har lavet et ID:
>
> #billedContainer
> {
> position:absolute;
> top:20px;
> left:580px;
> width:500px;
> height:500px;
> }
>
> Når man definerer afstanden fra venstre side (i dette tilfælde 580px)
> er det jo meget tvivlsomt, at det ser rigtigt ud, ret mange steder.
>
> Hvis jeg skriver
> left:50%;
> i mit CSS, er det så øverste venstre hjørne der sidder lige i midten.
> Men det er jo midten fra billedet (og dermed div'en) der skal være i
> midten.
>
> Hvordan klarer jeg det?

<div id="billedcontainer">
<p>Teksten oven på billedet</p>
</div>

#billedcontainer {
position:relative
width:500px;
height:500px;
margin:0 auto;
background-image: url(ditbillede.jpg);
background-repeat:no-repeat;
}

z-index komme kun i spil, hvis de to elementer
deler forældreelement.
Og z-index er heller ikke nødvendig hvis du laver

<div id="billedcontainer">
<img src="" ... />
<p>Teksten oven på billedet</p>
</div>
Men så skal du positionere teksten absolut inde
i det relativt positionerede container-element.

--

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

---

Janus Høi skrev den 05-12-2008:
> Jeg har en <div> som jeg har et billede i.
> Dette element vil jeg gerne have horisontalt lige i midten, uanset
> brugerens skærmstørrelse eller browservinduets størrelse.
>
> Jeg har lavet et ID:
>
> #billedContainer
> {
> position:absolute;
> top:20px;
> left:580px;
> width:500px;
> height:500px;
> }
>
> Når man definerer afstanden fra venstre side (i dette tilfælde 580px)
> er det jo meget tvivlsomt, at det ser rigtigt ud, ret mange steder.
>
> Hvis jeg skriver
> left:50%;
> i mit CSS, er det så øverste venstre hjørne der sidder lige i midten.
> Men det er jo midten fra billedet (og dermed div'en) der skal være i
> midten.
>
> Hvordan klarer jeg det?
>
> Der er vist ikke muligheder for at lave formler i CSS. Ellers kunne
> man jon have forestillet sig en løsning, hvor man for eksempel havde
> et billede der var 500 px bred og trække 250 px fra midten, eller
> noget lignende.
>
> Hvad gør jeg her?

#billedContainer
{
position:absolute;
top : 50%;
left : 50%;
margin-top : -250px;
margin-left : -250px;
}

kan vidst nok gøre det...
Ellers se på
http://www.wpdfd.com/editorial/thebox/deadcentre4.html

Birger

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