PDA

View Full Version : Website header breaks alignment when page become smaller, sidebar not how it should help please!


Josh
10-22-2010, 07:40 PM
Hi,

I'm new to all of this and have been reading several tutorials on web design.

I've got to the stage you can see at www.onlinestage.co.uk

when I maximise my web browser, both firefox and IE it all looks ok,
but when I minimize it making the page smaller, the header bar doesn't decrease in size, it runs off the main content bar.

Also my side bar isn't how I want it, there seems to be a darker shaded grey bordering what I want to be the full widthe of the sidebar.

Please can somebody help me.

This is all of my code that doesn't make a great deal of sense to me.

I thought if i post it all, you'l be able to see what mess i've made.

Thanks.

<!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>The Online Stage - Entertainment At It's Best</title>
<link href="twoColLiqLtHdr.css" rel="stylesheet" type="text/css" /><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColLiqLtHdr #sidebar1 { padding-top: 30px; }
.twoColLiqLtHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<style type="text/css">
<!--
body {
background-color: #000;
}
-->
</style></head>

<body class="twoColLiqLtHdr">

<div id="container">
<table id="Table_01" width="1008" height="201" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="26" rowspan="6">
<img src="images/OnlineHeader_01.gif" width="26" height="200" alt=""></td>
<td colspan="2">
<img src="images/Login.gif" width="124" height="51" alt=""></td>
<td colspan="11">
<img src="images/OnlineHeader_03.gif" width="701" height="51" alt=""></td>
<td colspan="2">
<img src="images/CreateAccount.gif" width="124" height="51" alt=""></td>
<td width="25" rowspan="6">
<img src="images/OnlineHeader_05.gif" width="25" height="200" alt=""></td>
<td width="10">
<img src="images/spacer.gif" width="1" height="51" alt=""></td>
</tr>
<tr>
<td width="51" rowspan="2">
<img src="images/OnlineHeader_06.gif" width="51" height="83" alt=""></td>
<td colspan="13"><a href="index.html"><img src="images/Homepage.gif" alt="" width="837" height="72" border="0"></a></td>
<td width="61" rowspan="2">
<img src="images/OnlineHeader_08.gif" width="61" height="83" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="72" alt=""></td>
</tr>
<tr>
<td colspan="13">
<img src="images/OnlineHeader_09.gif" width="837" height="11" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="11" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/Home.gif" width="124" height="51" alt=""></td>
<td width="9" rowspan="3">
<img src="images/OnlineHeader_11.gif" width="9" height="66" alt=""></td>
<td width="124">
<img src="images/HowItWorks.gif" width="124" height="51" alt=""></td>
<td width="15" rowspan="3">
<img src="images/OnlineHeader_13.gif" width="15" height="66" alt=""></td>
<td width="124">
<img src="images/Competitions.gif" width="124" height="51" alt=""></td>
<td width="16" rowspan="3">
<img src="images/OnlineHeader_15.gif" width="16" height="66" alt=""></td>
<td width="124" rowspan="2">
<img src="images/PrizeFunds.gif" width="124" height="54" alt=""></td>
<td width="12" rowspan="3">
<img src="images/OnlineHeader_17.gif" width="12" height="66" alt=""></td>
<td width="124" rowspan="2">
<img src="images/ViewEntries.gif" width="124" height="54" alt=""></td>
<td width="15" rowspan="3">
<img src="images/OnlineHeader_19.gif" width="15" height="66" alt=""></td>
<td width="124" rowspan="2">
<img src="images/FutureEvents.gif" width="124" height="54" alt=""></td>
<td width="14" rowspan="3">
<img src="images/OnlineHeader_21.gif" width="14" height="66" alt=""></td>
<td colspan="2" rowspan="2">
<img src="images/Categories.gif" width="124" height="54" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="51" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="images/OnlineHeader_23.gif" width="124" height="15" alt=""></td>
<td rowspan="2">
<img src="images/OnlineHeader_24.gif" width="124" height="15" alt=""></td>
<td rowspan="2">
<img src="images/OnlineHeader_25.gif" width="124" height="15" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="3" alt=""></td>
</tr>
<tr>
<td>
<img src="images/OnlineHeader_26.gif" width="124" height="12" alt=""></td>
<td>
<img src="images/OnlineHeader_27.gif" width="124" height="12" alt=""></td>
<td>
<img src="images/OnlineHeader_28.gif" width="124" height="12" alt=""></td>
<td colspan="2">
<img src="images/OnlineHeader_29.gif" width="124" height="12" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="12" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="26" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="51" height="1" alt=""></td>
<td width="73">
<img src="images/spacer.gif" width="73" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="9" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="124" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="15" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="124" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="16" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="124" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="12" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="124" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="15" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="124" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="14" height="1" alt=""></td>
<td width="63">
<img src="images/spacer.gif" width="63" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="61" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="25" height="1" alt=""></td>
<td></td>
</tr>
</table>
<div id="sidebar1">
<div align="center">
<table id="Table_01" width="150" height="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/images/images_01.gif" width="150" height="42" alt=""></td>
</tr>
<tr>
<td>
<img src="images/images/Categories.gif" width="150" height="48" alt=""></td>
</tr>
<tr>
<td>
<img src="images/images/images_03.gif" width="150" height="34" alt=""></td>
</tr>
<tr>
<td>
<img src="images/images/Singing.gif" width="150" height="47" alt=""></td>
</tr>
<tr>
<td>
<img src="images/images/images_05.gif" width="150" height="34" alt=""></td>
</tr>
<tr>
<td>
<img src="images/images/Dancing.gif" width="150" height="51" alt=""></td>
</tr>
<tr>
<td>
<img src="images/images/images_07.gif" width="150" height="31" alt=""></td>
</tr>
<tr>
<td>
<img src="images/images/Music.gif" width="150" height="47" alt=""></td>
</tr>
<tr>
<td>
<img src="images/images/images_09.gif" width="150" height="37" alt=""></td>
</tr>
<tr>
<td>
<img src="images/images/Comedy.gif" width="150" height="47" alt=""></td>
</tr>
<tr>
<td>
<img src="images/images/images_11.gif" width="150" height="30" alt=""></td>
</tr>
<tr>
<td>
<img src="images/images/Sport.gif" width="150" height="48" alt=""></td>
</tr>
<tr>
<td>
<img src="images/images/images_13.gif" width="150" height="29" alt=""></td>
</tr>
<tr>
<td>
<img src="images/images/Other.gif" width="150" height="47" alt=""></td>
</tr>
<tr>
<td>
<img src="images/images/images_15.gif" width="150" height="28" alt=""></td>
</tr>
</table>
</div>
<!-- end #sidebar1 --></div>
<div align="center"><img src="images/dancing1.jpg" width="450" height="106" border="0" />
</div>
<p><span class="mainbody"> Can you sing, dance, play an instrument, perform some crazy stunts, tell a joke, make a movie or have any other talents that your too frightened to show off in front of an audience?</span> </p>
</p>
<p align="center" class="mainbody">Then the Online Stage is the place to be</p>
<p align="center" class="mainbody">Simply create an account, and choose a competition that you'd like to enter from our list of categories.</p>
<p align="center" class="mainbody">You choose the way you prepare for your entry, the time, the place, mess up as many times as you'd like and when you're ready, upload your performance in the relevant area and have the chance of winning big cash prizes!!!</p>
<p align="center" class="mainbody">The more entrants, the bigger the prizes. Regular competitions ensure your not waiting months until your next start date, giving you more opportunity to win those cash prizes.</p>
<p align="center" class="mainbody">Start rehearsing now, The Online Stage is open 24/7!!!!!!! </p>
<p><br class="clearfloat" />
</p>
</p>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<div id="footer">
<p>Footer</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

DWcourse
10-22-2010, 11:56 PM
I'm not sure why you've combined tables and divs for page design but the table part of it is a bad idea and probably the root of your problems.

Josh
10-23-2010, 12:38 AM
The way I've done it is I used a dreamweaver template, left side bar, header and footer.

I then made my Header in Photoshop, (what width should this be for the dreamweaver template?)

from photoshop I sliced the header, then imported to my site folder.

I then open up the header.html text and get the code for my header and then post that code into the appropriate place in my index.html, linking up the image soures.

I do the exact same method for the side bar.

I can't seem to make the template stay like it is when it's first created, that's how I want it but It won't happen, i'm getting very annoyed to the point i'm about to give up because I can't find a solution, i've tried making various width headers and none of them seem to fit exactly, they are either too small, too big, too far to the left, etc etc.

The same for the side bar, it seems to be too big or too small, and not fit just right.

would appreciate some help.

Thanks in advance.

Josh

Corrosive
10-23-2010, 07:25 AM
As DWCourse says your method of exporting your design from Photoshop is all wrong for website building. We will help but you need to accept that you are going to need to understand some fundamentals such as CSS and HTML web design and building a page from scratch. It also takes some time to master I'm afraid.

Are you happy to learn and take the time to learn?

Josh
10-23-2010, 10:36 AM
Yes I am very happy to learn, I don't want to have to give up on this or even pay a designer!!

I really appreciate this thank you,

I'm going out for a couple of hours but when I'm back I'll get right to it.

Josh.

Corrosive
10-23-2010, 10:40 AM
OK, that's good. Then we are off to a good start. Really the first two concepts to get your head around are how CSS works; http://corrosiveonline.co.uk/tutorials_css_explained.php and how to use the CSS styles to position your layout (the CSS box model); http://corrosiveonline.co.uk/tutorials_css_box_model.php

After that have a look at CSS floats for building a layout (don't just copy and paste, do a couple from scratch); http://corrosiveonline.co.uk/tutorials_css_floats_for_layout.php

Then come back and show us what you have learned.

Stay off the YouTube tutorials please :)

