A couple of layout issues – advice?

  • OK, so I thought I was getting a hang of changing the layout of WP on my site… I guess not.
    I wanted to move the menu to the left, so I created a frame (called “container”) to house the header, menu, content & footer and then put the menu code before the content code in the index file. That seems to have worked as far as moving the menu to the left, but now I have two problems:
    1) For some reason, the “comments (0)” link on the bottom of the top post is far down below the end of the post. I have no idea how this happened. Could someone please be so kind as to take a peek at my code and let me know what I screwed up?
    2) The right border of the menu doesn’t extend to the bottom of content. I know this is a common issue, but from reading through this site, I had (mistakenly) gotten the impression that putting everything inside of a frame would solve this (obviously it didn’t). Is there a relatively simple way to adjust the border, or will it need a lot more work?
    A lot to ask of you guys, I know, but as always, I’d appreciate your help.
    Cheers!
    https://www.conbinibento.com/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter PETbottle

    (@petbottle)

    Thanks for the reply, ohdear. You also helped me out with an earlier issue – I appreciate it.
    1) I removed the “clear: both;” line and it fixed the problem. Thanks for the tip. Hopefully I won’t find out later that I actually DO need that line in there for something else.
    2) I tried putting the border on the left of the content, but didn’t work out very well for whatever reason. I also noticed that menu column displaces the content text by a few pixels to the right which probably has something to do with using float and it has proven difficult to fix. I’m thinking that I might just cheat with a layered background image since I can’t seem to find a workable solution.
    Any suggestions on how to fix the text displacement? I’ve fiddled with the margins & padding, but nothing seems to work. Actually, if I put the content margin to anything less than 13em, the entire text shifts all the way to the left. Puzzling!

    PETbottle … I would try this:
    In your css, give #content a
    border-left: solid 2px #000;
    That will show you where it actually is.
    If it is too far right, then you need to play with the last margin setting. Like any margin setting, if it doesn’t work, put it back to how it was before trying something else.
    If the border is where it should be for you, and the text is still too far way, then padding is the answer.
    padding-left: 0;
    might help, but if not, then try a negative value (not the best solution).
    Sorry I can’t help further .. the Edit CSS tool in Firefox is b0rked this morning here …

    OK. Lets have a look PetBottle. You have got your menu in the index before
    your content. I would not start from there myself. Nevertheless dealing with the code as presented for #menu you float left. However you have then commited a couple of small errors which are causing you grief. You have added padding in four dimensions. It is dislocating your content. It should all come out otherwise it will be difficult to edit and it will screw up in a number of browsers. You are using position: relative which is not necessary, and should come out. You set the width in ems. OK in general terms but the container you start with is set in px. The width is critical to a float scheme, so I would recommend consistency. The container makes this a fixed width scheme. Fine. Use px throughout. Finally the floated menu has a 1px border. That also needs to go for the same reason the padding does. IE browsers do not calculate width like other browsers so a width plus padding or borders will break. Unless you want to get into voicebox hacks. Which I dont. As recommended earlier I would add bright borders so I can see what is going on while I bug fixed the layout. Good luck. HTH. Please let us all know how you get on.

    Thread Starter PETbottle

    (@petbottle)

    podz & Root:
    Thanks a lot for your suggestions. I put a solid border around the content and saw what was wrong and started from there. I’ve gone through the CSS and tried to clean things up a bit – got rid of unnecessary padding, changed all units to px, etc.
    I’m a little confused about the issue of using width plus padding or borders. I don’t suppose any of the changes that I made would have remedied the situation at all…? I haven’t yet tried to put an inner menu inside of the menu – would that just involve putting in a new <div>?
    I appreciate all of your help… this is all new to me.

    The first nest inside #menu is ul which is already there. You can put your padding and margins on there if necessary by editing ul in the css.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘A couple of layout issues – advice?’ is closed to new replies.