WordPress.org

1. academyofevery
   Member
   Posted 4 months ago #

   Hi,

   I'm working on http://briongysin.com/wordpress

   As you can see, the left sidebar has an extra large left padding space. I am assuming this is because its contents are derived from a list? Regardless of what I tweak in the CSS, there is NOTHING that will affect this margin.

   More mysteriously, even though the div for the main blog column immediately follows that of the sidebar, and there is ample space for both in the container div, they will nevertheless not display inline (I've haven't set them to - as I believe this is the normal nature of html, no?). So the only solution I've found so far is to float one or the other or both, but this exacerbates the first issue and makes positioning almost impossible, as the floated elements then ignore the parent container divs.

   Any help GREATLY appreciated - I'm on a very tight deadline for this.

   Thanks in advance.

2. academyofevery
   Member
   Posted 4 months ago #

   By way of further information...

   I am using index.php as a skeletal file which then 'requires' the nav bar file and then the main content file, which is called home.html.

   index.php has a wrapper div to give shape to the contents of home.html

   home.html is comprised of two divs - one for the blog column, one for the sidebar.

   The Classic WP theme was cut into these divs and the header footer files exactly as detailed in this tutorial and everything works fine.

   Controlling all of this are two CSS files - one for the site overall, including index.php, and the other being the style.css that was part of the Classic WP theme (which I have now modified).

   I'm aware that there is another CSS file called rtl.css, but this seems to double the IDs of some elements, conflicting with e.g. 'content' or 'menu' IDs in style.css ... so I've been ignoring it.

   The two CSS files I am using are both referenced in the header.php, so are accessible to the home.html and blog on page-load. Changing any other CSS element has observable effects, but I just cannot seem to affect the two issues mentioned in my original post.

   Please let me know if I can provide further details.

   Thanks again.

3. academyofevery
   Member
   Posted 4 months ago #

   Once again, anyone?

4. henkholland
   Member
   Posted 4 months ago #

   Your div-ID Sidebar does not pickup any width setting, so it has the same width as the wrapper (almost full screen) That pushes the posts down.
   The rest is hard to say because you are mixing templates with css so not much visible in Firebug.

5. academyofevery
   Member
   Posted 4 months ago #

   Thanks for response.

   Even when I do specify a width, the sidebar seems to be controlled by some other force (!) - see site now, I've added text to the same div, which shows that it is wrapping within the div....

   Additionally, deleting the entire contents of all three CSS files has no impact on this left 'padding' in the sidebar: everything else on the page is affected in some way, but this space seems fundamental. I'm also still unable to display the divs inline.

   Is there anything I can post by way of code that would enable anyone else to take a look at it?

   Thanks again for anyone's time.

6. kmessinger
   Member
   Posted 4 months ago #

   Clean up your html errors here, http://validator.w3.org/check?verbose=1&uri=http%3a%2f%2fbriongysin.com%2fwordpress%2f and then look for the mistake if still there.

7. dbmartin
   Member
   Posted 4 months ago #

   Are we assuming you're trying to get the content to sit to the right of your sidebar? If so, you're going to have to float them. DIVS are block-level elements in HTML and take up their own "line" in the structure of the document (page). In order to get the to line up next to each other, you have to float them.

   That said, you have a few discrepancies in your code. You defined the width of your #sidebarblog as 203px, but your #menu has a width defined as 203px with right and left padding set to 16px. This gives your #menu a total width of 235px.

   A quick solution would be to set the width of your #sidebarblog to 235px and set it to float:left. Additionally, set your #contentblog to float:left as well. That will pull the two of them in-line with each other. To space them apart, set a right margin on your #sidebarblog or a left margin on your #contentblog.

   First and foremost though, you should really clean up the HTML a bit like kmessinger stated.

8. kmessinger
   Member
   Posted 4 months ago #

   To change the margin, replace this <li><a href="http://briongysin.com/wordpress/?cat=1" title="View all posts filed under Uncategorized">Uncategorized</a></li> with this
   <p><a href="http://briongysin.com/wordpress/?cat=1" title="View all posts filed under Uncategorized">Uncategorized</a></p>.

   You need to do this (replace li with p) in each category.

9. academyofevery
   Member
   Posted 4 months ago #

   Many thanks for the responses.

   dbmartin - thanks, didn't realize that about divs occupying their own line. In the meantime I just put both elements into a table - probably safer than floating for IE etc. anyway, and a one-off fix.

   kmessinger - thanks for the tip re: code cleaning - learning all this stuff (from graphic design background), hadn't used the validator before. Most of the problems seem to be incurred by the require php process - which brings in multiple DOCTYPE declarations, wrapper divs, etc. This is the first time I've built a php index page like this ... will be working on it ... but any tips?

   Re: your other suggestion (replacing li with p) - which file is this in? I seem to have achieved a similar effect by adding a class to the ul element of sidebar.php and then styling this via a css file.. but the results again seem a bit botched?

   Thanks again for the help! Much appreciated!

10. kmessinger
    Member
    Posted 4 months ago #

    Actually in the default theme and some other themes, the closest to the index.html file is header.php. If you are adding to index.php you might want to check header.php. That is probably why you are getting duplicat doctype and other meta data.

    replacing li with p - Sorry a weird way of saying remove the "list" on those entries.

    I see your site is looking pretty good now.

Reply

You must log in to post.