CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Try It Free
Go Back   Dev Shed Forums > Web Design > CSS Help
Reload this Page

Adding some boxes through div's and css

Discuss Adding some boxes through div's and css in the CSS Help forum on Dev Shed.
Adding some boxes through div's and css Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old November 14th, 2003, 04:56 PM
WorldBuilder's Avatar
WorldBuilder WorldBuilder is offline
Big Daddy
Dev Shed Beginner (1000 - 1499 posts)
  
Join Date: Sep 2003
Location: Boston
Posts: 1,470 WorldBuilder User rank is Sergeant (500 - 2000 Reputation Level)WorldBuilder User rank is Sergeant (500 - 2000 Reputation Level)WorldBuilder User rank is Sergeant (500 - 2000 Reputation Level)WorldBuilder User rank is Sergeant (500 - 2000 Reputation Level)WorldBuilder User rank is Sergeant (500 - 2000 Reputation Level) 
Time spent in forums: 3 Days 4 h 53 m 8 sec
Reputation Power: 20
Send a message via AIM to WorldBuilder
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!
Reply With Quote
  #2  
Old November 18th, 2003, 09:35 AM
WorldBuilder's Avatar
WorldBuilder WorldBuilder is offline
Big Daddy
Dev Shed Beginner (1000 - 1499 posts)
  
Join Date: Sep 2003
Location: Boston
Posts: 1,470 WorldBuilder User rank is Sergeant (500 - 2000 Reputation Level)WorldBuilder User rank is Sergeant (500 - 2000 Reputation Level)WorldBuilder User rank is Sergeant (500 - 2000 Reputation Level)WorldBuilder User rank is Sergeant (500 - 2000 Reputation Level)WorldBuilder User rank is Sergeant (500 - 2000 Reputation Level) 
Time spent in forums: 3 Days 4 h 53 m 8 sec
Reputation Power: 20
Send a message via AIM to WorldBuilder
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
Reply With Quote
  #3  
Old November 18th, 2003, 12:46 PM
khwang's Avatar
khwang khwang is offline
Über nübe
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Sep 2003
Location: Babylon 4
Posts: 240 khwang User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 29 m 27 sec
Reputation Power: 5
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.
Reply With Quote
  #4  
Old November 18th, 2003, 12:52 PM
WorldBuilder's Avatar
WorldBuilder WorldBuilder is offline
Big Daddy
Dev Shed Beginner (1000 - 1499 posts)
  
Join Date: Sep 2003
Location: Boston
Posts: 1,470 WorldBuilder User rank is Sergeant (500 - 2000 Reputation Level)WorldBuilder User rank is Sergeant (500 - 2000 Reputation Level)WorldBuilder User rank is Sergeant (500 - 2000 Reputation Level)WorldBuilder User rank is Sergeant (500 - 2000 Reputation Level)WorldBuilder User rank is Sergeant (500 - 2000 Reputation Level) 
Time spent in forums: 3 Days 4 h 53 m 8 sec
Reputation Power: 20
Send a message via AIM to WorldBuilder
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.
Quote:
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
Reply With Quote
  #5  
Old November 18th, 2003, 01:04 PM
khwang's Avatar
khwang khwang is offline
Über nübe
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Sep 2003
Location: Babylon 4
Posts: 240 khwang User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 29 m 27 sec
Reputation Power: 5
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?
Reply With Quote
  #6  
Old November 18th, 2003, 01:05 PM
khwang's Avatar
khwang khwang is offline
Über nübe
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Sep 2003
Location: Babylon 4
Posts: 240 khwang User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 29 m 27 sec
Reputation Power: 5
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;
	}
Reply With Quote
  #7  
Old November 18th, 2003, 01:07 PM
khwang's Avatar
khwang khwang is offline
Über nübe
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Sep 2003
Location: Babylon 4
Posts: 240 khwang User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 29 m 27 sec
Reputation Power: 5
HTML looks like this:

Code:


<div id="navGamma">
	<h1>Links</h1>

		<p>etc...
__________________
Hello, old friend...
Reply With Quote
  #8  
Old November 18th, 2003, 01:29 PM
WorldBuilder's Avatar
WorldBuilder WorldBuilder is offline
Big Daddy
Dev Shed Beginner (1000 - 1499 posts)
  
Join Date: Sep 2003
Location: Boston
Posts: 1,470 WorldBuilder User rank is Sergeant (500 - 2000 Reputation Level)WorldBuilder User rank is Sergeant (500 - 2000 Reputation Level)WorldBuilder User rank is Sergeant (500 - 2000 Reputation Level)WorldBuilder User rank is Sergeant (500 - 2000 Reputation Level)WorldBuilder User rank is Sergeant (500 - 2000 Reputation Level) 
Time spent in forums: 3 Days 4 h 53 m 8 sec
Reputation Power: 20
Send a message via AIM to WorldBuilder
That could be it, bro.
Quote:
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
Reply With Quote
  #9  
Old November 18th, 2003, 10:42 PM
kk5st's Avatar
kk5st kk5st is offline
Thanks Johnny Hart (BC) R.I.P.
Dev Shed Demi-God (4500 - 4999 posts)
  
Join Date: May 2003
Location: Dallas
Posts: 4,541 kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level) 
Time spent in forums: 1 Month 2 Days 1 h 27 m 15 sec
Reputation Power: 597
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.

Ask a better question, get a better answer.
Reply With Quote
  #10  
Old November 19th, 2003, 10:25 AM
WorldBuilder's Avatar
WorldBuilder WorldBuilder is offline
Big Daddy
Dev Shed Beginner (1000 - 1499 posts)
  
Join Date: Sep 2003
Location: Boston
Posts: 1,470 WorldBuilder User rank is Sergeant (500 - 2000 Reputation Level)WorldBuilder User rank is Sergeant (500 - 2000 Reputation Level)WorldBuilder User rank is Sergeant (500 - 2000 Reputation Level)WorldBuilder User rank is Sergeant (500 - 2000 Reputation Level)WorldBuilder User rank is Sergeant (500 - 2000 Reputation Level) 
Time spent in forums: 3 Days 4 h 53 m 8 sec
Reputation Power: 20
Send a message via AIM to WorldBuilder
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
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > CSS Help > Adding some boxes through div's and css

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 1 hosted by Hostway.