[DIV] Uitlijn probleem

[iznogood]

Ik heb het volgende probleem. Voor een admin gedeelte van een website maak ik een productoverzicht. Links van de productinfo staat een image die ik in een div wil hebben ( zo ook de productinfo :

[DIV IMAGE] [DIV PROD INFO]
----------------------------------------------------------------------------- witregel van 1px
[DIV IMAGE] [DIV PROD INFO]
----------------------------------------------------------------------------- witregel van 1px
[DIV IMAGE] [DIV PROD INFO]
enz....

Nu lopen de divs in de onderstaande code compleet door elkaar :

code:

                echo'<div style="position: absolute; left: 1px; width: 700px;">';
                echo'<div style="background-color: #CCCCCC;width: 66px; margin-top: 1px;height: 86px; display:inline">';
                echo'[img]"/sport/_shoppic/'.$data[product_id].'.jpg?un='.time().'"[/img]';
                echo'</div>';
                echo'<div style="background-color: #CCCCCC;width: 633px; height: 66px;margin-left: 1px; display:inline">';
                echo' [<a href="ed_products.php?rem_product=go&product_id='.$data[product_id].'">remove</a>] [<a href="ed_products.php?edt_product=go&product='.$data[product_id].'">edit</a>] 
  '.$data[product_id].' - '.$data[product_name].' - '.$data[product_descr_short].'';
                echo'</div></div>';

Als ik het zonder inhoud test worden de divs wel goed weergegeven dus in deze situatie :

code:

<div style="position: absolute; left: 1px; width: 700px;">
  <div style="background-color: #CCCCCC;width: 86px; margin-top: 1px;height: 66px; display:inline"></div>
  <div style="background-color: #CCCCCC;width: 613px; height: 66px;margin-left: 1px; display:inline"></div>
</div>
<div style="position: absolute; left: 1px; width: 700px;">
  <div style="background-color: #CCCCCC;width: 86px; margin-top: 1px;height: 66px; display:inline"></div>
  <div style="background-color: #CCCCCC;width: 613px; height: 66px;margin-left: 1px; display:inline"></div>
</div>

Wat kan hier de oorzaak van zijn ?

[ Voor 30% gewijzigd door iznogood op 21-07-2005 21:12 ]

[chris]

Wat bedoel je met "lopen compleet door elkaar"? Kan je misschien een voorbeeld online zetten?

[iznogood]

chris schreef op donderdag 21 juli 2005 @ 21:21:
Wat bedoel je met "lopen compleet door elkaar"? Kan je misschien een voorbeeld online zetten?

http://members.chello.nl/d.langeslag/vb.jpg

[ Voor 4% gewijzigd door iznogood op 21-07-2005 21:28 ]

[NMe]

Dit is gewoon een HTML probleem en dat hoort dus in Webdesign & Graphics, zoals je ook in onze FAQ had kunnen lezen.

PW>>WG

[crisp]

waarom die absolute positionering? Kan je niet gewoon een margin-left: 1px; gebruiken?
Verder is display:inline tesamen met het opgeven van properties die voor blocklevel elementen bedoelt zijn ook niet zo tof; gebruik dan floats...

Verder: heb je wel eens van classes in CSS gehoord? Of van andere HTML-elementen behalve div's?

[ Voor 65% gewijzigd door crisp op 21-07-2005 22:24 ]

[iznogood]

crisp schreef op donderdag 21 juli 2005 @ 22:21:
waarom die absolute positionering? Kan je niet gewoon een margin-left: 1px; gebruiken?
Verder is display:inline tesamen met het opgeven van properties die voor blocklevel elementen bedoelt zijn ook niet zo tof; gebruik dan floats...

Verder: heb je wel eens van classes in CSS gehoord? Of van andere HTML-elementen behalve div's?

Ja, heb ik allebij van gehoord. De CSS classes maak ik aan zodra het werkt. Ik ga overigens niet mijn layout met HTML tables maken.

Heb inmiddels de tips gebruikt, maar hiermee kom ik nog niet tot het gewenste resultaat.

[iznogood]

Opgelost... lag aan de horizontal-align en de vertical-align.

[Verwijderd]

misschien kan je dan ook even posten wat er fout zat en hoe je het opgelost hebt? dan hebben anderen er wellicht nog wat aan.

In je originele probleem zie ik namelijk geen vertical-align (en horizontal-align bestaat sowieso niet)

[iznogood]

Verwijderd schreef op vrijdag 22 juli 2005 @ 11:23:
misschien kan je dan ook even posten wat er fout zat en hoe je het opgelost hebt? dan hebben anderen er wellicht nog wat aan.

In je originele probleem zie ik namelijk geen vertical-align (en horizontal-align bestaat sowieso niet)

Werkende code:

code:

                echo'<div style="left: 1px; width: 680px;">';
                echo'<div style="background-color: '.$colu.';vertical-align: middle;text-align:center;width: 66px; height: 86px; display:inline">';
                echo'[img]"/sport/_shoppic/'.$data[product_id].'.jpg?un='.time().'"[/img]</img>';
                echo'</div>';
                echo'<div style="background-color: '.$colu.';vertical-align: middle;width: 613px; height: 86px;margin-left: 1px; display:inline">';
                echo'<b>'.$data[product_id].' - '.$data[product_name].'</b><br/>'.$data[product_descr_short].'<br/><br/>[<a href="ed_products.php?rem_product=go&product_id='.$data[product_id].'">remove</a>] [<a href="ed_products.php?edt_product=go&product='.$data[product_id].'">edit</a>]';
                echo'</div></div>';

Ik heb de divs herschreven en maak ondertussen geen gebruik meer van "absolute"

[ Voor 23% gewijzigd door iznogood op 22-07-2005 11:52 ]