www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 18

Thread: Need Help with Webpage Layout

  1. #1
    Join Date
    Mar 2004
    Posts
    10

    Need Help with Webpage Layout

    Hello everyone! Im having a problem setting up my webpage the way I want it.
    My Web Page
    The way I have it layed out is how I want it but its not written right. What I want is to have the banner right where its at. And the left(palm trees) as my navigation area.The white area will be my Main page or where my navigation page will link me. Please keep in mind that I'm a beginner. Friends have told me to use frames but I want to have a seamless effect with the images(no borders). Can anyone help me. Thank you very much if you reply.

  2. #2
    Join Date
    Jun 2003
    Location
    Indiana, USA
    Posts
    1,138
    how would it not look seemles with frames?

  3. #3
    Join Date
    Mar 2004
    Posts
    10
    Someone told me that there would be scroll bars.But they also told me that it would take longer to load. Not sure if they are right.I just need help with the script writing.

  4. #4
    Join Date
    Mar 2004
    Posts
    10
    Thanks everyone I figured it out.

  5. #5
    Join Date
    Nov 2002
    Location
    Auburn, AL
    Posts
    9,222
    there is no reason for you to be using frames. Frames are not a model for accessabiity and they will cramp your ability to design. If you want a scroll bar use a div
    <div style="overflow:auto; height:500px; width:500px;">this will create a box and the content will scroll when the content is bigger then the box</div>

  6. #6
    Join Date
    Mar 2004
    Posts
    10
    If I am using an image map is it possible to position the banner and a text area using css or html? Im a beginner and Im not sure how to use css. I know a little of html.

  7. #7
    Join Date
    Nov 2002
    Location
    Auburn, AL
    Posts
    9,222
    I dono bout a map, I never use them, but probably... But www.w3schools.com is a great place to learn html and css. www.bluerobot.com has some good rudimentary css based layouts.

  8. #8
    Join Date
    Mar 2004
    Posts
    10
    The page looks ok on 1024x768 but when I change the settings to 800x600 it looks crowded. Is there a way to adjust the webpage so it adjusts to the different settings of a visitor?(so it wont look crowded at lower screen settings)

  9. #9
    Join Date
    Mar 2004
    Location
    Louisiana
    Posts
    52
    Originally posted by Jeramie
    The page looks ok on 1024x768 but when I change the settings to 800x600 it looks crowded. Is there a way to adjust the webpage so it adjusts to the different settings of a visitor?(so it wont look crowded at lower screen settings)
    First off, get rid of the frames. They're not doing you any favors and will just be a bigger headache as the site grows.

    You can reproduce this home page layout more effectively using one table (ducks the rocks from the CSS crowd).

    Use this:
    <HTML>
    <BODY STYLE="padding:0px; margin: 0px 0px 0px 0px;" >
    <TABLE>
    <TR>
    <TD WIDTH="174" HEIGHT="600" ROWSPAN="2" VALIGN="top">
    <IMG SRC="left1.jpg">
    </TD>
    <TD WIDTH="747" HEIGHT="145" VALIGN="top">
    <IMG SRC="Banner.jpg">
    </TD>
    </TR>
    <TR>
    <TD WIDTH="757" HEIGHT="455" VALIGN="top">
    Content here.
    </TD>
    </TR>
    </TABLE>
    </BODY>
    </HTML>

    That's all the code you'd need to do what you're attempting. Additionally, I strongly suggest modifying the size of your Banner.jpg image. It's far too wide for viewing by typical monitor settings. You'd do better to stay within 550-600 pixels wide with that image.

  10. #10
    Join Date
    Nov 2002
    Location
    Auburn, AL
    Posts
    9,222
    *Picks up a stone*
    Code:
    fixed some messups in the next post, I forgot to take it out the caps etc :)
    Last edited by PeOfEo; 04-05-2004 at 06:16 PM.

  11. #11
    Join Date
    Aug 2003
    Posts
    1,576
    or the all css version *avoids PeO's stone*
    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" xml:lang="en" lang="en">
    <head>
    <title>Untitled</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    /*<![CDATA[*/
    html,body{margin:0 auto;padding:0; width:921px}
    #left{float:left;width:174px;}
    #header{margin-left:174px;height:145px;}
    #content{margin-left:174px;}
    /*]]>*/
    </style>
    </head>
    <body>
    <div id="left"><img src="left1.jpg" alt="" /></div>
    <div id="header"><img src="Banner.jpg" alt="welcome to my site" /></div>
    <div id="content">Content here</div>
    </body>
    </html>
    Last edited by Sam; 04-05-2004 at 07:55 PM.

  12. #12
    Join Date
    Nov 2002
    Location
    Auburn, AL
    Posts
    9,222
    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>Table CSS Hybrid</title>
    </head>
    <body style="padding:0px; margin: 0px 0px 0px 0px;" >
    <table>
    	<tr>
    		<td style="WIDTH:174px; HEIGHT:600px; vertical-align:text-top; border:1px solid #000000;" rowspan="2">
    			<img src="left1.jpg" alt="left image would be here"/>
    		</td>
    		<td style="WIDTH:747px; HEIGHT:145px; vertical-align:text-top; border:1px solid #000000;" >
    			<img src="Banner.jpg" alt="welcome to my site"/>
    		</td>
    	</tr>
    	<tr>
    		<td style="WIDTH:757px; HEIGHT:455px; vertical-align:text-top; border:1px solid #000000;" >
    			Content here.
    		</td>
    	</tr>
    </table>
    </body>
    </html>
    I fixed mine, I noticed it was really messed up lol. I tured on the borders so that it would be visible
    http://quasi-ke.servebeer.com/hybrid.html
    It is valid xhtml 1.1. Infact, I am going to take this one step further brb...
    Ok
    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>Table CSS Hybrid</title>
    <style type="text/css">
    body {
    	padding:0px;
    	margin: 0px;
    }
    #center {
    	margin:0px auto;
    	border:1px solid #000000;
    }
    #left {
    	width:174px;
    	height:600px;
    	vertical-align:text-top; 
    	border:1px solid #000000;
    }
    #top {
    	width:747px;
    	height:145px;
    	vertical-align:text-top;
    	border:1px solid #000000;
    }
    #content {
    	width:757px; 
    	height:455px;
    	vertical-align:text-top;
    	border:1px solid #000000;
    }
    </style>
    </head>
    <body>
    <table id="center">
    	<tr>
    		<td id="left" rowspan="2">
    			<img src="left1.jpg" alt="left image would be here"/>
    		</td>
    		<td id="top">
    			<img src="Banner.jpg" alt="welcome to my site"/>
    		</td>
    	</tr>
    	<tr>
    		<td id="content">
    			Content here.
    		</td>
    	</tr>
    </table>
    </body>
    </html>
    put the css in the head, just for the sake of putting it in the same file, you can greatly reduce the size by putting it in an external file and importing it. Also It is not centered. Sam, you are going to need to edit that last post :P. Even with a hybrid layout you can still utilize the ability to keep styles in an external file and greatly reduce bandwidth.
    I gotta go so you can see the file in action at http://knights.europe.webmatrixhosting.net/hybrid.html since my comp will be off.
    Last edited by PeOfEo; 04-05-2004 at 07:43 PM.

  13. #13
    Join Date
    Aug 2003
    Posts
    1,576
    just thought I'd experiement:
    Table/css hybrid:
    776 Characters w/o spaces
    859 Characters with spaces (though this was do to the nice tabbage)
    CSS only:
    631 Characters w/o spaces
    661 Characters with spaces

    EDIT:
    corrected characters (I also edited my above post to include centering), Ergo the 5 characacter increase in my version
    Last edited by Sam; 04-05-2004 at 07:56 PM.

  14. #14
    Join Date
    Nov 2002
    Location
    Auburn, AL
    Posts
    9,222
    bump --^

  15. #15
    Join Date
    Mar 2004
    Posts
    10
    I would like to thank everyone for your help. I havent been online for a couple of days so it took me awhile to thank you guys. I'll have to try some of these scripts out. I'll let you know how it goes.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles