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 12 of 12
  1. #1
    New Coder
    Join Date
    Apr 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help Positioning Boxes?

    Hello all,

    I'm working on the website for my AFROTC detachment's Arnold Air squadron, and I'm trying to align the two menu boxes, and the content box inside of a container, but I can't them to align properly. I'm trying to get the menu box with the blue background to be located the LEFT of the Main Content box, and the menu box with the orange background to be located to the RIGHT of the Menu Content box. The link to what I have done so far can be seen at

    JDRS Website Main Page

    For the time being, the site is being hosted on Angelfire because we haven't secured webspace from our university, but as soon as we do, it willl be relocated. Also, the CSS file that I'm working with is

    Stylesheet for the Site

    Once again, if anybody can help out, it'd be greatly appreciated. Thanks people.

    ~ c4xL
    Last edited by cloud4xL; 05-08-2007 at 03:34 AM.

  • #2
    New Coder
    Join Date
    Apr 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Aaaaaaaaaaaaanybody????

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

    3 columns, fluid

    Maybe you could use the information presented here: BonRouge's Three columns with a header and a footer (fluid).
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #4
    New Coder
    Join Date
    May 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Disclaimer::
    < Is a cluless n00b

    I was just wrestling with something similarish, try pasting your <DIV CLASS="container"> tag in again just above the html for your right column, it may've forgotten about it..

    I just gave your problem a quick once over, coz I don't really have a clue, so I haven't tested it for you, it may not be your problem, but if it does work, it narrows the issue down a lot.

  • #5
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    You need to float your .leftcolumn to the left. You have already floated your .rightcolumn to the right so that's fine. But your .content which is non-floated and comprises the center column will have to go after .leftcolumn and .rightcolumn in the source. Otherwise the floats will be pushed down beneath .content.

    Edit: beaten by ronaldb66 and Lollygag. The layout in ronaldb66's link uses a similar technique as what is described above.

    Are you aware that you don't have a doctype declaration? If you don't know that this may cause a different rendering start here: Quirks mode and strict mode. For example, your left and right column become slightly narrower in IE than in Firefox!

    This one may be the right one for you:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/REC-html40/loose.dtd">

  • #6
    New Coder
    Join Date
    Apr 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Awesome. That definitely helped out Koyama. I have the columns arranged the way I want now, but now, there's a new problem: The left and right columns aren't inside of the <DIV CLASS="container"> anymore. How do I get those to sit inside of the entire container? This CSS coding stuff is a lot harder than I figured it would be....

    - EDIT -

    To Lollygag: I thought you could only call DIV CLASS elements once? I'll try it anyway though. Thanks man.

    To ronaldb66: I see what you mean. That CSS layout is similar to the one I'm trying to do, the only thing is I'm trying to have my entire site contained in that dashed container instead of filling the entire site. But thanks anyway man.
    Last edited by cloud4xL; 05-08-2007 at 01:58 PM.

  • #7
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by cloud4xL View Post
    How do I get those to sit inside of the entire container?
    #container will not by default expand to contain its floats. To solve this you can use overflow: hidden for #conatiner.

    This works in standards compliant browsers. It works in IE7, but not in IE6. For IE6 to render correctly one may exploit a bug that has the effect that an element that hasLayout automatically will expand to contain its floats. To neutrally trigger hasLayout you can use the proprietary zoom property and set: zoom: 1. Combining the styles one arrives at this:
    Code:
    #container {
      overflow: hidden;
      zoom: 1;
    }

  • #8
    New Coder
    Join Date
    Apr 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    SUCCESS!!! LoL Gracias Koyama. You are frickin awesome buddy. I NEVER would've figured to do that. Everything looks the way I wanted it to now. Thanks to everybody else for their help too. Laterz people.

  • #9
    New Coder
    Join Date
    Apr 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, I was gonna start a new thread for this new road-block that I've encountered on my site, but I figured that'd be a waste, so I figured it'd just be a easier to post it here in this thread (after all, I did say I'd probably be back. ). So anyways, my new problem is that I've defined the style that I want all my font and links to be in my CSS file, but for some reason, they aren't displayed the way I've styled them. Can aaaaaaaaaaanybody help me with this? I've tried numerous things to get them to look right, but the only method that's worked so far is throwing in <FONT> tags all over the .html document, and that just defeats the whole purpose of having CSS to use in the first place. Soooooo, if anybody can help me out with this, I'd reeeeeeeeeally appreciate it.

  • #10
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by cloud4xL View Post
    So anyways, my new problem is that I've defined the style that I want all my font and links to be in my CSS file, but for some reason, they aren't displayed the way I've styled them.
    Here are the relevant parts from your code (shortened):
    Code:
    a.class1 A:link {
    [...]
    }
    a.class1 A:visited {
    [...]
    }
    a.class1 A:active {
    [...]
    }
    a.class1 A:hover {
    [...]
    }
    Code:
    <SPAN ID="class1">
    <DIV ID="nav1">
    <FONT FACE="verdana" COLOR="white" SIZE="1px">
    <B>
    <CENTER>
    | Main Information |
    </CENTER>
    </b>
    </FONT>
    </DIV>
    <UL CLASS="orangesquare">
    <LI><A HREF="main.html">Main Page</A></LI>
    <LI><A HREF="main.html">Contact Us</A></LI>
    <LI><A HREF="main.html">PA's Corner</A></LI>
    <LI><A HREF="main.html">Squadron Calendar</A></LI>
    <LI><A HREF="main.html">Frequently Asked Questions</A></LI>
    <LI><A HREF="main.html">Forums (Under Construction)</A></LI>
    
    </UL>
    
    
    <DIV ID="nav1">
    <FONT FACE="verdana" COLOR="white" SIZE="1px">
    <B>
    <CENTER>
    | About Our Squadron |
    </CENTER>
    </b>
    </FONT>
    </DIV>
    <UL CLASS="orangesquare">
    <LI><A HREF="main.html">History of the JDRS</A></LI>
    <LI><A HREF="main.html">JDRS Motto</A></LI>
    
    <LI><A HREF="main.html">JDRS Mission Statement</A></LI>
    <LI><A HREF="main.html">Current Officers</A></LI>
    <LI><A HREF="main.html">Active Members</A></LI>
    <LI><A HREF="main.html">About Our Detachment</A></LI>
    </UL>
    
    <DIV ID="nav1">
    <FONT FACE="verdana" COLOR="white" SIZE="1px">
    <B>
    <CENTER>
    | Multimedia |
    </CENTER>
    </b>
    
    </FONT>
    </DIV>
    
    <UL CLASS="orangesquare">
    <LI><A HREF="main.html">Squadron Pictures</A></LI>
    <LI><A HREF="main.html">Squadron Movies</A></LI>
    <LI><A HREF="main.html">Air Force Jodies</A></LI>
    <LI><A HREF="main.html">The Air Force Song</A></LI>
    </UL>
    
    <DIV ID="nav1">
    <FONT FACE="verdana" COLOR="white" SIZE="1px">
    <B>
    
    <CENTER>
    | Important Documents |
    </CENTER>
    </b>
    </FONT>
    </DIV>
    
    <UL CLASS="orangesquare">
    <LI><A HREF="main.html">AASMAN-1</A></LI>
    <LI><A HREF="main.html">AASMAN-3</A></LI>
    <LI><A HREF="main.html">Joint Protocol Manual</A></LI>
    <LI><A HREF="main.html">AAS/SW Liason Handbook</A></LI>
    <LI><A HREF="main.html">Robert's Rules of Order</A></LI>
    
    <LI><A HREF="main.html">AAS/AFA Membership Form</A></LI>
    </UL>
    </SPAN>
    You aren't selecting any elements with that CSS because there are no a-elements having class="class1". However, there is a span element with that classname.

    What you meant was rather something like this:
    Code:
    span.class1 A:link {
    [...]
    }
    With that said, you are not allowed to nest a div element within a span element. Use the validator to find more of such errors. You should probably change that span to a div.

  • #11
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Quote Originally Posted by koyama View Post
    #container will not by default expand to contain its floats. To solve this you can use overflow: hidden for #conatiner.

    This works in standards compliant browsers. It works in IE7, but not in IE6. For IE6 to render correctly one may exploit a bug that has the effect that an element that hasLayout automatically will expand to contain its floats. To neutrally trigger hasLayout you can use the proprietary zoom property and set: zoom: 1. Combining the styles one arrives at this:
    Code:
    #container {
      overflow: hidden;
      zoom: 1;
    }
    Hmmm... I use IE6 for testing purposes and simply close my container divs with overflow: hidden; and have never encountered a problem with it not working? I hadn't even heard of this bug until you mentioned it then?
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #12
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by ahallicks View Post
    Hmmm... I use IE6 for testing purposes and simply close my container divs with overflow: hidden; and have never encountered a problem with it not working? I hadn't even heard of this bug until you mentioned it then?
    overflow: hidden has no effect in IE6 when it comes to float containment. Basta!

    On the other hand, in IE, whenever an explicit width is specified for a container, floats within are automatically contained even when the container has overflow: visible. (The floats should really stick out).

    The careful studies of IE have offered a better explanation for this wrong behavior. And the answer lies outside CSS but rather within Explorers proprietary hasLayout property. (The value of this property for an element may be examined through JavaScript). Triggering hasLayout is enough to ensure containment of floats. This can be done for example by giving the container an explicit width. According to CSS this should have no effect on float containment. This is a bug that persists in IE7, so in this case, the real problem with IE is how to avoid float containment and instead get correct rendering.

    Suddenly, understanding this hasLayout property becomes important. Especially one must know what it takes to trigger or not trigger hasLayout. There are several ways of triggering hasLayout, for example it suffices to assign a width or height other than auto. A list may be found in the link that I posted above. It includes the proprietary zoom property for values other than normal.

    When you haven't noticed that overflow: hidden doesn't ensure float containment in IE6 this is probably because you have triggered hasLayout in some other way. Usually by giving the container an explicit width. Next time try to remove overflow: hidden and you will see that floats are still contained in IE6 and IE7, but no longer in Firefox or Opera.

    The problem arises in liquid layouts where you want the container to occupy the full width. How to you then ensure float containment in IE6 where overflow: hidden isn't working? If the container has no border and no padding then you can use width: 100% because this would be equivalent to width: auto. If it has border or padding this is not the case. It is here that the zoom: 1 hasLayout-switch comes as the saviour.


  •  

    Posting Permissions

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