Josh
10-23-2010, 02:48 PM
That's me back and got my reading goggles on. thanks for this, hopefully I will get somewhere now.

Will get back to you when I've had a play.

Thanks,

Josh

Josh
10-23-2010, 04:04 PM
ignore this. still playing about.

Josh.

Corrosive
10-23-2010, 04:10 PM
That's no problem. You need to create a new stylesheet and save it somewhere (I suggest a folder called css) You then make a link between your <head> tags. Something like;

<link href="css/mystyles.css" rel="stylesheet" type="text/css">

So your whole head section looks like;

<!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>Online Stage</title>
<link href="css/mystyles.css" rel="stylesheet" type="text/css">
</head>

Then you can start writing your stylesheet to arrange all those div tags.

Corrosive
10-23-2010, 04:11 PM
Oh and, if you post code on here (and feel free) please wrap it in code tags. It makes it neater. You can do this by using the # symbol at the top of the text editor (go advanced). Thanks :)

Josh
10-23-2010, 04:21 PM
right, got the index.html, currently with your text in because this is the layout I would like and so I will just adjust it accordingly.

I've created a new css style sheet and added the code and then linked it up with my html.

I also created some folders in my website, to organise all of the files, which I got from another page on your website.

Now I would like to import my header that I made in photoshop, along with the navigation menu that is attached to it.

So I could get rid of the navigation menu bar that is currently in the html as I could just include it in the header?

the width of the site is still 800px and so does this mean I create my header to 800px?

--edit--

sorry, I will include tags next time.

Thanks,

Josh.

Corrosive
10-23-2010, 04:32 PM
You could always change the width of the layout, just adjust all the width styles on the wrapper, header, columns etc. Give it a go :)

Corrosive
10-23-2010, 04:40 PM
Now I would like to import my header that I made in photoshop, along with the navigation menu that is attached to it.



You will need to do this in two separate parts. Take the buttons off the header and then save it for web and devices to reduce the file size (don't save as HTML or whatever). Then apply the image as a background to your header using CSS; http://www.w3schools.com/css/pr_background-image.asp (btw, that website is your Bible :)) Then save your buttons individually to sit in the <li> tags to make navigation. It doesn't matter if the nav sits in the same div as your banner because you have set the image as a background so the nav just sits in there.

Josh
10-23-2010, 04:43 PM
Ok I have made the width to 1000px, is that ok? I have also noticed that when your width was at 800, your right and left column only added up to 760, so your width should be 40px less what your wrapper is?

Also, how does the file know that the navigation bar should be the full width of the wrapper?

I'm ready to do my header now :)

I really appreciate this by the way, I hope i'm not taking up too much of your time.

Josh.

Corrosive
10-23-2010, 04:49 PM
The difference in width is due to the CSS box model; http://corrosiveonline.co.uk/tutorials_css_box_model.php If it is ever going to 'click' with you then you have to get your head round this :) Read it again.

Also, if you don't set a width on a div it will expand to fit its parent element so it will just know.

Josh
10-23-2010, 04:49 PM
argh confusing, So, I open my 1000px header, take the buttons off the header, and then save the image for web and devices.

I then add the image to my images folder, and import it as a backgroun image to my header bar.

I then, with my header, get rid of the background image, then slice all my buttons so they create seperate images, and then im confused about where to put them etc.

sorry.

I will do the background image now.

Corrosive
10-23-2010, 04:53 PM
Yes, that is roughly it. Don't get frustrated it takes a little while to sink in. I would also say that you have chosen a really confusing button configuration to start with. Maybe give it a little more thought.

Josh
10-23-2010, 05:07 PM
What do you mean about the button? how do you think I should have them,

I've put the background image on the site. you can see it here.

www.onlinestage.co.uk (http://www.onlinestage.co.uk)

Josh

Corrosive
10-23-2010, 05:34 PM
Styled lists are the norm for navigation on websites unless you know what you are doing with CSS sprites (which might be a bit much at the moment). Am signing off now so will leave you in the capable hands of other forum members. Good luck :)

Josh
10-23-2010, 05:37 PM
argh I don't know how to import my buttons, i've sliced them up in photoshop giving me just my button images, now i'm stuck.

Josh
10-23-2010, 05:37 PM
Thanks for your help corrosive, it's much appreciated.

Josh.

Josh
10-23-2010, 05:48 PM
can anybody else help me? I've sliced up my button images but don't know how to get them into my html/css

thanks,

Josh.

Josh
10-23-2010, 08:02 PM
managed to do it, i just inserted images into the nav bar, and then i can link them later when I've made the pages.

Corrosive
10-24-2010, 06:49 AM
That's starting to look better now Josh :) Feels good when you have a bit more control over what you are doing huh?

Josh
10-25-2010, 12:43 AM
i'm glad you think so, yes it does feel better, thank you for your help.

I've written a post about allowing users to upload their content, could you please have a look and see what could be done with it.

Thanks,

Josh.