Layer uitzicht

Status
Niet open voor verdere reacties.
P

Peteon

Gebruiker
Lid geworden
4 jul 2004
Berichten
30
Ik probeer een site in Dreamweaver aan te maken (users.telenet.be/liese) ik heb gekozen om in het midden van de pagina te werken met een layer (in geel). Wanneer ik nu bvb. enkele foto's zet in 'foto's 'scrolt de gele band automatisch mee naar beneden in Dreamweaver. Echter wanneer ik de site bezie via IE of Firefox gaat de gele kleur niet tot beneden maar stopt ergens tussenin de foto's, dit is natuurlijk niet de bedoeling! Kan iemand mij helpen om dit probleempje op te lossen? Bedankt al.
 
Dit stukje:
div id="Layer1" style="position:absolute; width:655px; height:799px;
aanpassen
div id="Layer1" style="position:absolute; width:655px; height:auto;

:cool:
 
Hey Peter,
Het is al veel beter, doch nog niet zoals ik wou, de layer (geel) zou altijd het scherm moeten vullen, ook op index en promotie. Iets zoals deze link op deze site: http://www.tuinaanleg-bs.be/
bedankt al,
Peter
 
Vermits je je layer een id hebt gegeven kun je die aanroepen, indien je de style in de head zet.

Zo dus:
PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>hobbytuintje</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body,td,th {
	font-family: Times New Roman, Times, serif;
	font-size: 14px;
	color: #333333;
}
body {
	background-color: #FFFFCC;
}
a {
	font-size: 14px;
	color: #00CC66;
}
a:link {
	text-decoration: none;
	color: #3366ff;
}
a:visited {
	text-decoration: none;
	color: #333333;
}
a:hover {
	text-decoration: underline;
	color: #0000ff;
}
a:active {
	text-decoration: none;
	color: #0000ff;
}
.style1 {font-size: 18px}
.style5 {font-size: 14px}
.style6 {font-weight: bold}
.style8 {color: #000000}
.style10 {font-size: 30px}
.style11 {color: #000000; font-weight: bold; }

#Layer1
{
position:absolute; 
width:655px; 
height:auto;
left: 260px;
 top: 6px; 
background-color: #FFFF66;
border: 1px none #000000;
 }
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>

<body>
<div id="Layer1" > <!-- style van lyer naar style in head verplaatst. -->
  <div align="center" class="style10">
    <p><span class="style5"><span class="style6"><span class="style8"><a href="index.htm">Home</a> </span></span></span><span class="style11"><a href="wie%20zijn%20wij.htm">Wie zijn wij</a></span> <strong><span class="style5"><a href="promotie%27s.htm">Promotie's</a> </span><a href="contact.htm">Contact</a> <a href="foto%27s.htm">Foto's</a> <a href="ons%20bereiken.htm">Ons bereiken</a></strong></p>

    <p>&nbsp;</p>
  </div>
  <p align="center" class="style1"><img src="http://users.telenet.be/liese/Afbeeldingen/Tuinset.jpg" width="468" height="329"></p>
  <p align="center" class="style1"><img src="http://users.telenet.be/liese/Afbeeldingen/scheren_jpg.jpg" width="459" height="350"></p>
  <p align="center" class="style1"><img src="http://users.telenet.be/liese/Afbeeldingen/stronkfrezen_jpg.jpg" width="459" height="381"></p>
</div>
<a href="www.babot.be" target="www.babot.be">.</a>
</body>
</html>

Dus de style uit de layer is weg, staat nu in de head.
Beter is nog om een losse file te maken van de style en die in de head van iedere pagina te zetten.

Dit in de head:
PHP: 
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css" media="all">
 @import url("mijnstijl.css"); 
</style>

De stijl plak je in kladblok, dus:
PHP: 
body,td,th {
	font-family: Times New Roman, Times, serif;
	font-size: 14px;
	color: #333333;
}
body {
	background-color: #FFFFCC;
}
a {
	font-size: 14px;
	color: #00CC66;
}
a:link {
	text-decoration: none;
	color: #3366ff;
}
a:visited {
	text-decoration: none;
	color: #333333;
}
a:hover {
	text-decoration: underline;
	color: #0000ff;
}
a:active {
	text-decoration: none;
	color: #0000ff;
}
.style1 {font-size: 18px}
.style5 {font-size: 14px}
.style6 {font-weight: bold}
.style8 {color: #000000}
.style10 {font-size: 30px}
.style11 {color: #000000; font-weight: bold; }

#Layer1
{
position:absolute; 
width:655px; 
height:auto;
left: 260px;
 top: 6px; 
background-color: #FFFF66;
border: 1px none #000000;
 }
opslaan als mijnstijl.css
en you're done ;)

:cool:
 
Dit wordt iets te ingewikkeld voor mij, sorry. Voor u is het waarschijnlijk alledaagse kost. Wil je deze code maken en ev. doorsturen naar pdjaeger@myonline.be ? Dan moet ik ze misschien vervangen in mijn html code. Zou het zo kunnen lukken?
Bedankt
 
Tja, je kunt niet alles weten en kunnen.

Snappen doe je wel mettertijd. Zo moeilijk is het niet.

Om je op weg te helpen: open de zip.
Maak eerst een nieuwe map aan en zet de files hierin.
Al je pagina's zitten erin, tevens de opzet.

De feitelijke files voor je site, en natuurlijk de css file zet je in je homepagemap( nieuwe map aanmaken).

Nu kun je de content toevoegen.

Wens je kleuren en dergelijke te wijzigen, kan dus in de css file, en alle pagina's doen dan mee met die wijziging.

Voor wat betreft je content:
maak dit gewoon in kladblok, controleer, verander etc, tot het goed is.
Plak het dan in de html pagina in je editor.

:cool:
 

Bijlagen

Hey Peter,
Ben ermee bezig, maar ik denk toch dat er een makkelijker manier moet zijn om de gele layer aut. naar beneden te halen, denk je niet?
Zeker bedankt.
 
Als je de layer op 100% zet is dit alleen voor het beeldscherm
Zet je het op 1000px dan wordt het niet groter of kleiner.
Zet je het op auto dan past het zich aan.

:cool:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan