CSS - Image As Border

Hey,
I have a small Problem with my Border Div. It doesn't get the height from the content-content div.

Html:
div Code:
Original - div Code <div id="content"> <div class="content-border content-border-left"></div> <div id="content-content"> <div id="maincontent"> ###MAIN_CONTENT### </div> <div id="statecontent"> ###STATIC_CONTENT### </div> </div> <div class="content-border content-border-right"></div> </div>

  

 <div ID="content">


      <div class="content-border content-border-left"></div> 


      <div ID="content-content"> 


           <div ID="maincontent">


                ###MAIN_CONTENT###


           </div>


           <div ID="statecontent">


                ###STATIC_CONTENT###


           </div> 


      </div>


      <div class="content-border content-border-right"></div> 


 </div> 

The both border div should get the height from the content-content. But every time he just uses the min-height. If I write height: 100% on the border div, he will use every time a height higher then the content-content.

What should I do?

CSS:
css Code:
Original - css Code #content { margin: 0px auto; width: 800px; text-align: left; font-family:Verdana; font-size: 11.5px; } .content-border { float:left; width: 2px; height: inherit; min-height: 300px; background-repeat: repeat-y; } .content-border-left { background-image: url("../images/border_left.png"); } .content-border-right { background-image: url("../images/border_right.png"); } #content-content { float:left; width: 796px; height: inherit; background-color: #D8DEE2; } #maincontent { float: left; height: inherit; width: 531px; } #statecontent { float: left; height: inherit; width: 264px; }

  

  


 #content {


     margin: 0px auto;  


     width: 800px;


     text-align: left;


     font-family:Verdana;  


     font-size: 11.5px;   


 }


  


 .content-border { 


     float:left; 


     width: 2px;


     height: inherit;


     min-height: 300px;


     background-repeat: repeat-y;


 }


  


 .content-border-left { 


     background-image: url("../images/border_left.png");


 }


  


 .content-border-right {


     background-image: url("../images/border_right.png");  


 }


  


 #content-content {


     float:left;        


     width: 796px;


     height: inherit; 


     background-color: #D8DEE2;


 }


  


 #maincontent {


     float: left;


     height: inherit;  


     width: 531px;


 }


  


 #statecontent {


     float: left;


     height: inherit;  


     width: 264px; 


 } 

I use a border-image which has a width of 2px.

Thank you in advance for your help.

Loki1991

I'm trying to use images for my border, but for some reason it isn't working. Here is my code:

Code:

/* This is the border line & background colour round the entire page */ 
.bodyline { 
  border-top-image: url(images/top.gif); 
  border-top-right-image: url(images/topRight.gif); 
  border-right-image: url(images/right.gif); 
  border-bottom-right-image: url(images/bottomRight.gif); 
  border-bottom-image: url(images/bottom.gif); 
  border-bottom-left-image: url(images/bottomLeft.gif); 
  border-left-image: url(images/left.gif); 
  border-top-left-image: url(images/topLeft.gif); 
} 

The path to the images is right, so that's definitely not the problem. Can someone help me out?

Is it possible to specify a custom image for a border style?

Hi:
I have an logo image at my page, if you leave the image as non hyperlink, the image shows OK and nicely, when I make the image as a hyper link, there is a ugly frame around the image bordor, I can not get rid of it, I have some a.h/a.w/a css properties in my css file, since I am not fully understand this a.w/ a.h, can some one help me

Thanks for taking the time to read my question.

I was wondering if there is a way to put a border around the <area> on an image map. They are href's, so I thought something should happen there. I know you can do an image flip, but then I have to have 2 pictures of everything.

I'm just thinking on the fly here but is there something you could do in the css with map and link?

I tried this in my .css:
Code:

area.hborder:hover {
    border-style: solid;
	border-color: black;
}

and changed my <area> line to include

Code:

<area class="hborder" sha ...

Here is an example of one of my image maps.

