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

22/11

Test: Den snusfornuftige Volkswagen ID.3 blevet til lidt af el-bisse

22/11

Vil købe tele-løsninger til det offentlige for 370 millioner kroner

22/11

Nørgaard: Det er de neuro-divergente originalers tid

22/11

Sker helt åbenlyst: Ansatte i den kinesiske stat sælger borgernes personlige data på hemmelige internet-fora

22/11

Efterspørgslen på AI-regnekraft er enorm - og det smitter af på priserne: "Vi kan sælge næsten alt, hvad vi får ind"

22/11

Derfor bliver den amerikanske tvangs-opdeling af Google nok ikke til noget

22/11

Nyt værtøj fra Microsoft: Snart kan du reparere nedbrudte Windows-enheder på distancen

22/11

Vi har fundet 10 ledige it-stillinger, som du kan søge netop nu

22/11

Politiet skriver kontrakt på 75 millioner kroner med dansk it-firma: Medarbejdere skal flytte ind hos politiet

22/11

Kombit gør klar til at købe it-konsulenter for 140 millioner kroner - her er planen

22/11

Droner i krig - sådan anvendes de mest effektivt på slagmarken

Vis flere artikler

IT-JOB

Unik System Design A/S

Udviklingschef

Comby Denmark A/S

Netværksspecialist – Skab fremtidens netværksløsninger sammen med os

Statens IT

Er du vores nye IT-projektleder hos Statens It?

Edora A/S

Fullstack udviklere

Statens IT

Leder til drift og udvikling af Microsoft 365

Vis flere jobs

Seneste spørgsmål Seneste aktivitet

30 min siden	Navigation i Peugeot 3-2008 fra 2017 Af arnepedersen i Andet software
I dag 14:10	Outlook henter ikke mails Af TTA i Office & Kontorpakker
I dag 13:58	vise billeder i kartotek med store ikoner inklusive optagelsesdato Af Malm i Billedbehandling
I dag 13:35	Adobe Elements 2019, Organizer Crasher Af mort1 i Billedbehandling
I går 20:49	pop up black friday Af Malm i Virus