Archief - Achter de tabel...

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
w

wocypke

Legacy Member
Hoi,

Ik probeer om de de kerel met de blauwe zonnebril, wanneer men over de afbeelding zweeft, iets meer naar links laten te bewegen.
Dat lukt goed, het enige probleem is dat hij niet achter de tabel blijft.
Het werkt WEL naar behoren in Opera.

Weet iemand hoe ik dit kan oplossen?

Ohja en ik weet dat de website lelijk is ;D hij is nog lang niet af.

De URL:

http://hkj5f6f.atwebpages.com/

Cheers!
E

Ex0dus

Legacy Member
Hey,

Als ik jou was zou ik niet meer met tables werken om je website te stylen, tables dienen namelijk voor tabulaire data, etc...
Om te stylen gebruik je div's, pre anno 2000 gebruikte ze wel tables om te stylen daar er geen div's bestonden.

Om te beginnen pas je enkele zaken aan in je html:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="styles.css">
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
	<div id="container">
    <div class="lukas"><img src="images/lukas.png"></div>
	<table align="center" border="0" cellpadding="0" cellspacing="0" width="700" class="body">
		<tr>
			<td colspan="4" align="center" height="30" width="700"></td>
		</tr>
		<tr>
			<td rowspan="5" width="25"></td>
			<td align="center" height="400" width="650" colspan="2">
				<img src="images/logo.png" align="center">
			</td>
			<td rowspan="5" width="25"></td>
		</tr>
		<tr>
			<td align="center" height="45" colspan="2">
				<iframe src="nav.html" height="45" width="650" margin="0" padding="0" frameborder="0" scrolling="no"></iframe>
			</td>
		</tr>
		<tr>
			<td align="center" height="*" colspan="2">
<!-- Content -->
<!-- End content -->
			</td>
		</tr>
		<tr>
			<td height="50" colspan="2"></td>	
		</tr>
		<tr>
			<td height="50" width="325" align="center" class="foot">
				<a href="http://www.mozilla.org/firefox?WT.mc_id=aff_en01&WT.mc_ev=click" target="_blank"><img src="http://www.mozilla.org/contribute/buttons/110x32arrow_b.png" alt="Firefox Download Button" border="0" class="a"/></a>	
     			</td>
			<td width="325" align="center" class="foot">
				<a href="http://www.cyanfishwebdesign.co.cc" target="_blank"><img src="https://www.beyondgaming.be/forums" class="a" alt="Cyan Fish Webdesign &copy;"/></a>
			</td>
		</tr>
	</table>
	</div>
</body>
</html>
Zoals je kan zien heb ik <div class="lukas"> uit je table gehaald en in een containing div (<div id="container">) geplaatst, ook je table wordt hierin gewrapped.

Vervolgens de CSS (vervang gewoon 'div.lukas' en 'div.lukas:hover' met onderstaande):
Code: 
#container {
	margin: 0 auto;
	width: 700px;
	position: relative;
}

div.lukas
{
	position: absolute;
	bottom: 0px;
	right: -90px;
	transition: right 0.25;
	-moz-transition: right 0.25s;
	-webkit-transition: right 0.25s;
	-o-transition: right 0.25s;
}

div.lukas:hover
{
       right: -275px;
}

En nogmaals, ik raad je af om tables te gebruiken bij het ontwerpen van een site. ;)
-

-BVR-

Legacy Member
Goei al die tables inderdaad weg. Wat jij wil kan heel gemakkelijk met bv css3 (of 'gewone' css als je geen animatie wilt maar gewoon een verschuiving)
w

wocypke

Legacy Member
Ex0dus zei:
Hey,

Als ik jou was zou ik niet meer met tables werken om je website te stylen, tables dienen namelijk voor tabulaire data, etc...
Om te stylen gebruik je div's, pre anno 2000 gebruikte ze wel tables om te stylen daar er geen div's bestonden.

Om te beginnen pas je enkele zaken aan in je html:
....

Zoals je kan zien heb ik <div class="lukas"> uit je table gehaald en in een containing div (<div id="container">) geplaatst, ook je table wordt hierin gewrapped.

Vervolgens de CSS (vervang gewoon 'div.lukas' en 'div.lukas:hover' met onderstaande):

...

En nogmaals, ik raad je af om tables te gebruiken bij het ontwerpen van een site. ;)
Klik om te vergroten...

Bedankt! Ik heb vandaag nog een thread gepost om mijn 2 allereerste websites na te kijken en daar raadden ze het mij ook al af om tabellen te gebruiken ;)
Bedankt voor je raad, ik zal het zeker toepassen!
n

ns_ripper

Legacy Member
Ik kan het niet genoeg benadrukken, en wat mijn voorgangers hierboven ook al zeiden. Tables dienen niet voor layout maar voor tabular data.

Ik wil de discussie xhtml/html nog in het midden laten maar gebruik zeker div's.
het is echt niet moeilijker dan tables eens je het wat in de vingers hebt zitten. Oefen wat met een paar opzetten. paar eenvoudige pagina's om aan het boxing model te wennen en je bent er zo mee weg. (bvb aantal divs onder elkaar en in het middelste gedeelte een aantal naast elkaar).

Probeer altijd de flow van de pagina te werken en zo min mogelijk met position absolute. Elke zichzelf respecterende browser doet dat goed. Ook IE als je 9 gebruikt.

groetjes,

ns_ripper
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan