Simple Webpage Setup

The website I am trying to build is as follows:

Website Logo (a jpg file)

Left bar (4 jpgs) The content (some text) Right bar(2j pgs)

Footer(some text)

This is what I have coded so far:

Code:

<body bgcolor="#3598FE">  <div id="header"> <div id="logo" align=center> <img src="images/The_LastPic_Logo_Final_Nov_3.jpg" width="463" height="193" /> </div> </div>   <div id="page">  <div id="leftbar" class="sidebar"> <table> <tr><td><a href="http://www.google.com"><img src="images/baseball_home.jpg" width="230" height="64" style="border-style: none" /></a></td></tr> <tr><td><a href="http://www.google.com"><img src="images/volley_uploadVideo.jpg" width="230" height="64" style="border-style: none" /></a></td></tr> <tr><td><a href="http://www.google.com"><img src="images/puck_aboutTLP.jpg" width="230" height="64" style="border-style: none" /></a></td></tr> <tr><td><a href="http://www.google.com"><img src="images/football_officialRules.jpg" width="230" height="64" style="border-style: none" /></a></td></tr> <tr><td><a href="http://www.google.com"><img src="images/basketball_ReleaseFroms.jpg" width="230" height="64" style="border-style: none" /></a></td></tr> </table> </div>   <div id="content"> <h1 class="title">Hello</h1> </div>  </div>  </body>

Where I have <h1 class="title">Hello</h1> It is showing up below the table I created, how can I make it print to the right of the table?

Re: Simple Webpage Setup

Is what I am looking for a span tag?

1 Attachment(s)

Re: Simple Webpage Setup

Here you go:

HTML Code:

<body bgcolor="#3598FE"> <div id="header"> <div id="logo" align="center"> <img src="images/The_LastPic_Logo_Final_Nov_3.jpg" width="463" height="193" /> </div> </div> <div id="page" style="width:100%;"> <div id="leftbar" class="sidebar" style="width:230px; float:left;"> <div><a href="http://www.google.com"><img src="images/baseball_home.jpg" width="230" height="64" style="border-style: none" /></a></div> <div><a href="http://www.google.com"><img src="images/volley_uploadVideo.jpg" width="230" height="64" style="border-style: none" /></a></div> <div><a href="http://www.google.com"><img src="images/puck_aboutTLP.jpg" width="230" height="64" style="border-style: none" /></a></div> <div><a href="http://www.google.com"><img src="images/football_officialRules.jpg" width="230" height="64" style="border-style: none" /></a></div> <div><a href="http://www.google.com"><img src="images/basketball_ReleaseFroms.jpg" width="230" height="64" style="border-style: none" /></a></div> </div> <div id="content" style="float:left; padding:15px;"> <h1 align="center" class="title">Main Content </h1> </div> <div id="rightbar" class="sidebar" style="width:230px; float:right;"> <div><a href="http://www.google.com"><img src="images/baseball_home.jpg" width="230" height="64" style="border-style: none" /></a></div> <div><a href="http://www.google.com"><img src="images/volley_uploadVideo.jpg" width="230" height="64" style="border-style: none" /></a></div> <div><a href="http://www.google.com"><img src="images/puck_aboutTLP.jpg" width="230" height="64" style="border-style: none" /></a></div> <div><a href="http://www.google.com"><img src="images/football_officialRules.jpg" width="230" height="64" style="border-style: none" /></a></div> <div><a href="http://www.google.com"><img src="images/basketball_ReleaseFroms.jpg" width="230" height="64" style="border-style: none" /></a></div> </div> </div> <div id="footer" style="padding-top:10px; bottom:0px; top:auto; width:100%; left:0px; position:fixed;"> <h1 align="center">Footer</h1> </div> </body>

Re: Simple Webpage Setup

Thanks a lot knxrb!

I am about 90% done. Here is what I got so far:

Code:

<body bgcolor="#3598FE"> <br /><br /> <div id="header"> <div id="logo" align="center"> <img src="images/The_LastPic_Logo_Final_Nov_3.jpg" width="463" height="193" /> </div> </div> <br /> <div id="page" style="width:100%;"> <div id="leftbar" class="sidebar" style="width:230px; float:left;"> <div><a href="http://www.google.com"><img src="images/baseball_home.jpg" width="230" height="64" style="border-style: none" /></a></div> <div><a href="http://www.google.com"><img src="images/volley_uploadVideo.jpg" width="230" height="64" style="border-style: none" /></a></div> <div><a href="http://www.google.com"><img src="images/puck_aboutTLP.jpg" width="230" height="64" style="border-style: none" /></a></div> <div><a href="http://www.google.com"><img src="images/football_officialRules.jpg" width="230" height="64" style="border-style: none" /></a></div> <div><a href="http://www.google.com"><img src="images/basketball_ReleaseFroms.jpg" width="230" height="64" style="border-style: none" /></a></div> </div> <div id="content" style="float:left; padding:15px;"> <p><font size=4 color="#FFFFFF" face="Cooper Black"><b>The Last Pick is a Reality TV show about contestants<br /> that have never played team sports, but who want to play<br /> on a team, competing for a chance to win $500,000, as a<br /> team.</b></font></p> </div> <div id="rightbar" class="sidebar" style="float:right; padding:15px;"> <div><a href="http://www.google.com"><img src="images/soccer_signIn.jpg" style="border-style: none" /></a></div> <div><a href="http://www.google.com"><img src="images/submit_button.gif" style="border-style: none" /></a></div> </div> </div> <br /><br /><br /> <div id="footer" style="padding-top:10px; bottom:0px; top:auto; width:100%; left:0px; position:fixed;"> <center><font color="#FFFFFF" face="Cooper Black"><b><a href="http://www.google.com">Home</a> - <a href="http://www.google.com">Upload Your Video</a> - <a href="http://www.google.com">About The Last Pick</a> - <a href="http://www.google.com">Release forms</a></b></font></center> <br /> <center><font face="Cooper Black" color="#FFFFFF"><b><a href="http://www.google.com">Contact Us</a> - <a href="http://www.google.com">Terms of Use</a> - <a href="http://www.google.com">Copyright 2008</a></b></font></center> </div> </body>

The only problem is on the <div id="content"> tag. I would like to center that as well. I tried adding text-align="center" but the centers the text where it already is (just by the leftbar). How can I make it centered to the entire page?

Again, I appreciate the help!

Re: Simple Webpage Setup

Your going to need to put it into a container (aka another div) and set that to center the text, which will center the div inside

Example:

HTML Code:

<style> .container { text-align: center; } .content { /* your content here */ } </style> <div class='container'> <div class='content'> Your content here... </div> </div>

1 Attachment(s)

Re: Simple Webpage Setup

DClamp is right, I've attached the edited file incase you get stuck where to put it etc..