I have some problem with displaying a sprite in a div that is in a li class.
So the structure is:
<li id="aa">
<div>one</div>
</li>
And the CSS:
li{
width: 120px;
height: 18px;
margin-top: 5px;
}
li div{
width: 20px;
height: 10px;
background-image:url(../images/sprite.png);
background-repeat: no-repeat;
margin-left: 0px;
font-weight:bolder;
border: 1px solid #fff;
}
When I use this I can see the sprite even outside the div. So I tried adding this to li:
background-image: none;
That makes the image in the div not visible too.
So if there is someone who know about that I really would appreciate.
It seems you are missing a ; after background-image please see below
background-image:url(../images/sprite.png);
Related
I've made a container and there is text and a background image in the container. The text is in h3 tags. I want the text to stay hidden showing only image. When user hover over the container I want to display the text and background image has to little transparent.
How can I do that??
this is my CSS code so far... I have also attached the image I'm usingImage I'm using for this code
.container{
background-size: cover;
background-repeat: no-repeat;
margin-top: 100px;
padding: 18px 40px;
font-size: 22px;
text-align: center;
width: 250px;
height: 250px;
border-radius: 35px;
color: transparent;
line-height: 200px;
float: left;
margin-left: 20%;
background-image: url(/Unstitched.jpeg.jpg);
}
.container:hover{
background: rgba(255,0,0,0.3) ;
color: black
}
You can probably do something like this:
.container {
margin-top: 100px;
padding: 18px 40px;
font-size: 22px;
text-align: center;
width: 250px;
height: 250px;
border-radius: 35px;
color: black;
line-height: 200px;
float: left;
margin-left: 20%;
position: relative;
}
.container::before{
z-index: -1;
content: '';
position: absolute;
inset: 0;
margin: inherit;
border-radius: inherit;
background-image: url(https://i.stack.imgur.com/MLu3i.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.container:hover::before {
opacity: 0.2;
}
.container h3 {
display: none;
}
.container:hover h3 {
display: block;
}
<div class="container">
<h3>My invisible Text</h3>
</div>
The relevant changes are these:
.container h3 {
display: none;
}
.container:hover h3 {
display: block
}
This makes the h3 tag invisible, until someone hovers over the container element.
Edit: From a comment on another answer I realized, that you want the image to become transparent on hover. To acheive that, you have to add the image to a separate element, otherwise the Text will be transparent too. To acheive this, I used a ::before element. Source
Slightly changed your css rules but mostly I used the opacity css property on the :hover to change its transparency when hovered. I also picked the first cors friendly picture from the internet to have a real picture to deal with in the background.
The behaviour is as you are expecting: the text is not displayed until the container element is hovered and at that point the opacity is set dimmer. The drawback is dimming the overall opacity including children elements and not only the background. To make it better it would require something like a ::before rule to add a styled element inside the container holding the background whose opacity will be uncoupled from the rest of the content.
.container{
background-size: cover;
background-repeat: no-repeat;
background-image: url(https://thumbs.dreamstime.com/z/cors-caron-boardwalk-across-bog-near-tregaron-wales-62354242.jpg);
font-size: 22px;
text-align: center;
width: 250px;
height: 250px;
border-radius: 35px;
color: transparent;
}
.container:hover{
color: black;
opacity: 0.6;
}
<div class="container">
<h3>Caption text</h3>
</div>
I have simple html:
<div class="other-album">
<img src="https://pravdamuzika.lasil.ru/media/files/covers/2021_8_13__Panimonica_Offline_Oblozhka.jpg" />
</div>
with css:
.other-album img{
width: 332px;
height: 332px;
border: #156196 solid 5px;
margin-bottom: 30px;
}
It looks perfect. But if I zoom it in browser I see strange margin between image and its border. And place of that margin depends on zoom degree
https://jsfiddle.net/ishayahu/d51zjrkp/1/
You need to set the box-sizing property to your image.
.other-album img{
width: 332px;
height: 332px;
border: #156196 solid 5px;
margin-bottom: 30px;
box-sizing: border-box; // solves your issue
}
Or if the anchor is already a display inline-block you may need to add font-size: 0;
To be frank, I have no idea why that happens or how to stop it from happening in this case. But I found a workaround (at least for chrome) - Don't use <img>, set background to the <a> instead!
<div class="other-album">
</div>
.other-album a {
width: 332px;
height: 332px;
border: #156196 solid 5px;
margin-bottom: 30px;
display: block;
background-image: url("https://pravdamuzika.lasil.ru/media/files/covers/2021_8_13__Panimonica_Offline_Oblozhka.jpg");
background-size: 100% 100%;
}
Fiddle: https://jsfiddle.net/oj7cf021/4/
I have run into a problem that seems rather dull but I can't seem to solve it. I have the following HTML which I cannot change:
<a href="#" class="aligncenter">
<img src="http://placehold.it/240x150" alt="">
</a>
The width of the image is not known in advance. The CSS I initially used was
a {
display: block;
margin: 20px auto;
border: 1px solid #D5D5D5;
padding: 2px;
display: block;
}
img {
display: block;
}
Note that I can't set text-align: center on the parent of a!
Sometimes the image is as large as the wrapper (in the fiddle below that's body) and then there's no problem. However, sometimes the image is smaller than the wrapping element in which case there'll be white space that fills up the empty space. See this fiddle.
A possible solution is positioning the link right-from-center with a margin-left (using percentual values from the parent) and then reprositioning it with translate(using percentual values of the element). See this fiddle. However, this can't be used in IE8.
margin-left: 50%;
transform: translateX(-50%);
Is there an easier/better solution that I am overlooking that should be able to handle this behaviour cross-browser? I am also interested in hearing ideas that are not restricted to IE8-compatibility. (For instance flex boxes, with which I am not experienced.)
Try like this: Demo
img {
display: block;
margin: 0px auto;
}
Edit: Updated Demo
So according to your requirement i changed like this:
css:
a img {
display: block;
margin:0 auto;
}
If you move the border to the img tag, set the a width to 100% and then set automatic margins on the img, the image should align in the middle.
body {
width: 320px;
margin: 0 auto;
border: 1px solid red;
text-align: center;
}
a {
display: inline;
margin: 20px auto;
display: inline-block;
}
img {
display: block;
border: 1px solid #D5D5D5;
padding: 2px;
margin: 0 auto;
}
<a href="#" class="aligncenter">
<img src="http://placehold.it/240x150" alt="">
</a>
I want to create a navigation bar where the text is centered, but my CSS code places the hyperlink at the top corner of the li as seen in the image.
CSS:
#navigation {
clear: both;
margin: 0 auto 5px;
margin-top: 0;
height: 6%;
padding: 0 5px;
position: relative;
z-index: 1;
}
#navigation a {
height: 10%;
width: 50px;
color: red;
vertical-align: center;
text-align: center;
text-decoration: bold;
}
li {
border-top: solid;
border-right: solid;
border-left: solid;
border-bottom: none;
padding-left: 1px;
height: 51px;
width: 18%;
background-image: url('../images/tab-selected.png');
background-repeat: repeat-x-y;
border-color: #F0F0F0;
display: inline-block;
padding-left: 1px;
}
HTML:
<nav id="navigation">
<ul>
<li >overview</li>
<li >overview</li>
</ul>
</nav>
There are various ways of vertically center something.
If you KNOW the words of the links and know they will not have a line break, you can add line-height:51px; to the anchor (which is the same height of the LI).
Here's the fiddle: http://jsfiddle.net/vMLpL/
By the way, tips for you:
For the border, you can use border:1px solid #f0f0f0; then just give none to bottom, like border-bottom:none; instead of declaring all sides.
When you want a BG to repeat both X and Y, the background-repeat is repeat only, not repeat-x-y.
For the vertical-align, there is no center. It's top, middle, bottom and baseline. But it work only for inline elements regard to other inline elements besides or for display:table-cell elements (which will work like a td's valign="middle" atribute).
Try this:
Remove the following from your "li" selector:
height: 51px;
Add the following to your "li" selector:
text-align: center;
line-height: 51px;
Hi have had to put the menu bar further down the page so javascript will load a slide show.
I am trying to then push the menu bar up. Can I put in an absolute reference so it appears a t the top.
#left, #middle, #right {
background-color: inherit;
color: inherit;
float: left;
padding-left: 10px;
padding-right: 5px;
}
#left {
width: 15%;
min-width: 10em;
padding-left: 5px;
background: #fff;
}
#middle {
width: 80%;
border-left: 3px dotted #999;;
background: #fff;
}
#header {
width: 100%;
background: #666;
}
#footer {
clear: both;
width: 100%;
background: #fff;
}
#left2 {
width: 15%;
min-width: 10em;
padding-left: 5px;
background: #fff;
margin-top: -500px
}
#middle2 {
width: 80%;
border-left: 3px dotted #999;;
padding top: 500px
}
In Html
<div id="middle2">
<div id="left2">
Although it is completely unclear in your code what the 'menu bar' is, or which class might apply to it, it seems to me you should try absolute positioning in CSS
CSS:
.menubar
{
position:absolute;
top:20px;
left:20px;
}
html:
<div id="some_menu_bar" class="menubar">
your menu goes here
</div>
I am trying to then push the menu bar up.
This makes me think you hope to delay the positioning of the menu bar until some script has executed. You cannot do this with CSS alone*.
*Ok perhaps you can with CSS3 and animations but this isn't well supported at the moment.