|
HTML - Website Layout Not Working/css Error?
well im creating a new website layout but its being an ass...or its just me
well its like 5am here in the UK now which is probebly the reason for the problem but ah well i need it sorting asap and i cant work it out. my website is http://www.rharris28.com so you can see for yourself. basicly everything apart from the bar at the bottom should be on one line, but it just wont do it. i refuse to use tables as ive broken that habbit and want to stear clear of tables at all costs. so its all div's and css work. my html is HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Mixing Pixels - Internet Services :: Homepage</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="verify-v1" content="KY6WP1pcuAyddeAyjc4oFZVeQDE0qbbA1GGcJ2Zgu8Y=" />
</head>
<body>
<div id="background" align="center">
<div id="container" align="left">
<div id="tb">
<div id="tbbg"></div>
<div id="topsep"></div>
<div id="tophome"></div>
<div id="topsep"></div>
<div id="topmap"></div>
<div id="topsep"></div>
<div id="topcontacts"></div>
<div id="topsep"></div>
<div id="searchbg"><b>Search:</b></div>
</div>
<div id="topmenu">
<div id="topmenubg">Home</div>
<div id="topmenusep"></div>
<div id="topmenubg">News</div>
<div id="topmenusep"></div>
<div id="topmenubg">Downloads</div>
<div id="topmenusep"></div>
<div id="topmenubg">Search</div>
<div id="topmenusep"></div>
<div id="topmenubgend">Services</div>
</div>
</div>
</div>
</body>
</html>
and my CSS is Code: * {
margin: 0;
padding: 0;
}
#background {
background-color:#01557C;
height: 100%;
width: 100%;
}
#container {
background-color:#FFFFFF;
width: 759px;
height:500px;
}
#tbbg {
background-image:url(/images/main01.jpg);
width:256px;
height:41px;
}
#tb {
float:left;
width:759px;
}
#tophome {
background-image:url(images/but_home.gif);
width:74px;
height:41px;
}
#topmap {
background-image:url(images/but_site_map.gif);
width:94px;
height:41px;
}
#topcontacts {
background-image:url(images/but_contacts.gif);
width:96px;
height:41px;
}
#topsep {
background-image:url(images/separator.gif);
width:2px;
height:41px;
}
#searchbg {
width: 231px;
height: 41px;
background-image:url(images/fon01.gif);
}
#topmenu {
width:759px;
}
#topmenubg {
background-image:url(images/fon_menu.gif);
width:132px;
height:42px;
float:left;
text-align:center;
}
#topmenubgend {
background-image:url(images/fon_menu.gif);
width:135px;
height:42px;
float:left;
}
#topmenusep {
background-image:url(images/e_menu.gif);
width:24px;
height:42px;
float:left;
}
please help...many thanks Similar TutorialsHi all, hopefully I'm posting this in the right spot. I'm in the process of designing the layout for a new website, but I'd like some input as far as your recommended method for programming the skeleton of the attached image. I'd like to keep the look similar to this. Your recommended coding samples would be GREATLY appreciated! Hi all, I just learn html+css and now I'm building my first website - http://www.bcichemical.com. My website look fine on IE but it doesnt look right on Mozilla, Can someone guide me on this matter. Thanks I am not sure whether or not this is the right category to put this in but hopefully you lot wont mind... I just wanted to know that if i wanted to make a layout of any shape or design that I wanted, would I first have to make the layout on photoshop or fireworks and then import the picture onto dreamweaver, then use div tags to layer things and such? just wanting to know becuase I'm starting to try and make more cutting edge websites even though I have made a few with flash and such Thanks for your time Sam I am making a website and my layout changes from computer to computer. What i mean is, on my computer the layout looks fine, on another one the layout is distorted. www.mlbmotors.com I am making my band a website. I have all the graphics i need (as in the menu and background), but I don't know how to put it all together and make it good looking. here is a picture of the general idea. That would go all the way to the bottom of the page and all the rest of the space would just be black. Now of course, thats not how it would exactly look, that was just a map out that I made in two seconds. I need just the area where people read all the info and such to scroll alone, and to have nothing else to do so. Just in case anyone doesn't know what i mean by "put it all together" I mean to get the top thing where it says band name on, and have the menu on the side, the place where everyone reads next to it, a bit of space below the area where people read, and the whole left be just black. thanks in advance EDIT- I realized i also should probably say this too. There is a graphic that runs through the entire page (band name area, menu, and place where people read). The band name area is a jpg, menu is a flash file, and then the place where people read is just regualr. Hi, I am trying to create a liquid website. I have drawn up a prototype on paint and the image is attached. Can anyone help me to turn the prototype into a website? Thanks, hello, I want to figure out a way to make the layout of my website fixed, depending on the screen resolution and browser of the person that is viewing my site. I would like a layout with three rows (Header, content, Footer). the Content row should be 2 columns. i would specifically like the Header and Footer rows to be Fixed. and the right column in the content row to have a scroll bar, so that the content in it is the only thing I can scroll while my top banner and footer stay put. Can anyone orient me towards tutorials or any sort of information that might help me solve this? Thank you! Is it wrong to use tables to build your website's layout? For example, on one column you'd have the navigation, and on the other column you'd have the main website content. Is this method wrong? Hello there. Firstly, thank you for any and all help here. I am no web developer, but I have done some for my degree and other various bits/bobs. I produced a very simplistic website for a client, however the website is showing up different, on different PC's and I cannot get to the bottom of it. Now, I know this is down to my own inexperience in coding, but I followed various books, online suggestions for layout (relative, margin) positioning techniques, and the website looks fine on my PC, on my mrs work PC, even on the clients PC in his office (this is a mixture of IE8 - Win7, XP). However, I get an email from the client, and his understudy, last night saying the website looks terrible. All the text the 3rd column looks out of line (maybe because I used line:height?). As you can see, without having a clear understanding of the backbone of HTML coding, I am going to suffer. The CSS validates, the HTML validates with W3c. The website is: http://www.fpcuk.co.uk The issue is with IE7 and IE8. I coded the website in IE8, but it looks different on IE7. Could you have a look at it for me, and let me know where I have gone wrong. or give me some tips on making it compatible with both IE7 / IE8. There is only about 20 lines of code. It is mainly the right-hand column. Here 's a few images: IE7 http://img.photobucket.com/albums/v2...sueWithIE7.png IE8 http://img.photobucket.com/albums/v294/Jertsy/IE8.png I have nothing but respect for Web Developers, having to build websites for different browsers versions, damn.. So, after looking at my code - can you see any glaring issues that will cause it to distort the layout in different versions. Thank you very much. Spencer K EDIT: FFS!!! I'm tearing my hair out with this. I just cannot get the website to look right in IE7 and IE8 - its driving me fking crazy.. Even adding; Code: <meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ /> To the top of the page, hoping this will force IE8 to be compatible with IE7 does not work. How on earth am I supposed to figure this out. Everything I try looks different, everything. Not much help here either. Hey all, I'm new here, and I love the layout of this website! I like the bright colors! Anyway... I created a website layout/site in Photoshop CS 5. The website: www.thegarbagedump.net I saved it as a html & images.. The issue I am having is when you click one of the bottons I want it to open the html document and display it within that square area with the border around it. I know I probably need a frame to do this, however I dont know how to add a frame, and it appears photoshop saved it in tables.. Could you please review the html source, and tell me how/where to add a frame, and make the Home, About, Domains button appear within that square area with the border? Thank You, Justin Please view the thread here, as I am unable to copy it. E-mail any suggestions to sheehanmds@aol.com. Thank you! http://forums.htmlhelp.com/index.php?showtopic=8115 This is both HTML and CSS-oriented. Current CSS code pertaining to the layout: Code: #listnav {
background: url('../images/listnav-bg.png') top left repeat-x;
width: 25%;
padding: 8px;
float: left;
}
#content {
width: 75%;
padding: 8px;
float: right;
}
#footer {
}
#main-wrapper {
width: 85%;
}
HTML: HTML Code: <div id="main-wrapper">
<div id="listnav">
<!-- some spacer stuff here so i can actually see stuff (no static height set) -->
</div>
<div id="content">
<!-- some spacer stuff here so i can actually see stuff (no static height set) -->
</div>
</div>
The result is that the listnav box shows up on the far right side and the content box shows up below it on the left hand side. Any ideas? :| Well, this is the first CSS layout i've made, the site right now is EXACTLY how I want it to look, but I think somethings not right... if I fill up where it says "How about some links? " too far, the footer goes to the top of the page, and the "Welcome" ends up in the navigation menu Here is the link Hi there I have edited a website in front page and it has a basic slideshow of top pictures. When previewing it in frontpage it shows fine and works well. However, when uploading to the site, it shows the three pictures as one large block. Can anyone advise where I am going wrong? the page on the site is www.thepullmanlodge.co.uk/weddings.htm Thanks This page contains the following errors: error on line 1 at column 60: Space required after the Public Identifier Below is a rendering of the page up to the first error.I copied the first part of the code because the error is at line 1.Where exactly do you think the space should come <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> Hi There I'm new to this forum and thanking anyone who helps in advance. I have designed a website for my company which owns and operates bars and hotels in the North East of England. The site looks quite good, and I'm trying to finish it off. One problem I am stuck on is the drop down bar menu of bars and hotels. I want people to be able to choose the venue from the drop down list and then have it take them to the pubs website. However, at the moment it just links to an error page in the website. I designed it in frontpage 2003 and am only really familiar with this programme. I have tried editing the links etc but having no luck. Is anyone able to help? Again, thanks in advance John Gray Hello everyone. I recently finished a game website and while I was observing the website I noticed a game that was not working. I don't know how or why it is not working so I came here. I don't know if this is the place to post this problem so I guessed. Anyways here is the URLhttp://umgames.co.cc/evilnights.php Thanks in advance. Hi, I've just finished creating the layout for my website. I was just wondering if anyone could tell me why my text does not fit in the boxes that I have created using layers while in Internet Explorer it seems to work fine. Here is the link: http://www.geocities.com/seto.chaos/ And here is the code: 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=iso-8859-1">
<title>Welcome to Gameplatforms</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<style type="text/css">
<!--
body {
margin-top: 0px;
margin-bottom: 0px;
}
-->
</style></head>
<body bgcolor="black" body link="yellow" vlink="purple" alink="red">
<div id="Layer5" style="position:absolute; background-color:#666666; left:10px; top:176px; width:211px; height:667px; z-index:5"><font size="2" face="Arial" color="Yellow">
</font>
<div id="Layer4" style="position:absolute; background-color:#999999; left:15px; top:100px; width:185px; height:48px; z-index:4">
<div id="Layer4" style="position:absolute; left:31px; top:6px; width:86px; height:36px; z-index:4">
<p><font color="Yellow" size="6" face="Arial"><font color="Yellow"></font>
<a href="Reviews%20Page.htm">Reviews</a></font> </font></p>
</div>
<p><font color="Yellow" size="2" face="Arial"><br>
<br>
</font></p>
</div>
<div id="Layer4" style="position:absolute; background-color:#999999; left:15px; top:170px; width:185px; height:48px; z-index:4">
<div id="Layer4" style="position:absolute; left:44px; top:6px; width:86px; height:36px; z-index:4">
<p><font color="Yellow" size="6" face="Arial"><font color="Yellow"></font><a href="http://gameplatforms.proboards62.com">Forum</a></font> </p> </div>
<p><font color="Yellow" size="2" face="Arial"><br>
<br>
</font></p>
</div>
<div id="Layer4" style="position:absolute; background-color:#999999; left:15px; top:240px; width:185px; height:48px; z-index:4">
<div id="Layer4" style="position:absolute; left:44px; top:6px; width:86px; height:36px; z-index:4">
<p><font color="Yellow" size="6" face="Arial"><a href="Videos%20Page.htm">Videos</a></font></p>
</div>
<p><font color="Yellow" size="2" face="Arial"><br>
<br>
</font></p>
</div>
<font size="2" face="Arial" color="Yellow">
<div id="Layer4" style="position:absolute; background-color:#999999; left:15px; top:31px; width:185px; height:48px; z-index:4">
<div id="Layer4" style="position:absolute; left:50px; top:7px; width:86px; height:36px; z-index:4">
<p><font color="Yellow" size="6" face="Arial"><a href="News%20Page.htm"> News</a></font></p>
</div>
<p><br>
<font color="Yellow" size="4" face="Arial"><br>
</font></p>
</div>
</font></div>
<font size="2" face="Arial" color="Yellow">
<div id="Layer4" style="position:absolute; left:144px; top:143px; width:5px; height:18px; z-index:4"><font color="Yellow" size="4" face="Arial">
<a href="News%20Page.htm">
News
</a></font></div>
<div id="Layer3" style="position:absolute; left:10px; top:141px; width:1108px; height:26px; background-color:#666666; z-index:3"><font size="2" face="Arial" color="Yellow">
<div id="Layer4" style="position:absolute; left:440px; top:2px; width:6px; height:16px; z-index:4"><font color="Yellow" size="4" face="Arial">
<a href="Reviews%20Page.htm"> Reviews </a></font></div>
</font>
<div id="Layer4" style="position:absolute; left:687px; top:2px; width:5px; height:18px; z-index:4"><font color="Yellow" size="4" face="Arial"><a href="http://gameplatforms.proboards62.com">Forum</a></font></div>
<font size="2" face="Arial" color="Yellow">
<div id="Layer4" style="position:absolute; left:916px; top:2px; width:5px; height:18px; z-index:4"><font color="Yellow" size="4" face="Arial">
<a href="Videos%20Page.htm"> Videos </a></font></div>
</font></div>
<div id="Layer1" style="position:absolute; left:10px; top:14px; width:1108px; height:884px; z-index:1">
<p> </p>
<p> </p>
<p> </p>
<p><br>
</p>
<p><br>
</p>
<div id="Layer3" style="position:absolute; left:0px; top:841px; width:1108px; height:40px; background-color:#666666; z-index:3"><font size="2" face="Arial" color="Yellow">
<div id="Layer4" style="position:absolute; background-color:#999999; left:9px; top:9px; width:1090px; height:24px; z-index:4">
<p><font color="Yellow" size="2" face="Arial">Contact us: <a href="mailto:kaibachaoschampion@gmail.com">Email:</a> <a href="mailto:kaibachaoschampion@gmail.com">kaibachaoschampion@gmail.com</a></font></p>
</div>
</font> </div>
<div id="Layer5" style="position:absolute; background-color:#666666; left:948px; top:162px; width:160px; height:667px; z-index:5"><a href="http://www.play-asia.com/SOap-23-83-19kw-49-en.html">
</a> <a href="http://www.play-asia.com/SOap-23-83-19kw-49-en.html"><img src="http://www.play-asia.com/paOS-32-74-z.html" border=0 alt="Play-Asia.com - Buy Video Games for Consoles and PC - From Japan, Korea and other Regions!" width="160" height="600"></a> </div>
<div id="Layer5" style="position:absolute; background-color:#666666; left:251px; top:162px; width:666px; height:667px; z-index:5">
<div id="Layer4" style="position:absolute; background-color:#999999; left:30px; top:110px; width:607px; height:87px; z-index:4">
<p><font size="2" face="Arial" color="Yellow">Text text text text text text text text text text text
</font></p>
</div>
<div id="Layer4" style="position:absolute; background-color:#999999; left:30px; top:210px; width:607px; height:72px; z-index:4">
<p><font color="Yellow" size="6" face="Arial">
Title</font></p>
</div>
<div id="Layer4" style="position:absolute; background-color:#999999; left:30px; top:290px; width:607px; height:153px; z-index:4">
<p><font color="Yellow" size="2" face="Arial">Text text text text text text text text text text text</font></p>
</div>
<div id="Layer4" style="position:absolute; background-color:#999999; left:30px; top:30px; width:607px; height:71px; z-index:4">
<p><font color="Yellow" size="6" face="Arial">Title</font></p>
</div>
<div id="Layer4" style="position:absolute; background-color:#999999; left:30px; top:450px; width:607px; height:72px; z-index:4">
<p><font color="Yellow" size="6" face="Arial">Title</font></p>
</div>
<div id="Layer4" style="position:absolute; background-color:#999999; left:30px; top:530px; width:607px; height:119px; z-index:4">
<p><font color="Yellow" size="2" face="Arial">Text text text text text text text text text text text text text </font></p>
</div>
<font size="2" face="Arial" color="Yellow"></font></div>
<p><br>
</p>
</div>
<div id="Layer2" style="position:absolute; left:162px; top:14px; width:667px; height:123px; z-index:2"><img src="http://i5.photobucket.com/albums/y157/kaibachaoschampion/Logo.png" width="800" height="125"></div>
</font>
</body>
</html>
Thanks I'm trying to design a website for my self and I have a problem. My default browser is Safari so I didn't notice the problem till now. I designed the site layout in photoshop and the site in dreamweaver and it works fine in IE and Safari but in Firefox the site layout gets split at the top of the page and you can see the background in a line. Now the layout has two CSS styles for content in the middle and sidebar on the left both have background color that matches the design #333 and #646464. These are noticeable in the split. The site is sv-photography.net Any one got any ideas on how to fix this? SebastjanV |
|||||||