Toon posts:

[CSS] Div's met dynamische hoogtes onder elkaar positioneren

Pagina: 1
Acties:
  • 105 views sinds 30-01-2008
  • Reageer

vrijdag 13 mei 2005 18:59

Acties:

Verwijderd

Topicstarter
Ik kom er niet uit................ben nu al zo lang aan het puzzelen dat ik het met jullie wil aankaarten, in de hoop dat ik op een frisse scherpe blik van iemand verder kan bouwen

Het probleem: Er zijn 2 div's die onder elkaar moeten staan. Dit is prima te regelen met "top=xx;" maar nu komt het tricky deel..de top mag niet statisch zijn van de onderste div. Deze onderste div moet beginnen waar de bovenste eindigd.

De code even heel basic als voorbeeld:
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9

.div_boven {
    position:absolute;
    top: 0px; 
    left: 0px; width: 468px;
}
.div_onder {
    position:absolute;
    left: 0px; width: 468px;
}


HTML:
1
2
3
4

<body>
    <div class="div_boven">hier komt de dynamische content</div>
    <div class="div_onder">hier komt de dynamische content</div>
</body>


Ze zullen niet onder elkaar komen, maar de onderste overlapt de bovenste gewoon. (MOZ) Ik kan dus geen "top" waarde meegeven aan de onderste div, deze moet afhankelijk zijn van waar de bovenste div bottom eindigd.... maar hoe dan???

EDIT: ik heb de search gebruikt, "div's onder elkaar" "div top relatie" etc. Google, enz.

mocht iemand een tip kunnen verstrekken, alvast bedankt ;)

[ Voor 8% gewijzigd door Verwijderd op 13-05-2005 19:00 ]

vrijdag 13 mei 2005 19:01

Acties:
  • faabman
  • Registratie: Januari 2001
  • Laatst online: 08-08-2024

faabman

waarom niet gewoon je positionering weghalen en een clear:both; gebruiken :?

Op zoek naar een baan als Coldfusion webdeveloper? Mail me!

vrijdag 13 mei 2005 19:05

Acties:
  • André
  • Registratie: Maart 2002
  • Laatst online: 06-05 11:13

André

Analytics dude

Verwijderd schreef op vrijdag 13 mei 2005 @ 18:59:
Ik kom er niet uit................ben nu al zo lang aan het puzzelen dat ik het met jullie wil aankaarten, in de hoop dat ik op een frisse scherpe blik van iemand verder kan bouwen
Ik denk dat je al te lang aan het puzzelen bent :P Zoals faabman al zegt: gewoon position:relative en ze komen toch automatisch onder elkaar :D

vrijdag 13 mei 2005 19:11

Acties:

Verwijderd

Topicstarter
Gefixt :7


alleen nu moet ik m'n tekst margin's opnieuw in de css indelen, maar dat komt wel goed. Bedankt!

vrijdag 13 mei 2005 19:25

Acties:

Verwijderd

Topicstarter
IE zet ze netjes onder elkaar, MOZ gooit tussen elke div 8a 10 pixels.....

dus (voorbeeld even in een code venstertje)

HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14

-------------------bovenkant browser-----------------------
10pixels
+-----------------------------+
|                             |
|          div_boven          |
|                             |
+-----------------------------+
10pixels
+-----------------------------+
|                             |
|          div_boven          |
|                             |
+-----------------------------+
10pixels

vrijdag 13 mei 2005 19:26

Acties:
  • André
  • Registratie: Maart 2002
  • Laatst online: 06-05 11:13

André

Analytics dude

Pas dan de margins van de div's aan ;)

vrijdag 13 mei 2005 19:29

Acties:

Verwijderd

Topicstarter
Ik ben niet helemaal achterlijk.. ;) Er zijn geen margins voor de div's, dat is het vreemde... check m'n code nog wel ff (nogmaals het werkt in IE)

vrijdag 13 mei 2005 19:36

Acties:
  • WPN
  • Registratie: Augustus 2003
  • Laatst online: 30-03 22:59

WPN

probeer voor de gein toch eens margin: 0px uit op de divs

en misschien kan je voor het testen borders om je divs zetten border: 1px solid black

dan zie je de div zelf en de margin of padding

Als ik denk zoals ik dacht, dan doe ik zoals ik deed, als ik doe zoals ik deed, dan denk ik zoals ik dacht! Cogito Ergo Sum

zaterdag 14 mei 2005 08:50

Acties:
  • tec
  • Registratie: Juni 2001
  • Laatst online: 17-12-2024

tec

TEC

Verwijderd schreef op vrijdag 13 mei 2005 @ 19:29:
Ik ben niet helemaal achterlijk.. ;) Er zijn geen margins voor de div's, dat is het vreemde... check m'n code nog wel ff (nogmaals het werkt in IE)
Haal de paddings op de divs weg.. je kan de text in een <p> zetten en dan daar paddings op doen.

zaterdag 14 mei 2005 09:31

