Layers centreren

Status
Niet open voor verdere reacties.
H

hiddevk

Gebruiker
Lid geworden
16 nov 2007
Berichten
58
Beste mensen!

Ik heb mijn site gemaakt op mijn laptop, met DW8. Toen ik mijn site op mijn desktop opende. was tot mijn grootste schrik de tekst verschoven!

Ik heb mijn site zo opgebouwd:

Eerst 1 div-tag (ofzoiets:p), waar de layout instaat, met hotspots voor het menu.

Dan 1 layer met de tekst & een java-script voor het goedemorgen-goedemiddag-goedeavond.

Super, super, super veel bedankt alvast, en ik hoop dat ik mijn nieuwe layout zo snel mogelijk op deze URL kan publiceren!
 
Ik ben ook een beginnende weddesigner en volop aan het expirimenteren.
Ik heb gekeken op je site en ik denk dat je de layer moet vervangen voor een tabel(table).
Hiermee zorg je ervoor dat je tekst opgesloten zet zodat ie niet meer kan verspringen.
Ik heb voor mijn dochters een site gemaakt met dezelfde opzet www.30stm.ontheweb.nl kijk maar ff.

suc6
 
Eigen schuld;
wordt getoond zoals je aangeeft

#Layer1 {
position:absolute;
width:774px;
height:404px;
z-index:1;
left: 116px;
top: 187px;
}

verander dit in

#Layer1 {

width:774px;
height:404px;
z-index:1;
margin-left: auto;
margin-right: auto;
margin-top: 187px;
}
 
???

En waar moet ik dat dan wel invullen? Ik probeerde het bij CSS-stijlen, en dan op layer 1, maar toen stond de tekst heelemaal onderaan, de pagina, en niet ín de layout, zoals ik het wil. Kan misschien iemand mn broncode kopieren en het goeddoen?

Daag!
 
Niet geheel toppie,
maar kan er mee door:
HTML: 
<!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>HiddeVK WEBDESIGN</title>
<style type="text/css">
<!--
body {
	background-color: #A1C5FD;
}
#Layer1 {
	position:absolute;
	width:740px;
	height:404px;
	z-index:1;
	left: 116px;
	top: 187px;

border:2px solid #ff0000;
}

.container{
width:830px;
margin-left:70px;
margin-right:auto;
border:2px solid #800040;
}
.style5 {color: #FFFFFF; font-size: 16px; }
.style7 {color: #FFFFFF; font-size: 18px; }
-->
</style></head>

<body><div class="container">
<div align="center"><img src="http://www.freewebs.com/hiddevankoningsveld/Layout/home.png" alt="HiddeVK" width="828" height="753" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="218,138,300,166" href="http://www.freewebs.com/hiddevankoningsveld/website/home.html" target="_self" />
<area shape="rect" coords="337,140,413,167" href="http://www.freewebs.com/hiddevankoningsveld/website/werk.html" target="_self" />
<area shape="rect" coords="450,140,615,166" href="http://www.freewebs.com/hiddevankoningsveld/website/info.html" target="_self" />
</map>

  <div id="Layer1">
    <p><span class="style7"><script language="JavaScript">
<!--
function greeting()
{
   var today = new Date();
   var hrs = today.getHours();
   document.write("Goede");
   if (hrs < 12)
      document.write("morgen, ");
   else if (hrs <= 17)
      document.write("middag, ");
   else
      document.write("navond, ");
}
// -->
</script><script language="JavaScript">greeting();</script>en hartelijk welkom op de site van HiddeVK Webdesign!</span></p>
    <p><span class="style5">Wij bieden goede service aan, voor een relatief lage prijs. Kijkt u gerust rond. Op de pagina Werk  ziet u een fractie van de layouts die wij tot nu toe ontworpen hebben, en daar kan die van u ook staan! Als u op de pagina ''Informatie'' klikt kunt u per post, of per e-mail informatie, of een offerte aanvragen.</span></p>
    <p>&nbsp;</p>
  </div>
</div>
<!-- --><script type="text/javascript" src="/i.js"></script><script type="text/javascript">if(typeof(urchinTracker)=='function'){_uacct="UA-230305-2";_udn="freewebs.com";urchinTracker();}</script></div></body>

</html>

Container bijgemaakt.
Position absolute heb je gebruikt ivm met je achtergrond.
beter is het je achtergrond te slicen, en als background te gebruiken.
Je achtergrond is nu ook
160,61 KB (164.465 bytes)
en dus te groot inkb.

:cool:
 
!!!!

Het lukt voor geen meter, dus heb ik een beslissing genomen:

Ik importeer mijn layout gewoon in flash, en de tekst zet ik als dynamische tekst erbovenop (zodat je het kan selecteren)

Dan doe ik dat voor elke pagina, en importeer mijn swf'jes in DW en dan centreer ik de swf'jes!

:D

Klaar!

Toch bedankt!
 
Kan,
swf is een optie.

hier een aangepaste code
HTML: 
<!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>HiddeVK WEBDESIGN</title>
<style type="text/css">
<!--
body {
	background-color: #A1C5FD;
}
#Layer1 {
	margin-top:-550px;
	width:740px;
	height:404px;
	margin-left:auto;
margin-right:auto;
border:2px solid #ff0000;
}

.container{
width:810px;
height:750px;
margin-left:auto;
margin-right:auto;
border:2px solid #800040;
background-image:url(http://www.freewebs.com/hiddevankoningsveld/Layout/home.png);
background-image:no-repeat;
background-properties:fixed;

}
.style5 {color: #FFFFFF; font-size: 16px; }
.style7 {color: #FFFFFF; font-size: 18px; }
-->
</style></head>

<body><div class="container">
<img src="" alt="HiddeVK"  width="820" height="750" border="0" usemap="#Map"  />
<map name="Map" id="Map"><area shape="rect" coords="218,138,300,166" href="http://www.freewebs.com/hiddevankoningsveld/website/home.html" target="_self" alt="HiddeVK" />
<area shape="rect" coords="337,140,413,167" href="http://www.freewebs.com/hiddevankoningsveld/website/werk.html" target="_self"  alt="HiddeVK" />
<area shape="rect" coords="450,140,615,166" href="http://www.freewebs.com/hiddevankoningsveld/website/info.html" target="_self"  alt="HiddeVK" />
</map>

  <div id="Layer1">
    <p><span class="style7"><script language="JavaScript" type="text/javascript" >
<!--
function greeting()
{
   var today = new Date();
   var hrs = today.getHours();
   document.write("Goede");
   if (hrs < 12)
      document.write("morgen, ");
   else if (hrs <= 17)
      document.write("middag, ");
   else
      document.write("navond, ");
}
// -->
</script><script language="JavaScript" type="text/javascript" >greeting();</script>en hartelijk welkom op de site van HiddeVK Webdesign!</span></p>
    <p><span class="style5">Wij bieden goede service aan, voor een relatief lage prijs. Kijkt u gerust rond. Op de pagina Werk  ziet u een fractie van de layouts die wij tot nu toe ontworpen hebben, en daar kan die van u ook staan! Als u op de pagina ''Informatie'' klikt kunt u per post, of per e-mail informatie, of een offerte aanvragen.</span></p>
    <p>&nbsp;</p>
  </div>


<!-- --><script type="text/javascript" src="/i.js"></script><script type="text/javascript">if(typeof(urchinTracker)=='function'){_uacct="UA-230305-2";_udn="freewebs.com";urchinTracker();}</script>
</div>
</body>

</html>

Is beter en gecentreerd.
Evenwel: het probleem blijft in de achtergrond zitten.
Bovenkant erafhalen, en dit als kop gebruiken om het netter te maken.

Gebruik je swf, controleer dan wel in IE en FF,
en trek je beeldscherm kleiner, om te kijken wat er gebeurt.

:cool:

.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan