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
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
Link fra form input Af jnrmgs i HTML	9	19/09/202319:10	23/09/202313:11
includere i HTML Af slein55 i HTML	3	15/09/202313:47	16/09/202309:40

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

05/07

Dynamics-kæmpen Cepheo leverer røde tal i første regnskab som selvstændigt selskab

05/07

Store sager fra BMW i5: Alt er bare perfekt afstemt her

05/07

Nørgaard: Derfor bruger fattigrøvene AI meget mere end de rige svin

05/07

IBM-direktør efter blodrødt regnskab: “Vi er godt på vej ud af det stormvejr, som ramte os i 2023”

05/07

Kom i problemer efter ransomware-angreb: Nu køber rigmand Christian Stadil IT-Hotellets bunker

05/07

Stiftere overvejer at gøre Flatpay til en bank – krav om compliance er en stopklods

05/07

Rejsekort reducerer kraftigt den tid, som selskabet vil beholde dine lokationsdata i: Vil nu slette dem efter få måneder

05/07

Hackerangreb på OpenAI: Selskabets designs af AI-teknologi stjålet

05/07

Efter skatte-dom: IBM Danmark sætter 163 millioner kroner til side til ekstra skatte-regning i Danmark

05/07

KMD ændrer i sit ikoniske logo efter 17 år

05/07

Klar tale til Tesla og SAP: Snart skal du tale med dit ERP-system

Vis flere artikler

IT-JOB

Statens IT

Statens It søger tekniske sikkerhedskonsulenter

Sindico Group A/S

Business Central Specialist

TV2

Projektledere til TV 2 Teknologi

Statens IT

Sikkerhedsanalytiker til Operationel Sikkerhed

A/S Bryggeriet Vestfyen

IT-Architect /Administrator

Vis flere jobs

Seneste spørgsmål Seneste aktivitet

I dag 00:30	Fejl i Ark Af Morten_Jepsen i Excel
I går 16:56	Kan min mobil hackes Af SBS i Mobiltelefoner
I går 12:56	Forskellige billeder til forskellige skærme ? Af snedker1 i Mac
I går 11:56	Om brug af funktionen sumprodukt Af Erik R i Excel
05/0722:41	Hjælp til at skrive opgave Af Needhelp i Småopgaver