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 5 of 5

Thread: Positioning

  1. #1
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    924
    Thanks
    76
    Thanked 29 Times in 29 Posts

    Positioning

    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.

  • #2
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,812
    Thanks
    42
    Thanked 199 Times in 198 Posts
    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)

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #3
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    924
    Thanks
    76
    Thanked 29 Times in 29 Posts
    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!
    Last edited by LearningCoder; 07-17-2011 at 09:57 PM.

  • #4
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,812
    Thanks
    42
    Thanked 199 Times in 198 Posts
    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

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #5
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    924
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Ok thanks. I'll stop being vague


    HTML:
    Code:
    <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:
    Code:
    /*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;
    }
    Attached Thumbnails Attached Thumbnails Positioning-prtsrc.png  


  •  

    Posting Permissions

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