How do I place my banner and links around this div layer?

BeckyTheStrange · 07-11-2005, 07:23 AM

Okay, I have a question about my layout.

On my site, http://www.yousayitvelma.tk, I want to put a banner above the div layer, text links to the left of the div layer and an image to the right of the div layer. What are the codes for this?

I know the site sucks now, but that's why I'm asking for help!

Thanks guys!

adman_9000 · 07-11-2005, 10:09 AM

First off i suggest you put the CSS code in a separate file to make it easier to keep track of. As for the new divs etc just do a couple more div tags, give them id's & play around with the positioning until they're in the right place.

kpm547 · 07-11-2005, 03:11 PM

I believe it may go something like this:

HTML Code:

<html>
  <body>
    <div id="header">
      image goes here
    </div>
    <div id="container">
      <div id="left">
        left bar content
      </div>
      <div id="main">
        Main content
      </div>
      <div id="right">
        right content
      </div>
      <div id="clear">
      &nbsp;
      </div>
    </div>
    <div id="footer">
      footer content
    </div>
</body>
</html>

The style sheet would be like this:
????: NamePros.com http://www.namepros.com/programming/105646-how-do-i-place-my-banner.html

Code:

#header {width:100%;}
#container {width:100%;}
#left {float:left;width:10%;}
#main {float:left;width:85%;}
#right {float:left;width:10%}
#clear {clear:both;}

#footer {width:100%;}

PoorDoggie · 07-11-2005, 03:16 PM

use tables.... they are much easier:

HTML Code:

<table>
  <tr>
    <td colspan="3">TOP IMAGE HERE</td>
  </tr>
  <tr>
    <td width="###">LEFT BAR CONTENT</td>
    <td width="###">MAIN CONTENT</td>
    <td width="###">RIGHT BAR CONTENT</td>
  </tr>
  <tr>
    <td colspan="3">FOOTER HERE</td>
  </tr>
</table>

as you can see, it is much more organised, and better overall. I find that with "floating" <div>s you have a worse chance of getting the layout right on all computers, with varying monitors, resolution and varying browsers. Tables can be positioned so much better!

kpm547 · 07-12-2005, 10:17 AM

Using tables may be easier to set up the first time, but divs and css will make life easier later if things need to be changed. The css/div layout can be changed on every page using them by just altering the style sheet. I would strongly recommend using css as it is the proper way to do it.
????: NamePros.com http://www.namepros.com/showthread.php?t=105646

You could also do it this way without floats:

Code:

#header {width:100%;}
#container {position:relative;width:100%;}
#left {position:absolute;top:0;left:0;width:10%;}
#main {position:absolute;top:0;left:10%;width:85%;}
#right {position:absolute;top:0;right:0;width:10%}
#clear {clear:both;}
#footer {width:100%;}

07-11-2005, 07:23 AM	THREAD STARTER #1 (permalink)
BeckyTheStrange New Member Join Date: Jul 2005 Posts: 5	How do I place my banner and links around this div layer? Okay, I have a question about my layout. On my site, http://www.yousayitvelma.tk, I want to put a banner above the div layer, text links to the left of the div layer and an image to the right of the div layer. What are the codes for this? I know the site sucks now, but that's why I'm asking for help! Thanks guys!

07-11-2005, 10:09 AM	#2 (permalink)
adman_9000 New Member Join Date: Jan 2005 Posts: 19	First off i suggest you put the CSS code in a separate file to make it easier to keep track of. As for the new divs etc just do a couple more div tags, give them id's & play around with the positioning until they're in the right place. __________________ Freelance web design in sussex \| Argue, debate, rant \| Cheap flights to Australia

07-11-2005, 03:11 PM	#3 (permalink)
kpm547 NamePros Member Join Date: May 2005 Location: Canada Posts: 171	I believe it may go something like this: HTML Code: <html> <body> <div id="header"> image goes here </div> <div id="container"> <div id="left"> left bar content </div> <div id="main"> Main content </div> <div id="right"> right content </div> <div id="clear"> * * </div> </div> <div id="footer"> footer content </div> </body> </html> The style sheet would be like this: ????: NamePros.com http://www.namepros.com/programming/105646-how-do-i-place-my-banner.html Code: #header {width:100%;} #container {width:100%;} #left {float:left;width:10%;} #main {float:left;width:85%;} #right {float:left;width:10%} #clear {clear:both;} #footer {width:100%;} __________________ www.twocrazyducks.com - Two Crazy Ducks Web Hosting - Lethbridge, Alberta www.lasara.org - Lethbridge Area Search and Rescue themuellers.ca - The Mueller Family Webpage jobsitestructures.com - Job Site Structures Ltd. - for all your site office and accomodation needs!

07-11-2005, 03:16 PM	#4 (permalink)
PoorDoggie Soon to be RICHdoggie! Join Date: Jan 2005 Location: UK Posts: 2,408	use tables.... they are much easier: HTML Code: <table> <tr> <td colspan="3">TOP IMAGE HERE</td> </tr> <tr> <td width="###">LEFT BAR CONTENT</td> <td width="###">MAIN CONTENT</td> <td width="###">RIGHT BAR CONTENT</td> </tr> <tr> <td colspan="3">FOOTER HERE</td> </tr> </table> as you can see, it is much more organised, and better overall. I find that with "floating" <div>s you have a worse chance of getting the layout right on all computers, with varying monitors, resolution and varying browsers. Tables can be positioned so much better!

07-12-2005, 10:17 AM	#5 (permalink)
kpm547 NamePros Member Join Date: May 2005 Location: Canada Posts: 171	Using tables may be easier to set up the first time, but divs and css will make life easier later if things need to be changed. The css/div layout can be changed on every page using them by just altering the style sheet. I would strongly recommend using css as it is the proper way to do it. ????: NamePros.com http://www.namepros.com/showthread.php?t=105646 You could also do it this way without floats: Code: #header {width:100%;} #container {position:relative;width:100%;} #left {position:absolute;top:0;left:0;width:10%;} #main {position:absolute;top:0;left:10%;width:85%;} #right {position:absolute;top:0;right:0;width:10%} #clear {clear:both;} #footer {width:100%;} __________________ www.twocrazyducks.com - Two Crazy Ducks Web Hosting - Lethbridge, Alberta www.lasara.org - Lethbridge Area Search and Rescue themuellers.ca - The Mueller Family Webpage jobsitestructures.com - Job Site Structures Ltd. - for all your site office and accomodation needs! Last edited by kpm547; 07-12-2005 at 10:49 AM.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Links and Banner space : 5000 visitors daily	pelican	For Sale / Advertising Board	0	02-04-2005 10:27 PM
Links and Banner space : 5000 visitors daily	pelican	For Sale / Advertising Board	0	01-29-2005 11:49 AM
Page Rank 5 Site with Banner and Text Links!! MUCH MORE! High Traffic Sites	ebizcraftsman	Advertising & SEO Services	0	12-09-2004 10:43 PM
Text and Banner spots available on gaming related site	mr_sam	For Sale / Advertising Board	3	08-04-2004 06:04 AM
Links and Banner advertisement available on Gaming site	mr_sam	Advertising & SEO Services	0	06-09-2004 12:33 PM