logo-dw

Go Back   Dreamweaver Club Forums > Dreamweaver forums > Dreamweaver General
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 10-22-2010, 07:40 PM   #1
Josh
 
Join Date: Oct 2010
Posts: 73
Default Website header breaks alignment when page become smaller, sidebar not how it should help please!

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.

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>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>

Last edited by Corrosive; 10-23-2010 at 07:14 AM..
Josh is offline   Reply With Quote
Old 10-22-2010, 11:56 PM   #2
DWcourse
DWcourse's Avatar
 
Join Date: Apr 2009
Posts: 3,276
Default

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.
__________________
If my answer helped, check out DWcourse.com for Dreamweaver tips and tutorials.
DWcourse is offline   Reply With Quote
Old 10-23-2010, 12:38 AM   #3
Josh
 
Join Date: Oct 2010
Posts: 73
Default

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
Josh is offline   Reply With Quote
Old 10-23-2010, 07:25 AM   #4
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

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?
Corrosive is offline   Reply With Quote
Old 10-23-2010, 10:36 AM   #5
Josh
 
Join Date: Oct 2010
Posts: 73
Default

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.
Josh is offline   Reply With Quote
Old 10-23-2010, 10:40 AM   #6
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

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/tutoria..._explained.php and how to use the CSS styles to position your layout (the CSS box model); http://corrosiveonline.co.uk/tutoria..._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/tutoria...for_layout.php

Then come back and show us what you have learned.

Stay off the YouTube tutorials please
Corrosive is offline   Reply With Quote
Old 10-23-2010, 02:48 PM   #7
Josh
 
Join Date: Oct 2010
Posts: 73
Default

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 is offline   Reply With Quote
Old 10-23-2010, 04:04 PM   #8
Josh
 
Join Date: Oct 2010
Posts: 73
Default

ignore this. still playing about.

Josh.

Last edited by Josh; 10-23-2010 at 04:11 PM..
Josh is offline   Reply With Quote
Old 10-23-2010, 04:10 PM   #9
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

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;

Code:
<link href="css/mystyles.css" rel="stylesheet" type="text/css">
So your whole head section looks like;

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>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 is offline   Reply With Quote
Old 10-23-2010, 04:11 PM   #10
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

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
Corrosive is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 06:09 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com