Web Design Discussion - HTML Style Help (Background)

Print Page | Close Window

HTML Style Help (Background)

Printed From: Web Wiz Forums
Category: General Discussion
Forum Name: Web Design Discussion
Forum Description: Discussion on web design and development subjects.
URL: https://forums.webwiz.net/forum_posts.asp?TID=12116
Printed Date: 29 March 2026 at 2:54pm
Software Version: Web Wiz Forums 12.08 - https://www.webwizforums.com

Topic: HTML Style Help (Background)

Posted By: vshriniwasan
Subject: HTML Style Help (Background)
Date 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

Replies:

Posted By: Mart
Date 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>

Posted By: vshriniwasan
Date 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...

Posted By: Mart
Date 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

Posted By: theSCIENTIST
Date 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: http://www.tableless.com.br - www.tableless.com.br :: Check the CSS file here: http://www.tableless.com.br/estilo.css - www.tableless.com.br/estilo.css

I want to research the matter further, but I'm really pressed for time right now.

-------------
:: http://www.mylittlehost.com/ - www.mylittlehost.com

Posted By: dpyers
Date Posted: 11 October 2004 at 4:17pm

http://www.albin.net/CSS/roundedCorners/ - http://www.albin.net/CSS/roundedCorners/

I have an example at http://www.new2asp.com/template.asp - 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.

Posted By: vshriniwasan
Date 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

Posted By: theSCIENTIST
Date 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.

-------------
:: http://www.mylittlehost.com/ - www.mylittlehost.com

Posted By: dpyers
Date Posted: 12 October 2004 at 12:29pm

I'm not sure what you're after. All my corner images are css background images and not referenced on the page. The two images on the page are content.

I could have used the logo's as a css background and used css to position them, but to make it a hyper link, I needed to have it as content.

there is a css content property

p:before
{
content: url("beep.wav")
}

It's used to define boiler plate text, images, or media files but I think Opera is the only browser that currently supports it.

-------------

Lead me not into temptation... I know the short cut, follow me.

Posted By: vshriniwasan
Date Posted: 14 October 2004 at 11:07am

What I wanted to know is using a single class you cannot do a rounded edges, unless you know the exact width for that location you can make a full size rounded area to insert it.

I am sorry Dpyers, I miss wrote. That site you were showing has three classes and I want to avoid that.

Shrini.

Posted By: theSCIENTIST
Date Posted: 14 October 2004 at 12:29pm

You can't use a single class for this job as you need one style per corner.

Is this a personal trend, or do you really need to use one class only?

-------------
:: http://www.mylittlehost.com/ - www.mylittlehost.com

Posted By: vshriniwasan
Date Posted: 14 October 2004 at 1:28pm

I am trying to customize a personal software where most of the classes are generated by dlls.

I have no control over them. That is why I am trying to do this dynamically. May be JavaScript can allow me to do this.\

Shrini