HTML - Links Dont Work At All
No matter what I do no kind of links work. In this code for an instance the picture link dont work:
Code: <html><head><title>a website</title> </head> <body topmargin="0" bottommargin="0" style="background-color: rgb(0, 0, 0);"> <center> <table heigh="" cellpadding="0" cellspacing="0" width="800"> <tbody> <tr> <td colspan="2" background="images/lbar.png" height="500" width="38"></td> <td valign="top"> <table cellpadding="0" cellspacing="0" height="631"> <tbody> <tr> <td valign="top"> <table cellpadding="0" cellspacing="0" height="450"> <tbody> <tr> <td valign="top"> <table cellpadding="0" cellspacing="0"> <tbody> </tbody> </table> </td> <td valign="top"> <table cellpadding="0" cellspacing="0" height="460" width="535"> <tbody> <tr> </tr> <tr> <td valign="top"><font color="#ff9900" face="Verdana, Arial, Helvetica, sans-serif" size="-1"> <A HREF="whatever\whatever.html"><IMG SRC="whatever/whatever.gif" ></A> </font></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> <tr> <td valign="bottom"><img src="blabla/blabla1.png"></td> </tr> </tbody> </table> </td> <td colspan="2" background="blabla/blabla2.png" height="500" width="38"></td> </tr> </tbody> </table> </center> <div style="font-size: 0.8em; text-align: center; margin-top: 1em; margin-bottom: 1em;"> <br> </div> </body></html> Similar TutorialsHi, pretty new to HTML, any help would be greatly appreciated. My links back to my home page etc e.g. my menu links that link to my root folder work fine in IE but when I try opening them in firefox or Flock none of my links work including my link to my CSS style Sheet. Heres an example of my code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Anime</title> <link rel="stylesheet" type="text/css" href=" /anime2.css"/> </head> <body> <div class="header"> <div class="logo"> <a href="/Anime.html"> <img src="/anime.png" alt-"Anime Hub" style="border-style:none"/> </a> </div> </div> <div class="menu"> <ul> <li> <a href="/anime.html"> Home </a> </li> <li> <a href="/animenews.html"> News </a> </li> <li> <a href="/animes.html"> Animes </a> </li> <li> <a href="/animepreviews.html"> Previews </a> </li> <li> <a href="/animeblog.html"> Blog </a> </li> <li> <a href="/animeforums.html"> Forums </a> </li> </ul> </div> Im using a forward slash for the link to search in my root folder, if I use ../../ to go back two folders it seems to work, but this is tedious and I am sure there must be another way. Please Help Thanks in advance Ok so im making a webpage for my CSC class for school. And i have been designing the webpage on my macbook under the desktop folder called "CSCWebpage". I uploaded the folder into my ftp and i opened up one of the pages in firefox and the relative links are not working. such as img, a, my image map image, and also my css file i cant connect to. I know this is a noob question, so im sorry for the ignorance! im new. lol. Hello everyone, Im making a website (obviously haha) and the links in a div dont want to work. A piece of text + link works A picture + link doesnt work This div is the header (inc. sepirate logo, name and menu buttons) Below the header div I made a slideshow (which works perfectly (also in a div)) Below the slideshow I made div's in a div with brands of companies + links (which DO work) It doesnt matter if I delete all div's in the header and just put a pic in the header div... the link with that pic still wont work. the link DOES work in expressionweb (ctrl+click) but does NOT work when I put the site online OR test it in any browser (chrome, firefox, IE) 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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> .style1 { text-align: center; } .style2 { border-width: 0px; } .style4 { text-align: right; color: #C0C0C0; font-size: x-small; } </style> </head> <body> <div style="position: relative; width: 800px; z-index: 1; left: 0px; top: 0px; margin-right: auto; margin-left: auto; font-family: Calibri, 'times New Roman', Arial;" id="wrapper"> <div style="position: relative; width: 800px; z-index: 5; left: 0px; top: 0px; height: 785px;" id="new wrapper"> <div style="position: relative; width: 800px; height: 300px; z-index: 1; float: left" id="Header"> <a href="http://www.google.nl/">peterpan</a></div> <div style="position: relative; width: 700px; height: 300px; z-index: 2; margin: 20px 50px 20px 50px; float: left" id="Slideshow"> <script language="JavaScript1.2"> var variableslide=new Array() //variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"] variableslide[0]=['images/slideshow/trollblogo.png', 'http://www.trollbeads.nl/', ''] variableslide[1]=['images/slideshow/trollbeads1.jpg', 'http://www.trollbeads.nl/', ''] variableslide[2]=['images/slideshow/trollbeads2.jpg', 'http://www.trollbeads.nl/', ''] variableslide[3]=['images/slideshow/trollbeads3.jpg', 'http://www.trollbeads.nl/', ''] variableslide[4]=['images/slideshow/trollbeads4.jpg', 'http://www.trollbeads.nl/', ''] variableslide[5]=['images/slideshow/trollbeads5.jpg', 'http://www.trollbeads.nl/', ''] variableslide[6]=['images/slideshow/rosendlogo.png', 'http://www.rosendahl-watches.com/', ''] variableslide[7]=['images/slideshow/rosendahl1.jpg', 'http://www.rosendahl-watches.com/', ''] variableslide[8]=['images/slideshow/rosendahl2.jpg', 'http://www.rosendahl-watches.com/', ''] variableslide[9]=['images/slideshow/rosendahl3.jpg', 'http://www.rosendahl-watches.com/', ''] variableslide[10]=['images/slideshow/trollblogo.png', 'http://www.trollbeads.nl/', ''] variableslide[11]=['images/slideshow/trollbeads6.jpg', 'http://www.trollbeads.nl/', ''] variableslide[12]=['images/slideshow/trollbeads7.jpg', 'http://www.trollbeads.nl/', ''] variableslide[13]=['images/slideshow/trollbeads8.jpg', 'http://www.trollbeads.nl/', ''] variableslide[14]=['images/slideshow/trollbeads9.jpg', 'http://www.trollbeads.nl/', ''] variableslide[15]=['images/slideshow/rosendlogo.png', 'http://www.rosendahl-watches.com/', ''] variableslide[16]=['images/slideshow/rosendahl4.jpg', 'http://www.rosendahl-watches.com/', ''] variableslide[17]=['images/slideshow/rosendahl5.jpg', 'http://www.rosendahl-watches.com/', ''] variableslide[18]=['images/slideshow/rosendahl6.jpg', 'http://www.rosendahl-watches.com/', ''] //configure the below 3 variables to set the dimension/background color of the slideshow var slidewidth='700px' //set to width of LARGEST image in your slideshow var slideheight='300px' //set to height of LARGEST iamge in your slideshow, plus any text description var slidebgcolor='#FFFFFF' //configure the below variable to determine the delay between image rotations (in miliseconds) var slidedelay=3000 ////Do not edit pass this line//////////////// var ie=document.all var dom=document.getElementById for (i=0;i<variableslide.length;i++){ var cacheimage=new Image() cacheimage.src=variableslide[i][0] } var currentslide=0 function rotateimages(){ contentcontainer='<center>' if (variableslide[currentslide][1]!="") contentcontainer+='<a href="'+variableslide[currentslide][1]+'">' contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">' if (variableslide[currentslide][1]!="") contentcontainer+='</a>' contentcontainer+='</center>' if (variableslide[currentslide][2]!="") contentcontainer+=variableslide[currentslide][2] if (document.layers){ crossrotateobj.document.write(contentcontainer) crossrotateobj.document.close() } else if (ie||dom) crossrotateobj.innerHTML=contentcontainer if (currentslide==variableslide.length-1) currentslide=0 else currentslide++ setTimeout("rotateimages()",slidedelay) } if (ie||dom) document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>') function start_slider(){ crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub if (document.layers) document.slidensmain.visibility="show" rotateimages() } if (ie||dom) start_slider() else if (document.layers) window.onload=start_slider </script> <ilayer id="slidensmain" width=&{slidewidth}; height=&{slideheight}; bgColor=&{slidebgcolor}; visibility=hide><layer id="slidenssub" width=&{slidewidth}; left=0 top=0></layer></ilayer> </div> <div style="position: relative; width: 800px; height: 400px; z-index: 3; margin: 5px 0px 50px 0px; float: left" id="Merken"> <div style="position: relative; width: 200px; height: 125px; z-index: 1; float: left;" id="layer1" class="style1"> <a href="http://www.eclat.nl/" target="_blank"> <img alt="Eclat" src="images/MainPage/Eclat.png" width="175" height="100" class="style2" style="float: left" /></a></div> <div style="position: relative; width: 200px; height: 125px; z-index: 2; float: left;" id="layer2" class="style1"> <a href="http://www.trollbeads.nl/" target="_blank"> <img alt="Trollbeads" src="images/MainPage/Trollbeads.png" width="175" height="100" class="style2" /></a></div> <div style="position: relative; width: 200px; height: 125px; z-index: 3; float: left;" id="layer3" class="style1"> <a href="http://www.policecitylife.nl/" target="_blank"> <img alt="Police" src="images/MainPage/Police.png" width="175" height="100" class="style2" /></a></div> <div style="position: relative; width: 200px; height: 125px; z-index: 4; float: left" id="layer11" class="style1"> <a href="http://www.rosendahl-watches.com/" target="_blank"> <img alt="Rosendahl" src="images/MainPage/Rosendahl.png" width="175" height="100" class="style2" style="float: right" /></a></div> <div style="position: relative; width: 200px; height: 125px; z-index: 5; float: left" id="layer12" class="style1"> <a href="http://www.jpc.nl/boccia/" target="_blank"> <img alt="Boccia" src="images/MainPage/Boccia.png" width="175" height="100" class="style2" style="float: left" /></a></div> <div style="position: relative; width: 200px; height: 125px; z-index: 6; float: left" id="layer13" class="style1"> <a href="http://www.jeh-collection.nl/" target="_blank"> <img alt="Jeh" src="images/MainPage/Jeh.png" width="175" height="100" class="style2" /></a></div> <div style="position: relative; width: 200px; height: 125px; z-index: 7; float: left" id="layer14" class="style1"> <a href="http://www.danishdesignwatches.eu/" target="_blank"> <img alt="Danish Design" src="images/MainPage/DanishDesign.png" width="175" height="100" class="style2" /></a></div> <div style="position: relative; width: 200px; height: 125px; z-index: 8; float: left" id="layer15" class="style1"> <a href="http://www.rabinovich.nl/" target="_blank"> <img alt="Rabinovich" src="images/MainPage/rabinovich.png" width="175" height="100" class="style2" style="float: right" /></a></div> <div style="position: relative; width: 200px; height: 125px; z-index: 9; float: left" id="layer16" class="style1"> <a href="http://www.cliccreations.nl/" target="_blank"> <img alt="Clic" src="images/MainPage/Clic.png" width="175" height="100" class="style2" style="float: left" /></a></div> <div style="position: relative; width: 200px; height: 125px; z-index: 10; float: left" id="layer17" class="style1"> <a href="http://otracosa.ch/" target="_blank"> <img alt="Otracosa" src="images/MainPage/otracosa.png" width="175" height="100" class="style2" /></a></div> <div style="position: relative; width: 200px; height: 125px; z-index: 11; float: left" id="layer18" class="style1"> <a href="http://www.stepbystep.ch/" target="_blank"> <img alt="Step By Step" src="images/MainPage/StepByStep.png" width="175" height="100" class="style2" /></a></div> <div style="position: relative; width: 200px; height: 125px; z-index: 12; float: left" id="layer19" class="style1"> <a href="http://www.mobach-groothandel.nl/" target="_blank"> <img alt="Mobach" src="images/MainPage/Mobach.png" width="175" height="100" class="style2" style="float: right" /></a></div> </div> </div> <div class="style4"> Made by Ferdi Bour<br /> ________________</div> </div> </body> </html> In the header is text at this moment with a link. Again, this link DOES work. But as soon as I input an image + link (internal or external doesnt matter) it doesnt work Also interactive buttons I put in the dont work, doesnt so anything Thanks in advance for any solution! Ferdi Bour Site: http://therivals.summerhost.info Relevant Pages/Files: index.shtml nav.shtml style.css Problem(s): On the side navigation bar, hovering over the 'links' doesn't do anything (even though the stylesheet is supposed to change the background colour/font colour. Clicking also does nothing. I've run both homepage and stylesheet through the W3C Validator and the only errors it comes up with are to do with the ad my host automatically puts at the bottom of each page and CSS3. Interestingly, you cannot highlight anything on the page except that ad. If it's relevant, I've used SSIs to add the code for the navigation bar onto each page. I've tested the site in IE8, Firefox 3.6.19 and Chrome 8.0.552.224. It only works in IE (). It also works when opening the files offline in all the browsers and when using XAMPP. I have absolutely no idea what's gone and would appreciate any helpful input . Hi, I've been going through my codes over and over again but I juz figure out why it won't work this time round for the links. Normally, when I type the html reference inside the ahref, the notepad plus plus will show red but this time it doesn't. When I try to click on the link it won't work as well. Hope someone can tell me why. tks. [html code] <img src="singapore.jpg" alt="Skyscraper" width="700" height="300" hspace="5" name="Rotate"/> <table align ="left" width= 70%> <td width ="30%><a href="BuildGoodNcolor.html">Home</a></td> <td width ="30%><a href="=P-D.html">Projects</a></td> <td width ="30%><a href="PD.comenquiry.html">Enquiry</a></td> <td width ="35%><a href="P-D.html">Contact</a></td></table> [/html code] css : a:link { color: #336699; } a:visited { color: #660033; } a:hover { color: #000000; } Hi there I have a navigation bar on the site im building, but when im in screen resolution 800x600 two of the links do not work, they become unclickable. Here is the html code for one of the pages: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Language" content="EN-GB"> <link rel="stylesheet" type="text/css" href="styles4.css"> <title>Kabasa Guest House and Restaurant</title> <meta name="author" content="xxxxx"> <meta name="description" content="xxxx"> <meta name="copyright" content="2011"> <meta name="keywords" content="xxxxx"> </head> <body> <ul id="navbar"> <li><a href="home5.html">HOME</a></li> <li><a href="menu4.html">MENU</a></li> <li><a href="room4.html">ROOMS</a></li> <li><a href="rates2.html">RATES</a></li> <li><a href="book.html">BOOK</a></li> </ul> <div id="header"> <h1 align="center">Kabasa Guest House and Restaurant</h1> <div id="address"> <pre> xxxxxxx xxxx xxxx 0000000 </pre> </div> </div> <h3>Rates</h3> <div id="rates"> <pre> <u>Our Rates are as follows:</u> <b>Single rooms:</b> Self contained complete with breakfast at only kshs 1500 ($17)<br /> <b>Double rooms:</b> Self contained complete with breakfast at only Ksh 2500 ($28)<br /> <b>Double rooms twin rooms:</b> Self contained complete with breakfast at only Ksh 2500 ($28)<br /> <b>Lunch and dinner</b> is also available at very affordable rates. See our restaurant section for more details.<br /> <b>Our aim </b>is to provide the best service both to local and international clients at the most economical rates. </pre> </div> </body> </html> CSS code: Code: #navbar li { list-style-type: none; background-color: #CCFFFF; margin: -1%; margin-top: 2%; position: relative; top: 20px; left: -6px; padding: 1px; width: 12%; font-size: 20px; } #navbar a:hover { color: #000; background: #fff; } body { font-family:Lucida Grande,Tahoma,Helvetica; font-size:11pt; color:#000066; background:#ffffcc; } h3 { position: relative; top: 15%; left: 45%; } h4 { position:absolute; top: 10%; left: 40%; } h5 { position:absolute; top: 14%; left: 36%; } h6 { position: absolute; margin: auto; left:0; right:0; top: 37%; width: 520px; } #address { position: absolute; margin: auto; left:0; right:0; font-weight: bold; font-size: 10pt; font-family: arial, sans-serif; width: 182px; } #header { position: absolute; margin: auto; left:0; right:0; top: 2%; width: 800px; } p { position:absolute; top: 53%; left: 5%; } pre { margin: 8px 8px; clear:both; z-index: 2; background-color:white; filter: alpha(opacity=75); opacity: 0.75; } #rates { position:absolute; top: 50%; left: 4%; width: 85%; } When in 1440 x 900 all the links work fine. The two links that stop working in 800x600 are Home and Menu. Any ideas on what could cause this? Many thanks Jackie Hi, so I'm trying to make some links for my website that can easily be modified on all pages but I'm not sure how to go about doing it. my original plan was to use this code: <iframe src="http:///directory.html" style="border: 0" width="100%" height="50" frameborder="0" scrolling="no" target="_parent"></iframe> However from everything I've read this wont work because instead of redirecting the actual page to the correct spot it just sends the frame to that spot leaving the rest of the page the same. And apparently there is no code to make it behave the way that I want it to. So my question is what are my alternatives? I really just want one location where i can update the links, the pictures for the links etc. that way whenever I add a new link or change its location I don't have to do it for 15 other webpages. Anyway, any guidance/help especially in-depth (as I'm not very experienced) would be greatly appreciated. Simple problem: I have a site with domain http://www.mask.com On the index page of this domain, I want to redirect to www.real.com while cloaking the URL. So I use this: Code: <html> <head> <title>Sob</title> <frameset rows="100%"> <frame src="http://real.com"> </frameset> <noframes> <body>Please follow <a href="http://www.real.com">link</a>!</body> </noframes> </head> </html> This works fine. On real.com, I want to link to real2.html, say, and I want this link cloaked as well. So I instead link to another page, mask2.html, which has the same code as above, but this time redirects to real2.html. The whole point is I need to cloak ALL my links. But when the link (to mask2.html) is clicked, I get a "Page not found" error. However, if I copy the exact address into my browser, it does what it's supposed to and goes to real2.html. I had the impression that it had something to do with frames in frames. I've been trying different targets for my <a href> -- i.e. target="self" or target="_blank", but neither works. Any idea? For some reason, the main navigation links in this site don't work in Safari 3.1 and latest version of Firefox. They work in IE 6 though. Can't figure it out. http://wcwfc.com/blog/ Strange ey, IE working like it's supposed to.. while FF just site there.... please note - the header and the navigation do work in all browsers, its the title's and images that dont work correctly in FF. Anyways, have a look at the site here, and try to figure it out. Kinda strange, it used to work, ever since i moved the mySQL database it broke in FF thanks I'm an HTML novice in desperate need of an HTML expert. I paid a guy a lot of money to convert my website over from a Microsoft server to a Linux server and the results were mixed. The text links work in Internet Explorer but not in Firefox. http://www.colorado-carpet-masters.com/carpetcleaningBoulder.php I tried taking them out of a table with no luck. For some reason Firefox reads the links as regular HTML instead of a Hyperlink. Hi Guys, Here is my website: -family unfriendly link removed- I downloaded this site template somewhere and finished it with all my pictures and stuff. May. hey guys on my website i am going to play music and so that the music will continue to play and not restart while the viewers are browsing, i have made it so that u stay on the same page and the iframe will change when u click on the links i am going to have the sidebar change for different pages so the sidebar is also an iframe. the links on the sidebar are actually javascript links so that they will adjust the height of the body iframe and change the src my website is HERE! this website works beautifully in internet explorer, but in safari the sidebar is useless can anyone tell me why? THIS IS THE CODE FOR THE IFRAMES HTML Code: <td class="sidebar"> <img src="http://ryanhollis.webs.com/icons/sidebar1.png" alt="" width="200" height="46"/><br class="pic"/> <iframe src="sidebar.html" height="200" width="150" class="sidebar" id="sidebar" scrolling="no" frameborder="0" allowtransparency="true"></iframe> <img src="http://ryanhollis.webs.com/icons/sidebar3.png" alt="" width="200" height="46"/> </td> <td class="text" rowspan="2"> <img src="http://ryanhollis.webs.com/icons/body1.png" alt="" width="642" height="64"/><br class="pic"/> <center><iframe src="home.html" height="300" class="body" id="iframe" scrolling="no" frameborder="0" allowtransparency="true"></iframe></center> <noframes> Your browser is out of date. To view this site you are going to have to update your browser. </noframes> <img src="http://ryanhollis.webs.com/icons/body3.png" alt="" width="642" height="70"/> THIS IS THE CODE FOR THE LINKS THAT ARE ON THE ACTUAL PAGE AND WORK IN BOTH BROWSERS (the onclick property is what you need to look at the others just to change the pic in a scroll over) HTML Code: <img src="icons/home.png" alt="HOME" id="home" onclick="link('home',300)" onmouseover="changePic('home')" onmouseout="changePicBack('home')" width="223" height="134"/> THIS IS THE JAVASCRIPT FOR WHEN THE LINK IS CLICKED Code: function link(page,size) { document.getElementById("iframe").height = size; document.getElementById("iframe").src = page + ".html"; space = size - 158; document.getElementById("whitespace").height= space; } THIS IS THE CODE FOR THE SIDEBAR HTML Code: <!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> <link rel="stylesheet" type="text/css" href="othercode/formating.css" /> <script type="text/JavaScript" src="othercode/links.js"></script> </head> <body> <p class="sidebar"> <a href="javascript:link('home',300)" target="_parent">Home</a><br /><br /> <a href="javascript:link('blog/blog',650)" target="_parent">Blog</a><br /><br /> <a href="javascript:link('life',680)" target="_parent">Life</a><br /><br /> <a href="javascript:link('links',400)" target="_parent">Links</a><br /><br /> </p> </body> </html> You are probably not going to have all the code you need in this so here are some links This is the main page This is the page for the sidebar iframe This is page for the content iframe This is my CSS This is the javascript that makes the links work Thanks guys if u can make sense of any of my code you are a life saver... all five flavors p.s. and yes the music isnt on there yet i'm making sure i can get this to work first. if have any suggestions on music to put on there feel free to tell me those too I recently uploaded files to fatcow and they can be see here http://kovcreation.com/ This is the html for the links. <Div id="nav"> <ul> <li><a href='index.html'"><font color="584842"vlink="#bb2826"alink="#584842">Home</font></a></li> <li><a href='Portfolio.html'"><font color="584842"vlink="#bb2826"alink="#584842">Portfolio</font></a></li> <li><a href='Contact.html'"><font color="584842"vlink="#bb2826"alink="#584842">Contact</font></a></li> </Div> It works locally but once uploaded to there servers I get a "page not found" after clicking a link. The link to the index page works but not the others. The people at fatcow where completely useless and just kept saying it was a scripting issue. however, if it were a scripting issue it wouldn't work locally. Any insight? I spent 2 hours trying to figure out why one of my pages is not centered! I am loosing hope. Please, can someone take a look? The culprit: http://www.denimdujour.com/evisu_guide.html site validates.... I've gotten rid of this space a few times, but it always tends to come back... Im out of ideas of what it could be, and figured another set of eyes could help me out. http://rse.pzproductions.com Any help is greatly appreciated :-) Also... the space only shows up on the homepage....but! the RSE Poll is only lined up correctly on the homepage as well, on every other page its dropped down into the content section. Obviously I am having some issues here, and any help would be so appreciated at this point Hello, this is my index.html: HTML Code: <html> <head> <title>Zenrer</title> <link rel="stylesheet" href="main.css" type="text/css"> </head> <body> <div id="page"> <div id="header"> Test in header </div> </div> </body> </html> main.css Code: body { color: #3e3e3e; background: #37383d; } #page { background: #cccccc; width: 900px; margin: auto; padding: 20px; } #header { background: black; width: 860px; height: 150px; } View he http://www.zenrer.com/website The page is pushed outwards, padding is 20 either side, page is 900px, so the header must be 860 wide, but it isnt. |