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 () {
}
);
Related
Here is my code, I try to make both of my p and before element vertical-aligin in the middle but all failed.
Here is my sass code:
p {
/*whatever*/
&.subtitle {
vertical-align: middle;
color: $theme-blue;
font-size: 1.4rem;
&:before {
display: inline-block;
transform: translateX(-$p-padding);
content: '';
height: 50px;
width: 5px;
background-color: $theme-blue;
}
}
}
can someone help me to do them? Thanks.
btw, is that only block can makes the before sudeo-element show?
For vertical alignment you can try display:table and display:table-cell property as,
Check this fiddle here
Your Sample HTML will be,
<div class="subtitle">
<div class="text">
<p>Abstract</p>
</div>
</div>
Your Sample CSS will be,
.subtitle {
width:100%;
height: 50px;
display: table;
background:#FFF
}
.text {
display: table-cell;
vertical-align: middle;
}
p {
display: block;
text-align:left;
color: #111111;
margin: 0px;
position:relative;
padding-left:20px;
}
.subtitle:before {
content: '';
display:block;
position:absolute;
height: 50px;
width: 5px;
background-color: blue;
}
I can't figure out how a div can take the whole height of a container.
In the following exampe I'd like the "photo" div to take the full height, so that the yellow and green content are on the right of the photo.
Here is the code:
#header {
background-color:#7b88d2;
text-align:center;
height: 20px;
}
#container {
max-width:800px;
border-style: solid;
border-width: 1px;
}
#main {
width: 100%;
height: 100%;
}
#photo {
float:left;
background-color:#FF3366;
padding: 10px;
}
#logo {
float:right;
background-color:#FF3366;
padding-right: 10px;
height: 100%;
}
#footer {
background-color:#669933;
text-align:center;
height: 20px;
}
#col1 {
float: left;
padding-left: 10px;
}
#col2 {
margin-left:auto;
margin: 0 auto;
}
#txt_container {
padding-left: 10px;
background-color:#ffffcc;
}
#col3 {
display: inline;
float: right;
padding-right: 10px;
}
I can't declare the height in pixels because the height of the photo in unknow.
Demo here: https://jsfiddle.net/wsfnqvyn/
Thanks for your help.
Sounds like it's senseless. An image can be smaller or higher than your div (I don't know if it is relevant or not to what you are trying to explain). Try to use css background method instead.
e.g. Define the properties of your .photo class and then insert the code below to your html.
<div class="photo" style="background-image: url(image.jpg)"></div>
In this case, your .photo class should include this one line at least.
.photo {
background-size: cover;
}
Remember this method can restrict some CSS interactivity in rare cases.
I updated your jsfiddle : See the updated one: https://jsfiddle.net/wsfnqvyn/6/
I use display:table and table-cell to achieve this.
#header {
background-color:#7b88d2;
text-align:center;
height: 20px;
}
#container {
max-width:800px;
border-style: solid;
border-width: 1px;
}
#main {
width: 100%;
height: 100%;
display:table
}
#photo {
display:table-cell;
background-color:#FF3366;
padding: 10px;
}
#logo {
display:table-cell;
background-color:#FF3366;
padding-right: 10px;
}
#footer {
background-color:#669933;
text-align:center;
height: 20px;
}
#col1 {
float: left;
padding-left: 10px;
}
#col2 {
margin-left:auto;
margin: 0 auto;
}
#txt_container {
display:table-cell;
padding-left: 10px;
background-color:#ffffcc;
}
#col3 {
display: inline;
float: right;
padding-right: 10px;
}
A friend and I are working on a website, but for some reason there is still white space when I use 100% width. How can I fix this? These are the main css elements
#info_container{
height:100%;
width:100%;
display:inline-block;
padding-top:3%;
background-color:#D3D3D3;
}
#main_header {
background: -webkit-linear-gradient(#2a2a2a, #545454);
text-align: center;
align-items: center;
vertical-align: middle;
position: absolute;
width:100%;
height:8%;
margin:-1em;
position:fixed;
display: table;
width: 100%;
table-layout: fixed;
/* For cells of equal size */
}
JSFiddle
First best practice is to put universal selector * { padding: 0; margin: 0;}
to avoid the margins and paddings overflow.
I updated your fiddle
Changes to your CSS
* { padding: 0; margin: 0; }
#main_header {
background: -webkit-linear-gradient(#2a2a2a, #545454);
text-align: center;
align-items: center;
vertical-align: middle;
position: absolute;
width:100%;
position:fixed;
display: table;
width: 100%;
table-layout: fixed;
/* For cells of equal size */
}
#main_header a {
display:inline-block;
text-decoration:none;
color:#567aa9;
display: table-cell;
vertical-align: middle;
padding:.5%;
}
a span {
text-decoration:none;
color:#878787;
font-size:55px;
top: 10%;
overflow: hidden;
left:50%;
}
.a1:hover {
color:#bababa;
}
.a2:hover{
color:#bababa;
}
.a3:hover{
color:#bababa;
}
.a4:hover{
color:#bababa;
}
#info_container{
height:100%;
width:100%;
display:inline-block;
padding-top:7%;
}
html {
font-size: 62.5%;
}
body {
font-size: 1em;
}
#media (max-width: 300px) {
html {
font-size: 70%;
}
}
#media (min-width: 500px) {
html {
font-size: 80%;
}
}
#media (min-width: 700px) {
html {
font-size: 120%;
}
}
#media (min-width: 1200px) {
html {
font-size: 200%;
}
}
#info_container{
height: 100px; // changed this from 100%;
width:100%;
padding-top: 3%; // removed
display:inline-block;
background-color:#D3D3D3;
}
EDIT: UPDATED THE FIDDLE
There is a very simple fix to this. You have a background color on your text which goes on the whole line, so to make it only on the text area in your info container, simply put that text into a span class. Now just remove that background color from the original class and put it into your span! You can give a class to the span if you will put it into another css file, but I have just put it directly into the html here.
<p><span style="background-color:red;">Hello World</span></p>
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
I have following HTML for a heading. The .left and .right are empty spans. I have specific width for the .left and but the .text width is not always same. I want to set the background for the .left (fixed width) and the .right. The .right should get all the remaining space in the parent element (h1). How that can be done?
<h1>
<span class="left"></span>
<span class="text">Text</span>
<span class="right"></span>
</h1>
I'm trying following CSS which does not work:
.left{
background: yellow;
width: 30px;
height: 20px;
display: inline-block;
}
.right{
display: inline-block;
background: blue;
}
Here's the JSFiddle link:
http://jsfiddle.net/jMR8u/
Here's what I'm trying to get:
The idea is to set a background image in h1 except the .text span and the problem is that I can not set the background for the .text, otherwise it would be easier.
This version will stretch to fit the contents of .text and should be cross-browser.
You can fake the blue (right) background by making it a border of .text:
.text { border-right: 1000px solid; }
Then, shift .right to the left by 1000px:
.right { margin-left: -1000px; }
Give a width to .left, make each element inline-block, hide the extra blue border on the right, and make sure .text and .right do not wrap to a new line:
.left { width: 200px; }
.left, .text, .right { display: inline-block; }
h1 { overflow: hidden; white-space: nowrap; }
And give it color!
body { background: green; }
.left { background: red; }
.text { border-color: blue; }
Here is a JSFiddle demonstration:
if i interpret your image correct .. this is the answer http://jsfiddle.net/jMR8u/4/
h1{
border: 1px solid red;
position: relative;
}
.left{
background: yellow;
width: 30px;
height: 20px;
display: inline-block;
}
.right{
display: inline-block;
background: blue;
position: absolute;
z-index: 99;
height: 20px;
width: 100%;
}
.text {
height: 20px;
width: 150px;
display: inline-block;
position: relative;
z-index; 101;
}
ok, then use layers .. with z-index and positioning
You could use flexbox (but use the new syntax). Sadly, it only works on Chrome and Opera for now, so this has limited usefulness:
h1 { display: -webkit-flex; display: flex; }
.left { width: 30px; }
.right { flex: 1; -webkit-flex: 1; } /* This makes it fluid. */
.left { background: yellow; }
.right { background: blue; }
Here is a JSFiddle demonstration: http://jsfiddle.net/FN7vQ/
if you can set width to the .text span and h1 element.
body{
background:green;
}
h1{
border: 1px solid red;
display:table;
width:100%;
}
.left{
background: yellow;
width: 30px;
display: table-cell;
}
.right{
display: table-cell;
background: blue;
}
.text {
display:table-cell;
width: 150px;
}
If I understood your requirement correctly. you should change your markup a little bit as below
h1 {
background: #660000;
padding-left: 30px;
line-height: 1.1;
}
h1 span {
background: #fff;
padding: 0 3px;
color: #600;
}
<h1>
<span>
Lorem, ipsum dolor. you are doing great
</span>
</h1>
and CSS goes here below