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 6 of 6
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    53
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Exclamation [css positioning]Absolute v. Relative issue

    I'm having a problem on my homepage with positioning divs. As you can see I'm trying to nest a headline and excerpt within a div overtop another div contained within the same parent div. For some reason it's putting all content that follows up under it - as if height isn't being calculated.

    please help! thank you!

  • #2
    New Coder
    Join Date
    Mar 2012
    Posts
    53
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Seems as now - as i'm playing w/ the CSS - that the content is displaying properly within the div but is not following inline w/ the flow of the content as it should and is placing itself overtop of my image rotator.

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by andwfara1 View Post
    For some reason it's putting all content that follows up under it - as if height isn't being calculated.
    The headline is absolutely positioned and therefore its position doesn't affect surrounding content. Since your .spotlight-content has a dynamic, content-based height, positioning isn't going to work here.

    You can use table layout to achieve what you need:
    Code:
    .spotlight { display: table; }
    .spotlight-image { display: table-row-group /* or display: table-row */; }
    .spotlight-content { display: table-caption; /* default: caption-side: top */ }
    That or an XSLT style sheet to reorder the content.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    New Coder
    Join Date
    Mar 2012
    Posts
    53
    Thanks
    14
    Thanked 0 Times in 0 Posts
    That kind of worked - but it's not giving me the desired results i'm looking for in this image -

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by andwfara1 View Post
    That kind of worked - but it's not giving me the desired results i'm looking for in this image
    Easy enough if you can change the markup:

    Code:
    <!doctype html>
    <html lang="en">
    	<head>
    		<title>Demo for CodingForums.com Thread 301871: [css positioning]Absolute v. Relative issue</title>
    		<style>
    			section * { color: white; }
    			section { padding: 0; width: 660px; }
    			section > a { display: block; position: relative; }
    			section h1 { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 0.5rem; background-color: hsla(0, 0%, 0%, 0.7); }
    			section img { display: block; background-color: black; }
    			section p { margin: 0; padding: 0.5rem; background-color: hsla(0, 0%, 40%, 0.9); }
    		</style>
    	</head>
    	<body>
    		<section>
    			<a href="/.">
    				<h1>Has <cite>Grand Theft Auto V</cite> grown up?</h1>
    				<img alt="Grand Theft Auto V Artwork" width="660" height="371" src="http://webbetasite.com/hottstocks/wp-content/uploads/2013/09/10.jpg"/>
    			</a>
    			<p>In 1997, a game was released that sent shockwaves throughout the world. 17 years later, it’s here to shock us again—or maybe not? On Tuesday, Rockstar Games will release <cite>Grand Theft Auto V</cite>, the 15th installment of the one of the most controversial series of all‐time. Yet there are indications that it… <a href="http://webbetasite.com/hottstocks/has-grand-theft-auto-v-grown-up/">Read More</a></p>
    		</section>
    	</body>
    </html>
    Live Version: https://patrick.dark.name/web.dev/demos/css.layout.1/
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    andwfara1 (09-18-2013)

  • #6
    New Coder
    Join Date
    Mar 2012
    Posts
    53
    Thanks
    14
    Thanked 0 Times in 0 Posts
    THANK YOU SIR! That worked out great!


  •  

    Posting Permissions

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