Coding help...

August 8, 200917 yr

Evening All,

I have just finished a small project but I'm not convinced its coded correctly...

It views fine in all browsers and validates but I have a different #wrapper div for each page so #wrapper_page1 , #wrapper_page2 etc...

This is the html/css for the layout

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="contentslider.css" />

<script type="text/javascript" src="contentslider.js">
</script> 
<link href="css/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!-- Idea by:  Nic Wolfe -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=1,width=954,height=441,left = 262,top = 134');");
}
// End -->
</script>
</head>

<body>
<div id="wrapper_calabria">

<div id="container">
<!--logo start-->
 <div id="logo"><img src="siteimages/images/logo.png" width="508" height="140" alt="logo" /></div>
<!--logo end-->
<!--menu start-->
 <div class="nav_wrap">

 <ul>
<li><a href="index.html">Home</a></li>
<li><a href="whyinvest.html">Why Invest</a></li>
<li><a href="calabria.html">Calibria</a></li>
<li><a href="lifestyle.html">The Italian lifestyle</a></li>
<li><a href="villaspec.html">Villa Specifications</a></li>
<li><a href="javascript:popUp('Flash/masterplanfinal.swf')">Interactive Master Plan</a></li>
<li><a href="#">Interactive Floor Plans</a></li>
</ul>
</div><!--menu end-->
<div class="nav_wrap">
<ul>

<li><a href="#">Video</a></li>
<li><a href="#">Resort Gallery</a></li>
<li><a href="#">Location Gallery</a></li>
<li><a href="theprocess.html">The process & Payment plan</a></li>
<li><a href="#">Contact us</a></li>
</ul>

 </div><!--menu end-->

 <div id="maincontent_calabria">
 <div id="leftcol">

 <div class="leftColSec">
 <h2>View Villas</h2>
 <ul>
 <li><a href="javascript:popUp('Flash/Giza.swf')">Giza</a></li>
 <li><a href="javascript:popUp('Flash/babylon.swf')">Babylon</a></li>
 <li><a href="javascript:popUp('Flash/Olympia.swf')">Olympia</a></li>
 <li><a href="javascript:popUp('Flash/ephesus.swf')">Ephesus</a></li>
 <li><a href="javascript:popUp('Flash/hallcarnassus.swf')">Halicarnassus</a></li>
 <li><a href="javascript:popUp('Flash/Rhodes.swf')">Rhodes</a></li>
 <li><a href="javascript:popUp('Flash/alexandria.swf')">Alexandria</a></li>
 </ul>
 </div>

 <div class="leftColSec">
 <h2><a href="#">Seven Exclusive & luxury Private Villas</a></h2>
 </div>

 <div class="leftColSec">
 <h2><a href="#">View Resort Gallery</a></h2>
 </div>

 <div class="leftColSec">
 <h2><a href="#">View Resort Gallery</a></h2>
 </div>

 <div class="leftColSec">
 <h2><a href="#">View Location Gallery</a></h2>
 </div>


 </div><!--leftCol end-->
 <div id="middleCol">



 <h1>The Southern Italian Riviera</h1>

<p>Welcome to the Southern Italian Riviera,


<img src="siteimages/images/calabriaImg.png" alt="calabria" usemap="#Map" />
<map name="Map" id="Map"><area shape="circle" coords="194,89,14" href="javascript:popUp('Flash/masterplanfinal.swf')" alt="masterplan" />
</map>
<p>Soverato 
The region around Soverato offers a perfect cross  section of southern Italian life. Medieval towns rub shoulders with long sandy beaches, whilst a vibrant cultural scene invites you enjoy concerts and art exhibitions.Or you could just sit back and see which of the truly excellent local wines goes best with your favourite Italian cuisine.And then you could reflect on the fact that this was really just the beginning… </p>

<p>All action pastimes  and some slow ones too... Theres enough to keep the most active folks happy in this part of the world, and to start with you might fancy seeing a bit more of it  from the air. Charter your own helicopter ride, or hot air balloon experience, for a fantastic birds-eye view of the nearby national parks, spectacular valleys, and historical ruins.</p> 

<img src="siteimages/images/middleColImg.png" alt="seven wonders" />


 </div><!--middleCol end-->

 <div id="rightCol">

 <div class="rightColSec_Top">
<!--Inner content DIVs should always carry "contentdiv" CSS class-->
<!--Pagination DIV should always carry "paginate-SLIDERID" CSS class-->

