What is wrong with this code? I have been working on this for hours and cannot figure out why the button.png will now show up but the link is there in the location of the "one" div..?
#one
{
position: fixed;
left:225px;
top:702px;
}
.button
{
display: block;
width: 40px;
height: 40px;
background: url('images/button.png') bottom;
text-indent: -99999px;
}
.button:hover
{
background-position: 0 0;
background-color: transparent;
border-style: none;
}
_
<body>
<div id="map">
<img src="images/map.png"/>
</div>
<div id="one">
<a class="button" href="images/one.jpg"/>
<img src="images/button.png"/>
</a>
</div>
</body>
Your title is not really much related to your question .. so I'll just try to answer the question.
The image is not showing, because by default img is an inline element and you've set text-indent to -99999px.
You can either remove that text-indent or set the display of img to block:
.button img { display: block; }
Related
I have blog posts each with a cover image. I want to use these images in my post listing page as an experiment to see if it will liven up the page a little bit.
The images are too bright. I either want the opacity lowered or an overlay must be added.
Changing the opacity will change the opacity of the text. Adding an overlay has positioned itself on top of the anchors rendering them useless.
I am using the Gatsby Casper Starter Kit in the event that you are interested.
PostListing.jsx
...
<PostFormatting className={className} key={title} cover={cover}>
<PostHeader>
<h2 className="post-title">
<Link to={path}>{title}</Link>
</h2>
...
PostFormatting.jsx
...
const style = cover ? { backgroundImage: `url(${cover})` } : {};
return <article className={className} style={style}>{children}</article>;
...
Generated HTML
<article class="post" style="background-image: url("https://picsum.photos/1280/500/?image=800");">
<header class="post-header">
<h2 class="post-title">
Test Post
</h2>
</header>
<section class="post-meta">
<span>
<span class="tag">Mindset</span>
<span class="tag">Productivity</span>
</span>
<time class="post-date" datetime="2017-06-27">27 June 2017</time>
</section>
<section class="post-excerpt"><p>...</p></section>
</article>
CSS
All the styles I have for the post element.
<element.style> {
background-image: url(https://picsum.photos/1280/500/?image=800);
}
.home-template .content .post,
.tag-template .content .post {
background-color: rgba(0, 0, 0, .1);
padding: 30px 50px 50px 50px;
}
.post {
position: relative;
width: 80%;
max-width: 710px;
margin: 4rem auto 0em auto;
padding-bottom: 4rem;
border-bottom: #1a232c 3px solid;
word-wrap: break-word;
}
I know about this method but I don't know how to get the image into the after pseudo element.
div {
width: 200px;
height: 200px;
display: block;
position: relative;
}
div::after {
content: "";
background: url(image.jpg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Note: Try Radium for pseudo classes
U will have to put the overlay as a sibling of the content, and make it absolute.And also u will have to increase the z-index of the the content, so that it can be interactive.
In your case, all the elements inside the article should be grouped and put inside the content class.
Try this
.parent{
height:300px;
padding:50px;
position:relative;
}
.overlay{
position:absolute;
top:0;right:0;left:0;bottom:0;
background-color:rgba(0,0,0,0.5);
z-index:0;
}
.content{
position:relative;
z-index:1;
font-size:25px;
color:white;
}
<div class="parent" style="background-image:url(http://via.placeholder.com/350x150)">
<div class="overlay"></div>
<div class="content">Test Test</div>
</div>
I have followed a tutorial to build my own drop down menu. Im having problem to style my submenus. Can't find the right class to change it. want the sub menus to come under in one line and in a box.
Can anyone help me?
This is how I do my dropdowns, a bit modified to look more like yours, and you may need to modify it to suite your needs. You can take this code, place it in a text file, and open it with a browser. It should work fine. Also, personally, I don't like using tables or lists for menus but this is just personal preference. Here you go - pure HTML and CSS:
<style>
body { margin: auto; }
.menu
{
position: relative;
background: gray;
height: 40px;
}
.menuItem, .dropdownItem
{
position: relative;
float: left;
width: 150px;
color: black;
}
.menuItem:hover, .dropdownItem:hover
{
background: black;
color: white;
}
.menuItem
{
height: 40px;
line-height: 40px;
text-align: center;
cursor: pointer;
}
.dropdownItem
{
height: 100%;
line-height: 40px;
}
.dropdown
{
position: absolute;
top: -1000px;
width: 450px;
background: gray;
height: 40px;
}
.menuItem:hover .dropdown { top: 100%; }
</style>
<div class="menu">
<div class="menuItem">
Build New
<div class="dropdown">
<div class="dropdownItem">
Bath
</div>
<div class="dropdownItem">
Bathroom Lightning
</div>
<div class="dropdownItem">
Bathroom Faucet
</div>
</div>
</div>
<div class="menuItem">
Construction Of
</div>
<div class="menuItem">
Renovating
</div>
</div>
I hope that this helps.
I am not able to display div text before image, this is what i want
But not able to get it right.
html
<div id="Header" class="header-first">
<h2 class="sometext">Fruit</h2>
<div id="number-of-fruits" style="display: inline; float: right;">0</div> <span>
<img id="someImage" src="http://www.journeys.travel/images/familytrips/iconCollapseArrow.gif" class="someimage">
</span>
</div>
css
.header-first {
background-color: red;
width: 100%;
height:50px;
}
.sometext {
display: inline-block;
margin: 2px 4px;
text-align: left!important;
color: blue;
}
.someimage {
float: right;
vertical-align: middle;
margin-top: 3px;
}
http://fiddle.jshell.net/WyPWs/1/
Here is an updated fiddle: http://fiddle.jshell.net/WyPWs/4/
Try wrapping your right hand side content in a single div, and then treat your items separately.
<div class="right-section">
<span class="number">0</span>
<img src="http://www.journeys.travel/images/familytrips/iconCollapseArrow.gif" class="my-image">
</div>
Use positioning. In this case I used relative positioning.
#number-of-fruits {
position:relative;
right:30px;
}
http://jsfiddle.net/WyPWs/10/
I want to set the background image so that it appears in front of foreground image.
I tried the following code but it is not working as I expected:
.background-image
{
border :0px;
background-image: url(/images/icon.png);
z-index:1000;
}
.foreground-image
{
width:200px;
height:113px;
border :0px;
z-index:1;
}
<div>
<a href="#" class="background-image">
<img class="foreground-image" src="./images/pic1.jpg" />
</a>
</div>
I am using CSS2.
Here is one way to do it.
If this is your HTML:
<div>
<a href="#" class="background-image">
<img class="foreground-image" src="http://placekitten.com/200/100"/>
</a>
</div>
apply the following CSS rules:
div {
border: 1px dotted blue;
}
.background-image {
border: 1px dotted red;
background-image: url(http://placekitten.com/200/50);
background-position: center left;
background-repeat: repeat-x;
display: block;
width: 500px;
}
.foreground-image {
vertical-align: top;
width: 200px;
border: 0px;
position: relative;
z-index: -1;
}
Set position: relative on the image and throw the image deeper into the stacking order by using z-index: -1.
See demo at: http://jsfiddle.net/audetwebdesign/HUK28/
by removing the foreground-image.
.background-image {
border :0;
background-image: url(/images/icon.png);
width:200px;
height:113px;
display: block;
}
.foreground-image {/**/}
<div>
</div>
I am trying to hide the text in a link and make the image visible only and the image click-able.
I am using the code below but the text doenst seem to hide.
<span class="cnn-b">
<a href="http://www.cnn.com" alt="cnn" title="cnn">
<span class="cnn-text">cnn</span>
</a></span>
css
.cnn-b{
width: 200px; height: 75px;
background: url("cnn.png") no-repeat 0 0;
text-indent: -9999px;
}
.cnn-text {
text-indent: -9999px;
}
You don't need all the extra markup of <span>-s and there is a better ( performance-wise ) way to hide the text than text-indent: -9999px - DEMO
HTML
cnn
CSS
.cnn {
width: 200px;
height: 75px;
display: inline-block;
background: url(http://lorempixel.com/200/75) no-repeat 0 0;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
You are missing:
display:block;
You should use:
.cnn-text {
display:block;
text-indent: -9999px; }
You could insert an <img> element along with the span, and display:none; on the text:
<span class="cnn-b">
<a href="http://www.cnn.com" alt="cnn" title="cnn">
<span class="cnn-text">cnn</span>
<img src="cnn.png" />
</a>
</span>
css
.cnn-b{
width: 200px; height: 75px;
}
.cnn-text {
display:none;
}
I think there are several ways to do what you're talking about.
It sounds like what you're talking about is simply having an image that is clickable. If that is the case then I would recommend putting the span inside the anchor tag:
<a href="http://www.cnn.com" alt="cnn" title="cnn">
<span class="cnn-b"></span>
</a>
If you do that, then the only thing you need to worry about is making sure that the image is displayed which can be done by sizing the span in the CSS to the correct width and height and setting the display to block (block will allow it to keep the width):
.cnn-b {
width: 200px; height: 75px;
background: url("cnn.png") no-repeat 0 0;
display: block;
}
Here's an example:
http://jsfiddle.net/CPUKP/1/
By default a span is an inline element. The width and height property will not work as you intend it on the .cnn-b span. If you change
<span class="cnn-b"> to <div class="cnn-b"> or as suggested by James use display:block; on the cnn-b span not the cnn-text span That will solve your problem.
Your final code should be like this:
<html>
<head>
<style>
.cnn-b{
display: block;
width: 200px; height: 75px;
background: url("cnn.png") no-repeat 0 0;
text-indent: -9999px;
}
.cnn-text {
text-indent: -9999px;
}
</style>
</head>
<body>
<span class="cnn-b">
<a href="http://www.cnn.com" alt="cnn" title="cnn">
<span class="cnn-text">cnn</span>
</a>
</span>
</body>
</html>