asked on

CSS corner image header styling problem

I have two corner images 10x20px each, one for the left and one for the right. I also have a hyperlink with text on it and basically just want to make it into a heading with the corner images and a background colour behind the hyperlink. I have been trying to use a table for this and its just a mess. Does anyone have any ideas?
Heres what I have so far:
.homepage .mainbox_header p.leftcorner {
      background: url(../images/CurrentWebsite/rounded_left.gif) no-repeat;
      background-color: #48468D;
      height:20px;
      width:10px;
}

.homepage .mainbox_header p.rightcorner {
      background: url(../images/CurrentWebsite/rounded_right.gif) no-repeat;
      background-color: #48468D;
      height:20px;
      width:10px;
}

.homepage .mainbox_header a {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      background-color: #48468D;
      font-size: 12px;
      width: 170px;
      color: #FFFFFF;
      font-weight: bold;
      text-decoration: none;
}

VirusMinus

whats the HTML markup?

Is it divs and p's inside it? Where is the <a> tag in relation to the p's?

hard to tell without seeing it, but try the following:

* in the markup put the right corner P first followed by the left P
* add a float:right to the p.rightcorner CSS
* add a float:left to the p.leftcorner CSS
* add a display:block to the .mainbox_header a CSS

lesleyg

ASKER

Hi, thanks for advice, I shall have a look to see if i can sort it...

Here is my html in the meantime

<table width="190px">
<tr class="mainbox_header">
<td>
<p class="leftcorner"> </p>
</td>
<td>
<asp:HyperLink id="hlName" runat="server">HyperLink</asp:HyperLink>
</td>
<td>
<p class="rightcorner"> </p>
</td>
</tr>
</table>

VirusMinus

could you also put up an image of what the end result should look like? and maybe the two corner images as well?

you can use www.imageshack.us to upload the images.

lesleyg

ASKER

Heres the links to the images:

http://img514.imageshack.us/img514/4650/roundedleftfs2.gif
http://img514.imageshack.us/img514/4650/roundedleftfs2.gif

I tried as you suggested above and its nearly there...only problem is gap of about 5px between each corner image and the hyperlink

VirusMinus

is it like a link button?

try this and see if it helps:

get rid of the table first.

<asp:HyperLink id="hlName" runat="server">
HyperLink
<span class="leftcorner"> </span>
<span class="rightcorner"> </span>
</asp:HyperLink>

and then the CSS:

a#hlName{display:block;color:#fff;background
:#48486D;width:170px;height:20px;text-decoration:none}
.leftcorner, .rightcorner{position:absolute;top:0;display:block;width:10px;height:20px}
.leftcorner{left:0}
.rightcorner{right:0}

lesleyg

ASKER

I havent been able to get the above to work.... I should have explained that the image will be in a datalist which is why the whole thing is in a table. Basically there will be 3 rows and 3 columns so a total of 9 headings in which I want the corner images and hyperlinks. I had it nearly working as a table and with the changes you suggested:
* in the markup put the right corner P first followed by the left P
* add a float:right to the p.rightcorner CSS
* add a float:left to the p.leftcorner CSS
* add a display:block to the .mainbox_header a CSS

except for a 4 px gap between each image and the hyperlink. I can use a -4px margin which works in firefox but doesnt in explorer. Do you know of a way of making <td> with no margin between them?

ASKER CERTIFIED SOLUTION

VirusMinus

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

lesleyg

ASKER

Great! Thanks