login  Naam:   Wachtwoord: 
Registreer je!
 Forum

table div

Offline lau - 02/02/2006 17:06 (laatste wijziging 02/02/2006 17:08)
Avatar van lauHTML interesse Hoe zet ik de volgende tabel om naar div's?
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <table width="100%"  border="0" cellspacing="0" cellpadding="0">
  2.         <tr>
  3.           <td width="400"><h2>Nieuws</h2></td>
  4.           <td width="1"><img src="images/spacer.gif" alt="" width="1" height="1" /></td>
  5.           <td width="234"><h2>ander zooi</h2></td>
  6.         </tr>
  7.         <tr>
  8.           <td colspan="3" class="horizontal"><img src="images/spacer.gif" alt="" width="1" height="1" /></td>
  9.         </tr>
  10.         <tr>
  11.           <td class="nieuws"><h4>geweldig?</h4><p class="nieuws">whaha.... osoei bakke raatalw, adijief. chelsseasu wins onliy etwmail osip marginsdiew wle.</p><p class="date">20 februari 2006</p></td>
  12.           <td class="vertical"><img src="images/spacer.gif" alt="" width="1" height="1" /></td>
  13.           <td class="projecten"><h3>[,.,]</h3></td>
  14.         </tr>
  15.       </table>

Een div maken voor font ofzo kan ik wel, maar hoe plaats ik 2 'blokken' naast elkaar. De linkerblok is 400px breed en rechterblok is 234px breed. Daartussen (tussen de blokken) moet nog 1px een verticale afbeelding/lijn komen, van boven naar beneden.
Daarnaast moet er boven de blokken ook een horizontale lijn komen?
Zoiets dus:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. Nieuws         | ander zooi 
  2. --------------------------
  3. asdfadflk als  | asdf
  4. asdf           | asdfw
  5. asdf           |
  6. asdfew         |

15 antwoorden

Gesponsorde links
Offline Ontani - 02/02/2006 17:13
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div style="width: 400px; float: left;">
  2.  Links
  3. </div>
  4. <div style="width: 234px; float: left;">
  5.  Rechts
  6. </div>
Offline Lemon - 02/02/2006 17:18
Avatar van Lemon PHP expert
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div style="width: 400px; float: left; border-right:1px solid #421545;border-top:1px solid #421545">
  2.  Links
  3. </div>
  4. <div style="width: 234px; float: left;border-top:1px solid #421545">
  5.  Rechts
  6. </div>
  7. <div style="clear:both;"></div>
Offline lau - 02/02/2006 17:18
Avatar van lau HTML interesse Hmm.. jah.. nooit gedacht dat dat zo simpel zou zijn.. .. maar hoe doe ik een lijn tussen de blokken? De lijn is een afbeelding
Offline Ontani - 02/02/2006 17:20 (laatste wijziging 02/02/2006 17:20)
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 dan zal je der nog een div moeten tussen steken van 1px breed en een achtergrond afbeelding

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div style="width: 1px; float: left; background-image: url('lijn.gif');"></div>
Offline Pieter - 02/02/2006 17:22
Avatar van Pieter Gouden medaille

SEO guru		 Of gewoon de afbeelding ertussen plaatsen, zelfs zonder div. Aangezien het op float:left staat zal alles erna dus ook links aansluiten...
Offline lau - 02/02/2006 17:33
Avatar van lau HTML interesse
Citaat:
<div style="clear:both;"></div>

Wat doet dit?
Ik gebruik de code van Lemon. Dan laat ik de afbeeldingen achterwege.
En nog iets anders, zit die 1px solid bij die 400px widht? of dat het toaal 401px is?
Citaat:
<div style="width: 400px; float: left; border-right:1px solid #421545;border-top:1px solid #421545">
Offline Ontani - 02/02/2006 17:36
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 die clear: both; zorgt ervoor dat als deze code in een andere div met achtergrond afbeelding of kleur komt dat deze ook zal uitrekken wat anders niet het geval is.

