CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

jochke Nybegynder

21. januar 2007 - 12:22 Der er 12 kommentarer

3 div'er i række

Jeg ønsker følgende:

_____ _____ _____
| | | |
|divL |divC |divR |
|_____|_____|_____|

De tre div'er er tilsammen 100% af browserens bredde. divC har en fast bredde på 728px og er centreret. DivL og R skal udfylde resten af browseren, uanset browserens størrelse.

Det er meningen at der skal være et banner i divC der fader fra en farve fra divL til en anden der er divR.

Synes godt om

jochke Nybegynder

21. januar 2007 - 12:23 #1

Nåe den fine ASCII tegning blev lidt forvrænget. Håber I alligevel kan forstå den. :)

Synes godt om

roenving Novice

21. januar 2007 - 12:28 #2

Sæt to diver ind, een der floater left med den ene baggrundsfarve, den anden centreret (divC) med et højt z-index og sæt baggrundsfarven på html/body til den farve, du vil have i divR !-)

Synes godt om

jochke Nybegynder

21. januar 2007 - 15:38 #3

Din metode passer ikke helt til mit setup.

DivL har alligevel samme farve som body baggrundsfarven. Men divR har en anden farve. Derfor skal jeg have divC centreret og divR skal stå til højre for divC. Det kan jeg bare ikke få den til. divC holder sig hele tiden i venstre side.

Her er CSS for de to Div'er;

#top-center{
background-image:url(logo.png);
background-repeat:no-repeat;
background-position:center;
height:90px;
width:728px;
position:relative;
margin:0 auto;
float:left;
}
#top-right{
background-color:#06bbf3;
height:90px;
}

og html'en:

<div id="top-center"></div><div id="top-right"></div>

Synes godt om

roenving Novice

21. januar 2007 - 15:45 #4

Fjern dog floaten ...

#top-center{
background-image:url(logo.png);
background-repeat:no-repeat;
background-position:center;
height:90px;
width:728px;
position:relative;
margin:0 auto;
}
#top-right{
background-color:#06bbf3;
height:90px;
position:absolute;
right:0;
width:728px;
z-index:-1;
}

-- men det ville være nemmere at sætte baggrundsfarven til højre-farven !-)

Synes godt om

jochke Nybegynder

21. januar 2007 - 15:52 #5

Nu centreres #top-center, men #top-right vises overhovedet ikke.

Synes godt om

roenving Novice

21. januar 2007 - 15:58 #6

Argh, jeg har jo glemt top:0; !-)

Synes godt om

jochke Nybegynder

21. januar 2007 - 17:07 #7

Naa den har jeg også prøvet uden held.

Synes godt om

mclemens Nybegynder

22. januar 2007 - 10:36 #8

Roenving, FF kan ikke lide et negativt z-index.

#top-center{
background-image:url(logo.png);
background-repeat:no-repeat;
background-position:center;
height:90px;
width:728px;
position:relative;
margin:0 auto;
z-index:2;
}
#top-right{
background-color:#06bbf3;
height:90px;
position:absolute;
right:0;
width:728px;
z-index:1;
top:0;
}

Synes godt om

jochke Nybegynder

22. januar 2007 - 16:31 #9

Sådan. Smid et svar begge to, så deler i 50/50.

Synes godt om

roenving Novice

22. januar 2007 - 16:51 #10

Tjah, jeg huskede først z-indexet, da jeg nåede til top-right, så der satte jeg den bare negativt, da det jo er tilladt efter css-rekommendationerne !-)

-- els velbekomme '-)

Synes godt om

mclemens Nybegynder

22. januar 2007 - 18:07 #11

Ikke noget til mig, det
var blot et lille puf ;)
Men tak for tilbuddet :)

Jeg troede egentlig at den lå under html eller
body elementet i både IE og FF for da jeg satte
html,body {height:80px;overflow:auto;} dukkede den
op, men det er åbenbart den overflow der gør
at FF snupper negativt z-index med.

Ved test i IE burde elementerne kunne ses
liggende under html og body elementerne.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
html,body {height:80px;background:red;}
#top-center{
background-image:url(logo.png);
background-repeat:no-repeat;
background-position:center;
height:90px;
width:728px;
position:relative;
margin:0 auto;
}
#top-right{
background-color:#06bbf3;
height:90px;
position:absolute;
right:0;
width:728px;
z-index:-1;
top:0;
}

#top-right222{
background-color:#ffbbf3;
height:90px;
position:absolute;
right:218:01 22-01-20070;
width:728px;
z-index:-2;
top:0;
}
</style>

</head><body>
<div id="top-center"><b onclick="d=document;d.documentElement.style.overflow='auto';d.body.style.overflow='auto';">Klik mig og sæt html,body {overflow:auto;} Løser FF</b></div><div id="top-right"></div><div id="top-right222"></div>
</body></html>

Synes godt om

mclemens Nybegynder

22. januar 2007 - 18:09 #12

Edit: Ved test i IE (skulle være IE6, ved intet om 7'erens tolkning)
burde elementerne kunne ses liggende under html og body elementerne.

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Variabler som ikke virker Af Frits Jensen i HTML	2	30/10/202409:37	30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS