Toon posts:

[css] div relative naas elkaar

Pagina: 1
Acties:

vrijdag 18 juni 2004 15:28

Acties:
  • DJH
  • Registratie: Oktober 2000
  • Laatst online: 28-03 00:05

DJH

Topicstarter
Hey,

Ik heb een div(hoofd_div) van 50% gemaakt, hier moeten 4 div's(deeldiv's) in komen te staan die elk 50% van de hoofd div moeten zijn.. Als voorbeeld hier een plaatje:

Afbeeldingslocatie: http://www.xs4all.nl/~djh/got.jpg

Het zijn dus eigenlijk 4 div's

Als de hoofd_div uitrekt, moeten de deeldiv's ook uitrekken en elk 50% blijven.

Hoe kan ik dit het beste aanpakken?

Hoofd_div
code:
1
2
3
4
5
6
7
8
9
10

div#hd_il2
{
    position: absolute;
    top: 439px;
    left: 337px;
    width: 52%;
    height: 64px;
    z-index: 0;
    z-index: 0;
}

Deeldiv's
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

div#inlog1
{
    background-color: #F2F2F2;
    position: relative;
    top: 0px;
    left: 0px;
    width: 50%;
    height: 14px;
    z-index: 0;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #cfcfcf;
    float:right;
}
div#inlog2
{
    background-image: url("./gfx/bg_vakjes2.gif");
    background-attachment: absolute;
    position: relative;
    top: 0px;
    right: 0px;
    width: 190px;
    height: 60px;
    z-index: 0;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #cfcfcf;
    float:right;
}
div#helpdesk1
{
    background-color: #F2F2F2;
    position: relative;
    top: 0px;
    left: 0px;
    width: 50%;
    height: 14px;
    z-index: 0;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #cfcfcf;
    float: left;
}
div#helpdesk2
{
    background-color: #F2F2F2;
    position: relative;
    top: 0px;
    left: 14px;
    width: 50%;
    height: 14px;
    z-index: 0;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #cfcfcf;
    
}

vrijdag 18 juni 2004 16:00

Acties:
  • BtM909
  • Registratie: Juni 2000
  • Niet online

BtM909

Watch out Guys...

Snelle flans actie (hopelijk kan je er wat mee):

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<!-- --> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.upper  { width: 50%; height: 14px; display:inline}
.lower  { width: 50%; height: 100%; display: inline }

#hd_il2{ position: absolute; top: 100px; left: 100px; width: 400px; height: 500px;}
#inlog1 { background-color: #990000 }
#inlog2 { background-color: #999966 }
#helpdesk1 { background-color: #6600CC }
#helpdesk2 { background-color: #FFCC99 }


</style>
</head>

<body>
<div id="hd_il2">

    <div id="inlog1" class="upper">inlog1</div>
    <div id="inlog2" class="upper">inlog2</div>
    <div id="helpdesk1" class="lower">helpdesk1</div>
    <div id="helpdesk2" class="lower">helpdesk2</div>

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

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

vrijdag 18 juni 2004 16:07

Acties:

Verwijderd

als je van display: inline, float: left maakt wel waarschijnlijk :P

ie mag verder best in het w3c boxmodel

en de 100% height van de lower gewoon in pixels opgeven, zo worden ze namelijk gelijk aan de hoogte van de omhullende div, dus gaat het niet passen

code:
1
2

.upper  { width: 50%; height: 14px; float: left}
.lower  { width: 50%; height: 486px; float: left}

[ Voor 79% gewijzigd door Verwijderd op 18-06-2004 16:11 ]

vrijdag 18 juni 2004 16:20

Acties:
  • DJH
  • Registratie: Oktober 2000
  • Laatst online: 28-03 00:05

DJH

Topicstarter
Als ik de hoofddiv een percentage breedte geef, werkt het niet, als ik een absolute waarde geef b.v. 400px werkt het wel. Eigenlijk moet de hoofddiv 53% breedte zijn.. ?