Acties:

Verwijderd

wat is je code nu? hetzelfde of zitten er al p's in? (zou wel moeten) dan heb je namelijk misschien last van margin collapsing.

zondag 15 mei 2005 00:29

Acties:

Verwijderd

Topicstarter
Verwijderd schreef op zaterdag 14 mei 2005 @ 09:31:
wat is je code nu? hetzelfde of zitten er al p's in? (zou wel moeten) dan heb je namelijk misschien last van margin collapsing.
Ten eerste allemaal bedankt voor het advies :) alle margins,paddings terugbrengen naar 0px heeft geen effect..het komt, zoals mophor als zei door de "margin collapsing" met <p>

Hier even de recente code:
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

body {
    background-color: transparent; filter:chroma(color=#123456);
    margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;
}
.div_boven {
    position:relative;
    background-color: #fff; color: #000; width: 468px;
}
.div_onder {
    position:relative;
    background-color: #000; color: #fff; width: 468px;
}
p.titel {
    font-family: verdana; font-size: 11px; font-weight: bold; text-transform: uppercase;
    margin-left: 10px; margin-top: 10px; margin-right: 10px; margin-bottom: 8px;
}
p.inhoud {
    font-family: verdana; font-size: 10px; font-weight: normal;
    margin-left: 10px; margin-right: 10px; margin-bottom: 30px;
}

HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<body>
<div class="div_boven">
    <p class="titel">titel</p>
    <p class="inhoud">
    Content.texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
    Content.texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
    Content.texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
    Content.texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
    Content.texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
    Content.texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p>
</div>
<div class="div_onder">
    <p class="titel">nieuw/s</p>
    <p class="inhoud">
    Content.texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
    Content.texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
    Content.texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
    Content.texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
    Content.texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
    Content.texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p>
</div>
</body>

Uitkomst:
Afbeeldingslocatie: http://www.ikwileenwebsite.nl/GoT/margin2.jpg

Gewenst:
Afbeeldingslocatie: http://www.ikwileenwebsite.nl/GoT/margin1.jpg

Met de GoT search kwam ik uit op deze website: http://www.complexspiral....ons/uncollapsing-margins/

Ik heb het meerdere malen zorgvuldig gelezen, alleen ik kom er vooralsnog niet helemaal uit om het resultaat zoals gewenst te krijgen..

[ Voor 5% gewijzigd door Verwijderd op 15-05-2005 00:29 ]

zondag 15 mei 2005 09:46

Acties:
  • Sappie
  • Registratie: September 2000
  • Laatst online: 27-04 07:10

Sappie

De Parasitaire Capaciteit!

Op die website die je gevonden hebt worden toch 2 workarounds gegeven, waarvan je er 1 waarschijnlijk kunt gebruiken (die met de borders zou ook kunnen, maar dan moet je die ook weer de goed kleur geven).
Summary

In the majority of cases, margin collapsing delivers the types of layout results we want. It's only in those cases where we want margins to be "contained" by other elements that things can go a bit awry. Thanks to the way CSS is written, however, there are ways to overcome the unwanted collapsing. By associating either padding or a border with an element, it will "contain" the margins of descendant elements.
Pas dus op je div's ("boven" en "onder") bottom en top padding toe van 1 px, zo dus:
code:
1

padding: 1px 0;

Een andere manier, die overigens voor zover ik zie niet genoemd wordt op die website, is het gebruiken van floating elementen. Daar wordt namelijk geen margin collapsing op toegepast. Dit kan in veel gevallen ook bruikbaar zijn. Pas daartoe op je div's dit toe:
code:
1
2

float: left;
clear: both;

[ Voor 21% gewijzigd door Sappie op 15-05-2005 09:47 ]

Specs | Audioscrobbler

zondag 15 mei 2005 12:43

Acties:

Verwijderd

Simpele oplossing:
Cascading Stylesheet:
1

*{margin:0}
Vervolgens geef je alles 'padding' waar je wat ruimte omheen wilt. Als je daar wat verder mee gaat spelen moet je een heel eind komen.

zondag 15 mei 2005 21:00

Acties:

Verwijderd

Topicstarter
Sappie schreef op zondag 15 mei 2005 @ 09:46:

[...]

Pas dus op je div's ("boven" en "onder") bottom en top padding toe van 1 px, zo dus:
code:
1

padding: 1px 0;
Het is nu GEFIXT! bedankt ;)

woensdag 1 juni 2005 03:48

Acties:

Verwijderd

Topicstarter
nog een kleine php vraag, durf er geen nieuwe topic voor te openen maar begin wel een beetje radeloos te worden gezien m'n bed roep.... Ziet iemand wat ik verkeerd doe dat ik steeds een "unexpected T_STRING" error krijg?

PHP:
1
2
3
4
5
6

