WordPress.org

1. lindsayynoble
   Member
   Posted 1 year ago #

   Hi there,

   I'm having problems getting all my sections to sit in the correct place. As you can see (with coloured boxes around sidebar, header and wrapper sections) Things arent sitting well. I am trying to have the sidebar sit at the top of the page to the right, and the content should sit inside the main wrapper - which it does on the secondary pages but not the main page.

   Also a separate cufon related problem, I cant seem to make the cufon page headings in the navigation stay as white text when on the relevant page. Have only managed to change the background color (to blue in this case). Is this a function cufon doesnt have?

   Am greatly appreciative of any help!

   Thanks

   http://www.natureforthecommunity.co.uk

   Lindsay

2. Jonas Grumby
   Member
   Posted 1 year ago #

   In your style.css you have:

   #current { background-color: #3300CC; }

   That is what's making the background on the current page link blue.

   You could try changing it to:

   #current { color: #FFFFFF; }

   which may or may not make the font white but right now white is only set as the hover color.

   The answer to all of this is that you need to know CSS a little better.

3. SEKr
   Member
   Posted 1 year ago #

   You should make style this
   overflow: auto;

   div in box set height is
   height: auto;

   ex. http://www.affiliatescriptx.com/

   view css source then search overflow

4. lockettpots
   Member
   Posted 1 year ago #

   Hi Lindsay

   From your CSS it is difficult to see what you are trying to achieve. There are negative margin in various places and a strange right:700px; rule in your #sidebar.

   What size do you want your overall page to be?
   Do you want your page to be centered in the browser

   What size do you want your main section (where your content appears)?
   What size do you want sidebar to be?

   You say you want your sidebar to sit at the top of the page. Do you mean at the very top or level with the main section?

   John

5. lindsayynoble
   Member
   Posted 1 year ago #

   Thanks everyone for your replies. Very greatful to the web community

   Firstly - apologies for the state of the site - its rather under construction and therefore does not show what I am trying to achieve! Which is actually the following:

   1. width of page to be about 900 px wide
   2. page to be centered in browser
   3. Main section should reach about 700 across, with sidebar 200, sidebar sitting right at top of page NOT inline with main content under header

   Will try advice thats been suggested, and see how it goes,

   And I agree Jonas, I need to know CSS better, but I am trying...

   Thanks again all

   lindsay

6. Jonas Grumby
   Member
   Posted 1 year ago #

   Lindsay keep in mind that when you say you want your site to be 900 and you want your sidebar + div to add up to 900 you have to take any margins or padding into account.

7. lockettpots
   Member
   Posted 1 year ago #

   OK Lindsay

   Try this for your basic structure

   /* The main theme structure */
   
   #wrapper {
           position:relative;
   	margin-left: auto;
   	margin-right: auto;
   	width: 900px;
   	font: 100%/100% Arial, verdana, sans-serif;
   	background: #FFFFFF;
   	}
   
   #main {
   	margin-right:240px;
   	}
   
   #sidebar {
   	position:absolute;
   	background: url(images/logo.gif) no-repeat 0 0;
   	left: 660px;
   	top: 5px;
   	width: 240px;
   	height: 400px;
   	border: solid 1px green;
   
   }
   
   #header {
   	width: 630px;
   	}
   
   #banner {
   	background: url(images/navbar.gif) no-repeat 0 0;
   	height: 46px;
   }
   
   #container {
   
   }

   and then tweak from this basis.

   If you would like an explanation of what is happening just ask

8. lindsayynoble
   Member
   Posted 1 year ago #

   Hi lockettpots - thanks for the breakdown. Its definitely looking better. However the sidebar doesnt seem to be sitting within the wrapper, it sits outside, and it does not float to the right. Could this be a problem with how my php files are put together?

   Thanks again everyone for your input

   Lindsay

9. 123milliseconds
   Member
   Posted 1 year ago #

   Current status at live site? applied changes from previous post ?

   Install Firefox Firebug ; then when you hover over any html element; you will see the line number of all the css involved.

   This way you can investigate and fix further css issues by yourself and quicker.

10. lindsayynoble
    Member
    Posted 1 year ago #

    Its all looking much better now - got some more advice from a colleague. thanks for firebug tip

    Lindsay

Topic Closed

This topic has been closed to new replies.