Whenever I hover the image, the caption won't show up..
please correct my CSS below.
what should I change?
thanks, cheer!
.gallery-item {
float: left;
width: 14.25%;
cursor: pointer;
}
.caption{
display: none;
}
.gallery-item .caption:hover{
display: block;
}
.gallery-item img {
padding-left: 5px;
height:200px;
width:100%;
}
<div class="gallery-item">
<img src="images/event-1.jpg" alt="Sunday">
<div class="caption">Lorem Ipsum</div>
</div>
Put the :hover in .gallery-item instead
.gallery-item {
float: left;
width: 14.25%;
cursor: pointer;
}
.caption{
display: none;
}
.gallery-item:hover .caption{
display: block;
}
.gallery-item img {
padding-left: 5px;
height:200px;
width:100%;
}
<div class="gallery-item">
<img src="images/event-1.jpg" alt="Sunday">
<div class="caption">Lorem Ipsum</div>
</div>
What happens in your code is that you putting the hover selector to an element that has display:none, which means you can't select it at all
Related
How do I get the child div which is inside the parent div, go on the first line of the div?
See the picture for what I mean:
div
{
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
.parentDiv
{
position: relative;
/*...*/
}
.childDiv
{
position: absolute;
/*...*/
}
Basicly that's the CSS. Read more
like this?
#parent {
background-color: #aaaaaa;
height:300px;
}
#child {
background-color: #ff0000;
width:220px;
margin-left:10px;
}
#two {
background-color: #00ff00;
width:100px;
}
.kids {
display: inline-block;
padding: 2px;
white-space: normal;
}
<div id="parent" style="width: 250px; display: inline-block; white-space: nowrap">
<div id="child" class="kids">
<span>child</span>
</div>
</div>
IF you want to look like in your img just do this :
.parent {
height:300px;
width:300px;
background-color:orange;
}
.child {
height:50px;
width:80%;
background-color:green;
margin:0 auto;
}
<div class="parent">
<div class="child">
</div>
</div>
i am VERY curious to see why the downvote ? anyone ?
My dropdown CSS menu works fine when I open it in mobile view, but stays there when I resize the window in my browser. When I try to get rid of it in my CSS media query, the dropdown doesn't work at all..
function showmenu(){
var menu = document.getElementById('mobile-menu'), maxH="148px";
if (menu.style.height == maxH){
menu.style.height = "0px";
}else{
menu.style.height = maxH;
}
}
#media(max-width: 1024px){
.col-tab1{
width: 8.33333333333%;
float: left;
}
.col-tab2{
width: 16.6666666667%;
float: left;
}
.col-tab3{
width: 25%;
float: left;
}
.col-tab4{
width: 33.3333333333%;
float: left;
}
.col-tab5{
width: 41.6666666667%;
float: left;
}
.col-tab6{
width: 50%;
float: left;
}
.col-tab7{
width: 58.3333333333%;
float: left;
}
.col-tab8{
width: 66.6666666667%;
float: left;
}
.col-tab9{
width: 75%;
float: left;
}
.col-tab10{
width: 83.3333333333%;
float: left;
}
.col-tab11{
width: 91.6666666667%;
float: left;
}
.col-tab12{
width: 100%;
float: left;
}
.mobile{
display: none;
}
.desktop{
display: none;
}
.tablet{
display: block;
}
#nav-toggle{
width:50px;
float:right;
color:white;
margin:25px;
display:block;
}
nav ul{
list-style-type: none;
margin:auto;
width:500px;
height:100%;
display:none;
}
#mobile-menu{
display:none;
}
}
<body>
<nav>
<span onclick="showmenu('mobile-menu')"></span>
<div id="nav-logo">
<div id="bar1"></div>
<div id="bar2"></div>
<div id="bar3"></div>
<div id="bar4"></div>
<div id="bar5"></div>
<div id="bar6"></div>
<div id="bar7"></div>
</div>
<ul>
<li><p>ABOUT</p></li>
<li><p>WORK</p></li>
<li><p>SERVICES</p></li>
<li><p>CONTACT</p></li>
</ul>
</nav>
<div id="mobile-menu">
<ul>
<li><p>ABOUT</p></li>
<li><p>WORK</p></li>
<li><p>SERVICES</p></li>
<li><p>CONTACT</p></li>
</ul>
</div>
</body>
Problem is about , it works great on desktop but on mobile fails....
[http://jsfiddle.net/9vv914uL/][1]
i want to make this divider responsive... because it is working very well on higher resolutions , as you can see....
and bonus is to make words inside tag in different colors...
this is css stylesheet:
.divider {
text-align:center;
font-family: 'montserrat';
}
.divider hr {
margin-left:auto;
margin-right:auto;
width:40%;
}
.left {
float:left;
}
.right {
float:right;
}
this is
<div style="padding-top:10px; padding-bottom:20px;"class="divider">
<hr class="left" style="margin-top:12px;"/>BLUE RED<hr class="right" style="margin-top:12px;"/>
</div>
I dont know what to say about this problem, this is just plain text. I must go back to the stars <3
:)
There are other ways that this can be handled that would work better for what you are trying to do. In my example, I am using both a heading element and an empty div. The text in the heading element can be expanded as much as you would like without needing to worry about available space, and the solution is responsive out of the box.
HTML
<h3 class="divider">
<span>Title</span>
</h3>
<div class="divider">
<span></span>
</div>
CSS
.divider {
border-color: #000;
border-style: solid;
border-width: 0 0 1px;
height: 10px;
line-height: 20px;
text-align:center;
overflow: visable;
}
.divider span {
background-color: #FFF;
display: inline-block;
padding: 0 10px;
min-height: 20px;
min-width: 10%;
}
Fiddle: http://jsfiddle.net/6uux0cbn/1/
I'd probably do it like this rather than messing with floats:
.divider {
text-align: center;
}
.divider:after {
content: "";
height: 1px;
background: #000;
display: block;
position: relative;
top: -8px; /* this value depends on the font size */
}
.divider > span {
background: #fff;
padding: 0 10px;
position: relative;
z-index: 1;
}
<div class="divider"><span>BLUE RED</span></div>
HTML:
<div style="padding-top:10px; padding-bottom:20px;"class="divider">
<hr class="left" style="margin-top:12px;"/>
<div class="title">BLUE RED</div>
</div>
CSS:
.divider {
text-align:center;
font-family: 'montserrat';
position:relative;
height: 68px;
}
.div hr {
width:100%;
position: absolute;
z-index: 888;
}
.title {
position: absolute;
left:50%;
width:100px;
margin-left: -50px;
z-index: 9999;
top:15px;
background: white;
}
I have some html in the following structure:
<div class="input-control">
<div class="label-wrapper"></div>
<div class="input-wrapper"></div>
</div>
And CSS:
.input-control
{
height:40px;
overflow:hidden;
width:100%
}
.label-wrapper,
.input-wrapper
{
display:inline-block;
margin-right:-3px;
vertical-align:middle;
}
.label-wrapper
{
width:160px;
}
All is good - as you the text in the label-wrapper class is vertically centered.
However, what I want to do is make it so that label-wrapper and input-wrapper are floated, left and right respectively.
When I apply a float, I then lose the vertical alignment of the text.
I've tried loads of permutations - anyone know how to achieve this?
Good
The more clean solution would be this: http://jsfiddle.net/es4Ca/ i think.
.input-control
{
padding: 20px 0px;
overflow:hidden;
width:100%
}
.label-wrapper,
.input-wrapper
{
display:inline-block;
vertical-align:middle;
}
.label-wrapper
{
width:160px;
}
.input-wrapper
{
width: calc(100% - 164px);
text-align: right;
}
Complicated and not so clean
Here is one overly complicated solution: http://jsfiddle.net/jHd3J/3/
.input-control
{
overflow:hidden;
display: table;
width: 100%;
/*change this...*/
height: 300px;
}
.inner-input
{
vertical-align: middle;
display: table-cell;
width: 100%;
}
.input-wrapper
{
margin-left: 160px;
width: calc(100% - 160px);
text-align: right;
}
.label-wrapper
{
width:160px;
float: left;
}
With this HTML:
<div class="input-control">
<div class="inner-input">
<div class="label-wrapper">
<label>Hahah</label>
</div>
<div class="input-wrapper">
<input type="text" />
</div>
</div>
</div>
i have the following code:
see in http://jsfiddle.net/bniya_dev/SYPNC/2/
<div>
<div id="mainHeader">
<div id="details1">
<span>details1</span>
</div>
<div id="details2">
<span>details2</span>
</div>
</div>
<div id="header">
<span>header </span>
</div>
</div>
css
div#details1
{
float:left; width:100px;
}
div#details2
{
float:right;
}
I want it to look like the following picture:
What style I should set?
I want it to work in all browsers even mobile browsers
http://jsfiddle.net/bniya_dev/SYPNC/2/
Try this:
You need to clear floats before header.
.clr{clear:both;}
DEMO
* {
margin: 0;
font-family: Arial ;
font-size: 35px;
line-height: 65px;
}
div#mainHeader {
width: 777px;
height: 65px;
background-color: aqua;
text-align: right;
}
div#details1 {
width: 620px;
height: 65px;
background-color: #ED1C24;
float: left;
}
div#details2 {
width: 157px;
height: 65px;
background-color: #22B14C;
float: left;
text-align: center;
}
div#header {
text-align: left;
}
This is the Demo
Maybe you should change the font by yourself (*^__^*)...
Try this one:
http://jsfiddle.net/SYPNC/9/
This should match your requirements. You can still adjust the width of your header1/header2
Give width for below in percentage according to your requirement
div#details1
{
float:left; width:90%;
}
Your html,css both should be change like bellow
HTML
<div id="details1"> <span>details1</span>
</div>
<div id="details2"> <span>details2</span>
</div>
<div id="header"> <span>header </span>
</div>
CSS
body{
width:500px;
}
#details1 {
float:left;
width:300px;
height:50px;
background-color:red;
}
#details2 {
float:right;
width:200px;
height:50px;
background-color:green;
}
DEMO
Try this:
div#details1
{
float:left;
background: red;
width: 90%;
text-align: right;
}
div#details2
{
float:right;
background: green;
width: 10%;
}
#header{
clear: both;
}
demo
But better way to markup like this.....
<div id="mainHeader">
<div id="details">
<span class="one">detail1</span>
<span class="two">detail2</span>
</div>
Then you can float: right; to #details