<div id="bground">
<img src="<? $request = @$HTTP_GET_VARS['bg']; 
if(isset($request)) { switch($request) { case "1": include("images/1.jpg"); 
break; default: include("images/1.jpg"); break; } } 
else { include("images/1.jpg"); } ?>" class="bg">
</div>


Ik probeer dus die IMG de afbeelding 1.jpg te laten weergeven bij de adresregel "index.php?bg=1"

EDIT: de GoT search zo lang gebruikt dat hij zei: "post je vraag maar en geef het zoeken eindelijk eens op" 8)

[ Voor 26% gewijzigd door Verwijderd op 01-06-2005 03:50 ]

woensdag 1 juni 2005 09:11

Acties:
  • Sappie
  • Registratie: September 2000
  • Laatst online: 27-04 07:10

Sappie

De Parasitaire Capaciteit!

ipv "include" zou je em moeten printen / echoën :) Include dient ergens anders voor:

http://nl2.php.net/manual/en/function.include.php

Is toch wel een beetje erg basic php :)

verder is dat if then else statement overbodig omdat het switch statement er al voor zorgt dat ie default "images/1.jpg" print (je set $request immers in de regel boven die isset).

Specs | Audioscrobbler

woensdag 1 juni 2005 23:06

Acties:
  • WPN
  • Registratie: Augustus 2003
  • Laatst online: 30-03 22:59

WPN

haal na de default: ook eens de break weg?

voorbeeld
PHP:
1
2
3
4
5
6
7
8
9
10
11
12

switch ($i) {
case 0:
   echo "i equals 0";
   break;
case 1:
   echo "i equals 1";
   break;
case 2:
   echo "i equals 2";
   break;
default:
   echo "i is not equal to 0, 1 or 2";

[ Voor 72% gewijzigd door WPN op 01-06-2005 23:07 ]

Als ik denk zoals ik dacht, dan doe ik zoals ik deed, als ik doe zoals ik deed, dan denk ik zoals ik dacht! Cogito Ergo Sum

woensdag 1 juni 2005 23:08

Acties:
  • Erkens
  • Registratie: December 2001
  • Niet online

Erkens

Fotograaf

Verwijderd schreef op woensdag 01 juni 2005 @ 03:48:
nog een kleine php vraag, durf er geen nieuwe topic voor te openen maar begin wel een beetje radeloos te worden gezien m'n bed roep.... Ziet iemand wat ik verkeerd doe dat ik steeds een "unexpected T_STRING" error krijg?

PHP:
1
2
3
4
5
6

<div id="bground">
<img src="<? $request = @$HTTP_GET_VARS['bg']; 
if(isset($request)) { switch($request) { case "1": include("images/1.jpg"); 
break; default: include("images/1.jpg"); break; } } 
else { include("images/1.jpg"); } ?>" class="bg">
</div>


Ik probeer dus die IMG de afbeelding 1.jpg te laten weergeven bij de adresregel "index.php?bg=1"

EDIT: de GoT search zo lang gebruikt dat hij zei: "post je vraag maar en geef het zoeken eindelijk eens op" 8)
ehm, lees ik het goed dat je je JPG (binair bestand) in je HTML wilt "includen" :? :X Gewoon een linkje geven dus ;)

donderdag 2 juni 2005 20:03

Acties:

Verwijderd

de enigste goede manier waarop ik die kan doen is met javascript,

http://www.cross-browser.com/

met de x library

vrijdag 3 juni 2005 02:13

Acties:
  • bolleh
  • Registratie: Juli 2001
  • Laatst online: 06-05 22:29

bolleh

Verwijderd schreef op zondag 15 mei 2005 @ 00:29:
[...]

Ten eerste allemaal bedankt voor het advies :) alle margins,paddings terugbrengen naar 0px heeft geen effect..het komt, zoals mophor als zei door de "margin collapsing" met <p>

Hier even de recente code:
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

body {
    background-color: transparent; filter:chroma(color=#123456);
    margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;
}
.div_boven {
    position:relative;
    background-color: #fff; color: #000; width: 468px;
}
.div_onder {
    position:relative;
    background-color: #000; color: #fff; width: 468px;
}
p.titel {
    font-family: verdana; font-size: 11px; font-weight: bold; text-transform: uppercase;
    margin-left: 10px; margin-top: 10px; margin-right: 10px; margin-bottom: 8px;
}
p.inhoud {
    font-family: verdana; font-size: 10px; font-weight: normal;
    margin-left: 10px; margin-right: 10px; margin-bottom: 30px;
}
waarom doe je eigenlijk die margin-bottom op die <p> ? het heeft geen zichtbaar effect behalve in je foute voorbeeld. haal die margin bottom gewoon weg.
bovendien als je verschillende margins wilt instellen kun je beter zo doen:
margin: 1px 2px 3px 4px;

dan krijg je boven 1 px, rechts 2px, onder 3px en links 4px margin. scheelt weer wat bytes en is imho overzichtelijker.

bovendien kun je voor die <p> titel beter een h2 of h3 gebruiken
Pagina: 1
Reageer