Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How can I add side bars to my site?

Status
Not open for further replies.
Sort by date Sort by votes
Upvote 0 Downvote
Thanks for the quick response.
I dont like the idea of creating an image with the trees already in it, I will try the float method-
thanks
 
Upvote 0 Downvote
Going with the background image is a much better idea because it is not content and if the client is looking at your page at a resolution lower than you anticipate, they shouldn't have to scroll just to get the trees in. If you work with the background image (centrally positioned on the body and repeated on the y -- you don't need more than one tree on the image itself), then the scrollbars won't appear, even if the user cannot see all the trees.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
I have added the right side bar but when I try to add the Left side bar it messes it all up : here is the code of the page
Code: 
<body>

<div id="Aall">

[b]<div id="palmRIGHT"></div>[/b]

<div id="Logo">
<img src="Images/logo.jpg" alt=""></div>

<span id="TRGrapihc"><img src="Images/bounce.jpg" alt="" /></span>
<span id="LogoRight"><img src="Images/LogoRight.jpg" alt=""></span>


<div style="clear:left"> ........
and here is the CSS code
Code: 
#Aall{
  /* this sets the blue background color */
   background-color:#97d4ff;
   /* this dictates the total width of the content */
   width:1050px;
   height:980px;
   /* this tells the page to put an equal amount of margin on both sides, essentially "centering" the content */
   margin:0px auto;
}
#palmLEFT{
float:right;
width:133px;
height:980px;
background-repeat:repeat-y;
background-image:url(Images/PalmBG.jpg);
}
#palmRIGHT{
float:right;
width:70px;
height:980px;
background-repeat:repeat-y;
background-image:url(Images/PalmBG.jpg);
}
If I add the palmLEFT div it makes the site drop down!
Thanks
 
Upvote 0 Downvote
For your layout, you don't necessarily need to use floats at all.

Given your content is a fixed width, you could create an image the eight of one tree, and the width of two trees plus your body content. Then put two trees on this image - one to the very left, one to the very right with the middle being transparent (or whatever). Set the width on your html or body elements, and then put the image as a background on whichever of those is more appropriate.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Alternatively, you could mark up your site like this:
Code: 
<div id="con1">
<div id="con2">
Content goes in here, no floating divs required!
</div></div>
And put this in your CSS:
Code: 
#con1 {
   width:917px;  /* 1050px - 133px */
   padding-left: 133px;
   background:#97d4ff url(Images/PalmBG.jpg) top left repeat-y;
   margin: 0 auto;
}

#con2 {
   padding-right: 133px;
   height:980px;  /* min-height might be a better idea */
   background:#97d4ff url(Images/PalmBG.jpg) top right repeat-y;
}
You could try applying this css to the <body> and one <div> instead of using two - but I think two <div>s is more likely to work on older browsers.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
699
bdwilcox
bdwilcox
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
741
pmonett
pmonett
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
766
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top