www.webdeveloper.com
Results 1 to 7 of 7

Thread: <div><div>What is this?</div></div>

  1. #1
    Join Date
    Mar 2008
    Posts
    14

    <div><div>What is this?</div></div>

    I've seen plenty of examples of coding like my title, where the content is nested into two or more unnamed divs. Or spans, for that matter.

    I don't quite understand how that works. Can someone offer up an explanation or point me to a tutorial? Thanks much!

  2. #2
    Join Date
    Jun 2003
    Location
    here
    Posts
    4,551
    well normally it is done because IE doesn't support the before and after psudeoclasses(are they pclasses though, since they effectivly insert un-named elements into the structure, which no other pclasses do. Anyway, you don't need to bother too much about them, IE doesn't support them, so it's best not to use them, problem solved) which can be used to add elements, which is useful for things like tabs, where you want nice rounded edges, to duplicate this effect extra divs are wrapped around the element, and a different style is applied to each div, starting with the outer most div and working inwards, this works because each reference matches only certain divs:

    HTML Code:
    <div id='top'><div><div>
    some content
    </div></div></div>
    Code:
    #top{} /* applied only to outside div */
    #top div{} /* applied to both divs inside it, but */
    #top div div{} /* this is applied to only the inside child, which overrides the style of the line above */

    I can't say any more on this topic, unless you have some real code for me to comment on, the idea's there anyway.

  3. #3
    Join Date
    Mar 2008
    Posts
    14
    I thought that was the solution to my problem. It doesn't seem to be.

    I have a gradiant that's supposed to go down both the left and right sides of my page (it's a background image in the css). The page is in a div. I can get it to go down one side, but not both.

    Here's my code:

    HTML Code:
    <div id="wrapper"><div>
    <p>Content here</p>
    </div></div>
    Now the CSS:

    Code:
    #wrapper {
    background: #fff url(../images/grad-left.jpg) repeat-y;
    }
    wrapper div {
    background: #fff url(../images/grad-right.jpg) repeat-y;
    }
    Can someone steer me in the right direction here? Thanks.

  4. #4
    Join Date
    Jun 2003
    Location
    here
    Posts
    4,551
    Change your CSS, you want something more like:
    Code:
    #wrapper{
      background-color: white;
      background-image: url(../images/grad-left.jpg);
      background-repeat: repeat-y;
      background-position: left;
    }
    
    #wrapper div{
    /*  background-color: white;    -- no background colour, it would mess up things up */
      background-image: url(../images/grad-right.jpg);
      background-repeat: repeat-y;
      background-position: right;
    }

  5. #5
    Join Date
    Mar 2008
    Posts
    14
    Doing the above recommendation has put the grad-right image in every other div inside the wrapper. Needless to say, it's not working right.

    If it would help solve the problem, I can PM a link to the site we're building. Can't post it here because of confidentiality rules with the client.

    I'm sure that whatever it is I'm missing is something simple. This is one of those aspects of CSS I've never fully grasped. Help is much appreciated!

  6. #6
    Join Date
    Jun 2003
    Location
    here
    Posts
    4,551
    either give your second div an ID to differentiate it, or just remove the image for the contained children
    Code:
    #wrapper div div{
      background-image: none;
    }

  7. #7
    Join Date
    Mar 2008
    Posts
    14

    Thumbs up

    Worked perfectly.

    Thanks for your help. And for the education

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles