...

View Full Version : Help Positioning Boxes?



cloud4xL
05-08-2007, 02:30 AM
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 (http://www.angelfire.com/blog/jdrs/main.html)

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 (http://www.angelfire.com/blog/jdrs/style.css)

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

~ c4xL

cloud4xL
05-08-2007, 08:28 AM
Aaaaaaaaaaaaanybody????

ronaldb66
05-08-2007, 10:12 AM
Maybe you could use the information presented here: BonRouge's Three columns with a header and a footer (http://bonrouge.com/3c-hf-fluid.php) (fluid).

Lollygag
05-08-2007, 10:13 AM
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.

koyama
05-08-2007, 10:28 AM
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.

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 (http://www.quirksmode.org/css/quirksmode.html). For example, your left and right column become slightly narrower in IE than in Firefox!

This one may be the right one for you:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">

cloud4xL
05-08-2007, 12:54 PM
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? :confused: 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.

koyama
05-08-2007, 01:49 PM
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 (http://www.quirksmode.org/css/clearing.html) 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 (http://www.satzansatz.de/cssd/onhavinglayout.html) 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:


#container {
overflow: hidden;
zoom: 1;
}

cloud4xL
05-08-2007, 10:44 PM
SUCCESS!!! LoL Gracias Koyama. You are frickin awesome buddy. :thumbsup: 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. :D Laterz people. :D

cloud4xL
05-09-2007, 02:38 AM
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. :thumbsup: ). 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. :mad: Soooooo, if anybody can help me out with this, I'd reeeeeeeeeally appreciate it. :D

koyama
05-09-2007, 01:28 PM
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):


a.class1 A:link {
[...]
}
a.class1 A:visited {
[...]
}
a.class1 A:active {
[...]
}
a.class1 A:hover {
[...]
}


<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:


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.

ahallicks
05-09-2007, 01:39 PM
#container will not by default expand to contain its floats. To solve this you can use overflow: hidden (http://www.quirksmode.org/css/clearing.html) 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 (http://www.satzansatz.de/cssd/onhavinglayout.html) 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:


#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?

koyama
05-09-2007, 02:49 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum