$('button').click(function(){
$('.content').append('<div class="Box"></div>')
});
.wrap
{
position:relative;
}
.content
{
width:200px;
height:330px;
border:1px solid #000;
position:relative;
}
.Box
{
width:180px;
height:50px;
background-color:grey;
position:relative;
left:50%;
margin-left:-90px;
margin-top:5px;
top:5px;
}
.numberPage
{
width:20px;
height:20px;
border:1px solid #666;
position:relative;
top:-30px;
left:170px;
}
.numberPage span
{
margin-left:5px;
margin-top:3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="content">
<div class="Box">
</div>
</div>
<div class="numberPage">
<span>1</span>
</div>
</div>
<button>Add new box</button>
Hello,
I have one question about javascript I think. How add automatically new number page after added 5 boxes in <.content> e.g. like 1 2 3...10. I think it should create new with current page number after prpend fifth grey box, but I don't know how I can do it.
I will be grateful for any advices
Try this.
$('button').click(function(){
if ($('.content .Box').length == 5) {
$('.content .Box').remove();
var number = parseInt($('.numberPage span').text()) + 1;
$('.numberPage span').html(number);
}
$('.content').append('<div class="Box"></div>')
});
.wrap
{
position:relative;
}
.content
{
width:200px;
height:330px;
border:1px solid #000;
position:relative;
}
.Box
{
width:180px;
height:50px;
background-color:grey;
position:relative;
left:50%;
margin-left:-90px;
margin-top:5px;
top:5px;
}
.numberPage
{
width:20px;
height:20px;
border:1px solid #666;
position:relative;
top:-30px;
left:170px;
}
.numberPage span
{
margin-left:5px;
margin-top:3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="content">
<div class="Box">
</div>
</div>
<div class="numberPage">
<span>1</span>
</div>
</div>
<button>Add new box</button>
$('button').click(function(){
//chek if content height is biger than the sum of box heiht inclding the nmpage height and magin
if($('.content').height()>(($('.Box').height()+10)*($('.Box').length+1))){
$('.content').append('<div class="Box"></div>');
}else{
var currentPage=parseInt($('.numberPage .active').html());
PagesFiled[currentPage]=true;
currentPage++;
$('.numberPage .active').removeClass('active');
$('.numberPage').append('<span class="active">'+currentPage+'</span>');
//clear boxes and add in next page
$('.content').empty();
$('.content').append('<div class="Box"></div>');
}
});
var PagesFiled={};
.wrap
{
position:relative;
}
.content
{
width:200px;
height:330px;
border:1px solid #000;
position:relative;
}
.Box
{
width:180px;
height:50px;
background-color:grey;
position:relative;
left:50%;
margin-left:-90px;
margin-top:5px;
top:5px;
}
.numberPage
{
display:flex;
width:20px;
height:20px;
position:relative;
top:-30px;
right: -7px;
}
.numberPage span
{
margin-left:5px;
margin-top:3px;
}
.numberPage .active{
border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="content">
<div class="Box">
</div>
</div>
<div class="numberPage">
<span class='active'>1</span>
</div>
</div>
<button>Add new box</button>
try this one. adding the current page no. + 1 on every button click.
$('button').click(function(){
var counter = $('.numberPage span').text();
$('.content').append('<div class="Box"></div>');
if($('.content .Box').length == 6){
$('.content .Box').remove();
counter = parseInt(counter) + 1;
$('.numberPage span').text(counter);
}
});
.wrap
{
position:relative;
}
.content
{
width:200px;
height:330px;
border:1px solid #000;
position:relative;
}
.Box
{
width:180px;
height:50px;
background-color:grey;
position:relative;
left:50%;
margin-left:-90px;
margin-top:5px;
top:5px;
}
.numberPage
{
width:20px;
height:20px;
border:1px solid #666;
position:relative;
top:-30px;
left:170px;
}
.numberPage span
{
margin-left:5px;
margin-top:3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="content">
<div class="Box">
</div>
</div>
<div class="numberPage">
<span>1</span>
</div>
</div>
<button>Add new box</button>
You can use following code for this
$('button').click(function(){
$('.content').append('<div class="Box"></div>')
$('.numberPage').append('<span>'+($('.numberPage span').length + 1 )+'</span>')
});
Try this solution
t = 0;
$('button').click(function(){
$('.content').append('<div class="Box"></div>');
t++;
if (t%5 === 0) {
$('.wrap').append('<div class="numberPage"><span>'+t+'</span></div>');
}
});
.wrap
{
position:relative;
}
.content
{
width:200px;
height:330px;
border:1px solid #000;
position:relative;
}
.Box
{
width:180px;
height:50px;
background-color:grey;
position:relative;
left:50%;
margin-left:-90px;
margin-top:5px;
top:5px;
}
.numberPage
{
width:20px;
height:20px;
border:1px solid #666;
position:relative;
top:-30px;
left:170px;
}
.numberPage span
{
margin-left:5px;
margin-top:3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="content">
<div class="Box">
</div>
</div>
<div class="numberPage">
<span>1</span>
</div>
</div>
<button>Add new box</button>
Related
I am having somewhat two navigation bars right here. When I click on the menu-btn, the sidebar will slide in. But somehow the sidebar pushes the menu-bar downwards which I do not understand why. How do I make the sidebar stop pushing the menu-bar. Any tips will be appreciated.
function main(){
$(".menu-bar").hide();
$(".menu-bar").fadeIn(300);
$(".sidebar").hide();
$(".dropdown-content").hide();
$(".menu-btn").on('click',function(){
$(".sidebar").animate({width:'toggle'});
});
$(".close-btn").on('click',function(){
$(".sidebar").animate({width:'toggle'});
});
$(".login").on('click',function(){
$(".dropdown-content").animate({width:'toggle'});
});
}
$(document).ready(main)
.sidebar{
display:none;
width:250px;
background-color:#005777;
z-index:1;
padding-top:60px;
height:100%;
overflow:hidden;
}
.brand{
font-family:ParmaPetit;
font-size:50px;
}
.sidebar a, .login{
text-decoration:none;
padding: 8px 8px 8px 8px;
display:block;
font-size:30px;
text-align:center;
color:white;
}
.close-btn{
position:relative;
font-size:40px;
float:right;
bottom:50px;
right:10px;
color:white;
}
.sidebar a:hover, .login:hover, .close-btn:hover, .menu-btn:hover{
color:#01af55;
cursor:pointer;
transition:0.3s;
}
.dropdown-content{
background-color:#111111;
position:relative;
left:250px;
bottom:29px;
}
.menu-bar{
background-color:#005777;
padding-bottom:10px;
overflow:hidden;
float:top;
}
.menu-btn{
font-size:40px;
cursor:pointer;
color:white;
position:relative;
left:20px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar" id="sidebar">
<span class="close-btn">×</span>
Airline Intel
Book Flight
Book Hotel
<div class="dropdown">
<span class="login">Sign In ➤</span>
<div class="dropdown-content">
Admin
User
Register
</div>
</div>
</div>
<div class="menu-bar" id="collapse">
<span class="menu-btn">☰</span>
</div>
function main(){
$(".menu-bar").hide();
$(".menu-bar").fadeIn(300);
$(".sidebar").hide();
$(".dropdown-content").hide();
$(".menu-btn").on('click',function(){
$('#collapse').hide();
$(".sidebar").animate({width:'toggle'});
});
$(".close-btn").on('click',function(){
$('#collapse').show();
$(".sidebar").animate({width:'toggle'});
});
$(".login").on('click',function(){
$(".dropdown-content").animate({width:'toggle'});
});
}
$(document).ready(main)
.sidebar{
display:none;
width:250px;
background-color:#005777;
z-index:1;
padding-top:60px;
height:100%;
overflow:hidden;
}
.brand{
font-family:ParmaPetit;
font-size:50px;
}
.sidebar a, .login{
text-decoration:none;
padding: 8px 8px 8px 8px;
display:block;
font-size:30px;
text-align:center;
color:white;
}
.close-btn{
position:relative;
font-size:40px;
float:right;
bottom:50px;
right:10px;
color:white;
}
.sidebar a:hover, .login:hover, .close-btn:hover, .menu-btn:hover{
color:#01af55;
cursor:pointer;
transition:0.3s;
}
.dropdown-content{
background-color:#111111;
position:relative;
left:250px;
bottom:29px;
}
.menu-bar{
background-color:#005777;
padding-bottom:10px;
overflow:hidden;
float:top;
}
.menu-btn{
font-size:40px;
cursor:pointer;
color:white;
position:relative;
left:20px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar" id="sidebar">
<span class="close-btn">×</span>
Airline Intel
Book Flight
Book Hotel
<div class="dropdown">
<span class="login">Sign In ➤</span>
<div class="dropdown-content">
Admin
User
Register
</div>
</div>
</div>
<div class="menu-bar" id="collapse">
<span class="menu-btn">☰</span>
</div>
you need to hide menu button when you clicked it. and show when you click in close button.
Add a position : absolute; to the sidebar class should do the trick
I am trying to pass the path of image to onclick event. I am taking the image from folder dynamically. Now,I have to pass the path of image. I have tried, but I am not getting expected results. Please give me any advice.
My code:
<div class="col-md-2">
<div class="img-responsive">
<img id="prod" src="<?php echo base_url('uploads/store/'.$data->img);?>" style="height:350px;width:200px;display:none;" alt="Fjords">
</div>
My HTML & JS
<style type="text/css">
.button
{
width: 150px;
padding: 10px;
background-color: #FF8C00;
box-shadow: -8px 8px 10px 3px rgba(0,0,0,0.2);
font-weight:bold;
text-decoration:none;
}
#cover{
position:fixed;
top:0;
left:0;
background:rgba(0,0,0,0.6);
z-index:5;
width:100%;
height:100%;
display:none;
}
#loginScreen
{
height:380px;
width:340px;
margin:0 auto;
position:relative;
z-index:10;
display:none;
background: url(//here i have to pass above mentioned path src of image) no-repeat;
border:5px solid #cccccc;
border-radius:10px;
}
#loginScreen:target, #loginScreen:target + #cover{
display:block;
opacity:2;
}
.cancel
{
display:block;
position:absolute;
top:3px;
right:2px;
background:rgb(245,245,245);
color:black;
height:30px;
width:35px;
font-size:30px;
text-decoration:none;
text-align:center;
font-weight:bold;
}
</style>
</head>
<body>
<div align="center">
<br><br><br><br>
Click here to Log In
</div>
<div id="loginScreen">
×
</div>
<div id="cover" >
</div>
</body>
</html>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have written the code for displaying the range slider values. Now I want to add both the range sliders values and display it in the text box. How do I do it?
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.h
{
position:absolute;
left:50px;
top:100px;
}
.P
{
position:absolute;
left:50px;
top:140px;
}
.i1
{
position:absolute;
left:150px;
width:100px;
height:40px;
top:250px;
}
.i2
{
position:absolute;
left:600px;
width:100px;
height:40px;
top:250px;
}
.i3
{
position:absolute;
right:300px;
width:100px;
height:40px;
top:250px;
}
.P1
{
position:absolute;
left:150px;
top:210px;
font-size:15px;
}
.P2
{
position:absolute;
left:600px;
top:210px;
font-size:15px;
}
.img1
{
position:absolute;
left:380px;
width:90px;
height:60px;
top:245px;
}
.img2
{
position:absolute;
right:480px;
width:90px;
height:60px;
top:240px;
}
.r1
{
position:absolute;
bottom:150px;
left:150px;
width:180px;
height:10px;
-webkit-appearance:none;
border-radius:5px;
background:#d7dcdf;
outline:blue;
padding:0;
margin:0;
cursor:pointer;
}
.r1::-webkit-slider-thumb
{
-webkit-appearance:none;
width:20px;
height:20px;
border:0;
border-radius:50%;
background:lightblue;
cursor:pointer;
}
.r1:hover
{
background:lightblue;
}
.spa
{
position:absolute;
bottom:150px;
left:340px;
display:inline-block;
background:lightblue;
border-radius:3px;
line-height:20px;
text-align:center;
padding: 5px 10px;
margin-left: 8px;
}
.P3
{
position:absolute;
left:90px;
bottom:135px;
}
.P4
{
position:absolute;
left:77px;
bottom:95px;
}
.r2
{
position:absolute;
bottom:110px;
left:150px;
width:180px;
height:10px;
-webkit-appearance:none;
border-radius:5px;
background:#d7dcdf;
outline:blue;
padding:0;
margin:0;
cursor:pointer;
}
.r2::-webkit-slider-thumb
{
-webkit-appearance:none;
width:20px;
height:20px;
border:0;
border-radius:50%;
background:lightblue;
cursor:pointer;
}
.r2:hover
{
background:lightblue;
}
.spa1{
position:absolute;
bottom:110px;
left:340px;
display:inline-block;
background:lightblue;
border-radius:3px;
line-height:20px;
text-align:center;
padding: 5px 10px;
margin-left: 8px;
}
</style>
</head>
<body>
<h4 class="h">Score recommendation </h4>
<p class="P">Based on the inputs given by you, we recommend the following score splits that you should aim for to achieve the desired target score </p>
<p class="P1">Quant Score</p>
<input type="text" id="Q1" class="i1" onclick="ret(this.value);" value="">
<img src="plus.png" alt="plus" class="img1">
<p class="P2"> Verbal Score</p>
<input type="text" id="s2" class="i2">
<img src="equal.jpg" alt="equal" class="img2">
<input type="text" id="s3" class="i3">
<p class="P3">Algebra</p><input type="range" min="20" max="180" value="20" step="1" class="r1" onchange="showValue(this.value);" >
<span id="range" class="spa">20</span>
<p class="P4">Arithmetic</p><input type="range" min="20" max="180" value="20" step="1" class="r2" onchange="showValue1(this.value);" >
<span id="range1" class="spa1">20</span>
<script>
function showValue(newValue){
document.getElementById("range").innerHTML=newValue;
}
function showValue1(newValue1){
document.getElementById("range1").innerHTML=newValue1;
}
function ret(q){
var q1,q2;
q1=document.getElementById("range").value;
q2=document.getElementById("range1").value;
q=q1+q2;
document.getElementById("Q1").innerHTML=q;
}
</script>
</body>
</html>
Try something like this:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.h
{
position:absolute;
left:50px;
top:100px;
}
.P
{
position:absolute;
left:50px;
top:140px;
}
.i1
{
position:absolute;
left:150px;
width:100px;
height:40px;
top:250px;
}
.i2
{
position:absolute;
left:600px;
width:100px;
height:40px;
top:250px;
}
.i3
{
position:absolute;
right:300px;
width:100px;
height:40px;
top:250px;
}
.P1
{
position:absolute;
left:150px;
top:210px;
font-size:15px;
}
.P2
{
position:absolute;
left:600px;
top:210px;
font-size:15px;
}
.img1
{
position:absolute;
left:380px;
width:90px;
height:60px;
top:245px;
}
.img2
{
position:absolute;
right:480px;
width:90px;
height:60px;
top:240px;
}
.r1
{
position:absolute;
bottom:150px;
left:150px;
width:180px;
height:10px;
-webkit-appearance:none;
border-radius:5px;
background:#d7dcdf;
outline:blue;
padding:0;
margin:0;
cursor:pointer;
}
.r1::-webkit-slider-thumb
{
-webkit-appearance:none;
width:20px;
height:20px;
border:0;
border-radius:50%;
background:lightblue;
cursor:pointer;
}
.r1:hover
{
background:lightblue;
}
.spa
{
position:absolute;
bottom:150px;
left:340px;
display:inline-block;
background:lightblue;
border-radius:3px;
line-height:20px;
text-align:center;
padding: 5px 10px;
margin-left: 8px;
}
.P3
{
position:absolute;
left:90px;
bottom:135px;
}
.P4
{
position:absolute;
left:77px;
bottom:95px;
}
.r2
{
position:absolute;
bottom:110px;
left:150px;
width:180px;
height:10px;
-webkit-appearance:none;
border-radius:5px;
background:#d7dcdf;
outline:blue;
padding:0;
margin:0;
cursor:pointer;
}
.r2::-webkit-slider-thumb
{
-webkit-appearance:none;
width:20px;
height:20px;
border:0;
border-radius:50%;
background:lightblue;
cursor:pointer;
}
.r2:hover
{
background:lightblue;
}
.spa1{
position:absolute;
bottom:110px;
left:340px;
display:inline-block;
background:lightblue;
border-radius:3px;
line-height:20px;
text-align:center;
padding: 5px 10px;
margin-left: 8px;
}
</style>
</head>
<body>
<h4 class="h">Score recommendation </h4>
<p class="P">Based on the inputs given by you, we recommend the following score splits that you should aim for to achieve the desired target score </p>
<p class="P1">Quant Score</p>
<input type="text" id="Q1" class="i1" onclick="ret();" value="">
<img src="plus.png" alt="plus" class="img1">
<p class="P2"> Verbal Score</p>
<input type="text" id="s2" class="i2">
<img src="equal.jpg" alt="equal" class="img2">
<input type="text" id="s3" class="i3">
<p class="P3">Algebra</p><input type="range" min="20" max="180" value="20" step="1" class="r1" onchange="showValue(this.value);" >
<span id="range" class="spa">20</span>
<p class="P4">Arithmetic</p><input type="range" min="20" max="180" value="20" step="1" class="r2" onchange="showValue1(this.value);" >
<span id="range1" class="spa1">20</span>
<script>
function showValue(newValue){
document.getElementById("range").textContent=newValue;
}
function showValue1(newValue1){
document.getElementById("range1").textContent=newValue1;
}
function ret(){
var q1,q2;
q1=+document.getElementById("range").textContent;
q2=+document.getElementById("range1").textContent;
q=q1+q2;
document.getElementById("Q1").value=q;
return q;
}
</script>
</body>
</html>
I have a little problem.
I tried to create a social-media plattform - everything is well working.
But this is anoying me: I want to create an area, where the post are. If there more then 3 you have to scoll with you mouse. The scrollbars are not in the correct place.
Here the wrong design (But "correct" technic):
Here it is more clearer and simplier to controll.
My Imagination was: The Posts-Area should be scrolled.
My CSS:
* {
box-sizing:border-box;
}
a {
text-decoration:none;
color:#FFF;
}
a:hover {
color:#F5F5F5;
}
body {
margin:0px;
width:100%;
height:100%;
background-color:#99cc99;
font-family:'Open Sans';
overflow-y: scroll;
}
.website {
position:absolute;
left:50%;
margin-left:-540px;
width:1080px;
height:100%;
background-color:#99cc99;
border-collapse: separate;
}
#menu {
position:fixed;
top:0px;
width:1080px;
height:50px;
background-color:#6dbd6c;
}
#partition-horizontal {
height:0px;
background-color:#99cc99;
}
#content {
width:100%;
height:auto;
background-color:transparent;
}
#left-top {
width:330px;
height:50px;
border-bottom:2px solid #437C42;
}
#partition1 {
background-color:#6dbd6c;
width:10px;
height:50px;
border-bottom:2px solid #437C42;
}
#right-top {
width:770px;
border-bottom:2px solid #437C42;
height:50px;
}
#right-top .menu {
position:relative;
float:left;
}
#right-top .menu a {
height:100%;
width:auto;
padding-top:15px;
padding-bottom:15px;
padding-left:15px;
padding-right:15px;
}
#right-top .menu a:hover {
background-color:rgba(0,0,0,0.15);
color:#fff;
}
#right-top .menu a:first-child {
margin-left:-0px;
}
#left-bottom {
clear:both;
width:330px;
height:auto;
background-color:#fff;
}
#right-bottom {
clear:both;
width:770px;
overflow:auto;
}
#partition2 {
background-color:#99cc99;
width:10px;
}
#left-bottom-area {
padding:;
width:100%;
height:851px;
clear:both;
}
#right-bottom-area {
padding:;
width:100%;
min-height:887px;
height:auto;
clear:both;
}
#right-bottom-area #poster {
width:100%;
height:300px;
background-color:#FFF;
border-bottom-right-radius:3px;
border-bottom-left-radius:3px;
margin-bottom:10px;
}
#right-bottom-area #real-content {
width:100%;
height:auto;
background-color:#FFFFFF;
border-top-right-radius:3px;
border-top-left-radius:3px;
color:#111111;
overflow:hidden;
}
#real-content p {
width:100%;
height:200px;
background-color:#FFFFFF;
border-bottom:1px solid #99cc99;
padding:15px;
margin-top:0px;
margin-bottom:0px;
}
#real-content p:hover {
background-color:rgba(0,0,0,0.02);
}
#real-content p:last-child {
border-bottom:none;
}
My HTML/PHP:
<?php
$links = $_SERVER['REQUEST_URI'];
preg_match("/[^\/]+$/", $links, $matches);
$link = $matches[0];
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>box6</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="./design.css" />
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="./resources/scripts/js/main.js"></script>
</head>
<body>
<table class="website" cellspacing="0">
<tr id="menu">
<th id="left-top"></th>
<td id="partition1"></td>
<th id="right-top">
<div class="menu">
Home
Friends
Gallery
Settings
</div>
</th>
</tr>
<tr id="partition-horizontal"></tr>
<tr id="content">
<td id="left-bottom">
<div id="left-bottom-area"></div>
</td>
<td id="partition2"></td>
<td id="right-bottom">
<div id="right-bottom-area">
<?php
if($link == "me"){
?>
<div id="poster">
</div>
<div id="real-content" full-site="false">
<?php
//HERE IS THE POSTS-AREA
for ($i = 0; $i < 10; $i++) {
echo "<p>".$i."</p>";
}
?>
</div>
<?php
}else {
?>
<div id="real-content" full-site="true" style="border-radius:0px;">
</div>
<?php
}
?>
</div>
</td>
</tr>
</table>
</body>
</html>
Lots of issues with your code.
I suggest not using tables but divs for your layout. Tables should generally only be used to display tabular data.
Also, there are a lot of issues with your overflows and there shouldn't be any absolute positionning.
Finally, I recommend you use the CSS calc() function for your widths and heights. It's supported by IE9.
height: calc(100% - 30px);
Here's kinda how I would do it (might need some additional modifications):
http://codepen.io/jlowcs/pen/dPKKdB
HTML:
<div class="website" cellspacing="0">
<div id="menu">
<div id="left-top"></div
><div id="partition1"></div
><div id="right-top">
<div class="menu">
Home
Friends
Gallery
Settings
</div>
</div>
</div>
<div id="partition-horizontal"></div>
<div id="content">
<div id="left-bottom">
<div id="left-bottom-area"></div>
</div
><div id="partition2"></div
><div id="right-bottom">
<div id="right-bottom-area">
<div id="poster">
</div>
<div id="real-content" full-site="false">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
</div>
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
}
* {
box-sizing:border-box;
}
a {
text-decoration:none;
color:#FFF;
}
a:hover {
color:#F5F5F5;
}
body {
margin:0px;
width:100%;
height:100%;
background-color:#99cc99;
font-family:'Open Sans';
}
.website {
margin: auto;
width:1080px;
height:100%;
background-color:#99cc99;
border-collapse: separate;
}
#menu {
width:1080px;
height:50px;
background-color:#6dbd6c;
}
#menu > * {
display: inline-block;
}
#partition-horizontal {
height:0px;
background-color:#99cc99;
}
#content {
overflow: hidden; /* FIXED */
height: calc(100% - 50px); /* FIXED */
width: 100%;
background-color:transparent;
}
#left-top {
width:330px;
height:50px;
border-bottom:2px solid #437C42;
}
#partition1 {
background-color:#6dbd6c;
width:10px;
height:50px;
border-bottom:2px solid #437C42;
}
#right-top {
width: calc(100% - 330px - 10px);
border-bottom:2px solid #437C42;
height:50px;
}
#right-top .menu {
height:100%;
position:relative;
float:left;
}
#right-top .menu a {
line-height: 48px;
padding-left:15px;
padding-right:15px;
}
#right-top .menu a:hover {
background-color:rgba(0,0,0,0.15);
color:#fff;
}
#right-top .menu a:first-child {
margin-left:-0px;
}
#content > * {
display: inline-block;
vertical-align: top;
}
#left-bottom {
width: 330px;
height: 100%;
background-color: #fff;
}
#partition2 {
background-color: #99cc99;
width: 10px;
height: 100%;
}
#left-bottom-area {
overflow: auto;
width:100%;
}
#right-bottom {
width: calc(100% - 330px - 10px);
height: 100%;
}
#right-bottom-area {
height: 100%;
}
#right-bottom-area #poster {
height:300px;
background-color:#FFF;
border-bottom-right-radius:3px;
border-bottom-left-radius:3px;
margin-bottom:10px;
}
#right-bottom-area #real-content {
width: 100%;
height: calc(100% - 300px - 10px);
background-color:#FFFFFF;
border-top-right-radius:3px;
border-top-left-radius:3px;
color:#111111;
overflow:auto; /* FIXED */
}
#real-content p {
width:100%;
height:200px;
background-color:#FFFFFF;
border-bottom:1px solid #99cc99;
padding:15px;
margin-top:0px;
margin-bottom:0px;
}
#real-content p:hover {
background-color:rgba(0,0,0,0.02);
}
#real-content p:last-child {
border-bottom:none;
}
I have a rollover with text div that I'd like to make clickable/linkable. I'd like to whole div to be clickable not just the headings. But I'm unsure how to do so whether it's in my html or css or if I should add a script? Here's what I have:
<div class="box one">
<img src="http://www.mydogbreeders.com/wp-content/themes/dogBreedersResponsive2014/images/dogs/beagle.jpg" alt="Lost" data-over="images/placeholder-image-hover.png" data-out="images/placeholder-image-hover.png">
<div class="description">
<div class="description-inner">
<h3> heading </h3>
<h4> subheading</h4>
</div><!--description-inner-->
</div><!--description-->
</div> <!--box one-->
.box{
margin:0 20px 20px 0;
float: left;
position:relative;
}
.description {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background:#deefed;
color:#F00;
width:460px;
height:300px;
visibility:hidden;
opacity:0;
display:table;
}
.description-inner {
display:table-cell;
vertical-align:middle;
}
.description h3{
font-size:1.25em;
color:#00a8cf;
font-weight:bold;
font-style:italic;
text-transform:uppercase;
padding:20px 0 0 0;
margin:auto;
text-align:center;
width:90%;
top:50%;
border-top:1px #F00 solid;
}
.description h4 {
color:#00a8cf;
font-style:italic;
font-weight:normal;
padding:0 0 20px 0;
margin:auto;
text-align:center;
width:90%;
border-bottom:1px #F00 solid;
}
.box:hover .description {
visibility: visible;
opacity: 1;
}
And here's the demo: http://jsfiddle.net/L9bat8hj/
Move end a-tag behind the rollover element.
<div class="box one">
<a href="lost.html">
<img src="http://www.mydogbreeders.com/wp-content/themes/dogBreedersResponsive2014/images/dogs/beagle.jpg" alt="Lost" data-over="images/placeholder-image-hover.png" data-out="images/placeholder-image-hover.png">
<div class="description">
<div class="description-inner">
<h3> heading </h3>
<h4> subheading</h4>
</div><!--description-inner-->
</div><!--description-->
</a>
</div> <!--box one-->
http://jsfiddle.net/L9bat8hj/1/