HTML - The Age Old Question - Why Doesn't My Site Look Like It Should!!
Morning guys,
So yeah I'm new, this is my first ever site. After so much trial and error with Dreamweaver (so frustrating but a great way to learn) i have finished the first draft of the site and have uploaded it to the iPower server so my bosses can review. In Dreamweaver the preview in browsers show everything is fine, but live this is not the case (how many times have you heard this?!) Good thing is it's not the positioning thats the issue - it's the images - some load up, some don't, and this seams to change everytime I refresh?!?! Surely this is a case of not me but them?! He's a link so you can have a look yourselves: http://www.friendshiprose.com/cruise_tobago.html If anybody can shed some light it would be much appreciated, as I don't know too much really. Kind regards, Simon Heres the source code to my site if it interest you: (please be kind - first site n all!) HTML Code: <!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=UTF-8" /> <title>Untitled Document</title> <link href="../tester.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> <!-- function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> <style type="text/css"> <!-- a:link { color: #099; text-decoration: none; } a:visited { text-decoration: none; color: #099; } a:hover { text-decoration: underline; color: #0CC; } a:active { text-decoration: none; color: #0CC; } --> </style></head> <body onload="MM_preloadImages('../Images/RoselinkRoll.jpg','../Images/GIVRoll.jpg','../Images/RealRoll.jpg','../Images/WeddingsRoll.jpg','../Images/SRERoll.jpg')"> <div id="ContainerMain"> <a href="http://www.friendshiprose.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('FR','','../Images/RoselinkRoll.jpg',1)"><img src="../Images/Roselink.jpg" alt="Friendship Rose Caribbean Schooner" name="FR" width="160" height="97" border="0" class="TopNav" /></a> <a href="http://www.grenadinevillas.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('GIV','','../Images/GIVRoll.jpg',1)"><img src="../Images/GIV.jpg" alt="Grenadine Island Villa Rentals" name="GIV" width="160" height="97" border="0" class="TopNav" /></a> <a href="http://www.grenadineproperty.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('RE','','../Images/RealRoll.jpg',1)"><img src="../Images/Real.jpg" alt="Grenadines Land & Villa Sales" name="RE" width="160" height="97" border="0" class="TopNav" /></a> <a href="http://www.grenadineweddings.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('WED','','../Images/WeddingsRoll.jpg',1)"><img src="../Images/Weddings.jpg" alt="Grenadines Weddings & Events" name="WED" width="160" height="97" border="0" class="TopNav" /></a> <a href="http://www.sailrelaxexplore.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('SRE','','../Images/SRERoll.jpg',1)"><img src="../Images/SRE.jpg" alt="Sail Relax Explore the Grenadines" name="SRE" width="160" height="97" border="0" class="TopNav" /></a> <img src="../Images/collection_large.jpg" width="160" height="30" alt="Grenadines Collection" id="Collection"/> <img src="../Images/Friendship_Rose_Header.jpg" width="880" height="175" alt="Friendship Rose Caribbean Schooner" id="Header" /> <div id="LeftNav"><img src="../Images/Day Cruises Tab1.jpg" width="160" height="143" alt="Contact Us" id="Contact" /> <p> </p> <p> <a href="http://www.friendshiprose.com/cruises.html">Cruises</a></p> <p> <a href="http://www.friendshiprose.com/experience.html">The Experience</a></p> <p> <a href="http://www.friendshiprose.com/menu.html">Menu</a></p> <p> <a href="http://www.friendshiprose.com/locations.html">Locations</a></p> <p> <a href="http://www.friendshiprose.com/construct.html">Private Cruises</a></p> <p> <a href="http://www.friendshiprose.com/weddings.html">Weddings</a></p> <p> <a href="http://www.friendshiprose.com/construct.html">Image Gallery</a></p> <p> <a href="http://ical.mac.com/WebObjects/iCal.woa/wa/default?u=thegrenadines&n=Friendship%20Rose%20Cruises.ics">View Sailing Calendar</a></p> <p> <a href="http://www.friendshiprose.com/contact.html">Contact Us</a></p> </div> <div id="maincontentCaysCruise"> <h1 class="H1Text"><b>THE TOBAGO CAYS - FRIENDSHIP ROSE CRUISE</b></h1> <p class="LineSpace"> </p> <P class="StandTextGap">The <a href="http://www.friendshiprose.com/tobago_cruise.html">Tobago Cays Marine Park</a> is an stunning group of uninhabited islands near the southern end of the Grenadines. With fine coral reefs, turquoise waters and golden sand, many people consider the Tobago Cays to be the “Jewel in the crown” of the Grenadines. For more information on the amazing Tobago Cays <a href="http://www.friendshiprose.com/tobago_cays.html">click here . . . </a></P> <p class="LineSpace"> </p> <h2 class="H2Text"><font size="3"><b>Cruise Itinerary</b></font> </h2> <p class="LineSpace"> </p> <p class="StandTextGap"><b>7:00am</b><br />Join the Schooner, welcomed onboard by Captain and Crew<br /> Coffee & breakfast served as you sail by Moonhole and the Western Isles Of Bequia<br /> Enjoy the voyage through the Grenadines with excellent on board service</p> <p class="LineSpace"> </p> <p class="StandTextGap"><b>10:00am</b><br /> Arrive in the Tobago Cays<br /> Snorkel the coral reef <br /> Explore a deserted island<br /> Swim with turtles just off the pristine coral sand beach</p> <p class="LineSpace"> </p> <p class="StandTextGap"><b>1:00pm</b><br /> Lunch served on the shaded deck<br /> Relax in a hammock under billowing sails <br /> Have a relaxing afternoon swim from the boat</p> <p class="LineSpace"> </p> <p class="StandTextGap"><b>2:30pm</b><br /> Set sail for Bequia<br /> Watch for dolphins and turtles from the bow sprit <br /> Take afternoon tea and cake or enjoy the sundowners</p> <p class="LineSpace"> </p> <p class="StandTextGap"><b>5:30pm</b><br /> Arrive in Bequia</p> </div> <div id="SocialButtons"> <a href="http://www.facebook.com/home.php?ref=home#/group.php?gid=183257088849&ref=ts"><img src="../Images/join-our-facebook-group.jpg" width="160" height="46" style="border:0" alt="Facebook Group"/></a> <img src="../Images/twitter_logo.jpg" width="160" height="46" alt="Twitter Follow" id="Twit" /> </div> <img src="../Images/Footer 1.jpg" width="160" height="97" alt="Friendship Rose" class="FooterImgs"/> <img src="../Images/Footer 2.jpg" width="160" height="97" alt="Friendship Rose" class="FooterImgs"/> <img src="../Images/Footer 3.jpg" width="160" height="97" alt="Friendship Rose" class="FooterImgs"/> <img src="../Images/Footer 4.jpg" width="160" height="97" alt="Friendship Rose" class="FooterImgs"/> <div id="ContainerBot" align="left"> <h1 class="H1Text">The Friendship Rose Caribbean Schooner </h1> <h2 class="H2TextGap">Day Tours & Private Charters Through the Grenadines</h2> <h3 class="StandText">Bequia, St. Vincent & the Grenadines, West Indies</h3> <p class="StandText">E-mail:<a href="mailto:friendshiprose@mac.com">friendshiprose@mac.com </a> </p> <p class="StandText">Tel BEQUIA: +1 (784) 495 0886/9 +1 (784) 457 3888 +1 (784) 457 3739 UK FREEPHONE 0800 0484814</p> </div> </div> </body> </html> Similar TutorialsHi, I made a sliced up header in Photoshop and then created rollovers in dreamweaver. It works great on IE and on Firefox, but at the top of Chrome the top few pixels are shifted way to the left. Why would this happen just in Chrome and how can I fix it? The site is http://www.socalstandup.com/ Thanks a lot! Hi guyz, I have created my first site for a school project. The site has been validated, does work properly on IE but it doen't work well in FF. Please have a look and try to find out the errors. Thanks, the html code is: HTML Code: <?xml version="1.0" encoding="utf-8"?> <!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" xml:lang="en" lang="en"> <head><link rel= "stylesheet" type="text/css" href="external.css" /> <title>Business Environment Study Support</title> </head> <body> <div id="header"> <h1><img src="logo3.jpg" alt="" /></h1> </div> <div id="mainmain"> <div id="navcontainer"> <ul id="navlist"> <li><a href="lessonone.html">lesson one</a></li> <li><a href="#">Topic name I</a></li> <li><a href="#">Topic name II</a></li> <li><a href="#">Topic name II</a></li> <li><a href="#">Topic name IV</a></li> <li><a href="#">Topic name IV</a></li> </ul> </div> <!--main navigation menu elements--> <div id="bannerbox"> <p><a href="http://www.independent.co.uk/" target="_blank"><img src="independent.jpg" alt="The Independent Magazine"/></a></p> <p><a href="http://http://www.bton.ac.uk/" target="_blank"><img src="brighton-logo.jpg" alt="University of Brighton"/></a></p> <p><a href="http://www.theguardian.co.uk/" target="_blank"><img src="guardian-logo.jpg" alt="The Guardian"/></a></p> <p><a href="https://studentcentral.brighton.ac.uk/" target="_blank"><img src="studentlogo.jpg" alt="Blackboard"/></a></p> </div> <!-- right side banners--> <div id="mainbody"> <h3>Lore Ipsum</h3> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p><p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p> <br /> <p><a href="index.html" target="_top">-top-</a></p> </div> <!-- main body elements--> </div> <div id="footr"> <div id="footer"> <ul id="navilist"> <li><a href="mailto:o.szotyori@brighton.ac.uk?cc=dn36@brighton.ac.uk">contact Us</a></li> <li><a href="#">about the project</a></li> <li>made by: Dumiso and Oliver</li> <li>December, 2009</li> </ul> </div> <div id="w3valid"> <p> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a> </p> <!-- shows current validation of the homepage--> </div> </div> <!-- the footer is separated from the main body so it can be manipulated separety--> </body> </html> and the CSS code is: Code: body {background-color: #CCCCCC;} /* this sets up the background of the page */ h3 { font-family: verdana; color: #FF6600; } p { font-family: verdana; color: #000000; font-size: 12px;} /* these set up the font families of the header and paragraph behavors */ a {text-decoration:none; font-family: verdana;} a:link {color: #FF6600} a:visited {color: #993300} a:hover {color: #FF6600; font-weight: bold;} a img {border: 0;} /* these set up the font families of the links behavors */ #header{ width: 800px; height: 200px; text-align: center; margin: auto; padding-bottom: 5px; } #mainmain{ background-color: #ffffff; text-align: center; width: 1024px; margin: auto; border-bottom: 2px solid #FF6600; } #navcontainer ul { text-align: center; margin: auto; background-color: #FF6600; color: White; float: left; width: 1024px; font-size: 11px; } #navcontainer ul li { display: inline; } #navcontainer ul li a { padding: 0.2em 1.5em; background-color: #FF6600; color: #CCCCCC; font-weight: bold; text-decoration: none; float: left; border-right: 1px solid #fff; } #navcontainer ul li a:hover { background-color: #993300; color: #CCCCCC; font-weight: bold; } #bannerbox{ float: right; margin-top: 60px; min-height: 700px; min-width: 180px; text-align: center; } #mainbody{ float: left; padding: 20px; width: 804px; min-height: 700px; margin-top: 20px; background-color: white; } #footer{ position: relative; float: left; height: 20px; overflow: hidden; width: 500px; } #navilist{ list-style-type: none; margin: 0; padding: 0; } #navilist li{ border-left: 1px solid #000; float: left; line-height: 1.1em; margin: 0 .5em 0 -.5em; padding: 0 .5em 0 .5em; font-size: small; color: #FF6600; } #w3valid{ float: right; position: relative; width: 88px; height: 31px; } #footr{ text-align:center; width: 1024px; margin: auto; padding-top:10px; } Hi, I'm not very advanced or anything, but I've coded websites before from scratch using Text Edit and an FTP client. I haven't done it for a few years and recently made a website with Cyber duck as the FTP client and SubEthaEdit as the external editor. I made a simple code for frames, and the site looks terrific on my Mac's Safari and Internet Explorer. When I checked it out on my friend's PC, it's just one big color background and nothing else. It also doesn't work on Mac's Firefox. I don't know what I did wrong, and how to fix the code to make it work on PCs or Firefox. Do PCs not recognize code that Macs do? Is there a way to change it? It's probably my fault, I just don't know what it's missing. I'd appreciate any help anyone has to offer, because I'm clueless and disappointed about it. Thanks, Jenny I am building a website in dreamweaver cs3. It displays normal in all browsers except an older version of IE (I think 6.0). I have read a bunch and have learned about float left and left margin problems with older IE versions. Nothing has helped so far. To make a long story short if you view http://whatwowart.com the right column where you sign up for newsletter etc. gets put under the whole page in older IE (I think 6.0). If someone could please help me I would really appreciate it. Thanks, John O Code can be seen at: http://whatwowart.com/code.html The title says it all, my site just doesn't properly work in safari. heres the link www.royaltee-design.com help would really be appreciated thanks Ive just got my new site up and running but i need to have it all in center of the screen. can someone please tell me how to do this in the easyist way..? The site can be seen he http://rtgkom.dk/~caspers06/index.html Thanks in advance Edited: Seo Concerns. Site in question is: http://investorsconnection.net Here is the W3 validation for it: http://validator.w3.org/check?uri=ht...line&gro up=0 If you look at the first error, it has to do with a javascript function that is in the code. I suspect that the subsequent errors displayed in the validator are displayed due to something setting off the first error. 1. I thought the validator only validated HTML, not Javascript. 2. I've used the exact same Javascript function on other sites and they validated just fine - and I literally copy and pasted the function, so I'm a bit confused what is setting off the validator this time... Can anyone shed some light on this? Thanks! Hey everyone, I'm trying to add more pages to my site.... For example, www.mysite.com/new-page How do I add that "new-page" to my site? My website was professionally built, however I go in & edit all the time. I have been trying to look at the server to see what the developer did, but no luck... Thanks in advanced for any help Okay I did warn you all in the intro lounge. I want to add free games from here http://freegames.org.uk/html/connect4.html to the schools site and I can't get it to work. I am using *whispers* Front Page, okay I know I should eb using something else but for the mo, tis all i have got. Please please someone tell me what to do and how to do it.......in simple english please, pretending you are talking to a blonde. ( no offence to blondes and by the way I am not one.) Help. I am wondering if it is possible to create an INDEX.HTML to redirect to another website? I would like it to display the redirected site, but if possible keep to the original address.. e.g. A site named www.mysite.com, with an INDEX.HTML to redirect to www.othersite.com, which displays OTHERSITE with www.mysite.com in the address bar. Hope I explained ok, any responce would be much appricated! Thanks! I am using Kompozer to build a website for my business. It looks great in Firefox: But it has problems in IE: Anyone have any suggestions? Thanks, I am scaling the blue div based on the size of the red div, but also the size of the green div, and i just can't wrap my head around the right statement to make this happen. It can never be shorter than the green div, but needs to be as long as the red div... when the red div is longer than the green div. Hi, I need help I tried to check the code of my website it works perfectly well in google chrome and firefox but not in Internet explorer. i tried your suggestions but still it doesn't work. After the "marital status" and "sex" are selected, I want to assign a default value to the "Title" field. I think I am calling the function DefaultTitle incorrectly because I am not even seeing the initial alert box. Any suggestions? function DefaultTitle(strng,x) { alert("Checking Title."); var Sex=documet.PatientEntry.personal_sex.value; var MaritalStatus=strng; if (Sex=="Female" && MaritalStatus=="Married") {document.PatientEntry.personal_Title.value="Mrs."; HighlightWhite(x); Return; } if (Sex=="Male") {docment.PatientEntry.personal_Title.value="Mr."; HighlightWhite(x); Return; } if (Sex=="Female" && MaritalStatus=="Single") {document.PatientEntry.personal_Title.value="Miss"; HighlightWhite(x); Return; } if (Sex=="Female") {document.PatientEntry.personal_Title.value="Ms."; HighlightWhite(x); Return; } } Sex: <SELECT name="personal_sex" id="personal_sex" tabindex=7> <OPTION>Male</OPTION> <OPTION>Female</OPTION> </SELECT> Marital status: <SELECT name="personal_MaritalStatus" id="personal_MaritalStatus" onmouseout="DefaultTitle(this.value,this.id)" tabindex=8> <OPTION>Married</OPTION> <OPTION>Single</OPTION> <OPTION>Separated</OPTION> <OPTION>Divorced</OPTION> <OPTION>Widow(er)</OPTION> </SELECT> Title: <SELECT name=personal_Title tabindex=9> <OPTION>Mr.</OPTION> <OPTION>Mrs.</OPTION> <OPTION>Ms.</OPTION> <OPTION>Miss</OPTION> <OPTION>Dr.</OPTION> </SELECT><BR> i tried this Code: <link rel="shortcut icon" href="favicon.ico"> ..this Code: <head> <link rel="icon" href="favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> </head> & this Code: <link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon"> <link rel="icon" href="favicon.ico" type="image/vnd.microsoft.icon"> it all work on firefox but not on IE6 (i don't know if it does on IE7) any ideas plz thnx in advance I am using IE and for some reason PNG images specified using an <img> tag display blank. I know the files exist as there is no 'X' where the image is supposed to be but I can't see them. If I change to using a JPG then the images appear. My code is extremely simple and looks like: Code: <html><body><img src="images/test.png"></body></html> I have tried using width and height parameters but it only changes the size of the blank area. Does the <img> tag support PNG images? Is there some other reason why the images display blank? www.jessicaloewen.com You'll see at the very top that the alternate text "menu" shows rather than my jpg Why is this and how do I fix it? If you click "view image" it will open the proper image in a new menu. Okay, I received some pictures from a fashion designer to use for her Web site. I first tested the code by using a different image that I found on Google and it worked. However, when I used her image it was broken. The next option I tried was I used my photobucket account and make an HTML reference to the image. Even when I upload it to photobucket it gives me an error. So...I don't know if it's still my problem or possibly she gave me the wrong product. The images were .jpg. Here's the image code I tried: <img src="/pictures/ct1.jpg"/> If it's not the code, then what can I do to make sure she gives me pictures that work? In this age of programs like Dreamweaver and others, how in-depth should a person spend learning how to code HTML if he wants to get into this field? Sure, tweaking it will be the norm, but building a page purely out of HTML seems to be defunct. I hope to learn some HTML because I see so many employers asking for knowledge of it, but also Dreamweaver, Photoshop, and Flash. I figured that between these, I should be able to build a decent website. Suggestions or comments welcome. |