PDA

Volledige versie bekijken : Middle table

Berthjen
%Europe/Berlin %844 %2005, 21:15
Hoi FF'ers.

Ik heb een probleem met het in het midden plaatsen van beeldmateriaal in het browser scherm.

Explorer op mac doet het goed, Safari daarentegen dan weer niet.
Op PC kan ik het niet controleren, maar zover ik weet doet het het daar ook niet zo best.

Ik maak gebruik van onderstaande code.

(Link naar m'n site: http://www.lasalcommunicatie.be)

<body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="middle">
<table width="1280" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/tekst.gif" width="250" height="70" border="0" cellspacing="0" cellpadding="0"></td>
</tr>
<tr>
<td><img src="images/front_site.gif" width="1280" height="73" border="0" cellspacing="0" cellpadding="0"></td>
</tr>
<tr>
<td><a href="http://www.macromedia.com/downloads"><img src="images/flash.gif" width="180" height="22" border="0" cellspacing="0" cellpadding="0"></td>
</tr>
<tr>
<td><a href="lasal.html"><img src="images/enter.gif" width="180" height="22" border="0" cellspacing="0" cellpadding="0"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>


Alvast bedankt voor de hulp,
Berthjen
rickpastoor
%Europe/Berlin %883 %2005, 22:12
Ik zie in windows geen problemen...dus dat zit wel goed
Berthjen
%Europe/Berlin %888 %2005, 22:19
Ik zie in windows geen problemen...dus dat zit wel goed

THX voor de melding.
Dan rest me nog enkel een oplossing te zoeken voor safari.
TrueChaoZ
%Europe/Berlin %905 %2005, 22:43
ik denk dat je je splashscreen bedoelt of niet?
deze staat inderdaad in Firefox top-aligned

ik geloof niet dat er een normale manier is om non-inline items (divs/tables) vertical te alignen, de vertical-align CSS property is namelijk voor inline items (em/a/img) er is wel een workaround om toch een non-inline item in het midden te centreren.

<html>
<head>
<style>
.test {
width:100px;
height:100px;
background-color:black;
margin-top:-100px;
position:absolute;
top:50%;
left:0px;
}
</style>
</head>
<body>
<div class="test">&nbsp;</div>
</body>
</html>
Berthjen
%Europe/Berlin %539 %2005, 13:56
Bedankt voor de hulp.

Met onderstaand script staat alles mooi vertikaal gecentreerd.
<head>
<title>[ Lasal Communicatie v.3 ]</title>
<style>
.vertikaal {
width:1280px;
height:187px;
background-color:white;
margin-top:-94px;
position:absolute;
top:50%;
left:0px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div class="vertikaal">
<table width="1280" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/tekst.gif" width="250" height="70" border="0" cellspacing="0" cellpadding="0"></td>
</tr>
<tr>
<td><img src="images/front_site.gif" width="1280" height="73" border="0" cellspacing="0" cellpadding="0"></td>
</tr>
<tr>
<td><a href="http://www.macromedia.com/downloads"><img src="images/flash.gif" width="180" height="22" border="0" cellspacing="0" cellpadding="0"></a></td>
</tr>
<tr>
<td><a href="lasal.html"><img src="images/enter.gif" width="180" height="22" border="0" cellspacing="0" cellpadding="0"></a></td>
</tr>
</table>
</div>
</body>

Kleine opmerking TrueChaoZ. Indien je alles perfect in het midden wil laten centeren neem je voor margin-top:... beter de helft van je object.

<style>
.test {
width:100px;
height:100px;
background-color:black;
margin-top:-50px;
position:absolute;
top:50%;
left:0px;
}
</style>
TrueChaoZ
%Europe/Berlin %584 %2005, 15:02
Kleine opmerking TrueChaoZ. Indien je alles perfect in het midden wil laten centeren neem je voor margin-top:... beter de helft van je object.

je hebt helemaal gelijk...ik had het ergens anders vandaan gekopieerd en ik sliep denk ik half :D
maar inderdaad je moet de helft van je objectgrootte nemen.
Berthjen
%Europe/Berlin %887 %2005, 22:18
Door me zodanig te focussen op Safari heb ik natuurlijk Explorer uit het oog verloren.
Dit script werkt niet in Explorer voor mac.

Maw, mijn probleem is dus toch nog niet opgelost.
Jorim
%Europe/Berlin %907 %2005, 22:46
Onderstaande doet het iig in IE en FF, Safari kan ik niet testen :D

<html>

<head>

<style type="text/css">
div#positie {
position: absolute;
height: 187px; /* Hoogte van je object */
margin-top: -94px; /* helft van de hoogte */
top: 50%;
}
</style>

</head>

<body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<div id="positie">
<table width="1280" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="http://www.lasalcommunicatie.be/images/tekst.gif" width="250" height="70" border="0" cellspacing="0" cellpadding="0"></td>
</tr>
<tr>
<td><img src="http://www.lasalcommunicatie.be/images/front_site.gif" width="1280" height="73" border="0" cellspacing="0" cellpadding="0"></td>
</tr>
<tr>
<td><a href="http://www.macromedia.com/downloads"><img src="http://www.lasalcommunicatie.be/images/flash.gif" width="180" height="22" border="0" cellspacing="0" cellpadding="0"></a></td>
</tr>
<tr>
<td><a href="lasal.html"><img src="http://www.lasalcommunicatie.be/images/enter.gif" width="180" height="22" border="0" cellspacing="0" cellpadding="0"></a></td>
</tr>
</table>
</div>

</body>

</html>
Berthjen
%Europe/Berlin %929 %2005, 23:18
Bedankt voor je reply Jorim, maar dit script doet net hetzelfde als het voorgaande.

Safari, FF,... OK. Explorer voor mac (op PC heb ik geen idee) doet het het niet goed. Het beeld staat er maar voor de helft op en staat bovenaan het scherm.

We zullen met ze'n allen nog wat verder moeten zoeken hé :D
Jorim
%Europe/Berlin %958 %2005, 00:00
Is IE voor Mac niet zo verschrikkelijk dat je daar eigenlijk gewoon geen rekening meer mee moet houden ?? Volgens mij heb ik hier wel eens wat opmerkingen gelezen dat sommige bedrijven ook gewoon aangaven dat ze geen garanties gaven over de layout voor IE-Mac.

Dit artikel (http://www.macosx.nl/?p=showarticle&art_id=909) op MacOSX.nl spreekt boekdelen!
TrueChaoZ
%Europe/Berlin %478 %2005, 12:28
Het is inderdaad zo dat IE op de Mac verschikkelijk is, en dat ze gestopt zijn met de ontwikkeling ervan, maar ik denk dat je dit moet aangeven in je CSS:
html, body {
width:100%;
height:100%;
}

@Jorim
ik snap dat jij ook wist hoe het moest maar het heeft natuurlijk geen zin om dubbele antwoorden te geven, ik had namelijk al precies hetzelfde gezegd :)
Berthjen
%Europe/Berlin %641 %2005, 16:24
ik denk dat je dit moet aangeven in je CSS:
html, body {
width:100%;
height:100%;
}

Nog steeds hetzelfde. 4 verschillende browsers op m'n mac en slechts 2 doen het goed (FF en Safari), IE mac (helemaal niet) en Opera (ook maar half). Deze laatste wordt toch bijna door niemand gebruikt veronderstel ik?

Off topic
IE voor mac is inderdaad stopgezet, maar wordt toch nog steeds veel gebruikt. Zo zijn er bepaalde websites die enkel werken met IE. Zoals bv Netbanking van een bepaalde bank.
Jorim
%Europe/Berlin %657 %2005, 16:47
@Jorim
ik snap dat jij ook wist hoe het moest maar het heeft natuurlijk geen zin om dubbele antwoorden te geven, ik had namelijk al precies hetzelfde gezegd :)Bijna precies hetzelfde en dat kan het verschil maken :p :)
Sanneman
%Europe/Berlin %492 %2006, 11:49
Leuke discussie, maar is iemand er nu al achter hoe het flash-bestand gecentreerd kan worden weergegeven (in alle browsers)? Ik worstel met hetzelfde probleem. Zo ingewikkeld kan dat toch niet zijn...?
elrosa
%Europe/Berlin %507 %2006, 12:11
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>hier flash</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
rickpastoor
%Europe/Berlin %513 %2006, 12:19
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>hier flash</td>
</tr>
</table>
</div>
</td>
</tr>
</table>

