styledwebdesign

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; }

Thanks very much thats great

Me again... I have another small question. How would I use Java Script to change two pieces of text via a link... So when I click on "next" it will change to two lines of text... "hotel" name and the "price"

evening all, I have a small question... I want to create a link which will pop out a flash movie... I need the pop up to fit the flash movie size ie be 500px x 600px How do I do this?

Evening All, I tried to use a simple viewer for my clients site, he sells Canvas's on-line through his image Gallery at www.iconic-images.com . I tried to use simple viewer as a gallery but you'll notice it isn't ideal. The customer must physically type the "image number" into the page so we can determine what image they ordered. Which isn't good. Also another major problem is they can't enlarge the image or zoom in enough, if I was paying £100 for a canvas I'd want to see the image clearly not just a small 200px image. Can anyone recommend a good ecommerce gallery with a CMS or "uploading" section.

Evening all, Ok I have a good one for you... I have already built a site for my client iconic he wants some kind of Pantone colour swatch adding to the header/background or near the logo just to add some colour to the site. He is quite insistent with the Pantone Swatch so I'll have to work with it but I'm a little stuck for inspiration. Any thoughts?

Good Morning, Welcome to the forum, have fun

I own a small company in Cambridge, and were always referencing its all about working together and finding new techniques and ways of doing things. You'll love it don't be worried...

Very nice!

Do you really think your doing this industry a favour by charging £75.00 for a website?

You need; <form class="contactform" method="post" action="form.php"> then save your php as form.php in the same directory.

I like it nice use of colour, I actually quite like the curves... good job!

Can someone please tell me exactly what a DCR file is...

Evening Amrik, Welcome to the forum, Hope you have fun...

Found the free number for PayPal technical if anyone wants it in the future 0800 358 7911

Morning All, I have been on hold to PayPal for the last 20 mins calling an international number! Though it may be quicker to ask you guys! I need to set up my ebay account to charge postage per TRANSACTION not per item... Apparently I can find the option in my Profile section but I can't find it anywhere... Does anyone know how I do it?

If you post your HTML also I can see what your trying to achieve... Thanks

You will need a PHP contact form, here is a link for a generator..www.tele-pro.co.uk/scripts/contact_form You can read up on PHP contact forms here...www.kirupa.com/web/php_contact_form.htm

Hello all, I have about 150 raw images that I need to convert to about 50% quality JPG images. I also need them to be re-sized... I was dreading doing all images in PS just because there are so many! Is there anything anyone can recommend to get the job done faster?

Hiya, I think you should break down the main page in to sections, you have to scroll down way to far, maybe create a "why use" page or "about the products"

Hi, I am a little bewildered about the way you have coded the balloon image, it must have taken you hours!... Try this instead... If your using a image editing programme like Photoshop you need to delete the background and save it as a PNG... this will allow the background to remain "transparent" The you place the image in a #DIV container... <div id="container><img src="img.png"/></div> Then using the position absolute eg... position:absolute;top:500px;left:600px; (http://www.w3schools.com/Css/pr_class_position.asp) get the image where you want it. You can then use the z-index property to "layer the image behind the text" I've just done this quick because I'm running off to work, I think this is correct someone please correct me if I'm wrong...

Hiya, Here is a nice list of RSS icons http://www.bloggingtips.com/2008/11/06/free-rss-icon-list/

Anyone want to exchange links? www.creative-addiction.co.uk

I like it, good use of colours and its clean... Good Job!

Thanks very much! I've removed the sliding portfolio images just didn't think it went with the feel of the site...