thanks for your help,

Brad

Code:

<map name="SBMap">
	<area shape="rect" coords="9,32,270,63" href="VSADHelpUnReleased.html" title="Help: Enter New Data UnReleased">
	<area shape="rect" coords="9,70,198,104" href="VSADHelpReleased.html" title="Help: Edit Data Released">
	<area shape="rect" coords="9,112,85,146" href="VSADHelpPrint.html" title="Help: Print">
	<area shape="rect" coords="9,150,272,188" href="VSADHelpImport.html" title="Help: Import Farm Names and Codes">
	<area shape="rect" coords="9,190,171,228" href="javascript:void(0)" onclick="NewMonth(EventDesc[41])" title="Help: Herd Info">
	<area shape="rect" coords="9,230,91,267"  href="javascript:void(0)" onclick="NewMonth(EventDesc[42])" title="Help: Close">
</map>

Hello,

Can I apply a top and bottom border to a fieldset but using an image to define a custom border line?

How can I do this?

Thank You,
Miguel

hello,

i have this in my html:

Code:

<div id="link_image">
<a href="http://www.mylink.com/" target="_blank">My link with image
</div>

& here the css:

Code:

#link_image a
{
display:block;
width: 130px;
height: 21px;
text-indent:-3000px;
overflow:hidden;
text-decoration:none;
background:url(images/image.jpg) 0 0 no-repeat;
padding: 7px;
background-color: #667700;
}

Now I would like that the image is right in the center of the background border with color #667700. Like now, it's just on the left side, not centered.

thanks!

I have these thumbnail images that I want to have a thin border around them when you rolloever. A thin gray border that isn't tight to the image, but has a bit of padding.

I have other link styles, so I'm naming this "a.thumbs" it seems right, but I can't get it to work. I'm not sure whether to put a border on the image...set it at 1 or 0, I've tried both....and I still can't get the style to work.

At one point, it worked, but all it was doing was picking up my link style.

What's the problem with the code....or what is the best way to achieve this kind of rollover?

Thanks.



a.thumbs:link{
padding: 5px 15px;
border: 1px solid #FFFFFF;
}

a.thumbs:visited{
padding: 5px 15px;
border: 1px solid #CCCCCC;
}

a.thumbs:hover{
padding: 5px 15px;
border: 1px solid #CCCCCC;
}

I'm working on a new layout for my site, and I've sliced up the left and right side of the content box so it will expand and contract accordingly to all the content inside of it. And I can't get it to line up right. And I'd appreciate any help.

Here it is:
http://thesethexperience.f2g.net/ne...navboxtest.html

And the code:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>navbox</title>

<style type="text/css">

body { background-color:#FFFFFF; }
img { border:0px; }

#navleft
{
background-image: url(images/navleftspacer.png);
background-repeat: repeat-y;
padding: 0px;
background-position:left;
}

#navright
{
background-image: url(images/navrightspacer.png);
background-repeat: repeat-y;
padding: 0px;
background-position:left;
}

</style>

</head>

<body>

<div id="navbox">
  <div id="navhead">
    <img src="images/navigation.png" alt="" />
  </div>
  <div id="navbod">
    <table border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td id="navleft" height="100%" valign="top"><img src="images/navleftspacer.png" /></td>
        <td><p><br /><br /><br /></p></td>
        <td id="navright" height="100%" valign="bottom"><img src="images/navrightspacer.png" /></td>
      </tr>
    </table>
  </div>
  <div id="navfoot">
    <img src="images/navbottom.png" alt="" />
  </div>
</div>

</body>
</html>

Thanks in advance.

I am using a border-left that is 25px, instead of a solid color, i would like to use a repeated image that is 25px in width, right now i have this:

border-left: 25px solid #000;

I tried to change it to something like this:

border-left: 25px url("image.jpg");

it doesn't change it to an image, and i'm guessing that it's not allowed in CSS. Am I doing something wrong? is it really not possible to do this? I need the element to dynamically change size along with the item that it is bordering, so making it a seperate div won't work. any thoughts?

Hi,

I am new to css codes , so please help me with my problems if u can.

I want to add a shadow to my border from all sides to my image .

Hi:
I am using an image as the background in a <td> tag. Also, that <td> tag has a border on the top and bottom. When viewing this page in FF, the border sits perfectly against the image (and the <td> tag). When viewing this in garbage IE, there is a pixel line between the image and the border. What is the problem? What is the fix to get the borders to sit perfectly on the image?

Here is the style for the <td> with id="header"
Code:

#header {
	background: #FFF;
	background-image:   url(include/head.jpg);
	background-repeat: no-repeat;
	height: 136px;
	width: 100%;
	background-position: right;
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;	
}