normaal is die 1px in de 400px en niet erbuiten
Offline lau - 02/02/2006 17:51 (laatste wijziging 03/02/2006 14:26)
Avatar van lau HTML interesse Stel dat de linkerblok langer wordt en de rechterblok blijft hetzelfde, dan rekt die border-right van linkerblok natuurlijk mee. Dat is goed. Maar stel dat de rechterblok langer wordt en de linkerblok hetzelfde blijft. Dan rekt die border-right van de linkerblok niet mee..

Hoe kan ik ervoor zorgen dat border-right van de linkerblok meerekt?
Offline Barato - 03/02/2006 14:47
Avatar van Barato Nieuw lid normaal is de breedte echt de breedte van het element, als je daar nog een padding of border omheen zet wordt het element dus breder.
met width op 400 en een border van 1 krijg je dus 401px in totaal.

Oudere versies van IE snapten dit niet en als je door het weglaten van de url in je DTD of het weglaten van de complete DTD de quirks mode activeert in IE 6 heb je die problemen nog steeds.

IE 5 en 5.5 zorgen sowieso vaker voor problemen en ook IE 6 in strict mode doet niet alles zoals het hoort. Met IE 7 lijken deze tijden nog niet voorbij...
Offline lau - 03/02/2006 16:52
Avatar van lau HTML interesse Volgens mij valt die 1px border echt binnen de 400px.

Maar mijn probleem is nog niet opgelost:
Citaat:
Stel dat de linkerblok langer wordt en de rechterblok blijft hetzelfde, dan rekt die border-right van linkerblok natuurlijk mee. Dat is goed. Maar stel dat de rechterblok langer wordt en de linkerblok hetzelfde blijft. Dan rekt die border-right van de linkerblok niet mee..

Hoe kan ik ervoor zorgen dat border-right van de linkerblok meerekt?
Offline Lemon - 03/02/2006 18:02 (laatste wijziging 03/02/2006 18:14)
Avatar van Lemon PHP expert Ik heb even een voorbeeldje gemaakt voor u se 

2 kolommen, linkse 400 pixels, rechtse 200 pixels.
de linkse heeft een custom border aan de rechterkant die meerekt met biede kolommen.

voorbeeld in werking: http://jellehenkens.be/storage/css/2cols.htm

css:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <style type="text/css">
  2. #container {
  3. 	width:600px;
  4. 	background-image:url(border.gif);
  5. 	background-repeat:repeat-y;
  6. 	background-position:394px;
  7. 	border:1px solid blue;
  8. }
  9. #left {
  10. 	float:left;
  11. 	width:400px;
  12. }
  13. #right {
  14. 	float:left;
  15. 	width:200px;
  16. }
  17. </style>


html:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="container">
  2. 	<div id="left">
  3. 		Test<br />test3Test<br />test3Test<br />>test3Test<br />test3
  4. 	</div>
  5. 	<div id="right">
  6. 		Test2<br />test 4Test2<br />test 4Test2<br /><br /><br /><br /<br />test 4Test2<br />test 4
  7. 	</div>
  8. 	<div style="clear:both;"></div>
  9. </div>
Offline Barato - 03/02/2006 20:41
Avatar van Barato Nieuw lid "Volgens mij valt die 1px border echt binnen de 400px."

volgens IE ook, zoals ik net zei, maar volgens het W3C, andere browser en meestal ook IE in strict mode (dat is met de meeste normale doctypes) niet.
Offline lau - 03/02/2006 21:24
Avatar van lau HTML interesse @Lemon.. de jouwe werkt heel goed.. maar sorry dat ik zo irritant ben.. maar ik heb gezien dat met border handiger werkt dan met plaatje.

Nu zelfde situatie, maar uitgaande van een border van de linkerblok ipv een afbeelding.
Offline Lemon - 04/02/2006 01:26
Avatar van Lemon PHP expert je gaat altijd zon trick moeten toepassen. je kan niet zomaar 2 div's naast elkaar dezefde hoogte geven.
Offline lau - 04/02/2006 17:10
Avatar van lau HTML interesse Dus jouw bovenstaande code kan niet worden toegepast met border? Dat is wel jammer.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.236s