I can't seem to get the image sprite to display. Can someone look at the code and tell me if I have it correct? I have checked the code and can't seem to figure out what's wrong.
CSS
#nav-footer
{ background:url(./_img//Footersprite.png) repeat-y;
width: 490px;
height: 40px;
margin: 0;
padding: 0;
}
#nav-footer li, #nav-footer a {
height: 40px;
display: block;
}
#nav-footer li {
float: left;
list-style: none;
display: inline;
}
#whyroofrepair a:hover { background:url("/_img/Footersprite.png") 0px -40px no-repeat; }
#savings a:hover { background:url("/_img/Footersprite.png") -98px -40px no-repeat; }
#enviromental a:hover { background:url("/_img/Footersprite.png") -229px -40px no-repeat; }
#advantage a:hover { background:url("/_img/Footersprite.png") -352px -40px no-repeat; }
#whyroofrepair { width: 55px; }
#savings { width: 55px; }
#enviromental { width: 55px; }
#advantage { width: 55px; }
HTML
<ul id="nav-footer">
<li id="whyroofrepair">Why Repair</li>
<li id="savings">Savings</li>
<li id="environmental">Environmental Benefits</li>
<li id="advantage">Roof Rx Advantage</li>
Blockquote
http://jsfiddle.net/LQCm2/2/
I tested this using Js fiddle.
can some one take a look?
First, change ./_img//Footersprite.png to ../_img/Footersprite.png
If that doesn't solve the problem then proceed below:
If your _img folder, containing the sprite:
Live next to your css file, then your image path should be like
_img/foo.jpg
Live just outside your css file's parent folder, then your image
path should be like ../_img/foo.jpg
Live in the root of your project, then your image path should be
like /_img/foo.jpg
EmileKumfa - I added additional info. Please see original post
Related
I am working on a wordpress theme right now and I am wondering how to adapt font size of text inside boxes so that it always stays in the middle.
In my page at some point I have 3 rows in a section, with 3 images and in the first row I also have a text saying "En savoir plus" that is inside the image :
my wordpress section & rows
The section and its rows are responsive.
What it looks like without reducing the window
I have a class for that row that is set to "image" and the text is inside so I have put this code inside a HTML row:
.image p {
position: absolute;
top: 86%;
width:100%;
color:white;
margin: auto;
text-align: center;
}
.image {
position: relative;
}
As you can see the text-align center works perfectly when the page is normal.
But when you reduce it, my page looks like this :
After reducing a little the window
And when you reduce it again, my page looks like this :
After reducing a lot my window
What I would like is the text to change size and stay at the same place (center of the blue thing) proportionally when the boxe changes size. I will then duplicate this to all boxes.
Do you have any ideas how to do this?
Thanks in advance for your help guys, I would really appreciate is as I am kind of new to this :)
PS : I don't know if it helps but I am using the POFO template.
Have a wonderful day!
EDIT : All the code of my page :
<style>
.bordure {
border-bottom: 1px solid black !important;
}
.sub-menu > li > a {
color: blue !important;
}
nav.navbar.bootsnav .simple-dropdown .dropdown-menu > li {
background-color: white !important;
}
.simple-dropdown .dropdown-menu {
background: white !important;
}
a {
color:#71c9dd;
}
header.sticky nav.navbar-default, header.sticky nav.navbar.bootsnav {
background-color: transparent !important;
}
.pofo-footer-bottom {
display:none;
}
.texte_cabot {
z-index: 700;
position: absolute;
top: 550px;
left: 1600px;
font-size: 40pt;
}
header nav.navbar-default, nav.navbar.bootsnav, .full-width-pull-menu {
background-image: url('http://newstart.visceral.fr/wp-content/uploads/2018/12/bg_header.png');
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: transparent !important;
position: fixed;
top: 0;
left: 0;
}
header nav .nav-header-container {
padding-bottom: 163px !important;
padding-left: 0 !important;
}
.box-layout {
margin-top:-55px;
}
a:hover {
color:black;
}
body {
margin-bottom: 0;
padding-bottom: 0;
}
.image p {
position: absolute;
top: 86%;
width:100%;
color:white;
margin: auto;
text-align: center;
}
.image {
position: relative;
}
#media screen and (max-width: 778)
header nav.navbar-default, nav.navbar.bootsnav, .full-width-pull-menu {
background: url('http://newstart.visceral.fr/wp-content/uploads/2018/12/small_bg_header.png') repeat-x !important;
background-size: cover !important;
padding-bottom: 0 !important;
}
</style>
EDIT : Entire page HTML : (including POFO stylesheet (very long, sorry)) :
Tried to import it but it is too long to publish. Numbers of characters execeed. Could you please check it clicking the View code source on? :
http://newstart.visceral.fr/fluimucil/
On my wordpress site I use List category post plugin.
This is html code:
[catlist name=Ostatné numberposts=50 name_class=velkost
catlist thumbnail=yes force_thumbnail=yes catlist thumbnail_size=200,150 thumbnail_class=lcp_catlist
excerpt=yes excerpt_size=10 excerpt_class=moj_excerpt]
And this is CSS code:
.shrtthumbsd{
margin-bottom: 50px;
}
.shrtthumb {
float: left;
margin-left: 50px;
padding: 55px 15px;
display: inline;
width: 100%;
}
ul.lcp_catlist {
font-size: 22px;
}
.moj_excerpt{
font-size: 18px;
}
And it looks like this: https://www.akosizarobitpeniaze.sk/vsetky-clanky
I would like to align picture to the right side and have title of article (without bullet/dot) and excerpt under title.
Add this CSS to your site.
.lcp_catlist li { list-style: none !imporant; }
.lcp_catlist li img { margin-right: 0 !important; }
Using CSS, I would like an image/link that changes as the mouse moves over it. I don't understand why the code below is not working. #user.twitter does have a value. Since the link has no text, only an image, I'm a bit uncertain what to place as the first value behing the brackets. As it stands, no image at all shows up on the screen. What is wrong with the code below?
Html code:
<%= link_to("", #user.twitter, :class => "twitter") %>
CSS:
.twitter {
width: 20px;
height: 20px;
background: image-url('twitter.png');
}
.twitter:hover {
background: image-url('twitter_.png');
}
Update: If I check the page's source code it is:
<a class="twitter" href="http://www.example.com"></a>
It's hard to be sure without a demo with the actual HTML & CSS but your CSS is slightly malformed.
Also, the link would need to be inline-block or block rather than the default display:inline
.twitter {
width: 20px;
height: 20px;
background-image: url(http://4.bp.blogspot.com/-HkpT3JSkNWA/Txcu2eo0A-I/AAAAAAAAAlY/0eUq2M85Px8/s000/twitter.png);
background-size: cover;
display: inline-block;
}
.twitter:hover {
background-image: url('http://www.easychirp.com/images/share/twitter.png');
}
<a class="twitter" href="http://www.example.com"></a>
.twitter {
width: 20px;
height: 20px;
background: url('twitter.png') no-repeat;
}
.twitter:hover {
background: url('twitter_.png') no-repeat;
}
Here's my CSS:
.twitter {
width: 20px;
height: 20px;
background-image: url('twitter.png');
}
.twitter:hover {
background-image: url('twitter-hover.png');
}
I am quite new to the world of HTML and CSS coding and am currently testing things out that I learn on my own website.
I have created a pretty simple nav menu I guess using CSS sprite coding, I am using Visual Studios 2012 and everything appears properly in that program, however when I try to test my webpage in any browser (IE, Google, Firefox) my nav menu just disappears. I notice that the cursor does change when I hover over the space where the nav menu should be, however as I said, no menu actually displays.
To add to that, other elements that I have in my page do appear and seem to function properly?
Here is the HTML code I am using
<div class ="navmenu">
<ul class ="navbar">
<li class ="Aboutus"></li>
<li class="Projects"></li>
<li class="Contactus"></li>
</ul>
</div>
and then the CSS
.navmenu
{
height: 120px;
position: relative;
}
.navbar
{
position: relative;
top: 0px;
left: 0px;
height: 79px;
}
.navbar li
{
list-style: none;
position: absolute;
margin: 0;
padding: 0;
top: 0;
}
.narbar li, .navbar a
{
height: 60px;
display: block;
}
.Aboutus
{
left: 0px;
width: 174px;
background: url('c:\users\teila\documents\visual studio 2012\Projects\Concept2\Concept2\Img\navMenu2.PNG') 0px 0px;
}
.Projects
{
left: 174px;
width: 174px;
background: url('c:\users\teila\documents\visual studio 2012\Projects\Concept2\Concept2\Img\navMenu2.PNG') -174px 0px;
}
.Contactus
{
left: 348px;
width: 174px;
background: url('C:\Users\Teila\documents\visual studio 2012\Projects\Concept2\Concept2\Img\navMenu2.PNG') -348px 0px;
}
.Aboutus a:hover
{
background: url('C:\Users\Teila\documents\visual studio 2012\Projects\Concept2\Concept2\Img\navMenu2.PNG') 0px -60px;
}
.Projects a:hover
{
background: url('C:\Users\Teila\documents\visual studio 2012\Projects\Concept2\Concept2\Img\navMenu2.PNG') -174px -60px;
}
.Contactus a:hover
{
background: url('C:\Users\Teila\documents\visual studio 2012\Projects\Concept2\Concept2\Img\navMenu2.PNG') -348px -60px;
}
I've tried looking for days as to what the problem could be, hopefully somebody could help me out. It would be greatly appreciated.
It may be because you have an absolute path to the image with c:/ etc. If you use the relative path sp perhaps img/ or /img/ or ../img/ using ../ to step back however folders back you need to go to reach your image folder from the css file.
I've got an image of a house I want to display on my navbar as the 'home' link. I've entered some CSS to implement this but it doesn't seem to work. Could anyone help me display the image? See the image and CSS code below for clarification.
The light blue box is where the little white house should be. See below for CSS
html, body
{
padding: 0;
margin-right: auto;
margin-left: auto;
}
.navbar
{
height: 48px;
width: 100%;
background-color: #294052;
text-align: center;
vertical-align: middle;
margin-bottom: 10px;
}
li
{
display: inline;
position: relative;
padding: 20px;
border-right: inset 2px white;
font-size: 20px;
font-weight: normal;
font-family: sans-serif;
vertical-align: middle;
padding-top: 31px;
padding-bottom: 14px;
}
a
{
text-decoration: none;
color: white;
}
li:hover
{
text-decoration: underline;
background-color: #447294;
}
li.home
{
background-color: #447294;
background-image: url('home.png');
}
span
{
font-weight: bold;
}
I've tried using the display:block fix but it just messes up the rest of my navbar.
And the HTML code...
<div class="navbar">
<ul>
<li class="home"></li>
<li>ABOUT</li>
<li>CyMAL: MUSEUMS, ARCHIVES AND LIBRARIES</li>
<li>CONTACT</li>
</ul>
</div>
To start debugging, I'd first try to use absolute URL to make sure that the image can be loaded.
li.home
{
background-color: #447294;
background-image: url('full_path_to_image/home.png');
}
Also, please provide HTML code, ideally make a ready demo at http://jsfiddle.net/ (or any other similar service). That way you'll we can help you better.
EDIT: After you have added the HTML code, the problem seems to be indeed the path to your image.
Here is a working demo: http://jsfiddle.net/tBNSU/
Your background image is present in li.home; but li.home isn't wide enough to display anything. Background images are like background color - they won't change the shape of the content.
Try adding some content:
<li class="home">home</li>
Or change the alignment of your bg image to center center to perhaps see it more clearly.