And here is the <td>
Code:

<table id="main">
	<tr>
		<td id="header">
			<ul id="nav">
				<li><a href="">Home</a></li>
				<li><a href="">Benefits</a></li>
				<li><a href="">FAQ</a></li>
				<li><a href="">About</a></li>
				<li><a href="">Pay Your Bill</a></li>
				<li><a href="">Contact</a></li>
			</ul>
		</td>
	</tr>
</table>

Thanks in advance.
Link:
http://www.wiu.edu/users/mujas2/test/

Also, if anyone has an idea about those tabs, let me know! Thanks in advance, please ask if further info is needed!

I'm not quite sure how to put this question in technical terms, but I'll do my best to show you what I mean.

I need to convert all unnecessary html (especially tables) at 'seagull dot net slash services.html'
into CSS. Everything was going dandy until I came to the horizontal rules above the text and next to the images. Let me say that again, ABOVE the text, the text being NEXT TO the images.

I can't seem to find out how to place the horizontal rules (borders) above JUST the text. It always seems to go above both the the text and the image. I also want the border to start at the end of the image and go all the way to the right end of the page. Any help/bits of code would be greatly appreciated.

PS: I wanted to upload an example image, but my ftp program is on the fritz, so I had to paraphrase a url...

PPS: By the way, hello all! I'm new here, and I plan to be asking question alot because I'm stuffing my head full of programming this month.

Greetings,

I have perhaps a strange problem. I am trying to use CSS to generate a border around .PNG images. My border consists of png images as well. For the border, I want rounded corners, which take seperate images, and then a middle image that repeats to fill in the space. My problem is that the middle image is repeating over the corner images. You can see it he

http://www.3dbrewer.com/

Notice the borders around the random images at the top. It is going over the corners. The reason I have to do it this way is that the images vary in size.

Here is the code I am currently using:

Code:

.pb div {
background: url(../images/picture-tl.png) 0 0 no-repeat;
}

.pb div div {
background: url(../images/picture-tr.png) 100% 0 no-repeat;
}

.pb div div div {
background:transparent url(../images/picture-t.png) 0 0 repeat-x;
padding:13px 0px 0px 0px;
}

.pb div div div div {
background:url(../images/picture-l.png) repeat-y scroll left;
padding:0px 0px 0px 13px;
}

.pb div div div div div {
background:transparent url(../images/picture-r.png) repeat-y scroll right;
padding:0px 13px 0px 0px;
}

.pb div div div div div div {
background:transparent url(../images/picture-b.png) repeat-x scroll bottom;
padding:0px 0px 13px 0px;
}

I plan on putting corners on the bottom too of course, but one step at a time. Any help would be appreciated

Hello.

Look at the differences between the borders around photos he

http://www.fusionfox.com/2006/02/tinker_toys.html

In Firefox and in IE. My CSS looks like this:


.imageleft {
float:left;
margin:10px 10px 10px 0;
background:#FFFFFF;
padding:3px;
border:1px dotted #999999;
}



Why does the image border disappear in IE? This is killing me. Any help would be greatly appreciated. Thanks!