 Point me in the right direction? Box with intercepting text |
  |
| km123 |
 May 20 2010, 12:22 PM
Post
#1
|
|
Group: Members Posts: 2 Joined: 20-May 10 Member No.: 11,912  |
Hi All,
I've attached an image of what I'm looking to do. I need to create a table, or box, or something with text intercepting it at the top. Then within the box is the content. I was unsure of what you would call this so I was hoping someone could give me a name or point me in the right direction. Thanks so much!  |
  |
 
|
| tinimic |
May 20 2010, 02:40 PM
Post
#2
|
|
Group: Members Posts: 9 Joined: 12-May 10 Member No.: 11,840 |
QUOTE(km123 @ May 20 2010, 12:22 PM)  Hi All, I've attached an image of what I'm looking to do. I need to create a table, or box, or something with text intercepting it at the top. Then within the box is the content. I was unsure of what you would call this so I was hoping someone could give me a name or point me in the right direction. Thanks so much! I don't know what to call it either. I'm just learning, so don't take this as gospel. Here's how I would approach the subject: CODE <html> <head> <title>Box with Intersecting Text</title> <style type="text/css"> .inner-box { position: relative; top: -2.1em; width: 95%; margin-right: auto; margin-left: auto; margin-bottom: -2.1em; } .inner-box h2 span { background-color: #FFF; color: #C93; } #box { width: 400px; border: 2px solid #666; position: static; } </style> </head> <body> <div id="box"> <div class="inner-box"> <h2><span>Text Text Text </span></h2> <p>content content content content content content content content content content content content content content content content content ... etcetra ...</p> <p>more content more content more content more content more content more content more content more content more content more content ... etcetra ...</p> </div> </div> </body> </html> Hope this helps. |
|
|
|
| pandy |
May 20 2010, 06:35 PM
Post
#3
|
|
🌟Computer says no🌟  Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
You are on the right track. What's the problem? That the little box is too high up? I don't think you need the bottom margin and -1em or thereabout is probably enough for top. You may want to give #box a little top margin though, so .inner.box doesn't risk to end up partly outside the browser window.
|
|
|
|
| km123 |
May 20 2010, 07:27 PM
Post
#4
|
|
Group: Members Posts: 2 Joined: 20-May 10 Member No.: 11,912 |
QUOTE(pandy @ May 20 2010, 07:35 PM) You are on the right track. What's the problem? That the little box is too high up? I don't think you need the bottom margin and -1em or thereabout is probably enough for top. You may want to give #box a little top margin though, so .inner.box doesn't risk to end up partly outside the browser window. On no, that is just an image I made in Illustrator, I didn't do that via HTML or CSS or anything. I'm going to try out what tinimic suggested and see how that goes. Thanks in advance tinimic! |
|
|
|
| pandy |
May 20 2010, 08:13 PM
Post
#5
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
I'm sorry. Yours and tinimic's posts floated together when I scrolled. I thought it was your code example. Yeah, tinimic is right, but I think the box will end up too high up.
|
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 26th April 2024 - 03:41 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC