• Welcome to The Cave of Dragonflies forums, where the smallest bugs live alongside the strongest dragons.

    Guests are not able to post messages or even read certain areas of the forums. Now, that's boring, don't you think? Registration, on the other hand, is simple, completely free of charge, and does not require you to give out any personal information at all. As soon as you register, you can take part in some of the happy fun things at the forums such as posting messages, voting in polls, sending private messages to people and being told that this is where we drink tea and eat cod.

    Of course I'm not forcing you to do anything if you don't want to, but seriously, what have you got to lose? Five seconds of your life?

Positioning one menu underneath the other

Sandstone-Shadow

A chickadee in love with the sky
Pronoun
she/her
So, I'm coding a layout, and I want the right menu to appear right underneath the left menu. But I'm not sure how to code it so it appears that way... I've experimented with setting it to position:absolute; and position:relative; but neither works how I want it to, and I'm not very confident with those tags anyway. Could anyone help me?

This is the page; choose Sandstorm style on the top of the left menu (please ignore the mismatched colors and images) and this is the stylesheet.

I feel like this question's been asked before, but I couldn't find it, so sorry if there's already a thread like this. xD; Thanks in advance!
 
Have you tried changing the position of the menu from the top by 350px?

Code:
#rightmenu {
position:absolute; 
left:auto; 
margin-right:0px; 
right:5px; 
top:350px; 
width:638px; 
padding:5px; 
text-align:center; 
background-color:#c2b2cd; 
border:1px solid #b59abe;
}

That should work in all resolutions, since it's being changed according to the left menu. Unless you don't want to change the position from the top, then I don't know what to do. (Don't ask how I got the number.)
 
I don't want to set it down from the top a specific number of pixels, though; then if I add or remove things from the left menu, I'll have to go back and change that number to get it to look the same. I'd rather set it so that it's always, let's say, 5 pixels below the end of the left menu. =/
 
Sorry to bump this, but could anyone help me with this problem? I still haven't been able to figure it out.
 
The best way to do this would be to absolutely position the content but not the menus. Provided the left menu comes before the right menu in the source, the menus will then simply stack while the content goes where you want it.
 
Okay, that's working, thanks! ^^

There's a few other issues now though... first of all, the disclaimer now isn't appearing after the content. The disclaimer, in the source, comes right after the content and before the menus.

Also, the last few links don't seem to be included in the menu... look at the bottom of the right menu; the links are all hanging out the bottom. Why is this happening, and how can I fix it? The same thing is happening in the left menu; the right menu's overlapping what's hanging out.
 
I'm not sure I understand the question, and it looks like you've got it working from the link, but have you tried using z-index? You can use it to make sure on element is on top of the other. I'm not exactly sure how well it works though.

Code:
#main{
position:absolute;
left:10px;
top:10px;
z-index:2;
}

The bigger the z-index, the higher up I believe. Hope that helps. =/
 
I made the disclaimer a different color so it's easier to see; it should be at the end of the content, not sitting on top of it.

And with the menus, I want the last few links to be inside the border of the menu, but for some reason they're not...

Hmm. I've never tried using z-index before, but it sounds like that just has to do with, if two things overlap, which one shows up on top, right? My goal is to make it so nothing overlaps... xD; Thanks though! =)

Edit: Ugh, okay, I fixed the "links hanging out" part by adding overflow:auto; to the left and right menu, but (and this wasn't new, I just now noticed it) the header for the "Thank You" section won't show up. It should be right underneath the list of affiliates and right above the "Hosted By". x.x
 
Last edited:
Back
Top Bottom