Archief - bestaande website in dreamweaver verticaal centreren

darkcre3p · 23 apr 2010

Ik heb al gegoogled hierover maar op iedere website staat er een andere uitleg en ik heb een zeer beperkte kennis van dreamweaver of het maken van websites..

Ik kan het verschil nog niet eens tussen al de prefixen en weet niet in wat de site is gemaakt dus heb ik gegokt op HTML :/

Nu ik heb al overal gelezen dat je in de code wat moet zitten prutsen en totnutoe heb ik maar in de design tab zitten prutsen dus heb ik voor het gemak van eerste keer de code hierin gezet

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Thars - Home &amp; Furniture</title>
<style type="text/css">
<!--
body {
	margin-left: 1px;
	margin-top: 1px;
	margin-right: 1px;
	margin-bottom: 1px;
	background-color: #000000;
}
.style2 {color: #FFFFFF}
.style3 {font-size: 16px; font-family: Verdana, Arial, Helvetica, sans-serif;}
.style8 {font-family: Verdana, Arial, Helvetica, sans-serif}
.style10 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; }
.style12 {
	color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
}
a:link {
	color: #000000;
}
a:visited {
	color: #000000;
}
a:hover {
	color: #000000;
}
a:active {
	color: #000000;
}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('Images/Buttons/OpeningB.png','Images/Buttons/LocationB.png')">
<table width="100%" border="0" align="center" bordercolor="#FFFFFF" bgcolor="#000000">
  <tr>
    <td width="10%" height="164">&nbsp;</td>
    <td width="76%"><div align="center"><img src="Images/logo thars.png" width="306" height="147" /></div></div></td>
    <td width="10%">&nbsp;</td>
  </tr>
  <tr>
    <td width="10%">&nbsp;</td>
    <td><table width="100%" border="0" cellspacing="10">
      <tr>
        <td><div align="center"><a href="OpeningHours.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Opening hours','','Images/Buttons/OpeningB.png',1)"><img src="Images/Buttons/Opening test.png" name="Opening hours" width="160" height="86" border="0" id="Opening hours" /></a><a href="Location.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Location','','Images/Buttons/LocationB.png',1)"> <img src="Images/Buttons/Location test.png" name="Location" width="160" height="86" border="0" id="Location" /></a></div></td>
      </tr>
    </table></td>
    <td width="10%">&nbsp;</td>
  </tr>
</table>
</body>
</html>

Scrimrage · 23 apr 2010

margin: 0 auto;

Zero Grav · 23 apr 2010

Dat is horizontaal centreren. Gaat trouwens ook niet werken op een tabel die 100% breedte heeft.
En 't is ook altijd wel handig om wat meer uitleg te geven aan iemand die duidelijk vermeld totaal geen kennis van zaken te hebben, anders staat em nog nergens.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Thars - Home &amp; Furniture</title>
<style type="text/css">
<!--
body {
	margin: 0; padding: 0;
	background-color: #000000;
}
.style2 {color: #FFFFFF}
.style3 {font-size: 16px; font-family: Verdana, Arial, Helvetica, sans-serif;}
.style8 {font-family: Verdana, Arial, Helvetica, sans-serif}
.style10 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; }
.style12 {
	color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
}
a:link {
	color: #000000;
}
a:visited {
	color: #000000;
}
a:hover {
	color: #000000;
}
a:active {
	color: #000000;
}

#container {
	height: 280px; /* Hoogte van het te centreren element */
	margin-top: 50%;
	position: absolute;
	top: -140px; /* Min de helft van de hoogte */
	width: 100%;
}

-->
</style>
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('Images/Buttons/OpeningB.png','Images/Buttons/LocationB.png')">
<div id="container">
<table width="100%" border="0" align="center" bordercolor="#FFFFFF" bgcolor="#000000">
  <tr>
    <td width="10%" height="164">&nbsp;</td>
    <td width="76%"><div align="center"><img src="Images/logo thars.png" width="306" height="147" /></div></div></td>
    <td width="10%">&nbsp;</td>
  </tr>
  <tr>
    <td width="10%">&nbsp;</td>
    <td><table width="100%" border="0" cellspacing="10">
      <tr>
        <td><div align="center"><a href="OpeningHours.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Opening hours','','Images/Buttons/OpeningB.png',1)"><img src="Images/Buttons/Opening test.png" name="Opening hours" width="160" height="86" border="0" id="Opening hours" /></a><a href="Location.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Location','','Images/Buttons/LocationB.png',1)"> <img src="Images/Buttons/Location test.png" name="Location" width="160" height="86" border="0" id="Location" /></a></div></td>
      </tr>
    </table></td>
    <td width="10%">&nbsp;</td>
  </tr>
</table>
</div>
</body>
</html>

'k Heb er in commentaar bij vermeld wat het doet. Vreselijk slechte code trouwens, maja, dat is wel normaal bij Dreamweaver.

darkcre3p · 26 apr 2010

Thx alvast voor de hulp.

Waarom moet die 'top' eigenlijk de helft zijn van de 'height'? Als ik nu de 'height' op 600 zou zetten blijft de inhoud ook in het midden staan, maar er verschijnt een kleine scrollbalk aan de rechtkant.

Ik heb hem zo gezet en op zicht lijkt de inhoud idd in het midden te staan in zowel IE als FF. Als er dan bv iemand z'n TV gebruikt als beeldscherm, zal dit dan ook in het midden blijven?

Code:

#container {
	height: 350px; /* Hoogte van het te centreren element */
	margin-top: 50%;
	position: absolute;
	top: -350px; /* Min de helft van de hoogte */
	width: 100%;

bicklo · 26 apr 2010

Ik vermoed dat de height eigenlijk 700px moet zijn.

Indien je dus margin-top: 50% maakt start uw inhoud vanaf het midden.
Als je dan top: -350px neemt keert uw inhoud 350px terug naar boven en zo staat hij mooi in het midden.

Hoop dat ik een beetje duidelijk ben.

darkcre3p · 29 apr 2010

Als de height naar 700 breng krijg ik weer die scrollbalk aan de rechterkant.
Kan dat dan misschien liggen aan die margin top aangezien zoals je zei, m'n inhoud vanaf het midden zou starten en niet daadwerkelijk in het midden staat?

Nu zoals ik eerder zei is het in mijn geval opgelost met die height op 350 te zetten maar wat ik me afvraag is of dat dit geen probleem zal zijn voor andere (grotere) beeldschermen

Zero Grav · 29 apr 2010

Die margin-top neemt afhankelijk van de resolutie 50%, dus op resolutie 1024*768 neemt em 384, maar op 1920*1080 pakt em 540. Dus uw site begint dan op de helft van uw pagina, maar omdat ge wilt dat het midden van uw site in het midden staat van uw browser trekt ge daar nog eens de helft van de hoogte van uw site af. (Bicklo zijn uitleg dus)

Wat gij doet met height 350px én de top: -350px kan dus nooit kloppen, omdat ge dan begint op 50% van de hoogte en ge trekt er uw volledige site terug af. Dus de onderkant van uw site gaat dan op het midden liggen.

Als ge een height van 700 hebt en ge krijgt scrollbars dan zou het meest waarschijnlijke zijn dat ge gewoon geen browser van 700 pixels hoog hebt.

bicklo · 29 apr 2010

Dat zal geen probleem zijn aangezien u telkens begint met margin-top: 50%.
Dus bij om het even welke resolutie begint deze in het midden.

darkcre3p · 29 apr 2010

En is het dan normaal als ik in dreamweaver als ik Zero Grav's afmetingen overneem, de pagina zelfs in design view ook verkeerd word weergegeven alsook op een IE/FF pagina?

Code:

#container {
	height: 280px; /* Hoogte van het te centreren element */
	margin-top: 50%;
	position: absolute;
	top: -140px; /* Min de helft van de hoogte */
	width: 100%;

Ik heb nog vlug effe een screentje upgeload met hetgeen dat ik bedoel

de nutteloze inhoud maakt nu op dit moment niet uit want het is maar proberen dat ik doe. Het is bedoelt eigenlijk om later van tijd zoiets te doen met een ook een foto & de 2 talen

Eleven · 29 apr 2010

Ik heb net ZeroGrav zijn oplossing is getest, en ik krijg hetzelfde effect dat je beschrijft, ik denk deat hij de -xx px en 50% heeft omgewisseld.
Ik weet niet of dit is wat je bedoeld? (kijk in de bron voor de code)

Het probleem met deze methode is, als het browservenster kleiner is dan de hoogte van je verticaal element dan zie je de top van het element niet meer.

Ik denk dat display: table misschien wel eens een oplossing zou kunnen zijn, maar dan zit je nog altijd met verouderde IE's die dit niet ondersteunen.
Een andere oplossing zou Javascript kunnen zijn.