<div id="slider1" class="sliderwrapper">

<div class="contentdiv">
<div class="name">Alexandri</div>
<div class="price">€940,000</div>
</div>

<div class="contentdiv">
<div class="name">Babylon</div>
<div class="price">sold</div>
</div>

<div class="contentdiv">
<div class="name">Ephesus</div>
<div class="price">€990,000</div>
</div>

<div class="contentdiv">
<div class="name">Giza</div>
<div class="price">sold</div>
</div>

<div class="contentdiv">
<div class="name">Halicarnassus</div>
<div class="price">€990,000</div>
</div>

<div class="contentdiv">
<div class="name">Olympia</div>
<div class="price">€990,000</div>
</div>

<div class="contentdiv">
<div class="name">Rhodes</div>
<div class="price">€940,000</div>
</div>

</div>

<div id="paginate-slider1" class="pagination"></div>

<script type="text/javascript">

featuredcontentslider.init({
id: "slider1",  //id of main slider DIV
contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "",  //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"],  //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.2],  //[true/false, fadedegree]
autorotate: [true, 4000],  //[true/false, pausetime]
onChange: function(previndex, curindex){  //event handler fired whenever script changes slide
	//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
	//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})

</script>

<!--Inner content DIVs should always carry "contentdiv" CSS class-->
<!--Pagination DIV should always carry "paginate-SLIDERID" CSS class-->


 </div>


 <div class="rightColSec">
 <h2><a href="#">View resort fly through</a></h2>
 </div>

 <div class="rightColSec">
 <h2><a href="#">Request more information</a></h2>
 </div>

 </div><!--rightCol end-->



 </div>
 <div id="footer_wrap">  
 <ul>
 <li><a href="whyinvest.html">Why Invest</a> </li>
 <li><a href="calabria.html">Calibria</a> </li>
 <li><a href="lifestyle.html">The Lifestyle</a> </li>
 <li>Villa Specifications </li>
 <li>Interactive Master Plan </li>
 <li>Interactive Floor Plan </li>
 <li>Video </li>
 <li>Resort Gallery </li>
 <li>Location Gallery </li>
 <li><a href="theprocess.html">The process & Payment plan</a> </li>
 <li>Contact us </li>
 </ul>
 </div>
</div>


</div>

</body>
</html>

@charset "utf-8";
body {
background-color: #c0c9e8;
margin:0;
padding:0;
font-family:"Times New Roman", Times, serif;
}
p {
font-size: 0.9em;
}
h1 {
font-size: 1.5em;
}
a {
text-decoration: none;
color: #4458A5;
}
a:hover {
color: #0066CC;
}
/* Wrapper is used for the background image - height will need to be changed with content*/
#wrapper {
background-image:url(../siteimages/images/wrapper_bg.gif);
margin:0 auto;
padding:0;
width:1020px;
height: 1385px;
}

#wrapper_life {
background-image:url(../siteimages/images/wrapper_bg.gif);
margin:0 auto;
padding:0;
width:1020px;
height: 1620px;
}
#wrapper_calabria {
background-image:url(../siteimages/images/wrapper_bg.gif);
margin:0 auto;
padding:0;
width:1020px;
height: 2120px;
}
#wrapper_process {
background-image:url(../siteimages/images/wrapper_bg.gif);
margin:0 auto;
padding:0;
width:1020px;
height: 1230px;
}
#wrapper_why {
background-image:url(../siteimages/images/wrapper_bg.gif);
margin:0 auto;
padding:0;
width:1020px;
height: 1240px;
}



#container {
background-image: url(../siteimages/images/banner.jpg);
height: 1100px;
width: 954px;
margin: 0 33px 0 35px;
background-repeat: no-repeat;
padding-top: 35px;
float: left;
}

#container_life {
background-image: url(../siteimages/images/banner.jpg);
height: 1500px;
width: 954px;
margin: 0 33px 0 35px;
background-repeat: no-repeat;
padding-top: 35px;
}
#logo {
width: 508px;
margin: 0 auto 20px auto;
}
#maincontent {
width: 954px;
background-image: url(../siteimages/images/content_bg.gif);
background-position: bottom;
background-repeat: no-repeat;
height: 865px;
}

#maincontent_life {
width: 954px;
background-image: url(../siteimages/images/content_bg.gif);
background-position: bottom;
background-repeat: no-repeat;
height: 1300px;
}
#maincontent_calabria {
width: 954px;
background-image: url(../siteimages/images/content_bg.gif);
background-position: bottom;
background-repeat: no-repeat;
height: 1800px;
}
#maincontent_process {
width: 954px;
background-image: url(../siteimages/images/content_bg.gif);
background-position: bottom;
background-repeat: no-repeat;
height: 910px;
}
#maincontent_why {
width: 954px;
background-image: url(../siteimages/images/content_bg.gif);
background-position: bottom;
background-repeat: no-repeat;
height: 920px;
}
#maincontent_spec {
width: 954px;
background-image: url(../siteimages/images/content_bg.gif);
background-position: bottom;
background-repeat: no-repeat;
height: 920px;
}


/*Navigation Styles... inline list*/

.nav_wrap

{
width: 949px;
padding-left: 5px;
text-align: center;
height: 30px;
}
.nav_wrap  ul
{
list-style: none;
padding: 0;
margin: 0;
}
.nav_wrap  li
{
float: left;
margin: 0 0.4em;
font-size: 1.15em;
}
.nav_wrap  a{
text-decoration:none;	
color:#000;

}
.nav_wrap  a:hover{
color: #4458B9;

}

/*Navigation Styles End*/

/* Columns */
#leftcol {
float: left;
width: 297px;
}
.leftColSec {
width: 200px;
margin: 30px auto 0 auto;
border-bottom: medium solid #4458a5;
padding-bottom: 10px;
}
.leftColSec h2 {
font-size: 1.4em;
text-align: center;
color: #4458a5;
text-transform: uppercase;
}
.leftColSec ul {
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
}
.leftColSec li {
font-size: 1.3em;
color: #4458A5;
text-transform: uppercase;
}
#middleCol {
width: 375px;
float: left;
}
#rightCol {
float: left;
width: 250px;
}
.rightColSec {
width: 200px;
margin: 30px auto 0 auto;
border-bottom: medium solid #4458a5;
padding-bottom: 10px;
}
.rightColSec h2 {
font-size: 1.4em;
text-align: center;
color: #4458a5;
text-transform: uppercase;
}
.rightColSec ul {
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
}
.rightColSec li {
font-size: 1.3em;
color: #4458A5;
text-transform: uppercase;
}

#footer_wrap {
height: 60px;
background-color: #a0376d;
float: left;
width: 954px;
font-family: Arial, Helvetica, sans-serif;
}
#footer_wrap a {
text-decoration: none;
color: #FFFFFF;
}
#footer_wrap a:hover {
color: #4458A5;
}

#footer_wrap ul {
list-style-image: url(../siteimages/images/footer_bullet.gif);
color: #FFFFFF;
padding: 0 0 0 1em;
}
#footer_wrap li {
float: left;
margin: 0 0.5em;
font-size: 0.8em;
}
#middleCol img {
margin-left: 15px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;

}

/*image slider*/
.rightColSec_Top {
width: 240px;
margin: 30px auto 0 auto;
border-bottom: medium solid #4458a5;
padding-bottom: 10px;
background-image: url(../siteimages/images/rightColImg.png);
height: 200px;
}

#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
font-family: "Times New Roman", Times, serif;
font-size: 1.1em;
color: #4458A5;
}
#slider, #slider li{
width:240px;
height:200px;
overflow:hidden;
}
span#prevBtn{}
span#nextBtn{}

.name {
height: 30px;
width: 240px;
}
.price {
height: 30px;
width: 230px;
margin-top: 110px;
text-align: right;
padding-right: 5px;
}

August 9, 200917 yr

Author

Any Ideas?

August 9, 200917 yr

Using two different wrappers for different pages isn't wrong.

Alternatively you can give each page an id at the top like

and then use the same wrapper div in all pages <div id="wrapper">....</div>

but add extra styles into the stylesheet:-

#page1 #wrapper { color: green; }

#page2 #wrapper { color: red; }

/*note space between #page1 and #wrapper*/

You need to check for errors here http://validator.w3.org/

August 9, 200917 yr

If we could see alive example it'd be easier to determine if you have unnecessary elements.

August 9, 200917 yr

Author

If we could see alive example it'd be easier to determine if you have unnecessary elements.

Link

Arr glad it's not wrong just a little worried it wasn't best practice...

Coding help...

Featured Replies

Create an account or sign in to comment

Recently Browsing 0

Member Statistics

Forum Statistics

Join WDF

Account

Navigation

Search

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)