I am attempting to display an image behind the day of the week of each paragraph, but only part of the background image is displaying. I've tried padding previously but could use some assistance as I am a novice with aspects of css.
The html is:
<section id="top">
...
<p><span>Mon</span><span>Open</span></p>
<p><span>Tues</span><span>6:30 pm</span>Bible Study</p>...
The css is:
#top p span:nth-child(1){
font-family: 'Quintessential', cursive;
font-size:25px;
font-weight:normal;
color:#fff;
line-height: 59px;
background-image:url('img/ribbon.png');
background-repeat:no-repeat;
}
The SPAN is being displayed DISPLAY: INLINE; by default.
Try setting to DISPLAY: INLINE-BLOCK;
Here is some more info on why they work this way:
http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
Related
I'm designing a web page and I used HTML5 to make an entire div tag a link. Prior to adding the link, the whole div would expand when I hovered over it. Suddenly, it's only working if I hover over the words, not the box I created. The HTML looks like this (minus the actual link):
<a href="link goes here" style="text-decoration: none;">
<div class="home-tab">
home
</div>
</a>
And the CSS to make it hover looks sort of like this:
.home-tab:hover {
width: 150px;
height: 45px;
margin-top: 30px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
font-family: arial;
color: #FFFFFF;
text-align: center;
font-size: 13pt;
padding-top: 25px;
}
(Note: This is not all of the code in the stylesheet. I have some lovely color in there too.)
Is there something I'm missing in my CSS to make the whole thing work on the hover and not just the words? I'm not even sure what questions to ask to figure out what I've done here.
ETA: I have checked this across three different browsers. It has the same problem on IE, Firefox and Chrome.
ETA: CSS without the :hover attribute.
.home-tab{
width: 150px;
height: 35px;
margin-top: 40px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
font-family: arial;
color: #FFFFFF;
text-align: center;
font-size: 13pt;
padding-top: 25px;
}
ETA: Okay, here's something very weird. It seems that any elements on the far right don't have this problem. Seriously, the forums tab and next button on the far right both have :hover elements and they work exactly as I want them to.
Get rid of the <div> entirely and set <a> to display: block.
You're not supposed to put block-level elements inside of an <a> anyway.
Seems to be working fine here: jsFiddle
The only thing I can think of is that the div is not the size you think it is. the size and width elements that you are setting in your css are only active when your mouse is on the div. You need to set them in the normal non hover settings as well if you want the div to be that size. Right now it is defaulting to just large enough to hold the text. You can see this demonstrated by the black border I added in my example.
Here is my suggestion:
.home-tab {
/*All of the sizing code goes here to create box for div*/
}
.home-tab:hover {
/*anything you want changed on hover goes here*/
}
I hope I was understanding your question correctly. If you need more clarification please let me know. Good luck!
I think you want to expand that div when you hover cursor on that div.
i wrote a code below that will solve your hover problem.
Here is a code for you customize this
.home-tab{
width:150px;
height:45px;
margin-top:30px;
color:#008080;
font-family: arial;
background-color: blue;
transition-duration: .8s;
color:white;
text-align: center;
font-size: 13pt;
padding-top: 25px;
}
.home-tab:hover{
width:200px;
height:60px;
font-size: 16pt;
transition-duration: .8s;
}
a{ text-decoration:none} /* optional*/
</style>
<a href="#"><div class="home-tab">
home
</div>
</a>
I've looked everywhere for a solution to this so I don't really expect it to be simple.
I want to display an icon with an overhead text label. I'd like the text to respond to hover, whether the cursor is positioned over the text OR over the icon image.
The closest example I can find is at this link http://www.sencha.com/forum/showthread.php?122028-Label-with-icon
which gives the following CSS solution:
Label l = new Label("My Text");
l.addStyleName("my-label");
#CSS
.my-label {
background:url(my-icon.png) no-repeat right center;
padding-right:20px;
}
But my CSS skills aren't good enough - I haven't had much success in adapting this to an above-centered label instead of a centered label to the left of the icon image.
Would anyone like to give it a shot for me?
Additional Info:
Here's what I have now - which isn't working, the "display: block; doesn't seem to let me use a background-img attribute ...
CSS:
.blogicon {
width: 70px;
text-align: center;
background-img:url("http://dispatchesusa.typepad.com/the_dov_blog/link-images/bookmark.png") no-repeat bottom center;
display: block;
padding-top: 4px;
padding-bottom: 90px;
}
HTML:
/* <h6 class="blogicon">Blog</h6> */
If you want to display the text above the icon, You can change the CSS to be:
.my-label {
background:url(my-icon.png) no-repeat bottom center;
padding-bottom:20px; /* this should be >= the icon's height */
}
It would be better if we could see your HTML, too, or at least a screen shot of what you are picturing, but this should be pretty easy. You can either wrap an <a> around the text and icon and set :hover rules, or you could add the text via the :before pseudo element to the <a>, which can be styled for both hover and non-hover states.
EDIT:
Now that we have a better idea of what you want, here's how you could do it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
.blogicon {
width: 70px;
text-align: center;
backgrond: #f7f7f7;
padding-top: 4px;
}
.blogicon a {
display: block;
background:url("http://dispatchesusa.typepad.com/the_dov_blog/link-images/bookmark.png") no-repeat 50% 100%;
padding-bottom: 90px;
color: blue;
text-decoration: none;
font-weight: bold;
}
.blogicon a:hover, .blogicon a:focus {
color: red;
}
</style>
</head>
<body>
<div class="blogicon">Blog</div>
</body>
</html>
I have taken the liberty to change <h6> to <div>, as this probably is not a true heading. But of course, you can change this back if you want, but it's rare to need an <h6>, so I suspect you are using it for presentational reasons, which is to be avoided. It's easy enough to set the font-weight of the link to bold, as shown.
I am having the css sprite image.And it works fine but the issue is I want the image right side of the anchor tag's text.But it displays in the left side.The sprite image is here.
http://jstiles.com/temp/1360875952/ctrls/css-sprite.png
Expected result:
[Mylinktext]<MyImagehere>
Actual result what I am getting is
<MyImagehere>[Mylinktext]
I don't want to use after pseudo class.Becuase it wont work out in the IE7 browser too.My code is below.
.ctrls
{
font-family:Arial;
font-weight:bold;
font-size:16px;
color:black;
background-image: url(images/ctrlsprite.png);
//background-image: url(images/css-sprite.png);
background-repeat:no-repeat;
text-decoration:none;
display: inline-block;
padding-left:30px;
}
.ctrls:hover
{
background-position: 0px -252px;
text-decoration:underline;
}
a.magenta
{
background-position:0px -144px;
}
And HTML
<div>
<p>Magenta</p>
Et Movet
</div>
How can I place the image right side of the Text?
How about adding a <span> to the right of the text in the anchor tag? Demo
HTML
<div>
<p>Magenta</p> Et Movet <span class="icon"></span>
</div>
CSS
.ctrls {
font-family:Arial;
font-weight:bold;
font-size:16px;
color:black;
text-decoration:none;
}
.ctrls:hover {
text-decoration:underline;
}
.ctrls .icon {
display: inline-block;
background-image: url(http://jstiles.com/temp/1360875952/ctrls/css-sprite.png);
background-repeat:no-repeat;
width: 16px;
height: 16px;
background-position:0px -144px;
}
.ctrls:hover .icon {
background-position: 0px -252px;
}
When I tried your code, the result seems to be as you want: [Mylinktext]<MyImagehere>. I'm probably missing something. Try and explain what and will try and help you out.
Personally, I wouldn't use a sprite. Instead, I would make one image per color (I find that easier to work with) or, even better, make a font with the character I want (reference: http://mashable.com/2011/11/17/free-font-creation-tools/; I haven't tried any of the programs, so I don't know how good they are)
and then use the #font-face Rule (reference: http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp).
I made a css example. The main parts where I am facing problems are:
#sign
{
font-size: xx-large;
color:white;
background-color:blue;
font-weight:bolder;
text-align: right;
position:right;
}
and I am implementing it like:
<div id="sign">Me and Me</div>
Here the background color is displayed like a band. Now I want the background color to be limited to only the text area "Me and Me". What modifications do I have to do to acheive this?
Is there a reason that you can't just set the background for whichever elements you want styled?
Using this link you can see that what you need is a display: inline; call. I wrote up a quick jsFiddle for you to look at, this should be what you want...
http://jsfiddle.net/NjAUR/
Seeing that you want it on the right hand side, get rid of the position: right declaration, and use a float: right. Here is the updated version...
http://jsfiddle.net/NjAUR/1/
Use display:inline; with your css. And if you need that in right side use float:right also.
See the Demo
Okay here I wrapped the "Me and Me" text inside a span. Removed background-color property of #sign and added it to the span.
HTML
<div id="sign"><span>Me and Me</span></div>
CSS
#sign
{
font-size: xx-large;
color:white;
font-weight:bolder;
text-align: right;
position:right;
}
#sign span { background-color:green; } /* or any color of your choice */
Demo link
I'm writing a mobile website and I've looked for hours at a centering problem I'm having.
The website is http://peatarian.com and you can emulate the iphone browser using transmog.
The CSS can be found at this page, but the most important parts are the following :
html, body {height:100%;float:center;text-align:center;}
body {background-url:url(raypeat.gif) no-repeat left top;margin:0; padding:0; text- align:center;color:black;}
body,td,input,textarea {font-size:100%; font-family:Verdana, Arial, Helvetica, sans-serif;}
a:link,a:active,a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
p {margin-top:0;}
table {background: none repeat scroll 0 0 white;}
and
.qa-nav-main {float:center;clear:both;border-top:1px solid black;border-bottom:1px solid black;background-color:#B7E3DA;margin:auto;margin-top:10px;padding:10px 0px;display:block;margin-left:auto;margin-right:auto;}
.qa-nav-main-list {font-size:125%; list-style:none;margin:auto;display:block;margin-left:auto;margin-right:auto;}
.qa-nav-main-item,.qa-nav-main-item-opp {margin:auto;display:block;float:left;margin-left:auto;margin-right:auto;}
.qa-nav-main-item {display:block;margin-left:auto;margin-right:auto;}
.qa-nav-main-item-opp {margin:auto;display:block;margin-left:auto;margin-right:auto;}
.qa-nav-main-link {color:#fff; display:block; padding:6px 10px; background-color:none;}
.qa-nav-main-selected {background-color:none; text-decoration:none;}
.qa-nav-main-hot .qa-nav-main-link {background:none;}
.qa-nav-main-hot .qa-nav-main-link:hover, .qa-nav-main-hot .qa-nav-main-selected {background:#396E63;}
The images are the (main) menu. If you'd turn the iphone on its side, you'd see that they aren't centered.... I've tried editing so many things in .qa-nav-main and also .qa-nav-mean-item but if I set float:center in the latter the menu items are all on a new line (though they are centered).
If you want to keep your code structure like you have it now, then just add a class to the <span> which contains your <center> which contains your buttons. The class would have the following rules:
display: block;
width: 200px; /* this should be the width you need, please assign your own */
margin: 0 auto;
To your .qa-nav-main class add the following rule:
text-align:center;
This should give you the desired effekt of your spans floating in the middle. But I would suggest that you rework your markup a bit and get rid of all the spans and center tags.
The above gives you the result depiced on the following image: