Custom template layout woes

  • Resolved kanhje

    (@kanhje)


    12 years, 9 months ago

    Hi,

    I created a child theme with 2 custom templates last year (using page.php as my source and adding in HTML elements I thought I needed). I’ve been going back and cleaning up my slapped-together CSS stylesheet and HTML. However, now I’ve run into trouble with the layout. I’m decent at HTML & CSS, not so great with PHP.

    Link here, explanation below.

    What I’m trying to go for is a sidebar with a submenu on the left and the content on the right. As you can see, on this and other pages, the content is below the sidebar. At this point, I can’t figure out why this is.

    I tried floats, positioning, margins, etc. and checked for open div tags. I’ve been through the Support archives, but I haven’t found something answering this question. I’ve tried stripping down the margins and padding on each div to figure out the natural positioning to no avail.

    I was hoping maybe a fresh pair of eyes could check out my template page and stylesheet to figure out why things won’t line up. (I hope I included these Pastebin snippets properly)

    PHP Template: <script src=”https://pastebin.com/embed_js.php?i=1XUhrwn2″></script&gt;

    CSS: <script src=”https://pastebin.com/embed_js.php?i=xifDEART”></script&gt;

    Thank you in advance for your help!

Viewing 5 replies - 1 through 5 (of 5 total)

  • ONly looking at your site, if you want the sidebar on the left — you have to put it above the main section — using float (which it has).

    you also have the container div set to 100% — but that leaves no room for the sidebar (set at 150px). since the enclosing div (main) is 940 px, try setting the container div to 780 or so — adjust later when you see how it looks. You also have no content in the sidebar — so it’s impossible to see what it is really doing…

    Just noticed that you have two divs with the ID of content on the home page — can’t do that.

    Thread Starter kanhje

    (@kanhje)

    1. By the main section, you mean the div id=content role-main, correct?

    2. I just changed the container div to 780px, and it moved farther to the left.

    When I look at the page with Firebug, the div “container-resume” (created by me to style the content for this template) should be inside div “content” (WP created div) based on the PHP template (I checked the tags), and it’s not. It’s far to the left even though I have no negative margins or padding. It has a right float and top vertical align. The vertical align seems to be placing it under the sidebar, and the right float seems to be MIA since it’s halfway off the left of the screen.

    3. The sidebar should have content – it’s a submenu with links; I believe “Show” and “Resume” on this page. If that’s not showing up, that’s bad news.

    4. The home page one is “content-front”, as I was going to try another workaround, but I have removed it.

    If you can help again, thank you!

    Thread Starter kanhje

    (@kanhje)

    Erg, now it’s even more broken. The sidebar won’t pick up any styling whatsoever – floats, links, etc.

    Thread Starter kanhje

    (@kanhje)

    Okay, this has been fixed!

    I basically needed to pare down the divs, which despite having no styling in some cases still created issues. Since I created my own template, it appears I didn’t need the “content” div in addition to the sub-container I already made. So if you’re having issues lining things up, try removing superfluous divs.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Custom template layout woes’ is closed to new replies.