17 replies [Last post]
smirkingdude
Offline
Enthusiast
Last seen: 13 years 38 weeks ago
Timezone: GMT-4
Joined: 2007-04-07
Posts: 61
Points: 0

Hello! I'm new to both CSS & XHTML. I've went through an excellent CSS book entitled "HTML UTOPIA: Designing Without Tables Using CSS"http://www.sitepoint.com/books/css2/. Here's an incomplete website (only several webpages under construction): http://www.wordandworshipchurch.org. (All webpages were validated using W3C XHTML Validator and CSS file also was validated by W3C's Jigsaw CSS Validator).

How to ensure that the content area don't flow down past the footer area? My solution is temporary:

#main {height: 480px;} /* use height to prevent content area from flowing down past the footer area */

Please note that I've added a DIV that uses clear:both property in an attempt to prevent the content area from flowing down past the footer area. This didn't work. I leave this DIV in there for you to look at.

Here's my XHTML code for index.html file:

#main {height: 480px;} /* use height to prevent content area from flowing down past the footer area */

Word & Worship Church

  • Home

  • Welcome

  • Who We Are

  • Our Vision

  • Media / Downloads

  • Ministries

  • Calendar of Events

  • The Week Ahead

  • Guestbook

  • Links of Interest

  • Contact Us

  • Map / Directions



  • Church logo with church information
     


    here's the CSS file:

    /* CSS document*/

    body {
    margin: 30px 0 30px 0;
    padding: 0;
    text-align: center;
    min-width: 740px;
    background-color: #7a6d9b;
    color: white;
    background-image: url(images/birdbg.jpg);
    background-repeat: repeat-x;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    }

    #wrapper {
    text-align: left;
    width: 740px;
    margin-left: auto;
    margin-right: auto;
    background-color: #fdf8f2;
    color: #666666;
    padding: 10px;
    }

    #main {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    }

    #sidebar1 {
    width: 180px;
    }

    #sidebar1 .inner {
    margin: 0;
    }

    #nav {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px #7a6d9b solid;
    border-right: 1px #7a6d9b solid;
    border-left: 1px #7a6d9b solid;
    }

    #nav li {
    border-bottom: 1px #7a6d9b solid;
    padding: 0;
    font-size: 90%;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    }

    #nav li a:link, #nav li a:visited {
    padding: 0.2em 0 0.2em 10px;
    text-decoration: none;
    color: white;
    font-weight: bold;
    background: url(images/navbg1.jpg) #f7f7bb bottom left repeat-x;
    height: 2em;
    line-height: 2em;
    display: block;
    }

    #nav li a:hover {
    padding: 0.2em 0 0.2em 10px;
    text-decoration: none;
    color: black;
    font-weight: bolder;
    background: url(images/navbg2.jpg) #7a6d9b bottom left repeat-x;
    height: 2em;
    line-height: 2em;
    display: block;
    }

    #content-wrapper {
    margin: 0 0 0 190px;
    position: absolute;
    top: 0;
    right: 0;
    width: 550px;
    background-color: #f7f7bb;
    }

    #content {
    background-color: white;
    background-position: top right;
    border: 1px solid #7a6d9b;
    padding: 0;
    display: inline-block;
    }

    #content .inner {
    margin: 10px;
    }

    #content h1 {
    font-size: 120%;
    padding: 0.3em 0 0.3em 30px;
    border-top: 1px solid #7a6d9b;
    border-bottom: 1px solid #7a6d9b;
    }

    #content h2 {
    font-size: 260%;
    font-weight: normal;
    font-family: Georgia, Times, "Times New Roman", serif;
    border-bottom: 1px solid #7a6d9b;
    margin: 1em 0 0 0;
    }

    #content p {
    line-height: 1.6em;
    }

    #dateline {
    font-size: 160%;
    font-weight: normal;
    font-family: Georgia, Times, "Times New Roman", serif;
    color: #7a6d9b;
    margin: 0.3em 0 0 0;
    }

    .intro {
    font-weight: bold;
    }

    #content ul.beliefs li, #content ul.vision li {
    font-family: Verdana, "Arial", Helvetica, sans-serif;
    line-height: 2em;
    padding-bottom: 1em;
    list-style-image: url(images/bullet-cross.gif)
    }

    #clearone {
    clear: both;
    height: 1px;
    }

    #footer {
    width: 100%;
    border-top: 1px solid #7a6d9b;
    border-bottom: 1px solid #7a6d9b;
    margin-top: 10px;
    clear: both;
    }

    #footer p {
    font-size: 90%;
    color: #7a6d9b;
    margin: 0;
    padding: 0.2em 0 0.2em 0;
    }

    Your advice & tips will be appreciated! Smile

    "Imagination is more important than knowledge"
    Albert Einstein

    wolfcry911
    wolfcry911's picture
    Offline
    Guru
    MA, USA
    Last seen: 7 years 10 weeks ago
    MA, USA
    Timezone: GMT-5
    Joined: 2004-09-01
    Posts: 3224
    Points: 237

    Hello and welcome

    Hello and welcome smirkingdude!

    I wish every new member would go through the steps you did in their posts - very well done. It makes it so much easier on the members to help others when the code has been provided and validated and a link provided. Thank-you!

    The problem you face is due to the absolute positioning. AP should not be used for major layout purposes unless fully understood. It has it's place and it's a great tool when used properly, but this is not it.

    Learn to use the document flow (static positioning) and floats. Stay clear of relative positioning as well as absolute until you fully understand how they work. Simply removing the AP from the content div will allow you to use more content, which will push the footer down.

    Please post any specific questions you may have and I or others would be happy to help.

    smirkingdude
    Offline
    Enthusiast
    Last seen: 13 years 38 weeks ago
    Timezone: GMT-4
    Joined: 2007-04-07
    Posts: 61
    Points: 0

    Thanks for a quick response!

    Hi wolfcry911!

    Since #main itself is relative-positioned and contains both statically-positioned navigation menu and absolute-positioned #content-wrapper (this one contains #content), if I change the content-wrapper's position: absolute into float: right then content-wrapper ends up being placed under and right of the navigation menu. This don't look good. :-/

    As per your advice, I've taken off the content-wrapper's position: absolute and this caused the result similar as above (content-wrapper being placed under & right of the navigation menu). This also don't look good and I brought the CSS file back to "original state".

    By the way, thanks for an useful & informative link on AP!

    "Imagination is more important than knowledge"
    Albert Einstein

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 6 years 17 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    If you float both elements

    If you float both elements it will work; sidebar left and content_wrap right (no margins)

    This wouldn't have been helping matters:
    #clearone {
    clear: both;
    height: 1px;
    }

    Try not to use divs for clearing it's a redundant technique, your footer with clear:both is providing the clearing it requires to stay below either float and forces the parent element to naturally contain those floats

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    smirkingdude
    Offline
    Enthusiast
    Last seen: 13 years 38 weeks ago
    Timezone: GMT-4
    Joined: 2007-04-07
    Posts: 61
    Points: 0

    #footer in my mouth?

    Hugo,

    Your suggestion works well! I've thrown my "temporary solution" out and am no longer worrying about the content area flowing past the footer area. Smile

    I gotta give a kudo to Internet Explorer 6. It correctly shows the margin between those 2 floats & the footer area. Firefox 2.0 don't show this margin. Hmm...? :?

    Suppose if I decide to put 2 validator symbols (from W3C validators) in the footer area, how do I put them using CSS? I want them horizonally next to each other but on right side of the footer area (still make footer area looking normal).

    "Imagination is more important than knowledge"
    Albert Einstein

    wolfcry911
    wolfcry911's picture
    Offline
    Guru
    MA, USA
    Last seen: 7 years 10 weeks ago
    MA, USA
    Timezone: GMT-5
    Joined: 2004-09-01
    Posts: 3224
    Points: 237

    Please do not give kudos to

    Please do not give kudos to IE6 - ever! It's wrong! Floats are taken out of the document flow and so the footer's top margin should push it from the previous in flow element, which is #main. Now #main has no height and because it's children are floats (out of flow remember) they do not give height to it. So #main exists way up just underneath the header and the floats 'hang' out from inside it. The footer's margin never reaches #main because the floats have pushed it further down the margin value (if the margin were larger than the float height, it would work). IE incorrectly expands elements to contain floats, so in IE, #main envelopes the floats and the footer's margin works - this is wrong! There are a couple of ways to have Firefox display as you wish. First, you could make #main enclose it's floats by adding overflow: hidden; to it; or by floating #main itself. There are other methods as well (search for containing or clearing floats). Another method would be to put bottom margins on the floats rather than relying on the footer's top margin, but I personally would use the first method.

    As far as the validator symbols, just place them before the p in the footer and float them right. Smile

    smirkingdude
    Offline
    Enthusiast
    Last seen: 13 years 38 weeks ago
    Timezone: GMT-4
    Joined: 2007-04-07
    Posts: 61
    Points: 0

    #footer sure tastes good in the mouth...

    wolfcry911,

    Your following advice works:
    "First, you could make #main enclose it's floats by adding overflow: hidden; to it; or by floating #main itself."

    As I take your advice concerning validator symbols, it turns out that those validator symbols are alittle out of the place on Firefox 2.0 and kinda of in right place in Internet Explorer 6.

    Here's the XHTML code for the footer:


    Here's the CSS for the footer (look at those in BOLD):

    #footer {
    margin-top: 5px;
    width: 100%;
    border-top: 1px solid #7a6d9b;
    border-bottom: 1px solid #7a6d9b;
    clear: both;
    }

    #validsymbols li {
    display: inline;
    list-style-type: none;
    padding-right: 5px;
    float: right;
    }

    #footer p {
    font-size: 90%;
    color: #7a6d9b;
    margin: 0;
    padding: 0.2em 0 0.2em 0;
    }

    Still eating my #footer here... Suggestions or advice still welcome Smile

    "Imagination is more important than knowledge"
    Albert Einstein

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 6 years 17 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    I would perhaps try floating

    I would perhaps try floating the ul itself and just inlining the list elements.

    Please tell me you aren't using those ugly W3C yellow graphics? Smile

    And never ever ever ever ever give kudos to the heap of s**t known as the explorer of the internet, it upsets me deeply that I have to run that damn browser at all Smile

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    smirkingdude
    Offline
    Enthusiast
    Last seen: 13 years 38 weeks ago
    Timezone: GMT-4
    Joined: 2007-04-07
    Posts: 61
    Points: 0

    Hmm...

    Hugo,

    I've tried your idea of "floating the ul itself and just inlining the list elements". This has resulted in those validator symbols being above the p. This was not good.

    I've tried this idea: make #footer "position: relative" and make #validsymbols li "position: absolute". This idea only resulted in showing only one of those validator symbols in correct position. At least I'm getting somewhere close to the solution hmm? (I have brought CSS file to the state before I tried that idea.) Please take a look at this site ( http://www.wordandworshipchurch.org ) Different results shown between FF2.0 and IE 6. *sigh* :?

    By the way, without doubt, IE 6 stinks for complying with the web standards. I personally use Firefox 2.0. I use IE 6 for testing purposes as majority out there still use IE 6 and has yet to switch to IE 7.

    I'll redesign those validator symbols to match the theme of the website at another time.

    "Imagination is more important than knowledge"
    Albert Einstein

    smirkingdude
    Offline
    Enthusiast
    Last seen: 13 years 38 weeks ago
    Timezone: GMT-4
    Joined: 2007-04-07
    Posts: 61
    Points: 0

    #footer don't taste good yet. Hmm....

    one idea popped in my mind...use "overflow: hidden" for #footer to contain the floated validator symbols. It worked! (most of the credit goes to wolfcry911 who originally advised me to add "overflow: hidden" for #main to contain both floats.)

    Although IE 6 shows no extra spaces inside #footer besides those paddings from the p and #validsymbol li, there's extra spaces inside #footer in Firefox 2.0. How to remove those extra spaces from the footer (in Firefox 2.Innocent?

    Those in BOLD shows the addition(Drunk:

    #sidebar1 { float: left; width: 180px; margin-bottom: 5px; }

    #content-wrapper {
    float: right;
    top: 0;
    right: 0;
    width: 550px;
    background-color: #f7f7bb;
    margin-bottom: 5px;
    }

    #footer {
    margin: 0;
    padding: 0;
    width: 100%;
    border-top: 1px solid #7a6d9b;
    border-bottom: 1px solid #7a6d9b;
    clear: both;
    overflow: hidden;
    }

    #validsymbols li {
    display: inline;
    list-style-type: none;
    padding: 0.2em;
    float: right;
    }

    #footer p {
    font-size: 90%;
    color: #7a6d9b;
    margin: 0;
    padding: 0.2em 0 0.2em 0;
    }

    "Imagination is more important than knowledge"
    Albert Einstein

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 6 years 17 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    Quote: one idea popped in my

    Quote:

    one idea popped in my mind...use "overflow: hidden" for #footer to contain the floated validator symbols. It worked! (most of the credit goes to wolfcry911 who originally advised me to add "overflow: hidden" for #main to contain both floats.)

    Hmm, It's not the #footer in this instance that would need to contain the floated lists but the ul, which wouldn't need to if it was floated itself.

    You need to understand the mechanisms of floats and sibling elements, without floating one or other of those elements (p, ul) you are requiring two line for display, my advice was good but hey ho Smile probably the best approach is to float both ul and li items, but there are many ways to skin a cat.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    smirkingdude
    Offline
    Enthusiast
    Last seen: 13 years 38 weeks ago
    Timezone: GMT-4
    Joined: 2007-04-07
    Posts: 61
    Points: 0

    where's the info?

    Hugo,

    Since you mentioned: You need to understand the mechanisms of floats and sibling elements, where may I find this information? Please point me in right direction.

    I have tried your advice of floating both ul and li, it has shown no change and the extra space remains in Firefox 2.0.

    Hmm.. would this be the case to make #footer being position: relative and make #validsymbol ul {position: absolute; top: 0} in order to remove the extra space in Firefox 2.0?

    :-?

    "Imagination is more important than knowledge"
    Albert Einstein

    Ed Seedhouse
    Ed Seedhouse's picture
    Offline
    Guru
    Victoria British Columbia
    Last seen: 11 weeks 6 days ago
    Victoria British Columbia
    Timezone: GMT-8
    Joined: 2005-12-14
    Posts: 3570
    Points: 675

    smirkingdude wrote:Since you

    smirkingdude wrote:
    Since you mentioned: You need to understand the mechanisms of floats and sibling elements, where may I find this information? Please point me in right direction.

    Well, you might try here, or possibly here, or maybe here, or you might even go to the How To forum on this very site and take a look at the sixth thread down.

    Or you might even type "containing floats" into Google and then reading the first few hits.

    Ed Seedhouse

    Posting Guidelines

    Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

    smirkingdude
    Offline
    Enthusiast
    Last seen: 13 years 38 weeks ago
    Timezone: GMT-4
    Joined: 2007-04-07
    Posts: 61
    Points: 0

    my decision...

    After looking at http://www.freecsstemplates.org/ and http://andreasviklund.com/templates/, I decided to remove W3C validator symbols from the website for time being.

    Would any veteran CSS/XHTML web-designer(Drunk put those ugly validator symbols on their clients' website(Drunk? I have yet to see a website with those symbols. :-?

    "Imagination is more important than knowledge"
    Albert Einstein

    smirkingdude
    Offline
    Enthusiast
    Last seen: 13 years 38 weeks ago
    Timezone: GMT-4
    Joined: 2007-04-07
    Posts: 61
    Points: 0

    there is the light at end of the tunnel!

    An idea popped in mind after looking at Floatutorial's Tutorial #3 - Floating a series of "clear: right" images (http://css.maxdesign.com.au/floatutorial/tutorial0301.htm). Don't contain the pictures in a list. Just put them like this:

    then float them right ...use negative pixel # to deal with extra space (I've tried using negative em # ...this didn't work. So I used negative pixel # instead. Weird!) Here's the CSS code:

    .validsymbols { float: right; margin: -19px 0.2em 0.2em 0.2em; }

    Behold! http://www.wordandworshipchurch.org (Both FF2.0 and IE6 look exactly same in regard to validator symbols' position)

    For time being, let the world behold those ugly validator symbols and know this website has valid CSS / XHTML Smile (I'll redesign those validator symbols later). Do you have any better idea(Drunk for redesigning those symbols? Preferably small enough for everyone in general being able to read... :-?

    "Imagination is more important than knowledge"
    Albert Einstein

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 6 years 17 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    I'm afraid that you have

    I'm afraid that you have still to grasp the float basics, in this case the fact that the extra space you keep talking about is the float dropping to the following line belo the 'p'.

    floats need to come first in the src order for non floated elements to wrap around/flow behind them on the same line, if you look at that tutorial it shows that the 'p' elemen comes after the floated elements.

    No, no one would use those yellow validator badges, that's why I half jokingly mentioned it at the outset, simple styled links look better or the common small rectangular badges that one see's so often look good

    This is where they are found

    There is also a online generatorthat allows you to customise these buttons to your own tastes

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    smirkingdude
    Offline
    Enthusiast
    Last seen: 13 years 38 weeks ago
    Timezone: GMT-4
    Joined: 2007-04-07
    Posts: 61
    Points: 0

    Hugo, I've stepped outside of the tunnel!

    Hugo,

    Thanks for your advice about the float basics! Here's the XHTML code and CSS code:

    .validsymbols { float: right; margin: 0.2em; }

    Thanks again ... for the link to the site with many well-designed web badges! I've bookmarked it. Laughing out loud

    This looks fine in both FF2.0 and IE6 on my end. How's this looking on your end?

    "Imagination is more important than knowledge"
    Albert Einstein

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 6 years 17 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    Looks fine. Of course you

    Looks fine.
    Of course you could have just left the 'p' where it was in the flow floated it left and placed a text-align:right; on the #footer for the images..so many ways to skin that cat!

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me