| Author |
 Topic Search  Topic Options
|
vshriniwasan 
Groupie
Joined: 17 December 2001
Location: United States
Status: Offline
Points: 63
|
 Topic: HTML Style Help (Background)
Posted: 10 October 2004 at 9:23pm |
Hey guys,
Have a small question about background. I alread know how it works. I am trying to find out the following....
I have a standard bar.
<div class="mybar">Blah</div>
I want to write a style where the mybar left corner will use an image that will curve it, right corner will use one to curve it and middle bg without having to have all crap around it.
Thanks,
Shrini
|
 |
Mart
Senior Member
Joined: 30 November 2002
Status: Offline
Points: 2304
|
Posted: 11 October 2004 at 2:10am |
For that you will have to use a table and some images, heres how
<table cellspacing=0 cellpadding=0 width=100%>
<tr>
<td width="2px"><img src="LeftCurve.Gif"></td>
<td width="99%>Blah</td>
<td width="2px"><img src="RightCurve.Gif"></td>
</table>
|
|
|
vshriniwasan
Groupie
Joined: 17 December 2001
Location: United States
Status: Offline
Points: 63
|
Posted: 11 October 2004 at 3:39am |
|
I need to find out if there is a style mart. I dont want to hard coad it in 50 places. I guess no stylesheet option...
|
|
Mart
Senior Member
Joined: 30 November 2002
Status: Offline
Points: 2304
|
Posted: 11 October 2004 at 11:25am |
|
Not really, because you can't add table cells or images via. CSS. I
would just do a global replace with a bit of regex if the tables are
all similar at the start
|
|
theSCIENTIST
Senior Member
Joined: 31 July 2003
Location: United Kingdom
Status: Offline
Points: 440
|
Posted: 11 October 2004 at 11:48am |
In fact I think you can do that in pure CSS, that's the trend now a days, to go tableless, however, it has some glitches I guess, you don't have the full control as you would with tables because images in CSS will have to have a pre-defined width as opposed to the leftGrfx <-- 100% bgr --> rightGrfx in tables..
Have a look at this site: www.tableless.com.br :: Check the CSS file here: www.tableless.com.br/estilo.css
I want to research the matter further, but I'm really pressed for time right now.
Edited by theSCIENTIST
|
|
|
|
dpyers
Senior Member
Joined: 12 May 2003
Status: Offline
Points: 3937
|
Posted: 11 October 2004 at 4:17pm |
http://www.albin.net/CSS/roundedCorners/
I have an example at www.new2asp.com/template.asp
The botton corner rounds in my example break in gecko and I haven't gotten arounfd to patching it yet, but there's a link onthat page to view the css
|
Lead me not into temptation... I know the short cut, follow me.
|
|
vshriniwasan
Groupie
Joined: 17 December 2001
Location: United States
Status: Offline
Points: 63
|
Posted: 12 October 2004 at 6:41am |
Dpyers,
Even you have the image inserted into the page. I am not just talking about moving the image to either corner. I am talking about keeping the link in the CSS for the image for Left Middle Right and show it.
Can Javascript can do something like this? Has any one seen a snipit out there?
Shrini
|
|
theSCIENTIST
Senior Member
Joined: 31 July 2003
Location: United Kingdom
Status: Offline
Points: 440
|
Posted: 12 October 2004 at 11:11am |
Huumm, now I don't know what you need, link? What link?
If it's a <A HREF> link, then you can have one image and several links out of it by using MAP COORDS.
If you don't want to use that, you can have your large image set as a background and an image on top as usual.
 vshriniwasan wrote:
...I am talking about keeping the link in the CSS for the image for Left Middle Right and show it... |
Right, maybe what you need is this:
<HTML>
<HEAD>
<TITLE>Test</TITLE>
<STYLE>
.imgLeft { width: 20px; background-image: url(imgFileLeft.gif); }
.imgCent { width: 99px; background-image: url(imgFileCent.gif); }
.imgRigh { width: 20px; background-image: url(imgFileRigh.gif); }
</STYLE>
</HEAD>
<BODY>
<SPAN CLASS="imgLeft"></SPAN>
<SPAN CLASS="imgCent"></SPAN>
<SPAN CLASS="imgRigh"></SPAN>
</BODY>
</HTML> |
Or explain better.
|
|
|
|
HTML Style Help (Background)