SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Making a <DIV> to appear under a link without shifting content...

    If I have a link, which when pressed makes a <DIV> appear, how can I get this <DIV> to appear directly under the link (that is pressed to make it appear) and for it to start at the same left-sided position where the link starts? Also, I need the content that lies underneath the link to not shift when the <DIV> appears.

    I have the following CSS and HTML, but when I press the link the <DIV> appears to the right of the Link, but I want it to appear underneath it and start from the left.

    HTML Code:
    <style>
    .offerdetails {
    	white-space: normal;
    	width: 306px;
    	text-align: left;
    	font-size: 10px;
    	background: #fff;
    	color: #000;
    	border: #c00 1px solid;
    	position: absolute;
    	z-index: 100;
    	padding: 5px;
    }
    </style>
    </head>
    <body>
    <div class="offercell">
    	<a href="" Class="OfferDetailLink" onclick="showInfo('detail2');return false;" title="view offer info">50 TEXT MESSAGES per month</a>
    		<div class="offerdetails" style="display:none" id="detail2">
    			<div class="close">
    				<a href="#" onclick="closeDetail('detail2')" title="Hide information">X</a>
    			</div>
    			50 TEXT MESSAGES - For the life of your contract you can send 50 inclusive text messages a month to any network, saving you 5 per month.
    		</div>
    </div>
    </body>
    I haven't included the Javascript that sets the offerdetails <DIV> style's display to block or none when the link is clicked.

    I hope this is suficient enough information for you all

    Tryst

  2. #2
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, I seem to have sort the height problem by setting the following CSS

    margin: 2em 0 0 0;

    This now forces a top margin which now pushes the <DIV> under the link.

    Just need to get it to start at the left side of the link now, no matter where the link is.

    Tryst

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    If you set the <a> to have a block-level display, the div will have no choice but to flow underneath it.

  4. #4
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Vgarcia - nice one, thats solved it

    Tryst

  5. #5
    I'm in your computer! Halo-13's Avatar
    Join Date
    Jun 2004
    Location
    Minneapolis, MN
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Would something like this work for a <ul> to hide some links under another unless it is clicked? I think it would be a good way for navigation on a new site im doing.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Have a look here for some useful techniques.

    http://www.gazingus.org/html/Using_L...TML_Menus.html

    Paul

  7. #7
    I'm in your computer! Halo-13's Avatar
    Join Date
    Jun 2004
    Location
    Minneapolis, MN
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect, Just what I was looking for! Thanks Paul!


Bookmarks

Posting Permissions

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