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

Overlapping boxes w/ CSS

Discuss Overlapping boxes w/ CSS in the CSS Help forum on Dev Shed.
Overlapping boxes w/ 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 
Page 1 of 2 1 2 >
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old September 18th, 2003, 11:52 PM
bruce66 bruce66 is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jul 2003
Posts: 11 bruce66 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Overlapping boxes w/ CSS
How can I make three boxes overlap like in my included image?
Boxes 2 and 3 would grow vertically as content increased, but they would have to overlap Box 1.
Attached Images
File Type: gif 3-boxes.gif (2.0 KB, 423 views)
Reply With Quote
  #2  
Old September 19th, 2003, 12:15 AM
bruce66 bruce66 is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jul 2003
Posts: 11 bruce66 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
BTW, I will be using this as a blogger template, so I will be sticking a bit of code into Boxes 2 and 3, so they have to be able to expand and move depending on content.
Reply With Quote
  #3  
Old September 19th, 2003, 12:18 AM
Phil_work Phil_work is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Sep 2002
Location: Canberra, Australia
Posts: 317 Phil_work User rank is Corporal (100 - 500 Reputation Level)Phil_work User rank is Corporal (100 - 500 Reputation Level)Phil_work User rank is Corporal (100 - 500 Reputation Level)Phil_work User rank is Corporal (100 - 500 Reputation Level) 
Time spent in forums: 19 h 42 m 18 sec
Reputation Power: 7
CSS will provide the solution I think you are after..

See the attached files for an example.

Can explain it if you need me to:

Forgot to add, I only tested in IE
Attached Files
File Type: zip ovalap.zip (851 Bytes, 331 views)
Last edited by Phil_work : September 19th, 2003 at 12:30 AM.
Reply With Quote
  #4  
Old September 19th, 2003, 11:22 AM
bruce66 bruce66 is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jul 2003
Posts: 11 bruce66 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Thanks.
That worked.
The key, as you pointed out, was to put boxes 2 and 3 inside an absolute-placed container!
Reply With Quote
  #5  
Old September 20th, 2003, 12:25 AM
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,526 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 1 Day 19 h 47 m 28 sec
Reputation Power: 584
If you wish box 1's text to wrap, float (from within box 1) box's 2 & 3. To get the overlap, use something similar to this;
Code:
.sidebox {position: relative;
        float: right;
        right: 50px;
        width: 175px;}


 <span class="sidebox">blah, blah,etc. </span>

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
  #6  
Old November 1st, 2003, 08:33 AM
kassie kassie is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Nov 2003
Location: england
Posts: 11 kassie User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
sorry im, not sure at all im currently trying to do exactly the same thing lol tryingt o make a weblayout
Reply With Quote
  #7  
Old November 1st, 2003, 09:43 AM
bruce66 bruce66 is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jul 2003
Posts: 11 bruce66 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
This is how I did it.
This is a prototype version of my blog.

Click here...
Reply With Quote
  #8  
Old November 1st, 2003, 09:52 AM
kassie kassie is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Nov 2003
Location: england
Posts: 11 kassie User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
lol iots good but i dont under stand where you have used the codes sorry, i took that code that that guy gave you but i couldnt get it to work! =(
Reply With Quote
  #9  
Old November 3rd, 2003, 03:52 AM
Phil_work Phil_work is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Sep 2002
Location: Canberra, Australia
Posts: 317 Phil_work User rank is Corporal (100 - 500 Reputation Level)Phil_work User rank is Corporal (100 - 500 Reputation Level)Phil_work User rank is Corporal (100 - 500 Reputation Level)Phil_work User rank is Corporal (100 - 500 Reputation Level) 
Time spent in forums: 19 h 42 m 18 sec
Reputation Power: 7
What part is not working for you Kassie?
Reply With Quote
  #10  
Old November 3rd, 2003, 10:27 AM
bruce66 bruce66 is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jul 2003
Posts: 11 bruce66 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Oops...my bad.
The url in my last message was not the one I wanted to show you. It's a slghtly different one.
I had 100% success with the posted zip file.
I hope you can figure out the problem.
Reply With Quote
  #11  
Old November 3rd, 2003, 10:41 AM
kassie kassie is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Nov 2003
Location: england
Posts: 11 kassie User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
none of it will work, all i want is a weblayout with two boxes, one box slightly verlapping the other one lol and the other with a picture of jackie chan in which i have enclosed,Thanx
Attached Images
File Type: gif jc.gif (34.9 KB, 226 views)
Reply With Quote
  #12  
Old November 3rd, 2003, 10:41 AM
kassie kassie is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Nov 2003
Location: england
Posts: 11 kassie User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
bruce, do u have the correct url please?
Reply With Quote
  #13  
Old November 3rd, 2003, 10:47 AM
kassie kassie is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Nov 2003
Location: england
Posts: 11 kassie User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
testing cookies
Reply With Quote
  #14  
Old November 4th, 2003, 05:21 AM
Phil_work Phil_work is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Sep 2002
Location: Canberra, Australia
Posts: 317 Phil_work User rank is Corporal (100 - 500 Reputation Level)Phil_work User rank is Corporal (100 - 500 Reputation Level)Phil_work User rank is Corporal (100 - 500 Reputation Level)Phil_work User rank is Corporal (100 - 500 Reputation Level) 
Time spent in forums: 19 h 42 m 18 sec
Reputation Power: 7
Quote:
Originally posted by kassie
none of it will work, all i want is a weblayout with two boxes, one box slightly verlapping the other one lol and the other with a picture of jackie chan in which i have enclosed,Thanx


Hey that should be easy enough to achieve using the code that I posted above, just edit the HTML and CSS files.

If you have given it a go post the code and I can take a look.
Reply With Quote
  #15  
Old November 4th, 2003, 11:38 AM
kassie kassie is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Nov 2003
Location: england
Posts: 11 kassie User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Lol, okay ill try but i dont get it at all, nevermind, ive tried on frontpage but im a html girl myself, and know hardly any!eeeek
Reply With Quote
Reply
Page 1 of 2 1 2 >

Viewing: Dev Shed Forums > Web Design > CSS Help > Overlapping boxes w/ 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