.classname {
background-image:url(../../images/classname.png);
background-color:transparent;
background-repeat:no-repeat;
text-align:center;
border:none;
height:50px;
width:160px;
font-size:12px;
font-family:Tahoma, Geneva, sans-serif;
color:#CCC;
}
<div class="classname">Text</div>
Why the Text is above of image? What should I add to make it normal? I can use padding-top, but then the bottom of image will have space too if you know what I mean.
Thanks.
I created this for you, I think that's how you want to make it.
Because the image is a background for the text.
If you're trying to make an image button with text fallback, do <img src="someurl" alt="sometext" />
What do you mean by above?
Related
I'm trying to get absolute 0 padding around my button.
I have tried
padding:0px;
But as you can see from the image I still have space top and bottom of the button (Blue line is border). Any suggestions?
Edit: Button code:
<asp:Button ID="WPDErrorBtn" Style="font-family:'Century Gothic'; font-size:65px; background:none; padding:0px; margin:0px; border:none; " runat="server" OnClick="WPDErrorBtn_Click" OnClientClick="showLoading();" />
Try to change the line-height to for example 65px; the chances are real that you have to try a smaller number.
Edit example
<button style="font-family:'Century Gothic'; font-size:65px; background:none; padding:0px; margin:0px; border:1px solid blue; line-height:50px;">0</button>
What is this inside border, number or picture?
try this ---> padding:0px !important;
But i think it is not padding issue, please more details...
I'm having issues with making text inside of div tags be the size that I request it to be (in pixels). Say I want the font-size to be 20px, but I want the div size to be 250 by 50 pixels. However, the text seems to take the size of the div and becomes stretched out. Here is the code I am using:
.NavBarHome {
font-family:"Helvetica Neue";
font-size:20px;
text-align:center;
width:250px;
height:50px;
text-height:20px;
display:inline-block;
background-color:#161616;
color:#fff;
line-height:50px;
}
What can I do to make the text the size I want? I've used this script numerous times before and it worked just fine, but for some reason it just doesn't work this time. Any advice?
Try adding a max-width:250px to your CSS:
.NavBarHome {
font-family:"Helvetica Neue";
font-size:20px;
text-align:center;
width:250px;
max-width:250px;
height:50px;
display:inline-block;
background-color:#161616;
color:#fff;
line-height:50px;
}
<div>
<div></div>
<div class="NavBarHome">Home</div>
</div>
I have an issue I can't figure out. I'm hoping for a CSS expert:)
http://pensacolachiropracticspinalcenters.com/
I've created a bootstrap carousel. The html blocks go like this.
<div #HomeBannerPane> (position:relative)
<div #home-carousel></div>
<div #HomeBoxWrapper (position:absolute;)
<div #HomeBoxFirst></div>(.homebox float:left)
<div #HomeBoxFirst></div>(.homebox float:left)
<div #HomeBoxFirst></div>(.homebox float:left)
</div>
</div>
Actual CSS
/*Home Carousel and 3 Green Boxes*/
#HomeBannerPane{position:relative; left:-16%;}
/*#home-carousel{position:relative;}*/
#HomeBoxWrapper{
width: 75%;
position:absolute;
bottom:0px;
left:16%;
z-index:10;
}
.homebox{
width:33%;
float:left;
max-height:340px;
min-height:159px;
padding-top:21px;
padding-right:30px;
padding-left:30px;
padding-bottom:30px;
overflow-x:hidden;
overflow-y:hidden;
color:#FFFFFF;
}
.homebox h2{margin-bottom:15px;}
.homebox p{
color:white;
font-family: 'Source Sans Pro', sans-serif;
font-size:13px;
}
#HomeBoxFirst{background:#7CBA3D;}
#HomeBoxSecond{background:#43A140;}
#HomeBoxThird{background:#008238;}
I have the bottom of #HomeBoxWrapper zeroed out to the bottom of the #HomeBannerPane which is where the Carousel fits into. #HomeBannerPane has a z-index to sit on top of the carousel.
The problem I am having is when the slides rotate, it kicks the #HomeBoxWrapper and all three boxes down during the transition. I am completely stumped. I really need it to quit doing that. Any suggestions?
Thanks
If you make .carousel-inner height a bit smaller, say 660px instead 667px then the #HomeBoxWrapper not kick the three boxes inside it.I don't know exacly why, but i tested with Firebug and it works on Firefox 32. Hope it help.
I don't know how to call it exactly, these are the example i am working on.
Is is possible to make all of this using html and css on the sqaure and triangle part
or it is better just to use images
Yes it possible to make it using pure css but
it shows different result for different browser. i Better suggest you to take help of css and image.
<div class="firstDiv">
<div class="secondDiv"></div>
<div class="arrowDiv"></div>
</div>
apply following css
.firstDiv { float:left; height:25px; width:200px;}
.secondDiv{ float:left; height:25px; width:170px; background:#666; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:25px; color:#FFF;}
.arrowDiv { float:left; height:25px; width:25px; background:url(images/arrow.png) left no-repeat;}
I'm trying to create a "cancel" link that looks like an x with a solid red circle behind it.
Here is the CSS:
.circle {
display:inline;
padding-left:4px;
padding-right:4px;
background:rgb(196,15,24);
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.circle a {
font-size:10px;
text-decoration:none;
color:#fff;
}
This is the HTML code:
<div class='circle'>
x
</div>
It ends up looking like this: alt text http://www.freeimagehosting.net/uploads/472563dfe4.png.
How do I move the x so that it is centered within the circle? Changing the margin-top or bottom doesn't seem to work...
If you relatively position your a tag you can fix it:
.circle a {
font-size:10px;
text-decoration:none;
color:#fff;
position:relative; top:-2px;
}
Adjust the top value to your liking.
Your font must accomodate characters like É, q, X and x, etc and still be displayed over background whatever the height of the character is.
I found that using an X (or text-transform: uppercase; obviously) and font-family: monospace; was an improvement with your code, though not perfect. Solution provided by mhr is useful even with a monospace font.
I am doing something similar, and using the following to center my text:
text-align: center;
margin: auto;
position: relative;