Overigens zou ik nooit verder gaan op de design view van Dreamweaver, gewoon testen in de gangbare browsers.

Zero Grav · 29 apr 2010

Oei, je m'excuse, ik vergis mij daar inderdaad wel vaker in. ^^

Ik krijg hier in Safari wel gewoon een scrollbar bij als het browservenster te klein wordt, Eleven? Anders mogelijk nog min-height: **px; in de body zetten, maar ook dat werkt niet in die oudere versies van IE.

darkcre3p · 29 apr 2010

Nog gedacht dat zo'n simpel lijkende bewerking toch zo moeilijk kan uitdraaien..
Konden ze dit niet met een verticale centreer optie doen zoals je simpelweg in MS office kunt vinden :unsure:

Code:

height: 273px;
	width: 960px;
	margin-top:-200px;
	position:absolute;
	top:50%;

Met dit staat het nog niet in in het midden maar het zou eventueel wel door de beugel kunnen. Probleem is nu dat m'n inhoud horizontaal niet meer gecentreerd staat. Net zoals met die rode achtergrond van de link.

Is het niet mogelijk om wat dingen te kopieren in de paginabron van die site die ik had doorgegeven?
Het word nl hetzelfde principe wat ik zou willen doen later: een foto met daaronder of daarboven de NL/FR indexen

bicklo · 29 apr 2010

Helpt dit eventueel

Code:

#verticalCenter{
	background:#F00;
	height: 273px;
	width: 960px;
	margin-top:-135px;
	position:absolute;
	top:50%;
	margin-left: -480px;
	left: 50%;

darkcre3p · 30 apr 2010

Net hetzelfde resultaat:
Als ik dat in de code zet doet hij alsof zijn neus bloed en centreert hij opnieuw maar verticaal en niet horizontaal.

als ik dan bv om te testen enkel maar uw tekst in de code zet & het ander verwijder centreert hij enkel maar horizontaal dus die code zou dus moeten kloppen. Hij wil ze enkel maar allebei tegelijk niet uitvoeren

Zero Grav · 30 apr 2010

Ik heb uw Javascript gedoe voor die images er even uitgesmeten en gewoon uw code geschreven zoals ze geschreven zou moeten zijn.

Zie hier een betere manier om die mouseovers te doen: http://fre.dommel.be/mouseover-met-1-afbeelding/

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Thars - Home &amp; Furniture</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

	<style type="text/css">
	<!--
	body {
		margin: 0; padding: 0;
		background-color: #000000;
		text-align: center;
	}
	
	#container {
		text-align: left;
		height: 280px;
		margin-top: -140px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -165px;
		width: 330px;
	}
	
	#buttons {
		margin-top: 20px;
	}
	
	#buttons a {
		float: left;
	}
	
	#buttons a img {
		border: 0
	}
	
	#buttons a:first-child {
		margin-right: 10px;
	}
	
	.align {
		display: block;
		margin: 0 auto;
	}
	
	a:link, a:visited, a:hover, a:active {
		color: #000000;
	}
	
	-->
	</style>


</head>

<body>

<div id="container">
	<img src="logo.jpg" width="306" height="147" class="align" />

	<div id="buttons">
		<a href="OpeningHours.html">
			<img src="opening.jpg" width="160" height="86" />
		</a>
	    <a href="Location.html">
	    	<img src="opening.jpg" width="160" height="86" />
	    </a>
    </div>
</div>

</body>
</html>

brutal · 30 apr 2010

gebruik een tabel zoals in dat voorbeeld van 'slots decoration'

darkcre3p · 3 mei 2010

Met die site min of meer te kopieren heb ik er ook aangeraakt. Ik denk dat ik het daarbij zal houden.
+ al mijn pagina's zijn met tabellen gemaakt

Bedankt in ieder geval voor de inlichtingen

Archief - bestaande website in dreamweaver verticaal centreren

darkcre3p

Legacy Member

Scrimrage

Legacy Member

Zero Grav

Legacy Member

darkcre3p

Legacy Member

bicklo

Legacy Member

darkcre3p

Legacy Member

Zero Grav

Legacy Member

bicklo

Legacy Member

darkcre3p

Legacy Member

Eleven

Legacy Member

Zero Grav

Legacy Member

darkcre3p

Legacy Member

bicklo

Legacy Member

darkcre3p

Legacy Member

Zero Grav

Legacy Member

brutal

Legacy Member

darkcre3p

Legacy Member