Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › [Solved] How to position a page layout?

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • September 25, 2014 at 4:40 pm #184753
    Everton
    Participant

    Hello

    I have a Web page here: My page and I am reasonably pleased with the layout.

    There is a sister page on the same site: Contact page
    which generates no errors in a online validator. Both pages use the same CSS style-sheets.

    Yet, in the ‘contact.asp’, the page is not centred and is too high up the screen – it should really display like the ‘projects.asp’ page. I have gone through the CSS and HTML over the last few hours as I have been trying to make the code easier to read, but can’t detect how to make the page centred and not as high up in the browser.

    This has also interfered with the form which seems to have been pulled up, too (please see attached:

    Your text to link here…

    Thanks for any suggestions.

    Blueie

    September 26, 2014 at 1:48 am #184769
    Paulie_D
    Member

    You have a ‘#loginContainer` div that seems to be taking up space at the top of the ‘projects’ page.

    The off-center issue is, I suspect caused by the .show-date paragraph being inline-block.

    It would make more sense for this to be absolutely positioned thus taking it out of the flow.

    September 26, 2014 at 7:07 am #184801
    Everton
    Participant

    Hello Pauli

    Many thanks for your reply.

    It looks a lot better now using this in the style-sheet:

    p.show_date {
font-size: 1em;
/*margin-right: 75px;*/
display: inline-block;
/*float: right;*/
position: absolute;
right: 160px;
}

    and adding this:

    h2{
margin-top: 50px;
}

    in the contact.asp <head> tags but I can’t see why the footer, with its Created by © bayingWolf, should be raised half-way up the page!

    Thanks for your help.

    September 26, 2014 at 7:12 am #184802
    Paulie_D
    Member

    Looks like you forget to clear a float somewhere.

    Not sure why you are floating the #content div…but this seems to fix the issue

    
#content {
text-align: left;
width: 710px;
margin-top: 10px;
padding: 20px 20px 0 0;
/* float: left;  remove this */
overflow: hidden; /* or some other clearing method */
}
    September 26, 2014 at 7:30 am #184803
    Everton
    Participant

    Your genius strikes again!

    Far better

    It looks a lot better now, so a big ‘thank you’!

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.