Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    27
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Simple Layer CSS Help Needed

    I am new to HTML/CSS and working through different things using it.

    1. I would like my layer to be in the center of a web page, with 200 pixels at either side of the layer. If the user alters the size of the browser, I would like it to stay centered to the same ratio as 200px to the 100% browser.

    I also want the layer to go all the way to the bottom of the page (height:572px; within my code but I couldnt think of a better way) but I dont know how to make this automatic? So that the layer always goes to the bottom of the page no matter what size of window is open?

    Apologies if that doesnt make much sense. Any help is much appreciated. See below for the coding that I am using, some of which isnt essential but Ive been trying everything to make it work .


    Code:
    #layer1 {
    position: absolute;
    left: 200px;
    right: 200px;
    margin-left: auto;
    margin-right; auto;
    top: 0px;
    bottom: 0px;
    z-index: 1;
    background-color: #ed1c24;
    border: 10px solid #ed1c24;
    height: 572px;
    }
    Thanks
    Last edited by davm22; 11-07-2010 at 07:37 PM.

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    Leave this off entirely: height: 572px;

    You've already specified that it go all the way to the bottom of the page: bottom: 0px; It actually works quite well in Firefox, but I don't know why you have a border the same color as the background?

  • #3
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    Something like this?

    #layer1 {
    margin:0 200px;
    background-color: #ed1c24;
    border: 10px solid #ed1c24;
    height: 572px;
    }

    Go Here and/or here for an examples of full height layout.
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design

  • #4
    New Coder
    Join Date
    Nov 2010
    Posts
    27
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DrDOS View Post
    Leave this off entirely: height: 572px;

    You've already specified that it go all the way to the bottom of the page: bottom: 0px; It actually works quite well in Firefox, but I don't know why you have a border the same color as the background?
    Thanks for that.

    I am testing it in IE8 and without the height:572px coding, the footer comes up and covers some of the text.
    On Firefox its fine with or without the height:572px coding.

    Is there any way to avoid this using IE8?


    On IE8 it doesnt appear to be centered either.
    On Firefox it does appear to me centered.

    Where am I going wrong? I would prefer it to be fine in both and not just Firefox?

    Sorry the border being the same colour is one of those "non essential things"

  • #5
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    Do you have a proper doctype statement on the page? Very important for IE.

  • #6
    New Coder
    Join Date
    Nov 2010
    Posts
    27
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DrDOS View Post
    Do you have a proper doctype statement on the page? Very important for IE.
    I actually dont which is where I am going wrong. I am just fiddling around with html at the moment and I that is an oversight on my part.

    Which DOCTYPE would be the best to use?

    Apologies for the very basic questions!

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    If you don't want/have to use absolute positioning, then the following should do it:

    Code:
    *{margin:0;padding:0}
    html,body{height:100%}
    div{height:auto !important;
    margin:0 200px;
    height:100%;
    min-height:100%;
    }
    which adapts (slightly) the sticky footer code here.

  • #8
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    Quote Originally Posted by davm22 View Post
    I actually dont which is where I am going wrong. I am just fiddling around with html at the moment and I that is an oversight on my part.

    Which DOCTYPE would be the best to use?

    Apologies for the very basic questions!
    Not being able to see your page maybe try an HTML4.01 transitional. You can always change it. Your problems may disappear entirely with it added.

  • Users who have thanked DrDOS for this post:

    davm22 (11-07-2010)

  • #9
    New Coder
    Join Date
    Nov 2010
    Posts
    27
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks for that, all is working now.

    Just need to get this roll over thing working (another thread), trying to follow a tutorial but I am struggline


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •