This question already has answers here:
Using only CSS, show div on hover over another element
(14 answers)
Can I have an onclick effect in CSS?
(14 answers)
Closed 1 year ago.
This is now the second project I have worked on where I am unable to get the image that is hidden on load to display: block on :active. I have also tried to used visibility with no luck. I prefer the display so the height is not left empty.
a {
text-decoration: none;
}
.button-container {
margin-left: auto;
margin-right: auto;
max-width: 200px;
}
.img {
display: none;
}
.buy-button {
background-color: #087900;
border-radius: 25px;
color: #ffffff;
text-align: center;
}
h2 {
padding: 12px 40px;
font-size: 18px;
font-family: Open Sans;
font-weight: normal;
}
.img:active {
display: block;
}
.buy-button:active {
height: 10px;
margin-top: 50px;
margin-left: 0;
margin-right: auto;
width: auto;
}
h2:active {
display: none;
}
<div class="img"><img src="https://sf-static.sixflags.com/wp-content/uploads/icon-coaster-car-person.png"></div>
<div class="button-container">
<div class="buy-button">
<h2>Buy Now</h2>
</div>
</div>
i don't think it is possible to do that.
because a element become active when you click on it, but in this case at first place you set the image's display to none
.img {
display: none;
}
so there is no image on the page that user can click on it and the image's display become block.
you can put the image inside a div and make the image hidden and put border around div so user can see the div and when click inside the div, image become visible.
or yo can put button and use JS for hide and show the image
Related
Again, just learning CSS and trying to make a fictive homepage.
Here's a problem I came by:
I want to center the links and their background colors inside a DIV- element. However, I also want to keep the DIV centered (15% from each side) and changing the text inside the links will still center them, so the positioning can't be a specific value (need to use per centages, I think).
EDIT: Long explanation shortly: I want to get all four blocks in the middle of the page regardless of changing the size of the browser screen or the texts inside the blocks. Thanks :)
EDIT2: Changed the title to be found more easily from the Search- query.
Anything can be done to the code or do I have to change it somehow? Thanks.
Here's the HTML:
.infos {
padding-left: 15%;
padding-right: 15%;
position: relative;
top: 40px;
}
.infos a {
background-color: black;
color: white;
margin: 0px;
display: inline;
padding-top: 10px;
padding-bottom: 60px;
text-decoration: none !important;
}
.infos #centered {
position: relative;
display: block;
padding: 0px;
}
<DIV CLASS="infos">
<DIV ID="centered">
Application for Membership
Rules
Travel Conditions
Meetings
</DIV>
</DIV>
Thank you for your help!
#centered {
display:table;
background:red;
margin:auto;
}
#centered a {
color: white;
margin: 0;
float:left;
padding-top: 10px;
padding-bottom: 60px;
text-decoration: none !important;
}
<DIV ID="centered">
Application for Membership
Rules
Travel Conditions
Meetings
</DIV>
<div class="titelcontent">
<div class="name">Name</div>
<div class="hzline"></div>
</div>
I want name div and hzline div to auto fit 100% in titelcontent.
The label (for example, Name) will vary in length and I want the red underline to span the remainding space of the titlecontent div.
How do I achieve the following? It is easy to do this using tables but I can't figure out how to do this via span or div.
You can use div like a table by using table-cell.
.titlecontent {
display: table;
}
.name {
display: table-cell;
white-space: nowrap;
}
.hzline {
display: table-cell;
border-bottom: 3px solid red;
width: 100%;
}
See DEMO.
Updated to allow background images to show through
You can make the mark-up a bit tighter by using a pseudo-element as follows:
<div class="wrapper">
<div class="inner">Photoshop</div>
</div>
and use the following CSS styling:
div.wrapper {
color:#82439a;
font-size: 16px;
font-weight: bold;
font-family: tahoma;
line-height: 180%;
background: red url(http://placekitten.com/1000/500) no-repeat left top;
overflow: hidden;
}
div.inner {
position: relative;
display: inner;
color: yellow;
padding-right: 0.50em;
border: 1px dotted yellow;
}
div.inner:after {
content: "\A0";
position: absolute;
bottom: 0;
left: 100%;
border-bottom: 5px solid #d71d00;
width: 1000%;
}
Demo fiddle: http://jsfiddle.net/audetwebdesign/wE8bC/
How It Works
The parent element div.wrapper may contain a background image or be transparent and show the background of some ancestor element. You need to set overflow: hidden.
For the label (<div.inner>), set position: relative and then generate a 100% width pseudo-element with a bottom border to serve as an underline. Use absolute positioning to place div.inner:after to the right of <div.inner> (left: 100%) and make the width relatively large. The pseudo-element will trigger an overflow condition but this is taken care of by hiding the overflow in the parent element. You can control left/right spacing using padding.
You can use set the display property to either inline or inline-block. If you use display: inline, it will work in IE7; adjust the line height as needed for styling.
Note that the generated content is a non-breaking space, hex code "\A0".
Support for IE7
If you need to support IE7, you will need a hack if you use inline-block as discussed in a previous question: IE7 does not understand display: inline-block
IE7 also does not support table-cell so some of the other posted solutions will face the same limitation.
Or an alternative to using display: table:
.name {
float: left;
}
.line-wrapper {
display: block;
overflow: hidden;
padding-top: 6px;
}
.hzline {
border-bottom: 3px solid red;
width: 100%;
}
See example.
I've guessed you are looking something like this. Please find my solution based on my understanding about the image you posted.
HTML
<div>
<span>Photoshop</span>
</div>
<div>
<span>Adobe Illustrator</span>
</div>
<div>
<span>3D Max</span>
</div>
<div>
<span>Maya</span>
</div>
<div>
<span>Windows 8 Pro</span>
</div>
CSS
div {
line-height: 150%;
border-bottom: 5px solid #d71d00;
}
div span{
position:relative;
bottom: -10px;
background:#fff;
padding: 0 5px;
color:#82439a;
font-size: 16px;
font-weight: bold;
font-family: tahoma;
}
Please do let me know your feedback. Thanks
i'm currently working on a tumblr theme, but got stuck on the page navigation.
The html for "Previous" and "Next" Buttons or only rendered, if they are available.
So there is no next button on the first page and no previous button on the last page.
and this is where i want the according single button to stretch to 100% width.
I could do this in javascript but it's not an option at all since the template shall work without javascript too.
the html looks like this:
<div id="navigation">
<p>Prev</p>
<p>Next</p>
</div>
CSS:
.button_normal {
text-align: center;
opacity: 0.55;
height: 30px;
line-height: 30px;
background: white;
font-size: 13px;
font-weight: 100;
color: #646464;
border: 1px solid #646464;
text-decoration: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-bottom: 10px;
}
#navigation{
clear: both;
width: 100%;
}
width of the parent div is 960px, so there shall be a 8px margin between the two buttons.
I tried fixing it with min-width and width: 100% auto; but couldn't really figure out how to make it.
Thanks in advance.
You can do the following:
Add a position:relative to your parent container
Create a new class called "full-width" and in it have
position: absolute;
left:0px;
right:0px;
Add the class full-width to the corresponding button
You can use table display styles.
/* add these properties to your stylesheet */
#navigation { display:table; }
.button_normal { display:table-cell; }
// remove the inline styles from your anchors
<div id="navigation">
<p>Prev</p>
<p>Next</p>
</div>
Example: http://jsbin.com/unuwuh/2
you can try:
.continer {
display: flex;
align-items: stretch;
}
and for the child component:
.subContiner {
width: 100%;
}
I have a question regarding some CSS that I'm sure has a simple solution, but just not obvious enough for me to find it yet.
I have a div defined in my HTML file with a background image, which I set in my CSS file. I then set a hover state for the div using CSS so that the background image would change on mouse over. I then placed text on top of the div in my HTML file, to make a button with text on it.
Here is where I run into my problem, however - when I mouse over the image (background image of the div), the image changes, but when my cursor hits the text on top of it, the hover state changes back to the regular one, changing the background image as well, while the text doesn't change. When I move the cursor away from the text, it changes back to the hover state.
I have the code set up in a JSFiddle at http://jsfiddle.net/Cwca22/jk7ty/ - any help would be greatly appreciated! Thanks in advance!
You can really simplify your code.
HTML
<a class="button" href="directions.html">Get Directions</a>
CSS
a.button {
background: url('http://f.cl.ly/items/0G0b0m1k0A1T2c3D102H/get-directions-button.png') no-repeat;
color: white;
display: block;
font-family: Ovo, serif;
font-size: 18px;
height: 42px;
line-height: 42px;
text-align: center;
width: 135px;
}
a.button:hover {
background-image: url('http://f.cl.ly/items/0U1O3P1F2h312W0j3k1Z/get-directions-button-hover.png');
color: #fff;
}
:hover only applies when you are hovering over that element or one of it's children. You created the button with one element, and then created the text and used CSS trickery to position it over the button. As soon as you hover over the text, the browser thinks you're no longer hovering over the button, and drops the new background.
Also, styles cascade. So in the rules for :hover, you need only specify the attributes that have changed. (In this case, background and color.)
fiddle: http://jsfiddle.net/jk7ty/10/
Move the Get Directions link inside the main div. You'll need to do some formatting for it but this should get you pretty close.
<a href="directions.html">
<div id="getDirections" class="getDirections" style="margin-top: 10px; margin-left: 131px;">
<h3 class="getDirectionsText" style="margin-left: 154px; margin-top: -28px; font-size: 14px; font-weight: 300;">Get Directions</h3>
</div>
</a>
I rewrote and simplified it for you and it works now:
Here's the link:
Get Directions
Here's the CSS:
a.getDirections {
display: block;
background: url('http://f.cl.ly/items/0G0b0m1k0A1T2c3D102H/get-directions-button.png') no-repeat top left;
width: 135px;
height: 30px;
font-family: Ovo, serif;
font-size: 15px;
color: white;
text-align: center;
text-decoration: none;
padding: 12px 0 0 0;
}
a.getDirections:hover {
background: url('http://f.cl.ly/items/0U1O3P1F2h312W0j3k1Z/get-directions-button- hover.png') no-repeat top left;
}
A few things to note:
You can treat an A tag like a div if you give it a display: block; property
Since I put 12px padding on the top, I subtracted 12px from the height: property to leave only 30px (the button is actually 42px high)
I suggest reading about the "box model" (google it) to help out in future
You can also check it out on JSFiddle if you like:
http://jsfiddle.net/nerdburn/95ysC/
I would keep all of the HTML in the HTML section and the CSS in the CSS section. This just helps with keeping it all straight especially when you are testing.
This will give you a good result:
<div id="getDirections" class="getDirections"><h3 class="getDirectionsText">Get Directions</h3></div>
#getDirections {
display: table;
}
.getDirections {
background-image: url('http://f.cl.ly/items/0G0b0m1k0A1T2c3D102H/get-directions- button.png');
background-repeat: no-repeat;
width: 135px;
height: 42px;
cursor: pointer;
}
.getDirections:hover {
background-image: url('http://f.cl.ly/items/0U1O3P1F2h312W0j3k1Z/get-directions-button-hover.png');
background-repeat: no-repeat;
width: 135px;
height: 42px;
cursor: }
a{
text-decoration:none;
}
h3 {
font-family: Ovo, serif;
font-size: 18px;
color: white;
display:table-cell;
vertical-align: middle;
text-align: center;
}
If you use this code style you can make changes to your element sizes without having to rework the centering of the text.
tab-ver.tab {
background: url(../images/16by16.png) no-repeat center center;
text-indent: -10000em;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
}
<div id="tab-ver" class="tab">English</div>
The problem of above script is that the a link doesn't work at all. If the user clicks the 16by16.png image, the user is not redirected to yahoo.com.
However to fix this problem?
Thank you
// update001//
I have tried the following suggestion:
#tab-ver.tab {
text-indent: -10000em;
}
#tab-ver.tab a{
background: url(../images/16by16.png) no-repeat center center;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
display: block;
}
It works for my original problem. However, the displayed image now is offset to bottom of the horizontal menu. It is caused by 'display: block'. However, if I remove 'display:block', then the image will be invisible.
thank you
// update 1 //
Based on the suggestion, the following script works best for me
#tab-en-ver.tab a {
background: url(../images//16by16.png) no-repeat center center;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
text-indent: -10000em;
}
However, this suggestion does have one problem. The text 'English' mixes with the image. I cannot figure out how to remove the text 'English' from a link.
by adding the following extra rule will cause the image disappear.
#tab-ver.tab {
text-indent: -10000em;
}
any idea?
Give that CSS to the <a> instead. Add a display: block so it'll display as a block-level element like the <div>. The <div> will expand to fit the <a>.
EDIT: try inline-block instead and see if it helps.
#tab-ver.tab a {
display: inline-block;
background: url(../images/16by16.png) no-repeat center center;
text-indent: -10000em;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
}
If you want the text ("English") to be hidden, than you have to use <img/> tag, with an alt attribute, something like:
<img src="english-flag.png" alt="English" />
You can also use some CSS hacks, but:
What for? It's so easy to do it with plain HTML!
Those are hacks, so they may work or not in different browsers.
One of such hacks can be to set a background to the <a/> element, to offset the text, to set the overflow to hidden, and to set fixed width:
a{
padding-left:16px;
overflow:hidden;
display:block;
width:16px;
height:16px;
url(../images/16by16.png) no-repeat left top;}
English
You can have the a tag fill up the div by using:
a {
display: block;
height: 16px;
}
You can then also remove the height from the div as it will grow automatically.