WordPress.org

1. Alex Cragg
   Member
   Posted 4 years ago #

   hi, i sat down today to design a new site at http://www.mysoutham.com/kclultimate and ive come to a problem i cant work out.

   It isnt really a problem, i just need some advice on how to do it, and im sure its pretty simple.

   I have a sidebar on the right, and i have an image to 'box' it in. As the sidebar length can be variable, i understand that i need to split this into 3 parts, a top, middle and bottom.

   What i dont know how to do, is which part of the css to use to list these parts as backgrounds? do i set up spans? or divs? or just on some of the ul tags?

   I havent touched any other template for the time being other than the page.php one, so the homepage will be the only real place to look. Single.php etc will look screwed, and also IE has some margin problems as always, but i will fix those later, and my XHTML is all valid(so far!)

   I know this is easy for someone, but i cant get stuff to line up right at all.

   Thanks in advance
   :-)

2. DianeV
   Member
   Posted 4 years ago #

   You're going to have to play with sidebar.php and style.css.

   I haven't looked at your code and CSS, but I think the easiest way to go about this is to attach (in the CSS) the sidebar background to the body of the sidebar area. Then add the top and bottom, respectively. You *could* do it with divs (rather than spans). You'll probably have to play around with the CSS to get it to line up correctly.

   Tip: because browsers tend to display things a little differently (at least some of them), it helps terrifically if the background widths are even numbers of pixels ... that is, 180px wide (rather than 179px).

3. Alex Cragg
   Member
   Posted 4 years ago #

   ok, what i have done is put the top as the #sidebar background, and the middle as the #sidebar ul background.

   I tried to put the middle as the #sidebar background, but it then extended down below the bottom, if i put the bottom part as the #sidebar ul.

   so i now somehow need to add on the bottom. I tried using a div at the end of my sidebar, but still within it, but nothing showed up, even if i gave that div a height and width.

   so i tried using a span, but ive never used one before, so dont really no how to go about it, and i cant find any documentation on it.

   how should i get the bottom attached?

   thanks again

4. JamesICT
   Member
   Posted 4 years ago #

   You could do something like:

   <div id="sidebar">
   <div id="sidebar-top"><div id="sidebar-bottom">

   -- Throw in all your sidebar content here --

   End with 3 closing divs

   --------------------------------------

   In your CSS use something like the following with all the appropriate widths and padding etc...

   #sidebar-top { }
   #sidebar-bottom { }

5. Alex Cragg
   Member
   Posted 4 years ago #

   thanks both, james that did the trick! :-)

6. Root
   Member
   Posted 4 years ago #

   You could reduce the presentational markup by putting the top graphic in the title. The bottom one would go in the ul. The tiling mid section in the li. It needs fiddling. But you would cut out 3 unnecessary divs. Some folk do not mind them.

Topic Closed

This topic has been closed to new replies.