Help - Search - Members - Calendar
Full Version: Layout Problem...
Zymic Webmaster Forums > Web Design & Development > Client Side Scripting > HTML and CSS
tomalders
Oct 12 2008, 07:07 PM
Hello,

I'm kinda new at scripting and webdesign and i just downloaded a template from this website, and i wanted to edit it.
But there's a problem if i want to add some images at it.. You can see the example of how it is at
www.erens-verwarming.be/verwarming-erens/sanitair.html
you can see at the bottom of the page that the last "block" is not right..
Although the last 2 blocks are the same script. I guess i forgot some </p> or </script> tag.

Could someone help me please? Thanks in advance smile.gif

PS: You can see the used script here below.

CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>SiteName</title>

<style type="text/css">@import"style.css";</style>
<link rel="stylesheet" href="blue.css" type="text/css" title="blue">
<link rel="alternate stylesheet" type="text/css" href="red.css" title="red">
<link rel="alternate stylesheet" type="text/css" href="green.css" title="green">
<link rel="alternate stylesheet" type="text/css" href="pink.css" title="pink">
&lt;script type="text/javascript" src="styleswitcher.js"></script>

</head>

<body>

<div id="container" class="clearfix">

<div id="nav">
<h4>Menu</h4>
<ul>
<li><a href="#" title="?">Home</a></li>
<li><a href="#" title="?">Pages</a></li>
<li><a href="#" title="?">About</a></li>
<li><a href="#" title="?">Bio</a></li>
<li><a href="#" title="?">Contact</a></li>
</ul>

<h4>Friends</h4>
<ul>
<li><a href="http://www.zymic.com" title="?">Zymic</a></li>
<li><a href="http://www.caddoo.net" title="?">Caddoo</a></li>
<li><a href="#" title="?">Apply to be my friend</a></li>
<li><a href="#" title="?">Apply to be my friend</a></li>
<li><a href="#" title="?">Apply to be my friend</a></li>
<li><a href="#" title="?">Apply to be my friend</a></li>
</ul>


<h4>Login</h4>
<form id="login" action="#" method="post">
<fieldset>
<legend>Login Form</legend>
<label for="uname">Username</label>
<input type="text" onblur="if(this.value=='') this.value='Username';" onfocus="if(this.value=='Username') this.value='';" name="username" id="uname" value="Username">
<label for="pword">Password</label>
<input type="password" onblur="if(this.value=='') this.value='Password';" onfocus="if(this.value=='Password') this.value='';" name="password" id="pword" value="Password">
<input id="submit" name="" type="submit">
</fieldset>
</form>

<h4>Sponsor/Advertisement</h4>
<div id="ad">
<a href="#" title="#"><img src="images/ad.gif" alt="#" /></a>
</div>
</div>
<div id="rightside">

<h1>Welcome to yoursite name</h1>

<div id="colourchange">
<ul>
<li><a href="#" onclick="setActiveStyleSheet('blue'); return false;" title="Change style to Blue"><img src="images/bluebtn.gif" alt="Change style to Blue" /></a></li>
<li><a href="#" onclick="setActiveStyleSheet('red'); return false;" title="Change style to Red"><img src="images/redbtn.gif" alt="Change style to Red" /></a></li>
<li><a href="#" onclick="setActiveStyleSheet('green'); return false;" title="Change style to Green"><img src="images/greenbtn.gif" alt="Change style to Green" /></a></li>
<li><a href="#" onclick="setActiveStyleSheet('pink'); return false;" title="Change style to Pink"><img src="images/pinkbtn.gif" alt="Change style to Pink" /></a></li>
</ul>
</div>

<h2>Page title</h2>

<h3>Template Copyright</h3>
<p>
Duravit is een van de marktleiders inzake keramisch sanitair, badkamer meubilair, accessoires, bubbelbaden en wellness.<br>Je komt Duravit dan ook niet alleen tegen in privéwoningen maar ook in hotels, op luchthavens enz.
<br><br>Meer voorbeelden zijn te vinden op <a href="http://www.duravit.com">www.duravit.com</a>.<br><font size="1">Klik op de foto voor een grotere weergave.</font>

