|
HTML - Trying To Get My Website Layout Correct
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. Similar TutorialsMy website looks like I want it to in Chrome, Firefox and my Android phone (including the flash banner at the top working properly) - however, in IE the layout is wrong. Also there is no consistency. Sometimes a page will look right then if you load another page and go back to the original one it now looks wrong. The compatibility mode makes it look a bit better but still not correct. It appears that it looked right until I updated flash (because the new flash banner at the top required this) and now the whole site layout is wrong. Any ideas? The website is www.nodj.co.uk if you need to take a look. Thanks in advance! Hello, I'm using Kubuntu Linux. My Website is warp.net16.net Here is the coding that I used to try and put my image up, as you can see it is not showing. <H1 ALIGN=CENTER><U>W.A.R.P</U></H1> <P ALIGN=CENTER>(Work, Assisted, Resource, Program)</P> <P ALIGN=CENTER> <img src="file:///home/esprit/My Website/images/chokurei_spiritmatter.jpeg"/> </P> Thank you for your time and help, I really appreciate it. Hi 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! 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 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 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 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, 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, 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! 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 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 i'm trying to figure out what i'm doing wrong with adding some ssi into my codes. i'm trying to get my menu to be to the left of my main body information of each page. i got it working by pure luck on this one, but i can't get it working on the other pages. here's some of the code from the correctly working page: .... <body> <table class="try" cellspacing="0"> <tr> <!---#include file= "ssi/header.ssi"--> <!--************Header Cell start***********--> <tr> <!---#include file= "ssi/menu.ssi"---> <!--**********Menu cell stops**********--> <!--**********Body cell starts*********--> <td class="body"> <!--**********BODY CONTENT...ALL!**********--> <h2 class="texttitle"> Text + Lists Page</h2> <p class="book"> <a href="http://www.thelatinlibrary.com/cicero/fin.shtml"> The Extremes of Good and Evil</a></span> <p class="author">by Cicero (circa 45 B.C.)</span> .... and here's one from my other pages: .... <body> <tr> <!--#include file= "ssi/header.ssi"--> </tr> <tr> <!--#include file= "ssi/menu.ssi"--> <form action="http://usm.maine.edu/cgi-bin/cgi-mailer.pl" method="post"> <p><input name="destination" value="brandonmckenney@gmail.com" type="hidden"></p>....... those are just from the beginning parts of my body sections. what am i doing wrong. the menu shows up but it shows up on top of the body info like the header. any help will be greatly appreciated as this is due on my server for class tomorrow morning! How do i insert a coloured line in the page without declaring the line propertoes in the CSS. I've used the following code, but the W3C validator was not happy. It said there's something wrong with the last portions of the code line. I use HTML 4.01 Transitional doctype.The HTML code I used is .... <hr size="1" Width="90%" align="center" color="#ff6600" /> Please help with the correct syntax or tips. Even better would be how to make it happen by inserting these <hr> styles into the CSS. (I'm a beginner in HTML) I'm currently using .em for font size. I have set the font size and font in body, but the font is not being applied to inputs and the font size is not being applied to lists. My font size is currently set at 1em, and I have to put 100% as font size in my divs for it to be 1em. I'm wondering how and where I should set the font and font size so it will apply to everything? I understand that there should only be one H1 tag in a document, but what about H2, H3 etc. For example if I had a page listing products I would apply the H1 tag to the category, but I think the products in the list would be of equal importance, so would it be semantically correct to apply H2 tags to the products? And to take it a bit further, if each of the product had options (i.e. sub-products), would it be correct to apply H3 tags to the options? e.g. <h1>Dogs</h1> <h2>Labrador</h2> <h3>Golden</h3> <h3>Chocolate</h3> <h3>Black</h3> <h2>Collie</h2> <h3>Border</h3> <h3>Rough</h3> <h3>Bearded</h3> <h2>Boxer</h2> <h2>Retreiver</h2> <h3>Golden</h3> <h3>Flat coat</h3> Thanks I have a simple form which consists of 3 radio buttons (it is one of those feedback questions at the bottom of a web page asking "Did you find this page helpful? Yes A little No"). I looked up several websites to get the supposedly correct code, and basically they all suggested something like this for each button: Quote: <label for="r1"> <input type="radio" name="group1" id="r1" value="1" /> button one</label> The form is enclosed within <p> and <form> tags, and this is the HTML code I used for each of the buttons (with different labels and ids of course): Quote: <label for="n2">Yes</label> <input type="radio" name="helpful" id="n2" value="2" onclick="hresponse('2')" > But when I try to validate this page with the W3C validator, I get 9 errors, with the one relevant here being: Quote: Line 256, Column 19: document type does not allow element "LABEL" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "PRE", "DIV", "ADDRESS" start-tag <label for="n2" > Yes</label> The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element. If I change my code to: Quote: <label for="n2">Yes <input type="radio" name="helpful" id="n2" value="2" onclick="hresponse('2')" > </label> I only get 6 errors, but this particular error still occurs for each button. I am using HTML 4.01 strict. Can anyone explain what is happening here please, and how to fix it? Thanks. below is from a W3C linkchecker - how do I provide a valid URL for validating my page? The link provided by W3C isn't valid? - my page www.colletts.co.uk Quote: Fragments listed are broken. See the table below to know what action to take. Code Occurrences What to do 403 1 The link is forbidden! This needs fixing. Usual suspects: a missing index.html or Overview.html, or a missing ACL. http://validator.w3.org/check?uri=ht....uk/index.html What to do: The link is forbidden! This needs fixing. Usual suspects: a missing index.html or Overview.html, or a missing ACL. Response status code: 403 Response message: Checking non-public IP address disallowed by link checker configuration Line: 258 Hi everyone, Good day to you. I had just created my new html code for my webform,however,it seemd like it allowed submission of the opt-in form without filling up the info by clicking on the submit button. May I know what wrong with it ? How to correct this problem ? The following is my webform code : -------------------------------------------------------------------------------------------------------------------------------------------- <div id="formbox"> <h3>Get Your Free Gifts !</h3> <form METHOD="post" ACTION="http://moneymakeyourich.com/cgi-bin/formmail.pl"> <input type=hidden name="recipient" value="moneytree@moneymakeyourich.com"> <input type=hidden name="subject" value="Your Subject"> First Name : <input type=text name="realname" size="20"> <br> Last Name : <input type=text name="lastname" size="20"> <br> Email : <input type=text name="email" size="20"> <br> <input type="Submit" value="submit"> </form> <p><b>Important</b>:I will never share your information with anyone !</p> -------------------------------------------------------------------------------------------------------------------------------------------- Thank you. Best regards Manicui |
|||||||