...

View Full Version : Positioning



LearningCoder
07-17-2011, 12:32 PM
When you have positioned and image 'absolutely' on your page, how can you make the next element on the page display underneath this, without using multiple break tags?

I've been searching google but I cannot find the answer!

Thanks all.

alykins
07-17-2011, 05:17 PM
you need to make it have an offset of whatever the prior element is... so if i have block A and block B and A is 100px tall, i need to give block B top:100px; ... the position absolute makes it not follow normal flow (ie makes it not fall in place one after the other)

LearningCoder
07-17-2011, 09:54 PM
Ah I have done this for my menu. I have 3 images stacked on top of each other which are 164px in height. I set my menu to have an offset of top: 164px;, which puts the menu underneath the images. I want to start adding content but I don't like the idea of using multiple break tags in my code, so would I have to give everything an offset to achieve positioning without using breaktags?

Maybe to put it easier, once we've used absolute positioning, what is the easiest way to get back to the 'normal flow'. xD

Thanks again!:thumbsup:

alykins
07-17-2011, 10:00 PM
hmmm... do you have a link? or can you post a paint pic of what you want it to do? if you have you menu and then (I assume) your :hovers make <li>'s appear (that are positioned absolute) you shouldn't have issues... i guess what i'm driving at is- i was able to answer ur original Q w/out any extra code/info but to address this issue it would be easier (probably) if had more direction

LearningCoder
07-17-2011, 10:24 PM
Ok thanks. I'll stop being vague :p


HTML:



<body>
<img src="images/logo.png" id="logo" alt="logo" width="1024" height="164" usemap="#NavMap" border="none" />
<img src="images/monkeyright.png" id="monkeyright" alt="monkeyright" width="1024" height="164" border="none" />
<img src="images/monkeyleft.png" id="monkeyleft" alt="monkeyleft" width="1024" height="164" border="none" />

<map name="NavMap" />
<area shape="rect" coords="552,56,624,152" alt="monkey" id="coords" href="#" />
</map>








<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Members</a>
<ul>
<li><a href="#">Monkee</a></li>
<li><a href="#">Mr. Pink</a></li>
<li><a href="#">Bobo</a></li>
<li><a href="#">Valex</a></li>
</ul>
</li>
<li><a href="#">Forums</a></li>
<li><a href="#">Help</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.dynamicdrive.com/style/">Links</a></li>
</ul>
<br style="clear: left" />
</div>



CSS:



/*The 3 IMAGES*/

#logo {position: absolute;
left: 0px;
top: 0px;
z-index: 1;}

#monkeyright {position: absolute;
top: 0px;
left: 0px;}

#monkeyleft {position: absolute;
top: 0px;
left: 0px;}

/*End of 3 IMAGES*/

/*MENU CSS*/

.jqueryslidemenu{
font: bold 12px Verdana;
background: #414141;
width: 100%;
position: absolute;
top: 164px;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum