SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Location
    Australia
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Applying a background to an unamed parent div, but not the child

    I am using the code below to add rounded corners to my page.

    However, when I place <div>s inside of this section the bottom-left.jpg displays as the background for all subsequent (child) divs.

    I know that I could name all 4 of the <div>s. E.g. <div class="grouping1"><div class="grouping2">...
    however this seems unneccesary. Am I missing something, or is naming each <div> the correct method?

    Code CSS:
    .grouping {
     	background: #F2F2F2 url(../images/corner_top_left.jpg)	top left no-repeat;
    }
     
    .grouping div {
     	/*this value will be inherited by all spans inside this*/
     	display: block; 
     	background: url(../images/corner_top_right.jpg) top right no-repeat;
    }
     
    .grouping div div {
     	background: url(../images/corner_bottom_right.jpg) bottom right no-repeat;
    }
     
    .grouping div div div {
     	background: url(../images/corner_bottom_left.jpg) bottom left no-repeat;
    }
     
    /*Rest of code only needed to make this work in IE*/
    .grouping div div div  {
     	height: 0; 
    }
    .grouping div div > div  {
     	height: auto;
    }

    HTML Code:
    <div id="overview" class="grouping"><div><div><div>
    	<div id="map1">
    		<img src="../images/placeholder1.jpg" alt="" />
    	</div>
    	<div id="title">
    		<span>Routeburn Track - Day 1</span>
    	</div>
    	<div id="description">
    		<p>	Intentions: Routeburn Shelter to Routeburn Flats Hut<br />
    			Date:	Sat. 13th December, 2008<br />
    			Time:	3hrs<br />
    			Pack:	22kg (approx)<br />
    			Weather:	Clear skies<br />
    		</p>
    		<p>	Travellers:	Bill, Cassie</p>
    	</div>
    	<div id="map2">
    			<img src="../images/placeholder2.jpg" alt="" />
    	</div>
    </div></div></div></div>

  2. #2
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can target a specific child div by saying for instance

    Code CSS:
    .grouping > div {
        background: none;
    }

    This would only target the direct child of .grouping.

    I think if you cleaned your code up and removed the unnecessary divs it'd be alot easier to help you as currently I have no Idea what any of those 3 divs within grouping actually do.

    This looks like a bad case of divitus!

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Location
    Australia
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, you are right, the only purpose of the <div>s is to allow me to have dynamically sized boxes with rounded corners.

    I have taken the code from:
    http://www.htmldog.com/examples/images3_3.html

    which actually usually <span>s instead of <div>s, but I am using mine for block content.


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
  •