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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    May 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Centering / floating / general help

    I posted this earlier today in another forum here, but then I thought this forum would be more appropriate. No responses yet in the other forum.

    I paid someone a bunch of money to do my wife's at-home business (jewelry) website and I think the results are disappointing. So, instead I am learning html and css and designing it myself.

    First, I know how I want the site to look like. The home page will be a vertically and horizontally centered box taking up a portion of the screen. An example of what I'm trying to achieve is this website (www.mkpeace.com).

    I am trying to achieve the same type of white border around the different segments like at the above website.

    As you can see with my code posted below, I have floated a left box underneath the headers. I have not created a box to go on the right of the left box yet. Although the right frame will have some images in it on the home page, the interior pages will have an iframe.

    I am basically looking for the best way to go about this, any advice is much appreciated. . . . and remember, you are talking to an inexperienced person.

    Also, here are some random questions:

    1. Should I size things according to percentages or another way?
    2. Why do so many people size things in terms of "em" as opposed to px or percentages.
    3. How do I size the left box so that it comes down to the footer? Why did it not do so when I sized its height as 100%?
    4. Why is there a thin blue line below the footer?
    5. Is it true that you can never color margins specifically, but instead it will reflect the background color of its parent container?


    here is my code so far:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
    <html>
    <head>
    <meta name="GENERATOR" content="PageBreeze Free HTML Editor (http://www.pagebreeze.com)">
    <title>TestA</title>
    <style type="text/css">

    .centerelement {
    position : absolute;
    width : 70%;
    height : 60%;
    left : 15%;
    top : 20%;
    border:10px solid gray;
    border-color: #fff
    }

    div.header {
    padding:0.5em;
    color:red;
    background-color:#F6F6CC;
    clear:left;
    }

    div.headerA {
    padding:0.5em;
    color:white;
    background-color: #cccc99;
    clear:left;
    }

    div.left
    {
    float:left;
    width:25%;
    margin:0;
    border-style: solid;
    border-top-width: .5em;
    border-right-width: .5em;
    border-bottom-width: .5em;
    border-left-width: 0;
    border-color: #ffffff #ffffff #ffffff
    padding:1em;
    background-color: #ccffff
    }

    div.footer
    {
    position: absolute;
    bottom: 0px;
    width: 100%;
    padding:0.5em;
    color:red;
    background-color:#F6F6CC;
    clear: left
    }

    </head>
    </style>
    <body bgcolor="#6666cc">
    <div class="centerelement">
    <div class="header">THIS IS HEADER</div>
    <div class="headerA">THIS IS HEADER A</div>
    <div class="left">This section will contain various claims and benefits to shoppers, such as referral and other items</div>

    <div class="footer">THIS IS FOOTER</div>

    </div>
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    1. Should I size things according to percentages or another way?

    if you use percentages, if the user collapses thier browser your page will collapse with it. Seeing as you want to use an Iframe that's probally a bad thing. You may end up with a lot of unwanted scroll bars in it. Easiest way is to use a fixed width. That way your divs saty the same size all the time and after you go about putting in images it makes things a lot easier.

    2. Why do so many people size things in terms of "em" as opposed to px or percentages.

    I think most browsers seem to read ems closer to the same. px seem to vary by browser. most noticeably in font sizes.

    3. How do I size the left box so that it comes down to the footer? Why did it not do so when I sized its height as 100%?

    If you give it a height of 100% it's still dependant on the content in it. If there isn't enough content to fill it it only expands as far as it needs to to enclose 100% of the content.

    If you use a fixed size rather than a % you can just tell it how big to be.

    4. Why is there a thin blue line below the footer?

    That's the background of the page showing through since the footer didn't go all the way to the bottom.

    5. Is it true that you can never color margins specifically, but instead it will reflect the background color of its parent container?

    true. borders you can color. Padding and Margins or "virtual" spaces inside and outside of an element.

    here's a fized layout that might be useful in what your trying to do.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>TestA</title>
    <style type="text/css">
    body {
    background: #66c;
    }
    body, html { height: 95% ;text-align: center; overflow-x: hidden;}
    html > body {
    height: 102%;
    }
    #outer { margin: auto auto; position: relative; }
    #outer[id] {display: table; position: static; height: 100%;}
    #middle {position: absolute; top: 50%;} 
    #middle[id] {display: table-cell; vertical-align: middle; position: static;}
    #inner {position: relative; top: -50%; left: -50%} 
    #inner[id] {position: static;} 
    #box {background: #fff; position: relative; width: 760px; height: 460px; text-align: left; 
    border: 4px solid #fff; }
    div.header {
    color:red;
    background-color:#F6F6CC;
    height: 36px;
    display: block;
    line-height: 36px;
    text-indent: 10px;
    }
    div.headerA {
    color:white;
    background-color: #cccc99;
    height: 36px;
    display: block;
    line-height: 36px;
    text-indent: 10px;
    }
    div.left
    {
    float:left;
    width: 180px;
    height: 346px;
    border-top: #fff 4px solid;
    border-right: #fff 4px solid;
    border-bottom: #fff 4px solid;
    border-left: none;
    background-color: #cff;
    }
    #content {
    width: 576px;
    background: #ccc;
    height: 346px;
    float: left;
    border-top: 4px solid #fff;
    }
    div.footer
    {
    clear: left;
    color:red;
    background-color:#F6F6CC;
    height: 36px;
    display: block;
    line-height: 36px;
    text-indent: 10px;
    }
    p {
    padding: 6px;
    margin: 0;
    }
    </style>
    </head>
      <body>
       <div id="outer">
        <div id="middle">
         <div id="inner">
          <div id="box">
    <div class="header">This is Header</div>
    <div class="headerA">This is Header A</div>
    <div class="left"><p>This section will contain various claims and benefits to shoppers, such 
    
    as referral and other items</p></div>
    <div id="content"></div>
    <div class="footer">This is a Footer</div>
          </div>
         </div>
        </div>
      </div>
     </body>
    </html>
    One thing before I try and explain a few things. Your layout looks awfully similar to the one at the link you gave. I would try and make it more "yours".

    If you notice I turned off all the padding on the main elements (2 top headers, left box, content, footer) since it's all fixed in size if you give padding to these elements it's added to their width and/or height therefore it will knock things out of whack.

    You'll see a <p> in your left box. That I gave padding to. since it sits inside the left box it's max size is contained within it's parent left box div so it won't throw off the size of it.

    Hopefully some of this will help you on your way to understanding a little more about this stuff. There is some fancy css going on in my code that you might not get but if you play around with it a little I'm sure you'll figure out why things do what they do.

    good luck.

    http://www.htmldog.com

  • #3
    New to the CF scene
    Join Date
    May 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Awesome

    Yeah, that's exactly what I wanted for the home page. my thoughts were that the interior pages would have the iframe in the right box and the main box that has all the content would be a little bigger.

    I tried to figure out the meaning of your code, but it is beyond me. Couple questions:

    Is this code that is recognized by most browsers?
    How did you go about calculating the dimensions of the various boxes, e.g., (a) the height and line-height in the headers and footer, and (b) the height and width of div.left and #content.

    Let me try to digest what your code means and see if I can figure out how to insert iframes.

    One last question, in your reply you said that if I did not have fixed dimensions there would be multiple scroll bars. What you are saying is that if dimensions are fixed, the viewer cannot collapse his screen to a size smaller than my fixed dimensions? Thanks a million.

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    -my thoughts were that the interior pages would have the iframe in the right box and the main box that has all the content would be a little bigger.

    Shouldn't be a problem. Right now it should sit centered in anything from 800x600 up. If you make the #box any wider it might slide off an 800x600 screen. If you go taller you could probally go to 570px or so w/o any problems. If you expand the #box height you'll need to expand the .left and #content divs. Just how many pixels you add to the height of the #box, add that to both of the other divs and it should fall into place.


    -Is this code that is recognized by most browsers?

    Should be. I only tested it in IE6 and FF/Moz but I don't "think" thiers anything conflicting. But IeMac always throws me a curve that I don't expect.

    How did you go about calculating the dimensions of the various boxes, e.g., -(a) the height and line-height in the headers and footer

    I just eye balled it by your original code. It looked the same so I went with it. As for the line-height, it will have to be changed if you change the font-size of the headers eg. larger font-size, smaller line-height.

    (b) the height and width of div.left and #content.

    Once again I eyeballed the .left width to what you had. Since it floats and the footer clears the floats so it always sits below the footer, I just just kept adding to the height until it was tall enough to push the footer down into place.

    The content was basically the same way. Once the .left was in place it was just a matter of expanding the #content little by little until it all lined up.


    -One last question, in your reply you said that if I did not have fixed dimensions there would be multiple scroll bars. What you are saying is that if dimensions are fixed, the viewer cannot collapse his screen to a size smaller than my fixed dimensions?

    on the whole page the viewer can collapse thier browser window. If you have a fixed-width layout, your box will not collapse thus maintaining the layout within it.

    When you put in an Iframe, most people want one that scrolls vertically but not horizontally. There are posts about this all over CF. I just used my foresight and thought you might end up wanting that as well. As a viewer having both horizontal and vertical scrolls on a small iframe is real annoying.

    If you have a % based layout , as the user collapses thier browser, the percentages take over and the #box and everything in it will collapse % wise. The Iframe will then develop horizontal scroll bars and the frame will become to small to even look at.

    Just to touch on the vertical scroll bar only Iframe (when you get there). lets say you have an Iframe say 500px x 400px. If the pages you have loading into it are taller than the Iframe itself a vertical scroll bar will appear. No sweat. A lot of people don't want the horizontal scrollbar though. If the page loading into it is wider than the 500px wide Iframe it happens though. A way to avoid the horizontal scroll is to make the pages that load into it 20px thinneer than the Iframe itsself (500px iframe loads a 480px page with no h-scroll). That makes up for the amount of space that the v-scroll bar takes up. On a page loaded into the Iframe that isn't tall enough to fill the iframe causing a v-scroll it won't be exactly centered as it will be 20px off, but thats not enough to throw off the look to much. And if you add more content to the loaded page it wuill just get taller and the v-scroll will appear, but not the unwanted h-scroll since the 20px buffer was given to allow for the added v-scroll.

    Make sense? it's early.

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cross-post

    I posted this earlier today in another forum here, but then I thought this forum would be more appropriate
    This is considered cross-posting and is discouraged per the forum Rules.

    Please, in the future do not post the same thread in more then one forum; if you can't decide which one is most appropriate, wait for a moderator to move it.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #6
    New to the CF scene
    Join Date
    May 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    iframe

    I tried to add an iframe to the #content portion of the page. here is the relevant code I added in the body:

    *****

    <body>
    <div id="outer">
    <div id="middle">
    <div id="inner">
    <div id="box">
    <div class="header">This is Header</div>
    <div class="headerA">This is Header A</div>
    <div class="left"><p>This section will contain various claims and benefits to shoppers, such
    as referral and other items</p></div>
    <div id="content">
    <iframe src="content.html" frameborder="0"
    scrolling="auto">
    </iframe>

    </div>
    <div class="footer">This is a Footer</div>
    </div>
    </div>
    </div>
    </div>
    </body>

    *****

    However, the content.html only seems to span about half of the width of the #content box. I tried messing with the size of the #content box but all hell broke loose. Why does content.html not fill up the entire box?

    David


  •  

    Posting Permissions

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