I have problem with css. How to add text My option under every image?
Here is jsfiddle DEMO: http://jsfiddle.net/Leq3R/
My css code is here:
.product_des1 {
width: 375px;
float: left;
height: auto;
overflow: hidden;
font-size: 13px;
line-height: 22px;
margin-bottom: 72px;
margin-left: 100px;
}
.product_des1:nth-child(2n+1) {
margin-right: 0;
}
.product_des1 img {
float: left;
margin-right: 10px;
}
.product_des1 span {
color: #44a6e0;
}
#all {
width: 1034px;
height: auto;
overflow: hidden;
margin: 0 auto;
}
If I understand correctly, you need to add the same text under every image. You can achieve this only with css by using the following code:
.product_des1:after {
content: "My option";
display: block;
clear: both;
}
Here's the updated fiddle http://jsfiddle.net/Leq3R/4/
So i'm practically adding some text after the container, witch will be displayed bellow the image.
Like this:
Change:
.product_des1 img {
float: left;
margin-right: 10px;
}
To:
.product_des1 img {
display:block;
}
You can use :before/:after pseudo selector to solve your problem.
I added the following css code to your code.
#all>div:before {
content:"myOption";
position:absolute; /* to show the content on the image */
top:0; /* pinning the content to top of this container */
left:0; /* keeping the content to left at the place of image */
}
#all>div {
position:relative;
}
Working Fiddle
Related
I am a stuck on trying to change the size and location on social media links on a test web page. No matter what size I change the height and width to in the CSS the image remains super large.
#footer {
height: 40px;
background-color: #69D2E7;
clear:both;
font-family:Open Sans;
}
#footer a {
display: inline-block;
margin-right: 5px;
}
#footer img a {
width: auto;
height: 10px;
max-height: 10px;
}
<div id=“footer”><img src="facebook.png"></div>
<div id=“footer”> <img src="pinterest.png"></div>
<div id=“footer”> <img src="instagram.png"></div>
<div id=“footer”><img src="linkedin.png"></div>
Its a matter of position, the img tag is actually inside a tag, so the one with
#footer img a{}
should be changed into
#footer a img {
width: auto;
height: 10px;
max-height: 10px;
}
Hi I have tested this code and its changing height and width of image. Please try this code: #footer a img { height: 30px; width: 35px; }
#footer a img {
width: auto;
height: 10px;
max-height: 10px;
}
To center the hyperlinks, try this:
#footer {
/* other styles */
text-align: center;
}
If that didn't work, try removing inline-block from a
#footer a {
display: inline-block; /* remove this line, if needed. */
}
I got one div containing an animation(.animation) and another div just containing an background image(.image).Now i want to trigger the both div's using another div(.start) . But somehow im confused how to do it.
html
<div class="start">
< /div">
CSS
.start{
width:87px;
height:189px;
position:absolute;
float: left;
margin-top: 477px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 20px;
background-color: green;
}
.start:hover~.animation,.start:hover~.name
.animation
{
width:200px;
height:200px;
position:absolute;
float: left;
margin-top: 100px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 20px;
background-color: red;
....
}
.image
{
width:30px;
height:300px;
position:absolute;
float: left;
margin-top: 100px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 20px;
background-color: green;
}
Make .animation and .image invisible by default:
.animation, .image {
display: none;
}
Then, you'll have to show them whenever .start is hovered.
CSS way
Using your own technique:
.start:hover~.animation, .start:hover~.image {
display: initial;
}
JSFiddle Demo: http://jsfiddle.net/vas4hyrj/
Though this will work only if .animation and .image are placed after .start
JQuery way
$(".start").hover(function() {
//Show the divs when mouse hovers
$(".animation, .image").css("display", "initial");
}, function() {
//Hide divs when mouse stops to hover
$(".animation, .image").css("display", "none");
});
JSFiddle Demo: http://jsfiddle.net/cw0fgxnt/
And that one will always work, no matter what; but it uses JQuery
If your element is a first sibling of .start, you can use the + selector, otherwise you'll have to use jQuery.
I am trying to do something really simple: have image and input on the same line, but can not achieve it:
HTML
<img src="path/to/img"/>
<input/>
CSS
img {
height: 50px;
}
input {
height: 50px;
margin: 0;
padding: 0;
}
As you clearly see from this fiddle, image is much higher than the input. How can I fix it?
Use the vertical-align property:
img{
height: 50px;
vertical-align: middle;
}
See updated fiddle
I was able to achieve the effect you are looking for with floats:
img{
height: 50px;
float: left;
}
input{
height: 50px;
margin: 0;
padding: 0;
float: left;
}
Fiddle
Use vertical-align, like this:
img{
height: 50px;
vertical-align: middle;
}
input{
height: 50px;
}
You can also set float on the img like this:
img{
height: 50px;
float:left;
}
input{
height: 50px;
}
I got some problems with layouting in CSS. Here is the code I am talking about: Fiddle.
The <div id="header"> should have the height of the <div id="menubuttons"> which I marked red.
I always thought that if you don't state the height of a div it will get the height of it's children.
The <div class="contentLine> is stuck to the <div id="theme"> although I defined margin-top: 20px;.
The right column always has greater margin than the left column. I want both to have the same margin to the browser window.
CSS
body {
margin: 0 auto;
padding: 0;
font-family:'Share', cursive;
}
#header {
width: 100%;
vertical-align: middle;
}
#header_logo {
width:;
float: left;
margin: 11px 20px 20px 20px;
background-color:;
}
#menubuttons {
margin-right: 0;
margin-top: 0;
height: 2.5em;
line-height: 2.5em;
display: inline-block;
background-color: red;
}
#menubuttons ul {
list-style-type: none;
margin:0;
padding:0;
}
#menubuttons li {
float: left;
margin-right: 20px;
}
a {
font-family:'Share', cursive;
}
a:link {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
a:active {
text-decoration:underline;
}
#theme {
width: 100%;
height: 400px;
background-color: green;
margin-top: 0;
float: left;
}
.contentLine {
margin: 0 auto;
margin-top: 20px;
width: 96%;
}
.contentLine .column {
float: left;
margin: 0;
width: 30%;
margin-right: 1%;
padding: 1%;
position: inherit;
/* shadow for seeing div boundaries */
box-shadow: 0 0 1px black inset;
}
.contentLine #last {
margin-right: 0;
}
Let me go 1 by 1
1) Your <div id="header"> contains floated elements, you need to clear that, so use overflow: hidden; on parent element i.e #header
2) Again, you've floated #theme but you've set it to width: 100%; so you don't need float there.
3) About the last you need to set the margins accordingly, right now it's 1% so you need to calculate this correctly, I would like to suggest you to use box-sizing: border-box; and set 33% width for each element and than apply padding-right
Demo
Also make sure you clear your floating elements which are nested inside contentLine.
If you are not one of those IE fans, than you can use the snippet below, which will self clear the parent element in a better way.
.clear:after { /* Much much better than overflow: hidden; */
content: "";
display: table;
clear: both;
}
Update your html
</ul>
<!--Menu ends here -->
</div>
<!--menubuttons ends here -->
<!--Add following div to your code -->
<div class="clear"></div>
</div>
<div id="theme">
Update your CSS
.clear{
clear:both;
}
This should help.
- will be reusable also.
I can't apply a hover effect on the text under the image, or on the image itself.
here's the code (CSS):
#photo {
float: left;
width: 10px;
margin-left: 35px;
text-align: justify;
}
.img-with-text {
text-align: justify;
width: 200px;
}
.img-with-text img{
display: block;
margin: 0 auto;
}
how can apply some hover effects?
.img-with-text {
text-align: justify;
width: 200px;
display:block;
}
.img-with-text:hover {
text-decoration:underline;
background-color:#ccc;
}
Like this
DEMO
CSS
#hover {
display: none;
}
#image:hover + #hover {
display: block;
}
set the text in your text tag or use JQuery
$("p").hover(
function () {
}
);
hover effect on image.
$("#photo").hover(
function () {
}
);