/ 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
Float og absolute positon
Fra : Lasse Jensen


Dato : 17-05-06 13:59

Hej folkens.

Kan man ikke have en boks med float; og så samtidig have et billede oven
på boksen hvor jeg har brugt position: absolute? Jeg kan ikke få den til
at lægge den oven på boksen, heller ikke med Z-index. Det burde man da
kunne? Ellers bliver jeg nødt til at skifte boksen med float ud til
position: absolute også?

Tak for dit svar.

Mvh. Lasse Jensen

 
 
Allan Vebel (17-05-2006)
Kommentar
Fra : Allan Vebel


Dato : 17-05-06 15:16

Lasse Jensen skrev:

> Jeg kan ikke få den til at lægge den oven på boksen,
> heller ikke med Z-index. Det burde man da kunne?

Må vi se resultatet? Kom med et link til siden, så vi har
lidt kode at lege med!

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



Lasse Jensen (17-05-2006)
Kommentar
Fra : Lasse Jensen


Dato : 17-05-06 18:43

Allan Vebel skrev:
>
>
> Må vi se resultatet? Kom med et link til siden, så vi har
> lidt kode at lege med!
>

Selvfølgelig ;) http://www.webweaver.dk/

Den blå boks øverst er den med float på, og logo'et nedenunder i venstre
side er billedet med position: absolute..

Min CSS:

#topbar {
float: left;
margin-top: 72px;
height: 52px;
width: 100%;,   
background-image:url(http://www.webweaver.dk/billeder/top_bar.jpg);   
background-repeat: repeat-x;      
z-index: 1;
}
      
#logo {
position:absolute;      
left: 10px;      
top: 20px;
z-index: 2;
}

HTML filen:

<div id="topbar">Test...</div>
<div id="id"><img src="http://www.webweaver.dk/billeder/banner.jpg"
alt="Webweaver.dk"></div>   

Mvh. Lasse Jensen

Jørgen Farum Jensen (17-05-2006)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 17-05-06 19:46

Lasse Jensen wrote:

> Den blå boks øverst er den med float på, og logo'et nedenunder i venstre
> side er billedet med position: absolute..
>
> Min CSS:
>
> #topbar {
> float: left;
> margin-top: 72px;
> height: 52px;
> width: 100%;,
> background-image:url(http://www.webweaver.dk/billeder/top_bar.jpg);
> background-repeat: repeat-x;
> z-index: 1;
> }
>
> #logo {
> position:absolute;
> left: 10px;
> top: 20px;
> z-index: 2;
> }
>
> HTML filen:
>
> <div id="topbar">Test...</div>
> <div id="id"><img src="http://www.webweaver.dk/billeder/banner.jpg"
> alt="Webweaver.dk"></div>
>

Der er så vidt jeg hurtigt kan se 2 løsninger:

1)
Giv #topbar egenskaben position:relative. Sæt
billedet ind i #topbar og positionér det i
forhold til #topbar. Eventuelt top:-20px eller
lignende, hvis du vil have det til rage ovenud
af det blå bånd.

2)
Drop float-egenskaben for #topbar, positionér
begge elementer absolut og giv resten af indholdet
en passende margin-top.

--

Med venlig hilsen

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

Søg
Reklame
Statistik
Spørgsmål : 177501
Tips : 31968
Nyheder : 719565
Indlæg : 6408527
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste