|
CSS - How To Get Rid Of The A Frame Around An Image Border
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 Similar TutorialsI have a blog and I want to put my text inside a border/wrapper. So I've made the border and sliced it up into 3 parts: top middle and bottom. I want to place the text content within the middle of this graphic and so I figure I need to make the sliced images as a background using css and then type whatever I want over it. So I did this but dont know what Im doing wrong: Code:
<style type="text/css">
top {background: url('/images/t1.gif') ;}
middle {background: url('/images/t2.gif') ;}
bottom {background: url('/images/t3.gif') ;}
</style>
<div class="top" id="top"></div>
<div class="mid" id="mid">
<div class="content" id="content">Content Goes Here</div>
</div>
<div class="bottom" id="bottom"></div>
Any help is appreciated. JH Hello, I am running wordpress and I have a Twitter Widget known as Twitter Widget Pro. What I've done is that I made a graphic (a little TV with a twitter bird on top) to serve as a background image but be positioned right behind my Twitter widget so the twitter feed fits inside the tv. I got this positioned correctly on the front page in my style.css sheet. But as I go to my other pages: photos, travels, etc. the format of my site changes and therefore the background image (tv) and the Twitter feed don't align properly. How can I code the background image of the tv and the twitter widget to align properly together on all my pages? Would I have to insert the image into the actual twitter-widget-pro code itself? My website is: (w w w.stefantrego.com) Thanks a lot for the help! -Stefan 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? 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"> 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; }
I use a border-image which has a width of 2px. Thank you in advance for your help. Loki1991 I am having a rather annoying problem with Internet Explorer 6 not putting the proper padding between the CSS border and the image. You can see the problem he http://www.sdstyle.org/article.php?id=101 Basically, there ought to be a six pixel white border and then a one pixel gray border around the images and the breakout in the middle of the page. The offending code is: Code:
.article_image {padding: 6px; border:1px; border-style:solid; border-color:#ccc; margin-bottom:8px;}
...and for the image:
<img src='images/articles/101_image_1.jpg' class='article_image'>
This works fine in Gecko (Mozilla and Firebird) and on Mac IE. I've read there is a bug in IE's handling of CSS (shocking...), am I running into that problem? I tried doing a search here and on Google, and for some reason all of the other solutions I've tried didn't work. Thanks in advance! I want white background and a image on 2 sides of this i thought of just added border but can't seem to find out how to get 2 image on the border. Any help would be great. Hi, I am trying to get a border around an image but nor a normal border; a grey border of 10px then a white border of 20px and then the actual image. I am not sure if the following is the best way to achieve this result. However even if so I am having some problems with FireFox. Basically my first attempt is as follows: I wrapped the image inside a <div> element. Therefore my XHTML syntax is something as follows: Code: <div class="image"> <img src="hello.jpg" /> </div> I then applied the following CSS: Code: <style>
div.image{
border: 4px solid #ccc;
background-color: #fff;
width:1px;
}
div.image img{
margin: 8px;
}
</style>
Now like this I get a good result in IE6 but not in FireFox. I cannot really understand why. I know there is a containment hack but is it really needed in this case? if so why? Also is there maybe an easier way to achieve this? Regards, Sim085 ps: I did a fast test. On IE7 it works with the transitive doctype but not with the strict doctype. This I guess means I am breaking some rule I would like to continue with the strict doctype however. Hi all, How do you put in a image border in the css. I use the following code and it does not seem to work:border-bottom-image:url(../images/borderLeft.bmp); If you can't do this then how do you put 2 borders in the css Stephen I have a two toned border that I want around my page and I need the corners to flow nicely (not rounded or anything, but continuous) and I'm attempting to do this with images... I actually only need the border for the bottom right of my page and I've tried doing this a number of ways...but unless I'm missing something, css doesn't allow for border-image properties....????? I want to use an image as a border using xhtml and css. The border goes around the bottom and the right of an area on my page that has a fixed with an a variable height. As Image borders won't be implemented in css until css3, I attempted to do it using layers of spans with background images along the sides. It resulted in a page that renders incorrectly and differently in the three browsers i tested it in (firefox,ie,opera). Visual Examples: (attached) theoretically.png -> What it should look like at this point ie.png -> how ie renders it ffx.png -> how firefox renders it opera.png -> how opera renders it. Here is the code so far: xhtml: Code: <div class="PageBody">
<span class="PageBody_RightBgLayer">
<span class="PageBody_BottomBgLayer">
<span class="PageBody_RightBottomCornLayer">
<span class="PageBody_FinalLayer">
hello
<br />test
<br />test2
</span>
</span>
</span>
</span>
</div>
css: Code:
.PageBody
{
position:absolute;
left:0px;
top:110px;
background-color: #ffffff;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
}
.PageBody_Corner
{
position:absolute;
right:0px;
bottom:0px;
}
.PageBody_Right
{
position:absolute;
right:0px;
top:0px;
}
.PageBody_RightBgLayer
{
background-image: url("../Images/PageBody/right.gif");
background-position: right;
background-repeat: repeat-y;
padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px;
}
.PageBody_BottomBgLayer
{
background-image: url("../Images/PageBody/bottom.gif");
background-position: bottom;
background-repeat: repeat-x;
padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px;
}
.PageBody_RightBottomCornLayer
{
background-image: url("../Images/PageBody/corner.gif");
background-position:right bottom;
background-repeat:no-repeat;
padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px;
}
.PageBody_FinalLayer
{
margin: 0px 13px 12px 0px;
width:600px;
min-height:300px;
}
Is there any way to fix this or am I going about it wrong? Thank you, Benjamin Prosnitz 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; } 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! 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 . 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. Is it possible to specify a custom image for a border style? 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, 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 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, 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! |
|||||||