#1
  1. Big Daddy
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Sep 2003
    Location
    Boston
    Posts
    1,473
    Rep Power
    37

    Adding some boxes through div's and css


    Hi all,

    I found a cool css template on the web and have implemented it on one of my pages. I am fairly adept (I thought ) at css design, but I cannot seem to ADD 2 more boxes, one each below the boxes already in place on the page. Can anyone help me out? Thanks!

    Page is here

    Chris
    Pop, pop, fizz, fizz, oh what a relief it is!
  2. #2
  3. Big Daddy
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Sep 2003
    Location
    Boston
    Posts
    1,473
    Rep Power
    37
    I've tried additional div's, span's, etc to no avail. I'll try some tables next, but I would rather continue to use css. Any ideas? Thanks!

    Chris
    Pop, pop, fizz, fizz, oh what a relief it is!
  4. #3
  5. Über nübe
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Babylon 4
    Posts
    240
    Rep Power
    12
    So you want to create two more id's in the CSS, #navdelta and #navgamma?

    You would have to use absolute positioning, but then you would have to know exactly how much space the first two boxes are taking up.

    I don't think you could use relative positioning, because the div's wouldn't be relative to anything but the main content div.
  6. #4
  7. Big Daddy
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Sep 2003
    Location
    Boston
    Posts
    1,473
    Rep Power
    37
    So you want to create two more id's in the CSS, #navdelta and #navgamma?
    Yeah, exactly! The trouble is that I already tried that and got nothing at all. It's weird.
    You would have to use absolute positioning
    Well, the two boxes that are there already are positioned absolutely. Thw two new ones I tried to add were also absolutely positioned, but like I said, when I added them, I got nothing at all.

    Chris
    Pop, pop, fizz, fizz, oh what a relief it is!
  8. #5
  9. Über nübe
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Babylon 4
    Posts
    240
    Rep Power
    12
    Worked for me, dude. Did you verify that your new div's have the new ID's, since I assume you did a copy-paste of some code?
  10. #6
  11. Über nübe
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Babylon 4
    Posts
    240
    Rep Power
    12
    CSS looks like this:

    Code:
    
    #navGamma {
    	position: absolute;
            top: 400px;
    	left: 20px;
    	background-color: #f5f5f5;
    	padding: 10px;
    	z-index: 2;
    	text-align: center;
    	voice-family: "\"}\"";
    	voice-family: inherit;
    	height: 295px;
    	border-style: inset;
    	border-width: thick;
    	}
  12. #7
  13. Über nübe
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Babylon 4
    Posts
    240
    Rep Power
    12
    HTML looks like this:

    Code:
    
    <div id="navGamma">
    	<h1>Links</h1>
    
    		<p>etc...
    Hello, old friend...
  14. #8
  15. Big Daddy
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Sep 2003
    Location
    Boston
    Posts
    1,473
    Rep Power
    37
    That could be it, bro.
    Did you verify that your new div's have the new ID's, since I assume you did a copy-paste of some code?
    I like to THINK I'm not that dumb , but I'll check! Thanks!

    Chris
    Pop, pop, fizz, fizz, oh what a relief it is!
  16. #9
  17. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Here are a couple of tries achieving what you want.

    demo1

    demo2

    I used floats, which can be tricky. As usual, MSIE is a PoS and screws up the clear:both attribute. That will likely not be an insurmountable problem. Just use a good browser like Moz to see how the demos should look.

    Read the excellant articles at /*pie*/ for a clear description of floats and their care and feeding.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  18. #10
  19. Big Daddy
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Sep 2003
    Location
    Boston
    Posts
    1,473
    Rep Power
    37
    khwang...

    I got it. What you said worked. That's EXACTLY what I had been doing all along, with ONE stupid exception on my part. I left "top" in the css as 20px, so both of my new div's were simply overlapping the 2 original ones! Oops! Thanks, man!

    Chris
    Pop, pop, fizz, fizz, oh what a relief it is!

IMN logo majestic logo threadwatch logo seochat tools logo