Ik snap niet waarom je die tabel er nog omheen zet..DIV is een block-level element en is dus standaard 100% van je pagina. Verder wordt op jouw manier het Flashelement nog steeds niet verticaal in het midden geplaatst. Voor een oplossing die voor de meeste browsers werkt zie hierboven :)
Sanneman
%Europe/Berlin %524 %2006, 12:34
Ik gebruik nu de bijgevoegde code. In Explorer voor Windows wordt het flash-bestand prima gecentreerd, ook in Safari voor Mac. Maar in Explorer voor Mac staat de animatie strak bovenaan en ook nog eens voor de helft uit het beeld. Ik ben een beginner, dus ik hoop dat iemand mij op eenvoudige wijze kan vertellen hoe dit probleem op te lossen. Alvast bedankt voor jullie reacties!


<style type="text/css">
div#centered {
position: absolute;
width: 800px;
height: 600px;
margin-top: -300px;
margin-left: -400px;
top: 50%;
left: 50%;
}
<!--
body {
background-color: #97CC28;
}
-->
</style></head>

<body>
<div id="centered">
<p>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" name="centered" width="800" height="600" align="absmiddle" id="centered">
<param name="movie" value="../afbeeldingen/flashrondhoek2.swf">
<param name="quality" value="high">
<embed src="../afbeeldingen/flashrondhoek2.swf" width="800" height="600" align="absmiddle" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="centered"></embed>
</object>
</p>
</div>
</body>
</html>
Sanneman
%Europe/Berlin %926 %2006, 22:14
Beste flashers,

Het probleem is opgelost, met dank aan Berthjen. Alles staat weer keurig gecentreerd in mijn browsers. Bij zowel Safari, als Explorer voor Mac en Win.

Hier komt de verlossende code voor wie het weten wil:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>title</title>
<link href="files/style.css" rel="stylesheet" type="text/css">
</head>

<body bgcolor="#ffffff" topmargin="0" marginheight="0" onLoad="init()">
<div align="center">
<table width="breedte van je bestand" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="breedte van je bestand" height="100%" valign="middle">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="breedte van je bestand" height="hoogte van je bestand">
<param name="movie" value="jouwFlashMovie.swf">
<param name="quality" value="high">
<embed src="jouwFlashMovie.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="breedte van je bestand" height="hoogte van je bestand"></embed>
</object>
</td>
</tr>
</table>
</div>
</body>
</html>


Verder mogen de volgende regels gedeleted worden, mochten deze in je html voorkomen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">


Zo moet het lukken.
Berthjen bedankt!
rickpastoor
%Europe/Berlin %979 %2006, 23:30
Verder mogen de volgende regels gedeleted worden, mochten deze in je html voorkomen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Oh mensen..dit gaat niet goed..ik trek het niet meer...
theFlashWizard
%Europe/Berlin %043 %2006, 01:02
mischien n stomme vraag maar waarom zet je niet alles in flash en ga je full browser.
dan heb je volgens mij geen last meer van verschillende browsers en binnen flash kun je je site overal zetten :)
het enigste is dat je die onderste 2 rijen ook in flash moet zetten dan.
SubZero
%Europe/Berlin %484 %2006, 11:37
Beste flashers,

Het probleem is opgelost, met dank aan Berthjen. Alles staat weer keurig gecentreerd in mijn browsers. Bij zowel Safari, als Explorer voor Mac en Win.

Hier komt de verlossende code voor wie het weten wil:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>title</title>
<link href="files/style.css" rel="stylesheet" type="text/css">
</head>

<body bgcolor="#ffffff" topmargin="0" marginheight="0" onLoad="init()">
<div align="center">
<table width="breedte van je bestand" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="breedte van je bestand" height="100%" valign="middle">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="breedte van je bestand" height="hoogte van je bestand">
<param name="movie" value="jouwFlashMovie.swf">
<param name="quality" value="high">
<embed src="jouwFlashMovie.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="breedte van je bestand" height="hoogte van je bestand"></embed>
</object>
</td>
</tr>
</table>
</div>
</body>
</html>


Verder mogen de volgende regels gedeleted worden, mochten deze in je html voorkomen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">


Zo moet het lukken.
Berthjen bedankt!

Dit is net terugkijken in het verleden, ofwel "hoe bouw je een HTML-pagina zoals in 1997?". Een DocType is essentieel, geen optie.