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 11 of 11
  1. #1
    New Coder
    Join Date
    Aug 2010
    Posts
    10
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Positioning and background property issue

    Hello folks,

    It's been a couple of weeks since I started CSS programming and it seams that there is something that I do not get.

    What I am trying to do is the following.
    1. A centered webpage
    2. On that page a navigation menu on the top of the page fixed
    3. A navigation menu on the right of the page fixed
    4. A content block that can be scrolled and disappear under the navigation menu on the top of the page.

    A preview of the page can be viewed here: http://www.achats-responsables.ch/le...restations_new

    I get a couple issue and I have the feeling that my coding is not that good because I had to play a lot with the div, padding and margin to get things to more or less work.

    My big issue here, and it is a fundamental one in understanding CSS and its positioning rules I guess, is that I do not understand why my outter most div's border do not extends the whole page. I guess it is due to fixed and absolute positioning and removal from normal flow, but how can I make a page with a div that has a border and all the elements inside.

    My goal is to have a centered box with a gradient all around and all the content inside (menus fixed, content pre se mobile).

    Up to know, and if you look at the web page given above, the top menu is in a div that has a fixed position, within which the the are two div with the content on normal flow. The menu on the right is in another div that has a fixed position and in another div that is floted right. The content pre se is positioned absolute, which yields the problem on the gradient (for that last issue I was think about a 180px padding might do the trick, but I do not feel that it is proper coding).

    I am reading and reading O'reilly's books on CSS and HTML, trying to get information from the web, but I am a bit despreate, so any help would really be appreaciated.

    Have a good one!
    Last edited by matthieujoly; 08-06-2010 at 05:22 PM.

  • #2
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    628
    Thanks
    51
    Thanked 67 Times in 67 Posts
    Pages are automatically centered (the entire page, not specific elements or the font) if they do not fit the entirety of the page (i.e. if your site is 800px wide and the user's computer is set to 1024 pixels wide), although you should be sure to specify the body width in your CSS. Also, that site uses a lot of Javascript. As for fixing your content, use position: fixed; which will keep it in it's position even when scrolling. You will have to define it's location, though (top and left), since it has an absolute position (not affected by staticly positioned elements).
    Last edited by djh101; 08-05-2010 at 09:36 AM.
    "Yeah science!"

  • Users who have thanked djh101 for this post:

    matthieujoly (08-05-2010)

  • #3
    New Coder
    Join Date
    Aug 2010
    Posts
    10
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thanks for your reply. I tried your tips but sadly it doesn't work.

    1. I specified a width in the body selector which is under my screen resolution, and the page is not centered. I did the same thing with a width value above my screen resolution and the page is still not centered. I checked my results on the root page of the website, which is for the time being not centered. So far no results on that side.

    2. Regarding JavaScript, the site do not use javascript at all; I do not know where you see that (expect from the html header). So I do not understand the impact. Shall I remove that line from the header?

    3. Regarding positioning, I already use "fixed", but my issue is that my outer div with a dotted green border do not enclose everything.

    My goal is to have everything is a box centered on the page. Inside that box, to elements will be fixed and one not.

  • #4
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    628
    Thanks
    51
    Thanked 67 Times in 67 Posts
    Oh, that's your site? Well what's all that javascript doing in the header if it's not being used? As for it being centered, it might just be your browser. I use Google chrome and every page that doesn't fill the entire screen is centered in the middle. Absolute/fixed positioning can cause your page to not be centered. It is centered fine in my browser, but some browsers interpret code differently.

    As for your green border, I think the problem is that you are containing a fixed element inside a non-fixed element. Try either fixing #container1 or unfixing #sub-container1. You could also try simply putting your green border around the body. I think your site would actually look just fine without any borders (other than maybe the one under the upper nav). Otherwise, I'd recommend placing the navigation outside of the container and wrapping the border only around the un-fixed content.

    On a side note, in your font-family you put sans-sherif instead of sans-serif.
    Last edited by djh101; 08-05-2010 at 10:31 AM.
    "Yeah science!"

  • Users who have thanked djh101 for this post:

    matthieujoly (08-05-2010)

  • #5
    New Coder
    Join Date
    Aug 2010
    Posts
    10
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thanks for the inputs. Well it's not exactly my site. It is a site that I have inherited and that I need to bring to the next level, but the original code is so dirty (all the PHP was hard coded, MySQL tables made little sense). So I needed to fix the content in the first place in order to be able to evolve the site.

    In case you are interested, here is the index.php file with now only the 4 div's that I want to stlye.

    <div id="heading">
    <?php $this->load->view('heading1'); ?>
    </div>

    <div id="menu">
    <?php $this->load->view('menu1'); ?>
    </div>

    <div id="sidebar">
    <?php $this->load->view('sidebar'); ?>
    </div>

    <div id="content">
    <?php $this->load->view($content_view); ?>
    </div>

    <div class="clearb"></div>


    Thanks for the "sherif" thing, I corrected it. I also killed the JavaScript in the header, thanks again. Now my header looks like this:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>Guide des achats professionnels responsables</title>
    <link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css2/public/style.css" media="screen, print" />
    </head>


    What do you think? Is the HTML5 DOCTYPE declaration out of place? Shall I input anything else in the header?

    1. As you can see, I am starting from scratch. Everything is now static positioned (i.e. default) with the content floted left and the sidebar floated right. Why do I need to input a clear:both instruction after the floated elements in order to get the body border around them? Seams strange to me.

    2. Removing all the fixed, absolute and relative elements from the CSS, as suggested, it looks now ok. But now, how can I properly fix my top and side navigation menus? I.e. how can I fix them in a robuste manner?

    3. After that, I would like to keep all the time the upper margin (at the top of the page in order to apply my gradient all around it (to give a floating page effect). Furthermore, the scrolling of the "content" should disappear under the top menu, but not appear at the top after it (it's a problem I got in the past).

    4. If you have Firefox 3.6 or above, you should see a gradient near the scrolling bar on the right. In a trying to position it to the left of the left border but with no luck.

    It seams baby level question, but I tried so many things that I have the feeling not to be able to get something.

    Thanks in advance for all your help.

  • #6
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    628
    Thanks
    51
    Thanked 67 Times in 67 Posts
    As much as I like helping people, I think I need to stop helping people with CSS (I try, but I'm really not that good with it). You can keep the navigation fixed like it was, but it will mess up the border (it looks fine without a border, though). The reason the text appears at the top is because it is going underneath the fixed div and the fixed div doesn't go all the way to the top of the page (either the div itself or a div it is contained in has a margin or padding on the top). I don't think I can really help you with the borders, all I can suggest is to keep your fixed divs separate from the rest of your content and either border around the rest of the content or around the body (or, you could try enclosing your non-fixed content in a div slightly wider than your navigation and bordering around that).

    Try reading these links. I haven't read them myself, but I took them out of another post related to yours (http://www.codingforums.com/showthread.php?t=201578) and they look like they could be useful:
    http://www.barelyfitz.com/screencast...s/positioning/
    http://www.algonquinstudios.com/Home...ch/WrongWayCSS
    Last edited by djh101; 08-05-2010 at 11:42 AM.
    "Yeah science!"

  • Users who have thanked djh101 for this post:

    matthieujoly (08-05-2010)

  • #7
    New Coder
    Join Date
    Aug 2010
    Posts
    10
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thanks again for your time; pretty much appreciated.

    Regarding the text at the top, I understood the behavior and I managed to get around it with an increased padding previously, but I thought it was a bit dirty. Since I want to keep the margin at the top, I guess that I will need to use somehow the z-index property in order to achieve what I need.

    I think that your suggestion to keep the fixed div outside is bigger one (meaning a one enclosing everything) is a good one; I will try it and post the results here. The suggestion about the wrapping div for the "content" div could also work; again I will try and post the results here.

    Thanks for the links; I also found that post earlier.

  • #8
    New Coder
    Join Date
    Aug 2010
    Posts
    10
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Long and though day today, but I moved forward and I must thank you very much for that.

    Here is nearly the final result if you are interested:

    http://www.achats-responsables.ch/le...estations/13/2

    I still need to solve two issues:

    1. I need to make sure that my gradients on both sides extend beyond the content when it is very small; I'll do that with JavaScript.

    2. On my top divs, I set the background-color to white, but it seams that it doesn't apply it to the paddings; which is very strange. Any idea on that one?

    Here is the HTML/PHP code:

    <div id="c1">
    <div id="heading">
    <?php $this->load->view('heading1'); ?>
    </div>

    <div id="menu">
    <?php $this->load->view('menu1'); ?>
    </div>

    <div id="under"></div>
    </div>

    <div id="c3">
    <div id="sidebar">
    <?php $this->load->view('sidebar'); ?>
    </div>
    </div>

    <div id="gl">
    <div id="gr">
    <div id="content">
    <?php $this->load->view($content_view); ?>
    <div class="clearb"></div>
    </div>
    </div>
    </div>


    And here is the CSS code:

    html, body{
    font-family: arial, sans-serif;
    font-size: 15px;
    color: black;
    margin: 0;
    padding: 0;
    }
    body{
    margin: 0px auto;
    width: 1030px;
    height: 100%;
    /*border: 1px solid blue;*/
    }

    #c1{
    width: 1000px;
    position: fixed;
    top:0px;
    margin-left:15px;
    padding-top:20px;
    background-color: white !important;
    /*border: 1px solid red;*/
    }
    #under{
    position: relative;
    height:15px;
    width: inherit;
    background: -webkit-gradient(linear, right top, left top, color-stop(0px, rgb(255,255,255)), color-stop(14px, rgb(107,107,107)), color-stop(15px, rgb(255,255,255)));
    background: -moz-linear-gradient(center bottom, rgb(255,255,255) 0px, rgb(107,107,107) 15px);
    z-index: 0;
    }
    #heading{
    position: relative;
    padding-left: 15px;
    z-index: 20;
    background-color: white;
    }
    #menu{
    position: relative;
    padding-left: 15px;
    border-bottom: 1px solid black;
    margin: 15px 0px 0px 0px;
    padding-bottom: 15px;
    background-color: white;
    z-index: 20;
    }
    #gl{
    height:100%;
    width: 1030px;
    background: -webkit-gradient(linear, left top, right top, color-stop(0px, rgb(255,255,255)), color-stop(14px, rgb(107,107,107)), color-stop(15px, rgb(0,0,0)), color-stop(0px, rgb(255,255,255)));
    background: -moz-linear-gradient(left center, rgb(255,255,255) 0px, rgb(107,107,107) 14px, rgb(0,0,0) 15px, rgb(255,255,255) 0px);
    }
    #gr{
    height:100%;
    width: 1015px;
    margin-left:15px;
    background: -webkit-gradient(linear, right top, left top, color-stop(0px, rgb(255,255,255)), color-stop(14px, rgb(107,107,107)), color-stop(15px, rgb(0,0,0)), color-stop(0px, rgb(255,255,255)));
    background: -moz-linear-gradient(right center, rgb(255,255,255) 0px, rgb(107,107,107) 14px, rgb(0,0,0) 15px, rgb(255,255,255) 0px);
    }
    #c3{
    position: fixed;
    top: 180px;
    width: 1000px;
    margin-left:15px;
    }
    #sidebar{
    position: relative;
    width: 230px;
    float: right;
    margin-right: 15px;
    z-index: 20;
    }
    #content{
    position: relative;
    height: 100%;
    width: 1000px;
    margin-right:15px;
    padding-top:180px;
    padding-left: 15px;
    padding-right: 285px;
    padding-bottom: 20px;
    width: 700px;
    z-index: 10;
    /*border: 1px solid green;*/
    }
    .clearb{
    clear:both;
    }


    Again, thank you very much for your very useful insights and your time; very much appreciated.

  • #9
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    628
    Thanks
    51
    Thanked 67 Times in 67 Posts
    I would just take the top navigation and place it all by itself, right on top of the page with no margins. Also, put the title and the top navigation (everything on top that is fixed) and put them into a single, fixed div. Since they are both different items and there is margin/padding between them, all that margin is empty space. If you contained them in another div, there would still be the space but the containing div would keep the text from showing.
    "Yeah science!"

  • Users who have thanked djh101 for this post:

    matthieujoly (08-06-2010)

  • #10
    New Coder
    Join Date
    Aug 2010
    Posts
    10
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Everything that is fixed was already in a single div - the "c1" -, but the strange thing is that applying a background-color:white to this div do not impact its background color.

    I replaced the margin between the elements of the single div with paddings and everything is now fine.

    I managed also to put the JavaScript to work, put there is still a height problem due to the very large top padding of the "content" div.

    Anyway, I just hope that the layout of this web site is robust. Thanks again for your very appreciated time and help.
    Last edited by matthieujoly; 08-06-2010 at 05:21 PM.

  • #11
    New Coder
    Join Date
    Aug 2010
    Posts
    10
    Thanks
    6
    Thanked 0 Times in 0 Posts
    The code for the JavaScript is available under this post: http://www.codingforums.com/showthread.php?t=201739


  •  

    Posting Permissions

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