&lt;script language="javascript">
var win = null;
function NewWindow(mypage,myname,w,h,scroll){
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings =
'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable'
win = window.open(mypage,myname,settings)
}
</script>
<a href="images/duravit/Duravit-1-big.jpg" onclick="NewWindow(this.href,'name','550','415','yes');return false">
<img class="foto-t" src="images/duravit/Duravit-1-big.jpg" align="left" height="120" width="158" border="0" hspace="0"></a>
<a href="images/duravit/Duravit-2-big.jpg" onclick="NewWindow(this.href,'name','550','415','yes');return false">
<img class="foto-t" src="images/duravit/Duravit-2-big.jpg" align="left" height="120" width="158" border="0" hspace="10"></a>
<a href="images/duravit/Duravit-3-big.jpg" onclick="NewWindow(this.href,'name','550','415','yes');return false">
<img class="foto-t" src="images/duravit/Duravit-3-big.jpg" align="left" height="120" width="158" border="0" hspace="10"></a>
</p>

<h3>Remove Copyright</h3>
<p>
Duravit is een van de marktleiders inzake keramisch sanitair, badkamer meubilair, accessoires, bubbelbaden en wellness.<br>Je komt Duravit dan ook niet alleen tegen in privéwoningen maar ook in hotels, op luchthavens enz.
<br><br>Meer voorbeelden zijn te vinden op <a href="http://www.duravit.com">www.duravit.com</a>.<br><font size="1">Klik op de foto voor een grotere weergave.</font>

&lt;script language="javascript">
var win = null;
function NewWindow(mypage,myname,w,h,scroll){
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings =
'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable'
win = window.open(mypage,myname,settings)
}
</script>
<a href="images/duravit/Duravit-1-big.jpg" onclick="NewWindow(this.href,'name','550','415','yes');return false">
<img class="foto-t" src="images/duravit/Duravit-1-big.jpg" align="left" height="120" width="158" border="0" hspace="0"></a>
<a href="images/duravit/Duravit-2-big.jpg" onclick="NewWindow(this.href,'name','550','415','yes');return false">
<img class="foto-t" src="images/duravit/Duravit-2-big.jpg" align="left" height="120" width="158" border="0" hspace="10"></a>
<a href="images/duravit/Duravit-3-big.jpg" onclick="NewWindow(this.href,'name','550','415','yes');return false">
<img class="foto-t" src="images/duravit/Duravit-3-big.jpg" align="left" height="120" width="158" border="0" hspace="10"></a>
</p>

<h3>Welcome</h3>
<p>
Aliquam risus nulla, scelerisque quis, fermentum at, vestibulum eget, enim. Donec nec nibh. Donec convallis, dolor blandit tincidunt eleifend, eros sapien venenatis erat, non pharetra felis nisi eu nisi. Mauris sagittis. Phasellus pellentesque sapien id ante. Maecenas elit nisl, rhoncus faucibus, pellentesque imperdiet, lacinia ut, odio. Nullam hendrerit dolor nec mauris. Nulla sed orci ac odio posuere placerat. Proin purus lorem, faucibus at, porta sed, bibendum id, eros. Nulla bibendum mollis turpis. Aliquam
</p>

<h3>Welcome</h3>
<p>
Aliquam risus nulla, scelerisque quis, fermentum at, vestibulum eget, enim. Donec nec nibh. Donec convallis, dolor blandit tincidunt eleifend, eros sapien venenatis erat, non pharetra felis nisi eu nisi. Mauris sagittis. Phasellus pellentesque sapien id ante. Maecenas elit nisl, rhoncus faucibus, pellentesque imperdiet, lacinia ut, odio. Nullam hendrerit dolor nec mauris. Nulla sed orci ac odio posuere placerat. Proin purus lorem, faucibus at, porta sed, bibendum id, eros. Nulla bibendum mollis turpis. Aliquam
</p>

<h3>Welcome</h3>
<p>
&lt;script language="javascript">
var win = null;
function NewWindow(mypage,myname,w,h,scroll){
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings =
'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable'
win = window.open(mypage,myname,settings)
}
</script>
<a href="images/duravit/Duravit-3-big.jpg" onclick="NewWindow(this.href,'name','550','415','yes');return false"><font color="#808080" size="3">
<img class="foto-t" src="images/duravit/Duravit-3-big.jpg" align="left" height="120" width="158" border="0" hspace="0"></a>
<a href="images/duravit/Duravit-3-big.jpg" onclick="NewWindow(this.href,'name','550','415','yes');return false"><font color="#808080" size="3">
<img class="foto-t" src="images/duravit/Duravit-3-big.jpg" align="left" height="120" width="158" border="0" hspace="0"></a>
<a href="images/duravit/Duravit-3-big.jpg" onclick="NewWindow(this.href,'name','550','415','yes');return false"><font color="#808080" size="3">
<img class="foto-t" src="images/duravit/Duravit-3-big.jpg" align="left" height="120" width="158" border="0" hspace="0"></a>
</p>

