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
Related
I am trying to create a css style that give the same result like native browser highlight so i can put in the css into tinymce.
but from the photo below you can see that the height of the custom css is too low, i tried a few method like using display:inline-block, it works fine for the height but it automatically remove the first and the last space.
Any expert please advise.
Do you mean something like this:
.highlight {
font-size: 14px;
display: inline-block;
color: #fff;
background-color: blue;
padding: .5em 0;
}
Here's a fiddle:
https://jsfiddle.net/c7rdekej/
Create a span around the text you want to highlight and assign a class to it
like highlight
And add css property like below
.highlight {
background:#008AE6;
color:#ffffff;
}
Check this fiddle for clarification http://jsfiddle.net/5u52qw57/
Let me know if it is helpful
I am new to CSS. I am observing a strange CSS behaviour where an element has the below CSS property
.container .header{
color: #FFFFFF;
font-size: 2em;
font-weight: bold;
padding: 5px;
position: relative;
text-align: center;
top: 21%;
}
When the page loads on Mozilla and chrome, the top property is not applied but inspecting the firebug shows the property. When I edit in firebug just by 1px, the elements gets properly aligned and even if I set the top value to 21% after that, the position is correct. Only on load the CSS property is not applied. Can you please let me know where I am going wrong?
It's because you are calculating the top value in percentages and to make that happen, you need a declared height for it's parent i.e. container.
.container, body, html {
height:100%;
}
Add the rule above and see it working. FIDDLE HERE
NOTE - body and html also need their height declared(either in percentages or pixels) too as container's parent is body and like so.
I know exactly what it is now. Its your style class names themselves. After much testing I have discovered:
.container, .header {
color:#ffffff;
font-size:2em;
font-weight:bold;
padding:5px;
position:absolute;
text-align:center;
top:21%;
}
Notice what's after the .container? A COMMA. You need a Comma after every class name that inherits those same attributes! Hope this helped!
I want to use a standard set of buttons on a website regardless of what is written in them (i.e. submit, pay, go, spell correct) but for some reason I can not get the sprite image to show up. My codes is as follows:
HTML:
<div id="iconic">
Place Sprite button here <span><a class="button" href="#">Test</a></span>
</div>
CSS:
span.iconic a:link
span.iconic a:visited
{
display: block;
background-image:url('images/an_nav_btn.jpg');
width: 150px;
height: 45px;
}
span.iconic a:hover
{
background-position: 0 -50px;
}
span.iconica a:active
{
background-position: 0 -100px;
}
Any suggestions on how to get this to display with the text on top (in this case it will have the button with the word "test" on it.
Thanks in advance.
According to your posted css you are attempting to manipulate a link inside a span with the class of "iconic"... and that doesn't work with what you have in the html:
to get you on the right track, try
replacing all the span.iconic's
with #iconic span's
#iconic span a translates to "all <a>'s inside a <span> inside any element with the id of 'iconic' "
In CSS:
. is used for to prefix class names
# is used to prefix IDs.
Your element is a DIV, and you're specifying a SPAN in your CSS. You've got both of these mixed up.
The CSS declaration for <div id="iconic">
would be:
#iconic {
...
}
You may want to consider looking at Font Awesome, that handles a lot of this for you.
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 got the following in my .css file creating a little image next to each link on my site:
div.post .text a[href^="http:"]
{
background: url(../../pics/remote.gif) right top no-repeat;
padding-right: 10px;
white-space: nowrap;
}
How do I modify this snippet (or add something new) to exclude the link icon next to images that are links themselves?
If you set the background color and have a negative right margin on the image, the image will cover the external link image.
Example:
a[href^="http:"] {
background: url(http://en.wikipedia.org/skins-1.5/monobook/external.png) right center no-repeat;
padding-right: 14px;
white-space: nowrap;
}
a[href^="http:"] img {
margin-right: -14px;
border: medium none;
background-color: red;
}
Google
<br/>
<a href="http://www.google.ca">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/4a/Commons-logo.svg/50px-Commons-logo.svg.png" />
</a>
edit: If you've got a patterned background this isn't going to look great for images that have transparency. Also, your href^= selector won't work on IE7 but you probably knew that already
It might be worth it to add a class to those <a> tags and then add another declaration to remove the background:
div.post .text a.noimage{
background:none;
}
You need a class name on either the a elements you want to include or exclude. If you don't want to do this in your server side code or documents, you could add the classes with javascript as the page is loaded. With the selection logic wrapped up elsewhere, your rule could just be:
a.external_link
{
background: url(../../pics/remote.gif) right top no-repeat;
padding-right: 10px;
white-space: nowrap;
}
It would be possible with XPath to create a pattern like yours that would also exclude a elements that had img children, however this facility has been repeatedly (2002, 2006, 2007) proposed and rejected for CSS, largely on the grounds it goes against the incremental layout principles.
So, while it is possible to do neat conditional content additions as you have with a contextual selector and a prefix match on the href attribute, CSS is considerably weaker than a general purpose programming language. To do more complex things you need to move the logic up a level and write out simpler instructions for the style engine to handle.
If you have the content of the links as a span, you could do this, otherwise I think you would need to give one scenario a class to differentiate it.
a > span {
background: url(../../pics/remote.gif) right top no-repeat;
padding-right: 10px;
white-space: nowrap;
}
a > img {
/* any specific styling for images wrapped in a link (e.g. polaroid like) */
border: 1px solid #cccccc;
padding: 4px 4px 25px 4px;
}