|
CSS - Centering Image With Border?
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! Similar TutorialsGood morning I can't seem to get the footer menu on my site (philipus.com) appear like I want it (it's Stu Nicholl's Skeleton Up menu). These are the problems. 1. The menu items (Start, Galleries etc) are all pushed to the left. I tried text-align: center in the #nav, li and ul but it doesn't work. How can I center them? 2. A border is defined in #nav ul which makes it appear also around the Galleries and Wallpapers pop-up menus. How can I ensure that it only appears around the pop-up menus? 3. The pop-up menu above the Galleries link isn't centered, but the pop-up above the Wallpapers links seems to be. Why is this and how can I ensure both are centered? 4. In IE, the pop-up menu items move to the left when the cursor hovers over them. How do I prevent this? 5. How can I make the pop-up menus a little bit "sticky", such that they allow you to slowly move the cursor up to them? Currently one has to move the cursor quickly to the pop-up menu otherwise it disappears. Does this have to do with the pop-up menus not overlapping a few pixels with the main menu? 6. I noticed when placing the menu in the middle of the page that the copyright text below the menu moved to the right. How can I ensure that the copyright text isn't affected by the menu? Thanks immensely for your help. The menu's stylesheet is below. /p Code: #nav,
#nav ul {padding:0 0 5px 0; margin:0; list-style:none; font: 10px verdana, sans-serif; border:1px solid #000; border-color:#ace #79b #68a #bde; border-width:1px 2px 2px 1px; background:#fff; position:relative; z-index:200;}
#nav {height:25px; padding:0;}
#nav li {float:left;}
#nav li li {float:none; background:#fff;}
/* a hack for IE5.x and IE6 */
* html #nav li li {float:left;}
#nav li a {display:block; float:left; color:#888; margin:0 25px 0 10px; height:25px; line-height:25px; text-decoration:none; white-space:nowrap;}
#nav li li a {height:20px; line-height:20px; float:none;}
#nav li:hover {position:relative; z-index:300;}
#nav li:hover ul {left:0; bottom:21px; top:auto;}
/* another hack for IE5.5 and IE6 */
* html #nav li:hover ul {left:10px;}
#nav ul {position:absolute; left:-9999px; top:-9999px;}
/* yet another hack for IE5.x and IE6 */
* html #nav ul {width:1px;}
/* it could have been this simple if all browsers understood */
/* show next level */
#nav li:hover li:hover > ul {left:-15px; margin-left:100%; bottom:-7px; top:auto;}
/* keep further levels hidden */
#nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;}
/* show path followed */
#nav li:hover > a {text-decoration:underline; color:#57b;}
/* but IE5.x and IE6 need this lot to style the flyouts and path followed */
/* show next level */
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:-15px; margin-left:100%; bottom:-7px; top:auto;}
/* keep further levels hidden */
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px;}
/* show path followed */
#nav li:hover a,
#nav li:hover li:hover a,
#nav li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover li:hover a
{text-decoration:underline; color:#57b;}
/* hide futher possible paths */
#nav li:hover li a,
#nav li:hover li:hover li a,
#nav li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li:hover li a
{text-decoration:none; color:#888;}
I have a div with background images. It is styled float:left. That is all fine. The div is sized at 50x50px. Inside this div is a smaller image. I want the image to appear centered of the div. I have tried everything I can think of w r t margins and padding but the image allways shows up in the upper left corner. Here is an example: Code: <div class='caltool' onmouseover="this.style.backgroundImage = 'url(images/litegearani.gif)';" onmouseout="this.style.backgroundImage = 'url(images/litegearstill.gif)';"> <a href="whatever.html" title="export to desktop calendar"><img style="margin: auto; height:16px; width:16px;" src="icon_export_vcal.png" width="16" height="16" border="0" /></a> </div> Here are the styles in the caltool class: Code: .caltool {
float: left;
background-image: url(../images/litegearstill.gif);
background-repeat: no-repeat;
background-position:center;
height:50px;
width: 50px;
}
How can I make the images be CENTERED over the gear background?? So I have 2 different background patterns that extend to infinity behind my logo. Problem is, I could not center my logo in front of these two patters. Code: so it should display it like; Layer 1: Left Pattern Right Pattern Layer 2: Logo But instead, its displayed as; Layer 1: Left Pattern Right Pattern Layer 2: Logo I spent over an hour searching this on the internet. Any help appreciated, thanks! Code: .subcontent {
min-height:50px;
width:100%;
background:#00CC66;
}
.leftcontent {
min-height:50px;
width:50%;
float:left;
background:url(images/bg_lpattern.jpg) repeat-x;
}
.rightcontent {
min-height:50px;
width:50%;
float:left;
background:url(images/bg_rpattern.jpg) repeat-x;
}
<div class="subcontent" style="position:relative;">
<div style="margin-left:auto; margin-right:auto; width:400px; height:50px; position:absolute;">
<img src="images/logo.jpg" alt="Insert Logo Here" name="Insert_logo" width="200px" height="50px" />
</div>
<div class="leftcontent">
</div>
<div class="rightcontent">
</div>
</div>
My page has: 1) a left-sidebar which goes from the top-left corner and stretches down 2) a top-bar which goes from the edge of the left-sidebar and stretches all the way across to the right side of the page 3) a main content which covers the rest of the page I want to place an image in the center of the top-bar but so far it only is centered when the window is maximised...I want it to be centered no matter what size the window is. currently my css rules a Code: #topBar {
position: absolute;
height:15%;
text-align: center;
left:30%;
margin:0px auto;
}
the xhtml source code for the topBar and image is: Code: <div id="topBar"> <p><img src="../logo1.jpg" alt="..." id="sirgLogo"/></p> </div> (the image id is just concerned with the size of the image at this time) any suggestions as to how to I can have the image centered within the <div>? some bright spark on Yahoo Answers failed to spot that I'm using xhtml (which tbf is only mentioned once) and told me to try: Code: <div id="topBar"> <p><center><img src="../logo1.jpg" alt="..." id="sirgLogo"/></center></p> </div> or Code: <div id="topBar" align="center"> <p><img src="../logo1.jpg" alt="..." id="sirgLogo"/></p> </div> Unless I'm mistaken, these are possibilities which will cause w3's validator to throw up an error. For the record I'm using XHTML 1.0 Transitional and I presume my doctype declaration is correct as it was automatically generated by dreamweaver when I first made the document! I've been away for nearly three months and may have forgotten some of the basics of CSS. Today I added a banner photo to the top of my new bike club site, but cannot remember how to style it so that, when a visitor adjusts the width of their browser window, the banner photo sidles to the left or right to remain centered at the top of their window, along with the the bike club name and pull-down menus immediately below (see http://stallinswebdesign.com/vs/index.php). Can you suggest how I can style that banner photo so that it remains centered whenever a visitor stretches their browser window? I know you can view source to view my <div> structure and so forth; let me know if you'd like to see any parts of my style sheet. Thank you for your valuable time. Curtis There's probably a simple, obvious solution for this, but I'm having problems managing to get this to work. Here's the isse: I have a menu that basically looks like so: Home | Guestbook | Contact Us | Help I need to place an image beneath each menu item so that is centered directly below the text, to indicate which page the user is on (not my design; I don't want to hear about it). I can not use tables for this - the menu items are pulled out of a database, and are generated in a loop; I also can't use some sort of div that requires a set width for each menu item, due to the fact that the menu items are all of variable widths. Ideas? Hello, I am a fan of css and use it all the time. My one and only one problem with it is centering an image in a column that has been floated right. I've tried numerous ways to do this, but none have worked. Usually I end up adding a 2 column table, fixing the right column with x px, then adding images in rows in the left table column. This really does not center the image for all screen sizes, but it does move the images to the left. Also, margin-right:xpx would do about the same thing. This long-winded explanation leads to my css question: Is there a way to center images in a column that has been floated right? Maybe I am over-looking the obvious. Regards, Lee How do i center the image both horizontally and vertically.... I have read the < ALIGN > has be depreciated and must use style, but STYLE="vertical-align:middle" dpesnt seem to work in either/both the < DIV > and < IMG > tags I am using an external CSS with a hiehgt of 168px, and calling the < DIV > block, then just using a < IMG > tag. How can i align the image int he middle?? Hi, I'm new to CSS and haven't been able to get this working. I have two layers, one for an image, and another for text that goes on top. The text is supposed to be centered and the image should be centered wrt the text. The problem is that sometimes a word in the text will be too long and there's overflow. When this happens, the image stays on the left and the text box gets larger. This way the image isn't right behind the center of the text. I tried using overflow: visible but this didn't change anything. Thanks for any help. Hi all, I am having trouble getting an image to go where I want it to, which is flush up against the top of the page and horizontally centered. I originally accomplished this a few years ago on my website, but now I am trying to do a new build, and this time around the code I used last time is not working! The working image can be seen here, it is the banner logo displayed at the top of the page. It's currently perfectly set, and all I want is to have that again on a new page. However, when I simply copy/paste the old code onto that new page, it doesn't look anything like the original. Here is the original code. In retrospect I have no idea how I got it to work, since it looks messy as heck: Code: <table align="center" style="position:relative; top:-15; z-index:5" border="0" width="983" height="198"> <tr><td><img style="position:absolute; top:0;" src="http://www.thesunderedguard.com/images/banner.jpg"></td></tr> </table> All my tinkering around with the new page has not been successful at all. Any help would be much appreciated! Cheers 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 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. 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'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? 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. 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 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....????? 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 |
|||||||