Trash Talk - CSS Pros: I need your help Cerium - Fri Jul 22, 2005 1:23 am Post subject: CSS Pros: I need your help
Im working on giving my site a makeover. Designing it in PS is a snap, but converting it to HTML is proving to be quite frustrating.
First, take a look at the demo: http://hybrid.shanky.com.
The part im working on is the content region (which has the post text). Everything else is fairly standard.
The problem comes from the number of elements it takes to build the content box:
1) The 4 black corner borders. (10x4 px)
2) Content border (2px around content region, #737373)
3) Content region (background: #787878)
#2 and #3 are easy enough to do, using a single DIV object and the border properties. The problem comes from positioning the 4 corner peices. As far as I know, theres no way to absolutely position an object relative to its container object.
So Im left with 4 objects (IMG or DIVs, doesnt matter) wihch need to be placed at the 4 corners of the container, with the content region in the middle.
Ive just spent the last hour playing with tables (ick) and every CSS property I know without results. Any and all help will be greatly appreciated.
-C
1stStrike - Fri Jul 22, 2005 2:18 am Post subject:
Do what I do. Bug Akai.
Solo Ace - Fri Jul 22, 2005 2:20 am Post subject:
Does bugging him actually help? Meh, teach me, 1st. Smong - Fri Jul 22, 2005 3:25 am Post subject:
Do you want round corners?
I attached a zip file containing some images for the corners and a sample page with <style> tags in it. It uses <span> for the corners.
Cerium - Fri Jul 22, 2005 6:48 am Post subject:
No. While your example was useful, its not what im shooting for. The final should look like the image I linked to in my original post.
What you posted works perfectly for... well... exactly what you posted; However, theres a few things that make it not work for my design:
1) The corner image spans further horizontally than the text. Using the float property may align it correctly, but it keeps the object within the flow, effectively fucking up any text thats on the same line (in this case indenting my first line, which is not intended in the design).
2) While I will use an image if I have to, I would like to avoid it, since I can make the border using the border-(side) property set.
(Random trivia: This wont work in FF unless the objects display mode is 'block')
3) I hate... HATE using hacks for multiple browser support, which also makes me want to stray away from images. Again, I will if I must, but its more of a last resort kinda thing.
After looking at what you posted, I managed to get pretty damn close to what I want using the float property (contrary to #1) and a plethora of pixel perfect position offsets (which work in both FF and IE), but Im now forced to deal with that fucking indentation.
http://hybrid.shanky.com/jcreator.html
This is as far as Ive gotten, which works in FF and IE, without any CSS hacking (or images). Everything is aligned perfectly, except the text... and Im once again, stuck.
Edit:
The 'clear' property (and more ugly positioning) has saved the day. Check out the example and hit 'view source' to see what it took.
Thanks smong.
Gravitron - Fri Jul 22, 2005 8:23 am Post subject:
Request for help with CSS, something I work with on a regular bassis while making websites.
Oh wait, it was cerium who asked.
Should I be the bigger person? Hell no!
Forget it.
Chambahs - Fri Jul 22, 2005 9:41 pm Post subject:
To SA:
yes it does actually work, but you have to be all over him, or else he doesnt do it, like he still owes me the following:
Website
Forums
sscentral webspace
Oral Sex
(cough)
A ship gfx
Bomb gfx
some animations
But he only gets on ICQ once in a blue moon, clever bastard
1stStrike - Sat Jul 23, 2005 1:47 am Post subject:
Akai has made several things for me in the past graphics/website related. I haven't actually talked to him in like..8 months though.
Confess - Sun Jul 24, 2005 1:10 am Post subject:
Akai is a good boy, good boy! <pats head>
Gravitron - Sun Jul 24, 2005 7:10 am Post subject:
Hmm, the original SScouncil.com design I been working on when someone asked me to add content, was it akai or that Baka or wtfever character who made it?
Was a total mess...full of javascripts and tables...whoever done it shouldn't indulge in websiting.
