van TABLE naar DIV

Door Onbekende gebruiker op 29-04-2004 16:15

15.185 views

Ik zag al wat andere postst hierover maar dit is een specifiek probleem. Hoe krijg ik het volgende voorelkaar zonder tables:

<STYLE>
TABLE { border-collapse: collapse; }
TD { vertical-align:top; }
</STYLE>
<TABLE>
<TR>
<TD BGCOLOR="#DDDDDD">hoi</TD>
<TD BGCOLOR="#EEEEEE">hallo</TD>
</TR>
<TR>
<TD BGCOLOR="#EEEEEE">bla</TD>
<TD BGCOLOR="#DDDDDD">boe<BR>boe</TD>
</TR>
<TR>
<TD BGCOLOR="#DDDDDD">jaja<BR>jaja</TD>
<TD BGCOLOR="#EEEEEE">neenee</TD>
</TR>
</TABLE>

Ik heb het met DIVs geprobeerd met eigenschappen zoals position en float maar ik krijg problemen met de hoogte. Ik wil dat 2 DIVs die naast elkaar staan even hoog zijn afhankelijk van de tekst die erin staat. Bij de ene oplossing krijg ik een div die door een div heen gaat eronder en bij een andere oplossing wordt de achtergrondkleur niet doorgetrokken tot de hoogte van de div ernaast.

Om het simpel te houden, is dit goed mogelijk zonder tables?

S SerpenT

29-04-2004 19:13

ik kan het fout hebben maar is dit niet HTML en is dit niet een php hulp site? maybe moet je ergens anders gaan vragen

? Onbekende gebruiker

29-04-2004 19:48

Je hebt het inderdaad fout. Dit is het onderdeel 'Webdesign' op het forum en de omschrijving die er bij staat is alsvolgt:

'Je vragen over 'algemeen' webdesign kun je hier kwijt. Van HTML en css tot Photoshop en javascript. Hier dus alles wat ook nodig is om een website te maken maar niet met PHP of MySQL te maken heeft.'

:P

? Onbekende gebruiker

15-05-2004 15:08

Dus je probleem is dat als er in de linker td twee regels staan en in de rechter maar 1 dat de ze even hoog zijn?

Bas Kreleger

15-05-2004 20:11

Wat je kunt doen is bijv een class aanmaken bijvoorbeeld: .divheight { height: 200px; } ..

Deze zet je dan in de <div>jes (<div class="divheight">) en dan zijn ze even hoog lijkt mij?!

? Onbekende gebruiker

18-05-2004 20:01

Klopt maar het gaat erom dat de hoogte dynamisch moet zijn. Misschien te vergelijken met dit forum. Een heel kort berichtje kan 1 regel zijn, maar links staat je naam en nog wat info. Kan hoger zijn dan de inhoud. Het rechter vak wordt automatisch even hoog als het linker vak. Je wilt niet dat het vast 200px hoog is. Is er veel inhoud in een berichtje dan is het rechter vak hoger en sluit het linker vak er in hoogte op aan. Dit wil ik dus bereiken waarbij het linker vak en het rechter vak een andere achtergrond kleur hebben.

Heel makkelijk met <TABLE> maar ik wil <DIV> :P

<div> samen met stylesheets is wat dynamischer, generieker, overzichtelijker enzo... denk ik :)

Ik heb me er sinds me vraag niet meer mee bezig gehouden maar als ik er uit ben laat ik ook wel even een berichtje achter...

Bas Kreleger

19-05-2004 10:32

hehe.. zoiets heb ik net gemaakt voor nieuwe versie van PHPhulp.nl:

<style>
/* define first bg color trackers */
.tracker_bg1 {
background-color: #A0ABC8;
text-align: center;
width: 42px;
float: left;
}

/* define second bg color trackers */
.tracker_bg2 {
background-color: #939DB8;
width: 206px;
padding: 0;
margin: 0;
}
</style>

<div class="tracker_bg1">20:20</div><div class="tracker_bg2">hier komt een itel</div>

Wanneer je nog hoogte en breedte wilt meegeven gebruik je:

width: 300px;
height: 100px; /* bijvoorbeeld */

Als je wilt dat de tekst boven gelined wordt gebruik je:

vertical-align: top; /* of bottom of middle */

Om links of rechts te linen gebruik je:

text-align: left; /* of right, of center */

Reageren

Inloggen om te reageren