I am trying to create a pre-styled button using a div with a class of .red-button. Some buttons need to have a littel magnifying glass on them so I am thinking I can use the CONTENT property to display this on those buttons that need it by simply adding "features" to the class.
<div class="red-button features">Find a Home</div>
CSS looks like this:
.red-button {
background: none repeat scroll 0 0 #A20335;
color: #FFFFFF;
font-size: 70%;
font-weight: normal;
padding-left: 10px;
text-transform: uppercase;
width: 193px;
}
.red-button.features, .red-button.floor-plans {
margin-right:20px;
content:url("http://www.abc.com/popeye/wp-content/uploads/construct/icon-magnifier.png");
}
So why is my magnifying glass not showing up?
I know the link is right because when I add ":before" to the css it shows up.
.red-button.features:before
Here is the page I am working on: http://splitlightdesigns.com/megatel/?page_id=379
Many thanks,
Houston
content can only be used with the ::before and ::after pseudo-elements. https://developer.mozilla.org/en-US/docs/Web/CSS/content
Related
I have a link - notifications - with a red disc next to it. I would like hover on the disc OR text to result in the text only being underlined (I also would like clicking anywhere in link to go to the same link).
I can find nothing in Google about this specific issue.
Everything I try makes the 1 get an underline as well as the notifications text:
HTML
<div class="col-sm-offset-4 col-sm-5" id="nav">
<div class="userbox">
<span class="numbercir">1</span> Notifications |
Signin | Signup
</div>
</div>
CSS
.numbercir {
border-radius: 3px;
height: 16px;
width: 16px;
padding: 2px 3px;
background: #f00;
color: #fff;
text-align: center;
font: 12px Arial, sans-serif;
}
/* This doesn't work - ie doesn't stop the 1 getting an underline */
a .numbercircle:hover {
text-decoration: none !important;
}
How can I do this? Thx. (HTML 5 / CSS3 are fine as long as the technique has wide browser support).
You can put the part you want to be underlined in a span.
This has also the effect, that you will online get the underline, when you go over that specific span.
a .ca:hover {
text-decoration:underline;
}
ABC<span class="ca">CD</span>
And in case you want to underline only a certain part not only when you hover over that part, just change css to this:
a:hover .ca {
text-decoration:underline;
}
ABC<span class="ca">CD</span>
I hope I got you right this time :-)
You could make the notification count a pseudo element positioned absolutely, then add the count as an attribute. That way your html would stay simple & clean. So the html would look like this:
Notifications
Functional example here:
https://jsfiddle.net/p0593yz9/1/
Try this:
a .highlight:hover {
text-decoration:underline;
}
Notif<span class="highlight">ications | Loc</span>ations
I am trying to implement a pagination control on the following page:
http://equiniti.hireserve-projects.com/vacancies.html
As you can see when viewed in a decent browser such as Firefox, the pagination controls will appear nicely inline as shown below:
However, when viewed in IE7 and IE8, the pagination controls appear as follows:
By default, these elements should all appear inline so I do not understand why they are overlapping in this way. The following CSS is applied to these elements:
.paginationControls a{
background: none repeat scroll 0 0 #FFFFFF;
font-size: 20px;
margin-left: 3px;
padding: 12px 10px;
color: #424242;
}
.paginationControls a:hover,
span.arrowNext:hover,
span.arrowPrev:hover,
.paginationControls a.jp-current
{
color: #ffffff;
background-color: #E41800;
}
span.arrowNext,
span.arrowPrev{
background: none repeat scroll 0 0 #FFFFFF;
color: #424242;
font-size: 20px;
margin-left: 3px;
padding: 12px 10px;
}
The following is the structure of my HTML:
<div class="pagination">
<span class="arrowPrev">« Previous</span>
<span class="paginationControls"></span>
<span class="arrowNext">Next »</span>
</div>
Could anyone explain why this is happening when spans should appear inline by default? I've tried the usual trick of ensuring that the parent element isn't floated but this doesn't make any difference in this case.
Any help would be greatly appreciated. This is in native IE7 and IE8 on a virtual machine.
I am not able to test IE8 but please try applying:
.pagination span{
display:inline-block
}
As I recall span tags do not render as block level elements by default.
You should also specify a min-height and min-width to force a block.
Alternatively use a div instead of a span tag.
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'm webmaster of a directory site with basic CSS skills, using SobiPro on a Joomla base. Directory entries display 2 images at top - an exterior and interior photo. At times, only 1 or the other (sometimes neither) is available; so, I have a line entry that asks anyone who can supply the missing pic(s) to email it/them to me. Until our latest upgrade, this was not a problem, but now it is. Cannot get the two divs aligned. You can see an example here!
This is what the CSS template currently looks like:
div.field_photos
{
border-style: none;
font-weight: bold;
font-size: 12px;
color: #000000;
padding-left: 5px;
margin-top: 360px;
margin-left: 5px;
}
div.field_addy1
{
border-style: none;
font-color: #000000;
font-weight: bold;
font-size: 12px;
margin-top: 0px; /* position it horizontally */
margin-left: 5px;
margin-right: 5px;
}
where field_photos is the intro line (select list choosing either 'interior' or 'exterior' text) and field_addy1 is the bot-protected email addy. I tried floats, but the text tried to wrap on the pics. Tried making it into a single div, using the intro text and 'Directory Webmaster' combo into a single hyperlink, but that didn't fly.
Field widths are 150px and 200px respectively with the Title length and URL length set at 200px max. Any suggestions would be much appreciated.
Your positioning here with margins is a bit crazy. I'm not fully sure what's going on with that. To fix this issue a quick way:
Firstly, remove the margin-top from your .field_photos divider and remove the float:left properties from your main image:
<img class="spFieldsData field_sobi2_icon" src="..." alt="">
.field_sobi2_icon {
float:none;
}
Then change the display of the two fields you want aligned alongside eachother:
<div class="field_photos">...</div>
<div class="spField newClass2">...</div>
.field_photos, newClass2 {
display: inline;
}
Is there a way to put a title of a module (in my case a banner module) over an image?
Here is an example: http://www.nulaena.si/temp
I would like to put text "Ask a technical question" over the yellow image (background).
I tried with margin-bottom: -10px and z-index but with no success. Maybe I didn't do it right.
This is the code I have so far:
<div class="moduletable_banner-yellow">
<h3>Ask a technical question</h3>
<div class="bannergroup_banner-yellow">
<div class="banneritem_banner-yellow"><img src="http://nulaena.si/joomla/images/banners/banner-yellow.png" /><div class="clr"></div></div>
</div>
</div>
.moduletable_banner-yellow h3 {
margin-bottom: 0px;
padding-left: 20px;
font-family: arial;
font-size: 16px;
font-weight: bold;
text-shadow: #6374AB 2px 2px 2px;
text-transform: uppercase;
text-decoration: none;
color: #fff;
text-align: left;
}
I tried to put banner image as a background like in the example:
.moduletable_banner-yellow {
background-image:url('http://nulaena.si/joomla/images/banners/banner-yellow.png');
height: 50px;
width: 511px;
}
But then you can't click on the banner because there is no image selected in the back-end (there is no link, only text). If I select an image it is pushed down because of the text.
I guess another option is to modify source code so would be a link, but I would rather avoid it.
Try using absolute positioning with the text? I think that may work. Give the two modules the exact same position in Module Manager, and then 'absolutely position' the text so it's over the banner?
Or perhaps just load the image & text into the same module? I'm not sure I see the benefit of doing it using two separate modules? What would be the point if they're just going to overlap?