Technische Sitecheck Deel 2

Technische Sitecheck Deel 1 staat hier: http://forum.macosx.nl/viewtopic.php?p=670639

Okay… terug naar de div…

Ik heb een div met deze code:

[code:1:676965b627]
<td width="321" height="308" valign="top">
<div style="position:absolute; width:321px; height:308px; overflow:auto;" class="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec porta, turpis sit amet congue elementum, arcu urna imperdiet sem, id consectetuer libero augue non pede. Suspendisse dapibus.
</div>
</td>
[/code:1:676965b627]

In Windows (XP) met IE6 gaat het mis na het verschalen van het browservenster.
Dan loopt de div uit de td weg. Ik weet dat er voor NN een resize fix (van dreamweaver geplukt) is, maar heb ik dan ook zoiets voor Win nodig??

[code:1:676965b627]
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
[/code:1:676965b627]

Waarom zet je een absoluut gepositioneerde div in een tabelcel? Je hebt de div helemaal niet nodig: probleem opgelost.

Hoe kom je daar nou bij... de tekst die erin moet is veel langer dan de fake variant hier. Bovendien is die tekst variabel van lengte

Hij werkt nu prima onder IE. :D Good job.

<edit> toch niet helemaal dus </edit>

[quote:56917d3f22="hydro"]Hij werkt nu prima onder IE. :D Good job.[/quote:56917d3f22]

HUH?
Nou bij mij niet hoor (WinXP met IE 6 sp 2)

Weet je dat zeker, als je verschaalt met de linkeronderhoek dan zie je dat de scrollbalk en layer aan de wandel gaan?

:? Ohja, dat had ik niet gezien...

[quote:712b9feb40="Jack4ya"]Hoe kom je daar nou bij... de tekst die erin moet is veel langer dan de fake variant hier. Bovendien is die tekst variabel van lengte[/quote:712b9feb40]

Dat maakt toch niet uit? Je kan de overflow:scroll ook op de <td> zetten, daar heb je helemaal geen div voor nodig.

ps: dit topic hoort eigenlijk thuis in ‘webontwikkeling’ en niet in ‘internet en netwerken’

[code:1:57aec52f7e] <td width="321" height="308" valign="top" style="overflow:auto" class="text"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec porta, turpis sit amet congue elementum, arcu urna imperdiet sem, id consectetuer libero augue non pede. Suspendisse dapibus. </td> [/code:1:57aec52f7e]

Zo dan?

** edit **

Dat lijkt echt nergens op…

}yup.

Ook al is het raar dat je en een class text en een inline style toepast; dat bevordert de overzichtelijkheid in geval van onderhoud niet.

Ik zou het volgende doen (en dat houdt het allemaal ook wat overzichtelijker:)

[code:1:647f01fff4]
<td class="text"> Lorem ipsum etc. </td>
[/code:1:647f01fff4]

[code:1:647f01fff4]
.text {
height : 308px;
width : 321px;
vertical-align : top;
overflow : auto;
}
[/code:1:647f01fff4]

ps: zorg er wel voor dat je bovenaan je document een DOCTYPE hebt gedefinieerd. In jouw geval zou ik voor HTML4 Transitional kiezen:

[code:1:647f01fff4]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
[/code:1:647f01fff4]

Zie ook:
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp

1. Door het plaatsen van de doctype centreert ie de tekst (is op te lossen, maar wel vreemd) 2. Door de overflow op de td te plaatsen ipv de div; handelt ie niet meer met de overflow: **knip : link verwijderd** Lees: hij maakt er weer één lange cell van en alle tekst verschijnt zonder scroller....

Ofwel… is dit echt een goed insteek?

Ik heb snel even een testje gemaakt en IE weigert inderdaad om op een <td> een overflow te zetten.

Sorry, een bugje in IE dat ik niet paraat heb (gebruik nooit tables voor layout doeleinden).

Op te lossen door er een divje in te zetten:

[code:1:b6b9ccbab5]
<td><div class="text">
Lorem ipsum etc.
</div></td>
[/code:1:b6b9ccbab5]

Overigens hoef je de td geen afmetingen mee te geven: als je de div de juiste afmetingen geeft dan gaat het vanzelf goed.

de volgende stap is het verwijderen van de <td>-tag ;-)

Hier had ik wat aan:

http://www.quirksmode.org/css/overflow.html

** edit **

Ha!.. jij was eerder.

Tja… zonder td gaan werken…
Ik weet dat ik dat idd moet gaan doen, maar weet niet hoe ik begin met zo’n aanpak.
Ik kan altijd redelijk codes “terug” lezen, maar hoe ik nu zo 1-2-3 een tabelloze pagina maak, dan vind ik lastig… Ik zoek eigenlijk een kant en klaar eenvoudig paginaatje met bijbehorende css… dan kan ik dat eens gaan uitpluizen…
Weet jij goede sites/cursussen in die richting?

Hmmm: http://www.quirksmode.org/quirksmode.css zo dus

Nou ik heb wat dingen veranderd...

Ik heb voor de div overflow en voor de algehele centrering een div in de css gemaakt.
Of te wel een klein beginnetje van mij om de layout/content te gaan splitsen…