I create Any div in auto width with single image background. in act this worked but There is a small problem. end of right images not overlapped.
HTML :
<div class="home"><span><em>40</em></span></div>
CSS :
.home{
border:none;
background:none;
padding:0;
margin:0;
width:auto;
overflow:visible;
text-align:center;
white-space:nowrap;
height:40px;
line-height:34px; display:inline-block;
}
.home span, .home em{
display:inline-block;
height:40px;
line-height:34px;
margin:0;
color:#954b05;
}
.home span{
padding-left:15px;
background:url(http://www.uploadup.com/di-GRW2.png) no-repeat 0 0;
}
.home em{
font-style:normal;
padding-right:20px;
background:url(http://www.uploadup.com/di-GRW2.png) no-repeat 100% 0;}
See E.X In Action : HERE
My Problem : HERE
It's doing that because the corners of your PNG are transparent. Either make them white (same as background) or use another method. Most modern browsers allow you to do rounded borders via CSS now (with the exception of IE).
you can make the same curve box as per your image with css3 here is small css for you to make curve box and compatible with all browsers:-
.box {
border:1px solid #dadada;
width:50px;
height:50px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(border-radius.htc);
}
check the live demo:- http://jsfiddle.net/ZysQa/3/
i have used behavior hack for ie support border radius property so for ie border details you can read this article.....cross browsers css3 border radius
Related
I'm looking to overlap the same texts right on top of each other for an interesting idea I had on syntax highlighting.
I'm trying to do it with the textarea in the foreground, and the div in the background.
After setting the same position of the elements as well as the same font size, they still do not overlap perfectly. What am I missing, exactly?
Fiddle
div,textarea{
position:absolute;
top:0;
left:0;
background:transparent;
font-size:1em;
line-height:1em;
}
set a same font-family for both
textarea has 1px border so you can add border:1px solid transparent to div which has the text so that it aligns
* {
margin: 0;
padding: 0;
}
div{
border:1px solid transparent
}
div,
textarea {
position: absolute;
top: 0;
left: 0;
background: transparent;
font-size: 1em;
line-height: 1em;
font-family: arial;
}
<div>Hello, world!</div>
<textarea>Hello, world!</textarea>
Try setting the font-family, padding, and border-width explicitly:
div,textarea{
position:absolute;
top:0;
left:0;
background:transparent;
font-size:1em;
line-height:1em;
font-family:sans-serif;
padding:0;
border-width:0;
}
Two comments:
Browsers define a default style for textarea elements, so the trick is to figure out what properties are being set by the browser and override those explicitly. It's best to override the properties on both the div and the textarea. If you only change the div to accommodate for the browser's default style of the textarea, you'll get varying results in different browsers. For example, in Chrome the default border width for a textarea is 1 pixel, while in Firefox, it's 2 pixels.
Due to the way font anti-aliasing works, you'll always get a slightly bold effect. Probably best to set one of the two font colors to white or transparent.
Try this :-
Link
div,textarea{
position:absolute;
top:0;
left:0;
background:transparent;
font-size:1em;
line-height:1em;
font-family:arial /*add same font-family */
}
and
div{
padding:3px 3px 0
}
I have a error message to be displayed
i can center it using text-align center if there was no background. but now its clearly visible that it occupies the whole width of the container it being a <p>.
so i gave width and margin:0 auto;
but i cant give its class to every other error message because width changes.
so is there any way to center it without giving width.
here is what i currently have JSFIDDLE
HTML:
<p class="error"><b>Error:</b> Dont select corners, select edges!</p>
CSS:
.error{
padding:15px;
border:1px solid #ebccd1;
border-radius:4px;
background-color: #f2dede;
margin:0 auto;
font-family:consolas;
font-size:17px;
color:#a94442;
width:370px;
}
Change the display of the p element to inline-block and then add text-align:center to the parent element to center it.
UPDATED EXAMPLE HERE
.parent {
text-align:center;
}
.error {
padding:15px;
border:1px solid #ebccd1;
border-radius:4px;
background-color: #f2dede;
font-family:consolas;
font-size:17px;
color:#a94442;
display:inline-block;
}
Alternatively, you could change the display of the p element to table as King King points out.
It's worth noting that this approach wouldn't work in IE7 though.
You can use display:table for the p:
.error {
...
display:table;
}
Demo.
I have a cicle created with CSS that is positioned absolutely in it's container. The text in the circle is a link. Can this link be centered vertically and horizontally inside the circle? I am testing on Firefox and Chrome with the browser set to 320px wide. I am also testing on the iOS Safari Mobile.
Here is a fiddle I made to demonstrate where I am at with this at the moment:
http://jsfiddle.net/rFZBA/
Here is the HTML:
<div class="container">
<div class="circle">
+
</div>
</div>
Here is the CSS:
.container {
position:relative;
width:300px;
height:100px;
background-color:#999;
}
.circle {
position:absolute;
left:100px;
top:50px;
height:1.25em;/** 20px / 16px = 1.25em **/
width:1.25em;/** 20px / 16px = 1.25em **/
padding:0.75em; /** 12px / 16px = 0.75em **/
border-radius:1.375em; /* Half of 44px is 22px :: 22px / 16px = 1.375em **/
background-color:#4d90fe;
color:#FFF;
box-shadow:1px 1px 2px 2px rgba(0, 0, 0, 0.4);
text-align:center;
}
.circle > a {
color:#FFF;
text-decoration:none;
font-size:2.5em;
font-weight:bold;
}
Simply apply the .circle to the <a> tag: http://jsfiddle.net/rFZBA/16/
And then do some little modifications so that the size is good.
It's automatically centered here as the border is around the text and the text is of quadratic size (a single +). Also, don't forget to make the line-height equal to the height and with, so that's centered vertically.
use line-height and text-align
.circle > a {
color:#FFF;
text-decoration:none;
font-size:2.5em;
font-weight:bold;
line-height:0.625em /* wich is 1.25em (2.5/5X1.25) or use : 1.25rem; */;
text-align:center;
}
Did you try something like this?
http://jsfiddle.net/rFZBA/10/
.circle > a {
color:#FFF;
text-decoration:none;
font-size:2.5em;
font-weight:bold;
display:block;
position:absolute;
left:10.5px;
top:0px;
}
I was able to get it centered by adding display: table; to .circle and display: table-cell; vertical-align: middle; to .circle a; however, it created an oblong object rather than a pure circle. Here's the fiddle. http://jsfiddle.net/Nirvanachain/rFZBA/
If I change the font size of the <a> to 16px, then you have exactly what you want.
I have this CSS. the property FILTER In class .crumb make my background and this works perfectly and Chrome, Firefox, safari, iPad, iPhone,Android... but for an unknown reason. It just doesnt work on ie9. I see the dark bordes with a radius, but the background is just completly square.
.left-crumb {
margin-left:15px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-bottomleft:5px;
border-top-left-radius:5px;
border-bottom-left-radius:5px;
}
.crumb {
margin-top:20px;
margin-bottom:10px;
background-image:0 color-stop(0.3,#798aad), color-stop(0.51,#6276a0), color-stop(0.51,#556a97), color-stop(0.75,#566c98), to(#546993));
background:linear-gradient(top,#4c4c4c0%,#59595912%,#66666625%,#47474739%,#2c2c2c50%,#00000051%,#11111160%,#2b2b2b76%,#1c1c1c91%,#131313100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c4c4c',endColorstr='#131313',GradientType=0);
font-weight:bolder;
border:solid 1px #54617D;
height:30px;
padding-left:10px;
padding-right:10px;
display:inline-block;
color:#FFF;
line-height:28px;
border-color:#484E59 #aaa #4C5C7A #54617D;
}
.right-crumb {
position:relative;
margin-right:10px;
padding-right:25px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-right-radius:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomright:15px;
border-top-right-radius:15px;
border-bottom-right-radius:15px;
}
Here's a quick HTML so you can test.
<div id="adminPanel"><a class="left-crumb crumb right-crumb" href="admin.php">Admin panel</a></div>
adminPanel is just a div to contain all
Still IE9 doesn't supports yet, but you can use SVG to achieve this, please download the source code and check the demo here
http://css3wizardry.com/2010/10/29/css-gradients-for-ie9/
I have this html
<div class="p-box">
<div class="p-img"></div>
<h3>title</h3>
<div class="txt">some txt</div>
</div>
with this css.
.p-box {
width:253px;
height:155px;
position:relative;
float:left;
overflow:hidden;
background: url(../images/p-box-bg.png) top left no-repeat;
}
.p-box h3 {
color:#FFF;
width:253px;
text-align:center;
font-size:12px;
height:22px;
line-height:22px;
display:block;
}
.p-img {
position:absolute;
top:1px;
left:1px;
width:253px;
height:155px;
z-index:5;
background: url(../images/p-img-bg.png) top left no-repeat;
}
.p-box .txt{
width:249px;
height:20px;
background: url(../images/p-img-txt-bg.png) top left no-repeat;
position:absolute;
bottom:2px;
left:2px;
z-index:50;
text-align:right;
color:#FFF;
font-size:12px;
line-height:20px;
}
In firefix all ok, but in IE i can't see my H3 over the p-img and p-img don't feel the container overflow..
can anyone help me??
Thx.
I would recommend on your H3, set it to something more particular, ie: an id. Once done, set the background image in the new id tag, not the H3 element in css. so:
.p-box #h3image {
color:#FFF;
text-align:center;
font-size:12px;
display:block;
enter code here
width:253px;
height:22px;
padding-top: 133px;
z-index:5;
background: url(../images/p-img-bg.png) top left no-repeat;
}
Note that the padding-top 133 px + height of 22px will make the entire height of the container 155px; being the size of your image. As the padding from the top is 133, this will leave 22px for the text to be in place, as the image is a background, text is in the foreground, fully seo compliant and browser compatible.
:)
As some articles allude with on IE's z-index bug, give the h3 element a high z-index (at least, higher than the z-index=5 given to .p-img).