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

jakobdo Ekspert

30. juni 2011 - 13:41 Der er 15 kommentarer og
1 løsning

Opret 3 kolonner med div

Hej,
jeg er på udkig efter html / css kode, som kan opnå følgende:

Lad os sige siden er 1024 bred.

Så ønsker jeg 3 div.

Div1: Skal i dette tilfælde være: (1024 / 2) - 50 pixels bred.
Div2: 100px bred og være præcist i midten.
Div3: Samme som Div1

Så layout bliver som:

DIV1 --- DIV2 --- DIV3

Og Div2 skal altid være center, uanset om siden vises på 640x480, 1600x1200 osv...

Kan ikke lige tænke hvordan man kan opnå det.

Og bare at lave en div, med width:100 og margin: 0px auto; er ikke en option.
Der skal være en div til højre og venstre for center-div'en og de skal fylde fra midt og helt til højre og venstre.

Synes godt om

jakobdo Ekspert

30. juni 2011 - 14:01 #1

Det kunne det godt.
Men kan ikke tænke, så håber nogen kan tænke for mig på denne. :o)

Synes godt om

NielsErikP Mester

30. juni 2011 - 13:53 #2

Hej..
Bare lige en tanke...Kan det ikke være noget med "float:left" og så en width på de forskellige div.
Hmmm... bare en tanke..!!

Synes godt om

Slettet bruger

30. juni 2011 - 14:03 #3

Du skal stille de tre bokse inden i en omgivende boks, som netop er midterstillet. Så vil de tre have samme placering i forhold til hinanden og uanset skærmstørrelsen vil det altid være centreret på samme måde.

Synes godt om

jakobdo Ekspert

30. juni 2011 - 14:07 #4

Div1 og Div3 skal ikke være center som sådan...

Div1 og Div3 kan være 100px, hvis skærmen er 300px bred.
Er skærmen 1600, så vil div1 og div3 skulle være:

(1600-100) / 2 = 750px.

Er skærmen 800 bred, så bliver det:

(800-100) / 2 = 350px.

Så mit regnestykke var måske misvisende tidligere.

Synes godt om

Slettet bruger

30. juni 2011 - 14:11 #5

Ok du mener:

Div1: (skærmbredde / 2) - 50 pixels bred.
Div2: 100px bred og være præcist i midten.
Div3: Samme som Div1

Altså... Du kan jo lave to div med bredde på 50% og lade dem stå ved siden af hinanden. De skal så begge have en margin til hhv. højre og venstre på 50px.
Derefter laver du så en div, der ligger "ovenpå", som er 100px bred og centreret i forhold til skærmen.

Synes godt om

Slettet bruger

30. juni 2011 - 14:20 #6

Og hvis ikke margin virker (som det nok ikke gør - jeg tror du får en vandret scroll) så brug padding. Så må man acceptere, at der simpelthen bare er noget af de to bagvedliggende bokse, der er skjult af den forreste.

Synes godt om

jakobdo Ekspert

30. juni 2011 - 14:22 #7

#5: Det ser ikke ud til at virke...

<!DOCTYPE HTML>
<head>
<html>
<title>942101</title>
</head>
<body>
<div style="background-color:red;float:left;width:50%;margin-right:50px;">Div1</div>
<div style="background-color:blue;float:left;width:50%;margin-left:50px;">Div3</div>
</body>
</html>

Synes godt om

Slettet bruger

30. juni 2011 - 14:30 #8

Nej, nej, der er jo også kanter og marginer ligenu, som ødelægger det. Hvis du sætter 50% på begge, så må der jo ikke være bare én pixel for meget noget sted.

Lav en css sådan her:

* {
margin: 0;
padding: 0;
border: 0;
}

Så fjerner du alle default-afstande på alle elementer.

Synes godt om

Slettet bruger

30. juni 2011 - 14:32 #9

En mindre rettelse:

* {
margin: 0;
padding: 0;
border: none;
}

Synes godt om

jakobdo Ekspert

30. juni 2011 - 14:37 #10

Jeg tror jeg forsøger med en anden løsning.
Har måske noget snart...

Synes godt om

Slettet bruger

30. juni 2011 - 14:45 #11

<!DOCTYPE HTML>
<head>
<html>
<title>942101</title>
<style type="text/css">
* {margin:0;padding:0;border:none;}
</style>
</head>
<body>
<div style="background-color:red;float:left;width:48%;margin-right:50px;">Div1</div>
<div style="background-color:blue;right;width:48%;margin-left:50px;">Div3</div>

<div style="background-color:green; opacity:0.4;filter:alpha(opacity=40); position:absolute; margin:auto 0; width:100px;>Div2</div>
</body>
</html>

Synes godt om

Slettet bruger

30. juni 2011 - 14:49 #12

Jeg har 'snydt' lidt ved at gøre bredde kun til 48%. Det skal være en meget bred skærm, før det vil være et problem - først ved en skærmbredde på 2500px vil de 4% udgøre et "hul", der er 100px og dermed ikke længere dækkes af boksen ovenpå.

Og det er kun gjort, fordi du åbenbart har problemer med at få 50% til at virke, hvilket det burde.

Synes godt om

jakobdo Ekspert

30. juni 2011 - 15:26 #13

Da jeg kører en side med fast bredde, kunne jeg bruge en float:left; løsning.
Hvis jeg blot angiver faste bredder på de forskellige div'er og dermed snyder jeg lidt.
Men problemet blev ikke løst, som jeg ser det.
position:absolute; er desværre ikke en løsning.
Men er der nogle som vil gøre krav på pointene, så skriver i bare.
Jeg sidder med info, som i ikke fik, så der var mere i det, end blot dette spørgsmål, hvilket i jo af gode grunde ikke kunne tage hensyn til...

Synes godt om

Slettet bruger

30. juni 2011 - 15:31 #14

Ok. Tag pointene selv for mit vedkommende.
Men held og lykke med det.

Synes godt om

jakobdo Ekspert

30. juni 2011 - 15:38 #15

Tak for hjælpen...

Synes godt om

Slettet bruger

30. juni 2011 - 17:46 #16

Ok, tak for point.

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
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

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