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

snuf Nybegynder

19. januar 2004 - 11:12 Der er 15 kommentarer og
1 løsning

Positionering af DIV

Som det fremgår nederst, har jeg i mit stylesheet en "container" hvor alt indhold (bl.a. "leftcontent") er i. Formålet med den er at centrere alt indhold i browseren. Derfor har jeg en

<div align=center>
<div id=container>

på min side.

Jeg har også en "leftcontent" som jeg har placeret vha koordinater. Problemet er at "leftcontent" helst skulle placere sig ud fra "container"s överste venstre hjörne og ikke ud fra browserens överste venstre hjörne, således at "leftcontent" altid står på samme sted i "container", uanset hvilken störrelse/oplösning brugerens browser er i.

Hvordan gör jeg det?

#container {
width:750px;
height:500px;
background:white;
border-right:2px solid #000;
border-bottom:2px solid #000;
color: black;
padding-top:25px;
}

#leftcontent {
position:absolute;
left:10px;
top:10px;
z-index:10;

width:200px;
height:200px

Synes godt om

snuf Nybegynder

19. januar 2004 - 11:20 #1

Undskyld den rodede opstilling af stylesheet'et. Her er en lidt pänere version:

#container {
width:750px;
height:500px;
background:white;
border-right:2px solid #000;
border-bottom:2px solid #000;
color: black;
padding-top:25px;
}

#leftcontent {
position:absolute;
left:10px;
top:10px;
z-index:10;
width:200px;
height:200px
}

Synes godt om

mm12010 Nybegynder

19. januar 2004 - 11:43 #2

#leftcontent {
position:relative;
left:10px;
top:10px;
z-index:10;
width:200px;
height:200px
}

Synes godt om

snuf Nybegynder

19. januar 2004 - 11:54 #3

Nej, det funker desværre ikke.

"#leftcontent" centrerer sig bare, jf. den <div align=center> som jeg har umiddelbart før min <div id=container>.

Synes godt om

snuf Nybegynder

19. januar 2004 - 12:00 #4

.. men måske er der en anden måde at centrere min "#container"?

Synes godt om

mik789 Nybegynder

19. januar 2004 - 13:41 #5

reglerne for positionering er ret komplicerede, og jeg kan ikke sige dig præcist hvad du skal gøre hvis du vil lave det hele i css. Almindeligvis er det sådan at absolut positionering betyder position i forhold til skærmen.

Alternativt kan du undlade top og left værdierne i dit stylesheet og angive disse dynamisk vha javascript i forhold til vinduets mål. F.eks. ud fra et centerpunkt som du finder vha document.body.clientWidth/2 (altså halvdelen af vinduesbredden - dette kun i IE) eller window.innerWidth/2 (tilsvarende, men kun i Geckobrowsere - Netscape og Mozilla). Fra dette punkt skal du så trække afstanden mellem dette centerpunkt og det punkt hvor du vil have boksens placeret. Men find først ud af om det både er top og left der skal angives på denne måde eller om et af dem kan klares som du har gjort i dit css. Her er et eksempel fra mine egne sider:

<script type="text/javascript"></script>

Du skal så bare også have et script der automatisk reloader din side, hvis brugeren resizer vinduet. F.eks. flg. i body tag'et: onresize="self.location.reload();".

Du kan se mere om andre værdier for vinduets mål på www.e-tidsskrift.dk/dev/vinduesdimensioner.php

//mik

Synes godt om

mik789 Nybegynder

19. januar 2004 - 14:01 #6

hvis vi snakker css tror jeg i virkeligheden at dit problem er at den omgivende boks, <div align="center">, ikke har nogen mål, så hvad skal boksene inden i udregnes på grundlag af?

Synes godt om

snuf Nybegynder

19. januar 2004 - 17:29 #7

Jeg havde håbet på at kunne gøre det uden brug af scripting.

Mht. den omgivende box, så har den mål:

#container {
width:750px;
height:500px;

Synes godt om

snuf Nybegynder

19. januar 2004 - 18:39 #8

Jeg har selv fundet en løsning. Ellers mange tak for forslagene.

Synes godt om

mik789 Nybegynder

19. januar 2004 - 23:27 #9

snuf> fint, men fortæl os lige hvad løsningen går ud på.

Synes godt om

snuf Nybegynder

20. januar 2004 - 09:27 #10

Naturligvis.

Dette er stylesheet´et:

body {
background-color: red;
margin:0;
font-family: verdana, geneva, arial, sans-serif;
font-size:11;
}

#container {
position:relative;
width: 740px;
height: 700px;

margin: 25px auto 0px auto;
padding: 0px 0px 0px 0px;
background: #ffffff;
border-right:1px solid #000;
border-bottom:1px solid #000;
}

#hovedkasse {
position:absolute;
left:20px;
top:20px;
z-index:10;

width:700;
height:300;

background:green;
}

#kasse1 {
position:absolute;
left:20px;
top:340px;
z-index:10;

width:330;
height:100;

background:red;
}

#kasse2 {
position:absolute;
left:390px;
top:340px;
z-index:10;

width:330;
height:100;

background:blue;
}

Og dette er indexfilen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>DIV</title>
<meta name="generator" content="">
<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

<div align="center">

<div id=container>

<div id="hovedkasse" div align="left">Hovedkasse</div>

<div id="kasse1" div align="left">Kasse1</div>

<div id="kasse2" div align="left">Kasse2</div>

</div>
</div>
</body>
</html>

Tricket var at #containerens postition skulle sättes til 'relative', og indholdet i #containeren (de andre div´er) skulle sättes til 'absolute'.

Synes godt om

mik789 Nybegynder

20. januar 2004 - 12:25 #11

snuf> jeg sidder her og leger med dit design, som jo virker fint. Der er lige et par småting der skal rettes i stylesheetet: du skal angive "px" efter tallene hvor det mangler ved width og height; du behøver ikke z-index. Og du behøver faktisk slet ikke boksen <div align="center">, altså den box der omgiver #container. Du kan i stedet sætte text-align: center; under body i dit stylesheet. Men du har ret, det vigtigste er at #container's position sættes til relativ.

Synes godt om

mik789 Nybegynder

21. januar 2004 - 14:10 #12

jeg tror det med centrering og position: relative er noget mange kan bruge, så jeg har arbejdet videre med snuf's side og tjekket den med CSS2 manualen. Se: www.e-tidsskrift.dk/dev/position.php
Hvis der er noget der er forkert eller kan gøres bedre så meld tilbage.
//mik

Synes godt om

snuf Nybegynder

21. januar 2004 - 18:47 #13

Det blev jo til en helt fin lille artikel :o)

Synes godt om

hermandsen Juniormester

21. januar 2004 - 23:47 #14

Okay, jeg har ikke læst alle svarene, og sikkert heller ikke spørgsmålet helt godt nok, men kan man ikke bare gøre således:

#something {
position: absolute;
left: 50%; /* Når left er 50%, må det jo være midten */
margin-left: -300px; /* Denne bruges så til at positionere ud fra midten */
}

//hermandsen

Synes godt om

mik789 Nybegynder

22. januar 2004 - 00:01 #15

hermandsen> tjo, det kan man da godt, hvis det man vil er at centrere en boks der er 600px bred. Men det var ikke så meget det spørgsmålet gik på.

Synes godt om

hermandsen Juniormester

22. januar 2004 - 00:08 #16

>>mik789
Arh... Det var nemlig hvad jeg troede spørgsmålet gik ud på... Jeg skimmede det sådan lidt hurtigt, nok lidt for hurtigt! ;)

Klokken er da vist også ved at være lige lovlig sent på den!! ;)

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

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