Help with layout

  • Icebox

    (@icebox)


    20 years ago

    Hi,
    I recently made a layout, which can be seen here: https://www.echoplayer.com/layout/coded/ (ignore all the hello’s and filler text). Save for the links being default in the footer (annoyingly – can anyone help me fix that? As I’ve set the both as a different class, but it seems to be over-ridden), this is how I’d like the site to be.
    I copied over the relevant WordPress bits and uploaded it here: https://www.echoplayer.com/index.php
    As you can see it doesn’t display properly. Could anyone help me fix it, so it looks like the first link?
    The footer’s missing, and two of the columns are displayed on the right hand side. Also, I’d like to edit how the lists are displayed (that’ll probably be in the css anyway), specifically – the distance between the red dots and the corresponding text (e.g. the links at the bottom – there’s a huge gap between each dot and the text).
    I’d also like to get rid of the text underneath each image on the right hand side – i.e Search:, Categories: – the grey, italic text that’s part of the list.
    I’ve uploaded the contents of the index file when on my PC, showing the WordPress bits I’ve put in: https://www.echoplayer.com/layout/coded/wordpress.txt
    Part of the problem could be my dodgy implementation of the li and ul code in the layout.
    Edit: I was sorting out the CSS, as it wasn’t valid, and now there’s a massive gap in the content area (between first post and comments), that wasn’t there before.
    If anyone could help me, I’d be most grateful. I can offer some advertising on the site if you wish and/or some small graphics work.
    Thanks,
    Ben

Viewing 10 replies - 1 through 10 (of 10 total)
  • danbowling

    (@danbowling)

    Try validating your HTML. Valid code is MUCH easier to debug.
    https://validator.w3.org/check?verbose=1&uri=http%3A//www.echoplayer.com/index.php

    Thread Starter Icebox

    (@icebox)

    Hi,
    I went through my code, and realised I had put a “u” instead of “ul” and there was an extra </div> that didn’t need to be there.
    It’s made https://www.echoplayer.com/index.php a little better, but there are still a number of problems:
    The three columns don’t appear to be lining up, height-wise.
    There’s that massive gap in the content area
    The content area stretches down to the bottom of the page, and the footer isn’t there (this is likely to do with the javascript used to line up all three columns not working).
    If you look here: https://validator.w3.org/check?verbose=1&uri=http%3A//www.echoplayer.com/index.php
    It’s bringing up errors, but I don’t know what it’s going on about – it’s line numbers are messed up (they don’t match with the source code from index.php (when I’ve viewed it online)).
    Please could someone help? ??

    Jabbok

    (@jabbok)

    Check the “textarea” in your CSS. Adjust the width accordingly.

    Thread Starter Icebox

    (@icebox)

    I’m still not certain about what needs fixing, and where ??

    Moderator James Huff

    (@macmanx)

    Every section or phrase of code in your index.php file which begins with either <div> or <div something> needs to end with </div> at the end of the section or phrase of code.

    Thread Starter Icebox

    (@icebox)

    Yeah I know that, it’s just I’ve looked through the code multiple times and can’t find any missing divs.
    Before this though I did delete a </div because the validator was telling me I had an extra div that wasn’t needed (so I searched through the code and found the extra one… it didn’t give the error, but now these new ones come up).

    Joshua Sigar

    (@alphaoide)

    Delete clear: both; in .feedback.
    It will eliminate your current issue but introduce another one as pointed by cwsaylor in this thread https://www.ads-software.com/support/3/12575
    It might not affect you, though.

    Thread Starter Icebox

    (@icebox)

    Did that – it got rid of that massive gap, but the three columns still don’t align, and the footer isn’t showing ??

    Joshua Sigar

    (@alphaoide)

    You have the following that’s why the footer is not visible
    `#footer {
    …
    visibility: hidden;
    …
    }
    And how you want the columns to align? How you want them to look like?

    Thread Starter Icebox

    (@icebox)

    The column thing is here: https://www.sitepoint.com/article/exploring-limits-css-layout
    That’s why the footer is invisible, as it needs to find a general height for all three columns, and then sow the footer at the very end.
    It’s confusing as to how to get everything to work properly ??

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Help with layout’ is closed to new replies.