[HTML] Iets fout met een tabel...

[Didius]

Ik probeer een site te maken over retro macs.

Ik tracht Mac os 6 (of te wel systeem 6) te imiteren via html.
Een venster dacht ik te imiteren via een tabel.

Dit komt echter niet zo mooi uit, het is te zeggen. In de Camino browser en Opera op mijn mac wordt alles netjes uitgelijnd. Op mijn linux pc echter niet.

Wie kan me helpen deze code platformonafhankelijk te maken?
reisje in de tijd

O ja, bovenaan in de code zie je een lege rij:

code:

<tr>
    <td width="4"></td>
    <td width="12"></td>
    <td></td>
    <td width="15"></td>
    <td width="16"></td>
</tr>

Helemaal zuiver zal dat ook wel niet zijn, maar een andere mogelijkheid om de tabel samen te houden vond ik niet...

[TERW_DAN]

Als het in tabellen niet lukt, heb je het dan al eens in divs geprobeerd. Daar kun je wellicht nog leukere dingen mee doen (hiden en unhiden als je ergens op klikt).
Je hebt maar 4 divjes nodig en een stukje css om de customscrollbars te maken (misschien een 5e div in het hoekje). Ik denk dat dat veel makkelijker is.

In ieder geval ziet je tabel er in FF2.0 onder win2000 er gewoon goed uit. Plaats eens een screenshot hoe je het wil hebben en hoe het eruit ziet, dat helpt wel bijd e beeldvorming.

[AW_Bos]

Ik zie dat je dit doet:

code:

<td width="4"></td>

Als ik jouw was zou ik maar eens   tussen zetten

code:

<td width="4">&nbsp;</td>

Hoewel het werken met DIV-jes idd een beter alternatief is. Kan makkelijk met het gebruik van het float element.

[Didius]

Hier een fototje, van dat "venster" in opera op linux.

zoals je merkt zit het onderaan toch niet zo goed. Het sluit daar niet naadloos. Er zitten enkele lege pixels tussen.

@Arien Clay: Waarom horen die   daar? De enigste bedoeling van die lege rij is die tabel samenhouden. Ze verwijderen geeft een vervorming, en invullen met een spatie verandert toch niets?


Ik zal ook eens zien hoe dat van die <div> in elkaar zit.

[Room42]

Jouw probleem zit hem in regel 42:

HTML:

<td width="329" height="16" background="images/horizontal.gif">&nbsp;</td>

Haal daar de &nbsp; weg, dan komt het goed. Of zet de line-height van de betreffende td op 16px:

HTML:

<td background="images/horizontal.gif" height="16" width="329" style="line-height: 16px;">&nbsp;</td>

offtopic:
Overigens een heeeerlijk design!! Echt cool! Ik hoop dat je er een leuke site van maakt.

[ Voor 12% gewijzigd door Room42 op 05-08-2007 23:00 ]

[Didius]

ahja.

Nu je het zegt, heel logisch eigenlijk.

ik zal nu nog wat verder werken met die tables. Ik heb wat zitten klooien met dat gediv. Ziet er wel heel cool uit, maar precies toch wat moeilijker / meer werk.
Al is de code wel heel overzichtelijk dan.


en in verband met dat design, daar kan aero nog altijd niet aan tippen

[Room42]

Niet alleen is de code overzichtelijker, ook mensen die de browser niet kunnen of willen gebruiken zoals wij dat doen (denk aan slecht ziende) hebben er meer aan. Vergelijk bijvoorbeeld deze thread maar eens met jouw site als je geen styles aan hebt*.

* Bijvoorbeeld door Ctrl-Shift-S in te toetsen in Firefox, met de Web developer toolbar geïnstalleerd

[ Voor 3% gewijzigd door Room42 op 06-08-2007 00:01 ]

[RobIII]

Ik heb even een (quick-n-dirty) testje gemaakt met wat divjes. De pest wordt/is denk ik de scrollbar knop onderaan bij het verticaal scrollen. Daar zijn wel wat kunstjes op te verzinnen hoor, maar die is denk ik het 'probleem'
Ik heb het even opgelost met wat 'faux columns' en wat relatieve positionering. Daardoor kan je inhoud ook 'groeien' als je wil en rekt je window mee (zou je dat willen, echter, dan lijken me die scrollbars redelijk nutteloos )

(Oh, en IE ligt weer eens dwars Onderaan, 1 pixel en de word wrap is nog niet helemaal lekker)
Fix0red

Voordeel is wel dat alle tekst nu ook tekst is en geen afbeelding. Dat betekent dat je niet voor iedere window-title een nieuwe afbeelding (meer) hoeft te maken. En je kunt nu het window sizen in de breedte en hoogte en dan moet (als het goed is) alles goed meerekken.

offtopic:
Lang geleden dat ik met System 6 speelde, ik ken de betekenis van die knoppen niet meer

[ Voor 60% gewijzigd door RobIII op 06-08-2007 03:26 ]

[Didius]

Wow, looks great.

Bekijk ik morgen (ofja, in feite straks) zeker eens dieper.

[Didius]

Ik heb het allemaal eens goed bekeken en ik ben echt onder de indruk.
div's zijn inderdaad veel flexibeler dan tables, en veeeel netter.

Nu zit ik wel een beetje vast.
Ik heb je bestand goed geanalyseerd RobIII, zeer tof dat je dat gemaakt hebt. Echt bedankt!

Nu moesten bepaalde zaken geen tekst zijn, zoals die dingen uit de header. (is namelijk een retro lettertype )

Vandaar ik met jouw bestand als referentie een nieuwe tabel heb opgebouwd (ondertussen weer veel bijgeleerd)

Maar ik heb wat last van browserincompabiliteit.

Zie:
http://webs.hogent.be/~054169dv/retro/div.html

In Opera sluit het top pijltje perfect aan met de top. In Firefox, Camino en Safari echter niet. Daar zit telkens wat ruimte tussen.
Waar gaat het fout?

css:
http://webs.hogent.be/~054169dv/retro/style.css

[lammert]

RobIII schreef op maandag 06 augustus 2007 @ 01:09:
Ik heb even een (quick-n-dirty) testje gemaakt met wat divjes.

HTML / CSS koning RobIII

[RobIII]

Didius schreef op maandag 06 augustus 2007 @ 22:47:
Ik heb het allemaal eens goed bekeken en ik ben echt onder de indruk.

Didius schreef op maandag 06 augustus 2007 @ 22:47:
Nu zit ik wel een beetje vast.

Ik heb er genoeg tijd in zitten
Ik heb 1 "gouden" tip voor je: installeer Firefox en de Webdeveloper toolbar* (effe zoeken bij extensions). Daarna even wat stoeien met "outline block level elements" en je ziet precies waar het fout gaat

[small]
* En als je toch bezig bent, installeer dan ook meteen:
• FireBug
• HTML Validator
• MacFox II

[ Voor 24% gewijzigd door RobIII op 07-08-2007 01:02 ]