</div>

</div>

<div id="footer">
<p>
Layout created by <a href="http://www.caddoo.net" title="Portfolio of Matthew Caddoo">Matthew Caddoo</a> for <a href="http://www.zymic.com" title="Zymic template resource">Zymic Free Templates</a>
</p>
</div>

</body>
</html>
L. Kaiserblazer
Oct 12 2008, 08:19 PM
ok.. after analyzing your coding, i found you had a small misplaced div tag.. try this:

CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Verwarming Erens :: Sanitair</title>

<style type="text/css">@import"http://www.erens-verwarming.be/verwarming-erens/style.css";</style>
<link rel="stylesheet" href="blue.css" type="text/css" title="blue">
<link rel="alternate stylesheet" type="text/css" href="red.css" title="red">
<link rel="alternate stylesheet" type="text/css" href="green.css" title="green">
<link rel="alternate stylesheet" type="text/css" href="pink.css" title="pink">
&lt;script type="text/javascript" src="styleswitcher.js"></script>

</head>

<body>

<div id="container" class="clearfix">

<div id="nav">
<h4>Menu</h4>
<ul>
<li><a href="index.html" title="Home">Home</a></li>
<li><a href="sanitair.html" title="Sanitair">Sanitair</a></li>
<li><a href="#" title="?">About</a></li>
<li><a href="#" title="?">Bio</a></li>

<li><a href="#" title="?">Contact</a></li>
</ul>

<h4>Friends</h4>
<ul>
<li><a href="http://www.zymic.com" title="?">Zymic</a></li>
<li><a href="http://www.caddoo.net" title="?">Caddoo</a></li>
<li><a href="#" title="?">Apply to be my friend</a></li>
<li><a href="#" title="?">Apply to be my friend</a></li>
<li><a href="#" title="?">Apply to be my friend</a></li>

<li><a href="#" title="?">Apply to be my friend</a></li>
</ul>


<h4>Login</h4>
<form id="login" action="#" method="post">
<fieldset>
<legend>Login Form</legend>
<label for="uname">Username</label>
<input type="text" onblur="if(this.value=='') this.value='Username';" onfocus="if(this.value=='Username') this.value='';" name="username" id="uname" value="Username">
<label for="pword">Password</label>
<input type="password" onblur="if(this.value=='') this.value='Password';" onfocus="if(this.value=='Password') this.value='';" name="password" id="pword" value="Password">

<input id="submit" name="" type="submit">
</fieldset>
</form>

<h4>Sponsor/Advertisement</h4>
<div id="ad">
<a href="#" title="#"><img src="images/ad.gif" alt="#" /></a>
</div>
</div>
<div id="rightside">

<h1></h1>

<div id="colourchange">
<ul>
<li><a href="#" onclick="setActiveStyleSheet('blue'); return false;" title="Change style to Blue"><img src="images/bluebtn.gif" alt="Change style to Blue" /></a></li>

<li><a href="#" onclick="setActiveStyleSheet('red'); return false;" title="Change style to Red"><img src="images/redbtn.gif" alt="Change style to Red" /></a></li>
<li><a href="#" onclick="setActiveStyleSheet('green'); return false;" title="Change style to Green"><img src="images/greenbtn.gif" alt="Change style to Green" /></a></li>
<li><a href="#" onclick="setActiveStyleSheet('pink'); return false;" title="Change style to Pink"><img src="images/pinkbtn.gif" alt="Change style to Pink" /></a></li>
</ul>
</div>

<h2>Sanitair</h2>

