Notifikationer

Markér alle som læst Log ud

jakobdo Ekspert

03. juni 2005 - 21:44 Der er 13 kommentarer og
1 løsning

Læg en DIV inde i en anden DIV

Hvis jeg f.eks. har en div, som er centreret.
Lad os sige den fylder: 100px(bredde) * 50px(højde).
Er det så muligt at lægge en DIV i position y = 5px x = 5px fra den div?
Eller skal man bruge margin/padding til det?

Ligeledes har jeg et spørgsmål.
Hvordan laver jeg 2 div'er som er ved siden af hinanden?
(uden position absolute)

Synes godt om

nielle Nybegynder

03. juni 2005 - 21:54 #1

Synes godt om

nielle Nybegynder

03. juni 2005 - 21:57 #2

...og:

<div style="width: 100px; height: 50px; border: 1px solid red;">

<div style="width: 40px; height: 100%; float: left; background: yellow;">
</div>

<div style="width: 40px; height: 100%; float: left; background: blue;">
</div>

<div>

Synes godt om

jakobdo Ekspert

03. juni 2005 - 22:02 #3

Nu du bruger relativt..
Hvad så hvis jeg skal have dit eksempel 2 ind i eksempel 1?

Synes godt om

nielle Nybegynder

03. juni 2005 - 22:11 #4

Du sagde ellers ikke noget om at jeg ikke måtte bruge relativ (kun absolute). Well, here goes:

<div style="width: 100px; height: 50px; border: 1px solid red;">

<div style="position: relative; top: 5px; left: 5px; width: 90px; height: 40px; background: magenta;">

<div style="width: 40px; height: 100%; float: left; background: yellow;">
</div>

<div style="width: 40px; height: 100%; float: left; background: blue;">
</div>

</div>

<div>

Synes godt om

jakobdo Ekspert

03. juni 2005 - 22:13 #5

Labert...
Smid et svar!

Synes godt om

nielle Nybegynder

03. juni 2005 - 22:18 #6

Svar :^)

Synes godt om

nielle Nybegynder

03. juni 2005 - 22:19 #7

... svar!

Du har forstået selve filosofien bageved løsningen?

Synes godt om

olebole Juniormester

03. juni 2005 - 22:42 #8

<ole>

Jeg har lidt på fornemmelsen, du har misforstået CSS-positionering, siden du ikke ønsker at bruge position:absolute :)

CSS foreskriver, at et absolut-positioneret element skal placere sig i forhold til det første omkransende element, der er positioneret. Om dette så er positioneret relativt eller absolut, spiller ingen rolle.
Findes et sådan ikke, skal elementet placere sig i forhold til body-elementet.

Mange kender kun den sidste regel og prøver derfor at undgå absolute. Prøv dette dokument:

<!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>TITLE</title>
<style type="text/css">
body, html {
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>

<table cellspacing="10" cellpadding="20" border="1">
<tr>
<td>
<div style="position:relative;width:100px;height:50px;border:1px solid red;">
<div style="position:absolute;top:5px;left:5px;width:40px;height:40px;background:yellow;">
</div>

<div style="position:absolute;top:5px;left:45px;width:40px;height:40px;background:blue;">
</div>

<div style="position:absolute;top:5px;left:85px;width:10px;height:40px;background:magenta;">
</div>
<div>
</td>
<td>Et relativt positioneret div<br>med tre absolut positionerede div inden i<br><---</td>
</tr>
<tr>
<td>Det samme relativt positioneret div<br>med tre absolut positionerede div inden i<br>---></td>
<td>
<div style="position:relative;width:100px;height:50px;border:1px solid red;">
<div style="position:absolute;top:5px;left:5px;width:40px;height:40px;background:yellow;">
</div>

<div style="position:absolute;top:5px;left:45px;width:40px;height:40px;background:blue;">
</div>

<div style="position:absolute;top:5px;left:85px;width:10px;height:40px;background:magenta;">
</div>
<div>
</td>
</tr>
</table>

</body>
</html>

/mvh
</bole>

Synes godt om

jakobdo Ekspert

03. juni 2005 - 22:50 #9

Det vil altså sige at position:absolute er i forhold til parent?

Synes godt om

olebole Juniormester

03. juni 2005 - 22:59 #10

yups - og dét er jo en helt anden ting ;o)

Synes godt om

olebole Juniormester

03. juni 2005 - 23:02 #11

- og få ikke religiøse kramper over, jeg har brugt en tabel til at lægge dem i. Det var blot for at få dem placeret lidt spredt på en simpel måde, som alle kunne deltage i :)

Synes godt om

jakobdo Ekspert

03. juni 2005 - 23:11 #12

Det som jeg nogle gange synes jeg mangler!
Nu vi er igang!
Hvordan centrere jeg en DIV, og inde i den kan absolute positionere?

Har testet med:

<body>
<div id="content">
<div id="topDiv">
<div id="logoDiv"></div>
<div>
<div id="leftDiv">
<div id="menuDiv"></div>
</div>
<div id="rightDiv">
<div id="newsDiv"></div>
</div>
<div id="bottomDiv">
<div id="copyrightDiv"></div>
<div>
</div>
</body>

CSS centering er taget herfra: http://www.bluerobot.com/web/css/center1.html
Og så er de andre DIVs position:absolute, og det ser ikke godt ud!

Synes godt om

jakobdo Ekspert

03. juni 2005 - 23:13 #13

Wooohooo, position: relative; var løsningen!
Den skulle bare puttes på #content!

Olebole, smid et svar, og du får halvdelen af points!

Synes godt om

nielle Nybegynder

03. juni 2005 - 23:27 #14

:^)

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