vrijdag 18 juni 2004 16:37

Acties:

Verwijderd

ie bugged hierop idd, zijn de afmetingen heel erg pixelprecies? zet de percentages gewoon beiden op 49% anders

edit: om ie te helpen kan je ook een negatieve rechtermarge bij de rechter "cellen" zetten
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.upper  { width: 50%; height: 14px; float: left}
.lower  { width: 50%; height: 186px; float: left }

#hd_il2{ width: 53%; height: 200px}
#inlog1 { background-color: #990000 }
#inlog2 { background-color: #999966 }
#helpdesk1 { background-color: #6600CC }
#helpdesk2 { background-color: #FFCC99 }


</style>
</head>

<body>
<div id="hd_il2">

    <div id="inlog1" class="upper">inlog1</div>
    <div id="inlog2" class="upper" style="margin-right:-1px;">inlog2</div>
    <div id="helpdesk1" class="lower">helpdesk1</div>
    <div id="helpdesk2" class="lower" style="margin-right:-1px;">helpdesk2</div>

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

[ Voor 83% gewijzigd door Verwijderd op 18-06-2004 16:43 ]

vrijdag 18 juni 2004 19:39

Acties:
  • DJH
  • Registratie: Oktober 2000
  • Laatst online: 28-03 00:05

DJH

Topicstarter
Verwijderd schreef op 18 juni 2004 @ 16:37:
.....
Ik heb dat gedeelte maar in een tabel gedaan :( Die methode van jou werkt wel, maar zodra je ook maar iets veranderd (b.v. border) werkt het meteen al niet meer.. Btje jammer dat er qua ontwerp nog een aantal beperkingen zijn met css!

vrijdag 18 juni 2004 20:40

Acties:

Verwijderd

DJH schreef op 18 juni 2004 @ 19:39:
[...]


Ik heb dat gedeelte maar in een tabel gedaan :( Die methode van jou werkt wel, maar zodra je ook maar iets veranderd (b.v. border) werkt het meteen al niet meer.. Btje jammer dat er qua ontwerp nog een aantal beperkingen zijn met css!
Fout, er zijn browser beperkingen, geen CSS beperkingen. Met CSS kan alles wat nu ook met tabellen kan (alhoewel het wel een rare vergelijking is aangezien (moderne) browsers de meeste HTML dingen al in CSS hebben beschreven, uitzonderingen zijn ROWSPAN en COLSPAN, welke ook niet echt beschreven hoeven te worden.

Zo heb je bijvoorbeeld 'display:table' om van je BODY element een tabel te maken.

vrijdag 18 juni 2004 21:33

Acties:

Verwijderd

Verwijderd schreef op 18 juni 2004 @ 20:40:
[...]

Fout, er zijn browser beperkingen, geen CSS beperkingen. Met CSS kan alles wat nu ook met tabellen kan (alhoewel het wel een rare vergelijking is aangezien (moderne) browsers de meeste HTML dingen al in CSS hebben beschreven, uitzonderingen zijn ROWSPAN en COLSPAN, welke ook niet echt beschreven hoeven te worden.

Zo heb je bijvoorbeeld 'display:table' om van je BODY element een tabel te maken.
Dat is zo, maar dat soort 'leuke' eigenschappen worden helaas erg slecht ondersteund door bepaalde browsers :'(

Wat je in dit geval evt. zou kunnen doen is net alsof, ik weet niet wat voor grafische eigenschappen je de vier divjes wilt gaan geven, maar er kan heel veel met een background en floatende divjes.

Je zou de div linksboven float:left en de div rechtsboven float:right kunnen geven met allebei als width 50%. Dan een div met clear:both. Voor een eventuele kolommen achtergrond kan je hier nog een div met background omheen zetten en dan dit hele verhaal herhalen, maar goed, dit is redelijk omslachtig en het is niet echt duidelijk wat DJH precies wil.
Pagina: 1
Reageer