<h3>Sanitair en Badkamers</h3>
<p>Bent u op zoek naar een nieuwe badkamer of een nieuwe sanitaire installatie, voor nieuwbouw of renovatie, dan kunt u bij Josan Erens terecht.<br><br>Er wordt steeds gebruik gemaakt van de laatste nieuwe materialen en technieken. Josan Erens verzekert u een vakkundige plaatsing.<br><br>Hard leidingwater is belastend voor het milieu, uw woning en uw portemonnee. Kalk zorgt immers voor onnodig gebruik van agressieve reinigingsmiddelen, hoge energierekeningen, voortijdig kapot gaan van apparatuur, dof en aangeslagen sanitair enzovoort… Om dit alles te voorkomen plaatst Josan Erens ook voor u <b>waterontharders</b>.
<br><br>Heeft u er wel eens aan gedacht wat u allemaal met regenwater kunt doen? U kunt bijvoorbeeld het toilet, de buitenkraan, de wasbak en de besproeiing van uw tuin allemaal op een <b>regenwaterpomp</b> zetten. Dit zal uw waterverbruik aanzienlijk doen dalen. Voor deze installaties kunt u bij Josan Erens terecht.<br><br><b>Hieronder kan u enkele voorbeelden zien van verschillende merken badkamers.</b>

</p>

<h3>Duravit</h3>
<p>Duravit is een van de marktleiders inzake keramisch sanitair, badkamer meubilair, accessoires, bubbelbaden en wellness.<br>Je komt Duravit dan ook niet alleen tegen in privéwoningen maar ook in hotels, op luchthavens enz.
<br><br>Meer voorbeelden zijn te vinden op <a href="http://www.duravit.com">www.duravit.com</a>.<br><font size="1">Klik op de foto voor een grotere weergave.</font>

&lt;script language="javascript">
var win = null;
function NewWindow(mypage,myname,w,h,scroll){
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings =
'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable'
win = window.open(mypage,myname,settings)
}
</script>
<a href="images/duravit/Duravit-1-big.jpg" onclick="NewWindow(this.href,'name','550','415','yes');return false">
<img class="foto-t" src="images/duravit/Duravit-1-big.jpg" align="left" height="120" width="158" border="0" hspace="0"></a>

<a href="images/duravit/Duravit-2-big.jpg" onclick="NewWindow(this.href,'name','550','415','yes');return false">
<img class="foto-t" src="images/duravit/Duravit-2-big.jpg" align="left" height="120" width="158" border="0" hspace="10"></a>
<a href="images/duravit/Duravit-3-big.jpg" onclick="NewWindow(this.href,'name','550','415','yes');return false">
<img class="foto-t" src="images/duravit/Duravit-3-big.jpg" align="left" height="120" width="158" border="0" hspace="10"></a>
</p>




<h3>Duravit</h3>
<p>Duravit is een van de marktleiders inzake keramisch sanitair, badkamer meubilair, accessoires, bubbelbaden en wellness.<br>Je komt Duravit dan ook niet alleen tegen in privéwoningen maar ook in hotels, op luchthavens enz.
<br><br>Meer voorbeelden zijn te vinden op <a href="http://www.duravit.com">www.duravit.com</a>.<br><font size="1">Klik op de foto voor een grotere weergave.</font>

&lt;script language="javascript">
var win = null;
function NewWindow(mypage,myname,w,h,scroll){
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings =
'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable'
win = window.open(mypage,myname,settings)
}
</script>
<a href="images/duravit/Duravit-1-big.jpg" onclick="NewWindow(this.href,'name','550','415','yes');return false">
<img class="foto-t" src="images/duravit/Duravit-1-big.jpg" align="left" height="120" width="158" border="0" hspace="0"></a>
<a href="images/duravit/Duravit-2-big.jpg" onclick="NewWindow(this.href,'name','550','415','yes');return false">
<img class="foto-t" src="images/duravit/Duravit-2-big.jpg" align="left" height="120" width="158" border="0" hspace="10"></a>
<a href="images/duravit/Duravit-3-big.jpg" onclick="NewWindow(this.href,'name','550','415','yes');return false">
<img class="foto-t" src="images/duravit/Duravit-3-big.jpg" align="left" height="120" width="158" border="0" hspace="10"></a>
</p>
</div>
</div>

<div id="footer">
<p>

Layout created by <a href="http://www.caddoo.net" title="Portfolio of Matthew Caddoo">Matthew Caddoo</a> for <a href="http://www.zymic.com" title="Zymic template resource">Zymic Free Templates</a>
</p>
</div>

</body>
</html>


it works for my computer.. reply and tell me if its what you were looking for..

-Lucas
MrTouz
Oct 13 2008, 05:40 AM
its not compatible with FF3 :/
johnythomas
Feb 8 2012, 11:50 AM
There is nothing called a free lunch is this world. If anything needed to be resolved then initiated need a support to be sorted out.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2012 Invision Power Services, Inc.