I have two divs stacked next to each other, and I'm attempting to use shadowing to make it look like one div is behind the other. Adding shadowing to the left of the div on the right seems to work, but adding shadowing to the right of the div on the left side casts the shadow behind the right div instead of in front of it. Is there any fix to this?
.wrapper{
display: grid;
width: fit-content;
height: 150px;
align-items: center;
grid-template-columns: 1fr auto;
border: solid 2px black;
margin-left: 15%;
}
.wrapper:hover{
cursor: pointer;
}
.wrapper:hover > .left{
height: 100%;
box-shadow: 4px 0px 15px -1px black;
}
.wrapper:hover > .right{
height: 80%;
box-shadow: none;
}
.left{
width: 150px;
height: 80%;
background-color: red;
border: 2px red solid;
transition: 0.3s;
}
.right{
width: 100px;
height: 100%;
background-color: blue;
border: 2px blue solid;
transition: 0.3s;
box-shadow: -4px 0px 15px -1px #000000;
}
<div class="wrapper">
<div class="left">
</div>
<div class="right">
</div>
</div>
I have solved your problem.
You should change your code like below.
.wrapper{
display: grid;
width: fit-content;
height: 150px;
align-items: center;
grid-template-columns: 1fr auto;
border: solid 2px black;
margin-left: 15%;
}
.wrapper:hover{
cursor: pointer;
}
.wrapper:hover > .left{
height: 100%;
box-shadow: 4px 0px 15px -1px black;
z-index: 1;
}
.wrapper:hover > .right{
height: 80%;
box-shadow: none;
}
.left{
width: 150px;
height: 80%;
background-color: red;
border: 2px red solid;
transition: 0.3s;
}
.right{
width: 100px;
height: 100%;
background-color: blue;
border: 2px blue solid;
transition: 0.3s;
box-shadow: -4px 0px 15px -1px #000000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="left">
</div>
<div class="right">
</div>
</div>
</body>
</html>
Adding z-index to the left div when hovering over the wrapper appears to work.
.wrapper {
display: grid;
width: fit-content;
height: 150px;
align-items: center;
grid-template-columns: 1fr auto;
border: solid 2px black;
margin-left: 15%;
}
.wrapper:hover {
cursor: pointer;
}
.wrapper:hover>.left {
height: 100%;
box-shadow: 4px 0px 15px -1px black;
z-index: 1;
}
.wrapper:hover>.right {
height: 80%;
box-shadow: none;
}
.left {
width: 150px;
height: 80%;
background-color: red;
border: 2px red solid;
transition: 0.3s;
}
.right {
width: 100px;
height: 100%;
background-color: blue;
border: 2px blue solid;
transition: 0.3s;
box-shadow: -4px 0px 15px -1px #000000;
}
<div class="wrapper">
<div class="left">
</div>
<div class="right">
</div>
</div>
You can add z-index inside .wrapper:hover>.left so when you hover the left <div> it will bring the <div> in front and cast the shadow in front of the right <div>.
.wrapper:hover > .left{
height: 100%;
box-shadow: 4px 0px 15px -1px black;
z-index: 1;
}
Related
I was creating a replica of google webpage. I have everything finished but my dropdown menu for the apps icon only shows up halfway. I've already tried increasing the height etc. I think its not showing after the header portion. Please suggest any possible blunders I may have committed.
CSS
<style>
.menu-btn
{background-color:#f5f5f5 ;
color: black;
font-family: sans-serif;
border: none;}
.dropdown-menu {
position: relative;
display: inline-block;
position: relative;
display: inline-block;
border:1% solid #3c4043;}
.menu-content {
display: none;
position: absolute;
background-color: #f5f5f5;
min-width: 160px;
box-shadow: 0px 6px 12px 0px rgba(0,0,0,0.2);
right: 0;
align-items:center;
border-radius: 3%;
border:1% solid #black;
width:300px;
height: 500px;
cursor: pointer;}
</style>
**<javascript>**
<script>
let dropdownBtn = document.querySelector('.menu-btn');
let menuContent = document.querySelector('.menu-content');
dropdownBtn.addEventListener('click',()=>{
if(menuContent.style.display===""){
menuContent.style.display="block";}
else {
menuContent.style.display="";}
})
</script>
You have an extra : in the height for your menu-content class.
There are also a few other bugs in the CSS. I created a jsfiddle that might help you figure out what's wrong with your own code.
https://jsfiddle.net/6ck7rq53/6/
I created a simple HTML dropdown using your own classes:
<html>
<body>
<div class="dropdown-menu">
<button class="menu-btn">Dropdown
<div class="menu-content">
<p>One</p>
<p>Two</p>
<p>Three</p>
</div>
</button>
</div>
</body>
</html>
and I fixed your CSS bugs:
.menu-btn {
background-color: #f5f5f5;
color: black;
font-family: sans-serif;
border: none;
}
.dropdown-menu {
position: relative;
display: inline-block;
border: 1px solid #3c4043;
height: auto;
}
.menu-content {
display: none;
position: absolute;
background-color: #f5f5f5;
min-width: 160px;
box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.2);
right: 0;
align-items: center;
border-radius: 3%;
border: 1px solid black;
width: 300px;
height: 500px;
cursor: pointer;
left: 0;
}
div#content {
position: relative;
width: 100%;
border: 1px solid black;
height: 500px;
bottom: 0px;
}
div#menu {
position: absolute;
height: 125px;
width: 100%;
border: 1px solid black;
bottom: 0px;
line-height: 125px;
text-align: center;
}
div#recenter {
line-height: 50px;
text-align: center;
border: 1px solid black;
border-radius: 30px;
position: absolute;
margin: 10px;
padding: 0px 20px;
bottom: 180px;
background-color: aliceblue;
}
div#geolocation {
line-height: 50px;
text-align: center;
border: 1px solid black;
position: absolute;
margin: 10px;
bottom: 125px;
background-color: aliceblue;
}
<div id="content">
<div id="recenter">Re-center</div>
<div id="geolocation">My address is : 3958 Heron Way - Oregon 97351</div>
<div id="menu" onclick="document.getElementById('geolocation').style.display = 'none';">MENU (CLICK ME)</div>
</div>
Currently, when I hide the #geolocation block in javascript, the #recenter button does not move.
What I want is that when I run the following jQuery command:
$('#geolocation').hide();
(or in js : document.getElementById('geolocation').style.display = 'none';)
the #recenter button moves to the bottom (where the #geolocation block was located)
How to do ?
Don't position elements the absolutely, take advantage of flexbox layout and alignment options.
div#content {
position: relative;
width: 80%;
margin: 1em auto;
border: 1px solid black;
height: 300px;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
}
div#menu {
height: 50px;
width: 80%;
border: 1px solid black;
text-align: center;
margin: 0 auto;
}
div#recenter {
line-height: 20px;
text-align: center;
border: 1px solid black;
border-radius: 30px;
margin: 10px;
padding: 0px 10px;
background-color: aliceblue;
}
div#geolocation {
line-height: 20px;
text-align: center;
border: 1px solid black;
margin: 10px;
background-color: aliceblue;
}
<div id="content">
<div id="recenter">Re-center</div>
<div id="geolocation">My address is : 3958 Heron Way - Oregon 97351</div>
<div id="menu" onclick="document.getElementById('geolocation').style.display = 'none';">MENU (CLICK ME)</div>
</div>
When you click the geolocation, and hide it, you can also move the recenter button to the bottom.
It's not a very nice way to do this, but it works.
div#content {
position: relative;
width: 100%;
border: 1px solid black;
height: 500px;
bottom: 0px;
}
div#menu {
position: absolute;
height: 125px;
width: 100%;
border: 1px solid black;
bottom: 0px;
line-height: 125px;
text-align: center;
}
div#recenter {
line-height: 50px;
text-align: center;
border: 1px solid black;
border-radius: 30px;
position: absolute;
margin: 10px;
padding: 0px 20px;
bottom: 180px;
background-color: aliceblue;
}
div#geolocation {
line-height: 50px;
text-align: center;
border: 1px solid black;
position: absolute;
margin: 10px;
bottom: 125px;
background-color: aliceblue;
}
<div id="content">
<div id="recenter">Re-center</div>
<div id="geolocation">My address is : 3958 Heron Way - Oregon 97351</div>
<div id="menu" onclick="document.getElementById('geolocation').style.display = 'none';document.getElementById('recenter').style.bottom = '125px';">MENU (CLICK ME)</div>
</div>
wrap the geolocation and recenter div within a div and give it to them a class. then use calc and flex to achieve your requirement like below. don't need to use position and bottom CSS it's a very bad practice for this kind of situation. Happy Solution :)
div#content{
position:relative;
width:100%;
border:1px solid black;
height:500px;
bottom:0px;
}
div#menu{
position:absolute;
height:125px;
width:100%;
border:1px solid black;
bottom:0px;
line-height:125px;
text-align:center;
}
#recenter{
padding:10px;
border:1px solid #000;
max-width:120px;
border-radius:30px;
text-align:center;
background-color: aliceblue;
}
#geolocation{
line-height:50px;
text-align:center;
border: 1px solid black;
margin:10px;
background-color: aliceblue;
}
.upper_div{
height: calc(100% - 125px);
display: flex;
flex-direction: column;
justify-content: flex-end;
}
<div id="content">
<div class=upper_div>
<div id="recenter">Re-center</div>
<div id="geolocation">My address is : 3958 Heron Way - Oregon 97351</div>
</div>
<div id="menu" onclick="document.getElementById('geolocation').style.display = 'none';">MENU</div>
</div>
I'm trying to animate the div to extend width (like slide out animation) but I've gotten that to work, however I'm also trying to remove the border radius as this happens but when I do this the entire function doesn't work like.
Thank you for any help!
//-----------ENQUIRY-FORM----------
$('#enquiry-shown').click(function() {
$(this).animate({
width: "950px",
border - radius: "0px"
}, 1000);
$('#enquiry-form').slideToggle('slow');
});
/*--------ENQUIRIES---------*/
#enquiry-container {
text-align: center;
margin-bottom: 25px;
}
#enquiry-shown {
background-color: white;
padding: 10px 0;
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
width: 210px;
border: solid 1px #d8d8d8;
border-radius: 50px;
margin: 0 auto;
transition: width ease 1s;
}
#enquiry-name {
font-family: "calibri light";
font-size: 30px;
text-align: center;
margin: 0;
display: inline;
padding: 0 0 0 10px;
}
#enq-arrowdown {
width: 25px;
height: 16px;
float: right;
padding: 10px 19px 0 0;
display: inline-block;
}
#enquiry-form {
width: 950px;
height: 400px;
background-color: white;
margin: 0 auto;
display: none;
border-bottom: solid 1px #d8d8d8;
border-right: solid 1px #d8d8d8;
border-left: solid 1px #d8d8d8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="enquiry-container">
<div id="enquiry-shown">
<h2 id="enquiry-name">Enquiries</h2>
<img id="enq-arrowdown" src="https://www.optimaltravel.ca/images/arrow.png">
</div>
<div id="enquiry-form">
</div>
</div>
just change border-radius: "0px"; to borderRadius: "0px"
//-----------ENQUIRY-FORM----------
$('#enquiry-shown').click(function() {
$(this).animate({
width: "950px",
borderRadius: "0px"
}, 1000);
$('#enquiry-form').slideToggle('slow');
});
/*--------ENQUIRIES---------*/
#enquiry-container {
text-align: center;
margin-bottom: 25px;
}
#enquiry-shown {
background-color: white;
padding: 10px 0;
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
width: 210px;
border: solid 1px #d8d8d8;
border-radius: 50px;
margin: 0 auto;
transition: width ease 1s;
}
#enquiry-name {
font-family: "calibri light";
font-size: 30px;
text-align: center;
margin: 0;
display: inline;
padding: 0 0 0 10px;
}
#enq-arrowdown {
width: 25px;
height: 16px;
float: right;
padding: 10px 19px 0 0;
display: inline-block;
}
#enquiry-form {
width: 950px;
height: 400px;
background-color: white;
margin: 0 auto;
display: none;
border-bottom: solid 1px #d8d8d8;
border-right: solid 1px #d8d8d8;
border-left: solid 1px #d8d8d8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="enquiry-container">
<div id="enquiry-shown">
<h2 id="enquiry-name">Enquiries</h2>
<img id="enq-arrowdown" src="https://www.optimaltravel.ca/images/arrow.png">
</div>
<div id="enquiry-form">
</div>
</div>
You also can change the function like this: Notice "border-radius":"0px"
$(this).animate({
"width": "950px",
"border-radius": "0px"}, 1000);
My chatbox won't maximize, autoscroll or return to bottom for new input. and also, is there any way to make the popup avatar act as android facebook messenger app, with onclick function to minimize and maximize? any help will really be appreciated here. thanks in advance.
<html>
<head>
<title>chatbox</title>
<style>
.popup-wrap {
top: 100px;
cursor: pointer;
width: 80px;
height: 110px;
position: fixed;
right: 40px;
}
.popup-avatar {
top: 11px;
left: 11px;
background: url(../images/ella1.jpg);
position: absolute;
height: 78px;
width: 78px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border-radius:45px 45px 45px 45px
}
.shell-1 {
right: 20px;
background: #583983;
height: 80px;
width: 80px;
padding: 5px;
margin: 5px;
-moz-border-radius:25px 25px 25px 25px;
border-radius:45px 45px 45px 45px
}
.shell-2 {
background: white;
height: 78px;
width: 78px;
padding: 0px 0px 2px 2px;
margin: 0px;
-moz-border-radius:25px 25px 25px 25px;
border-radius:45px 45px 45px 45px
}
.tinyBanner {
background: #583983;
color: white;
height: 24px;
width: 100px;
display: inline-block;
text-align: center;
padding-top:5px;
border-radius: 15px 0px 15px 0px;
}
.msgbox_wrap {
background:white;
width:250px;
height:400px;
position:fixed;
right:20px;
padding:2px 2px 2px 2px;
bottom:0px;
display: none;
border: 1px solid #b0b0b0;
border-radius:10px 10px 0px 0px;
}
.msgbox_wrap-on {
display: block !important;
}
.msg_head{
cursor:pointer;
background:#583983;
padding:15px;
color:white;
bottom:0px;
border-radius:10px 10px 0px 0px;
}
.close{
float:right;
color:white;
}
.msg_wrap{
background:url(../images/m3-act.jpg);
min-width:250px;
height:355px
}
.chatlog {
height:300px;
}
.botMessage {
background-color: #ffffff;
position: relative;
padding: 5px;
margin: 5px;
display: inline-block;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px 10px 10px 10px;
}
.userMessage {
background-color:#583983;
position: relative;
color: #FFF;
padding: 5px;
margin: 5px;
display: inline-block;
float: right;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px 10px 10px 10px;
}
.convo {
height: 290px;
padding: 5px;
border-style: solid;
border-width: 1px;
border-color: #eeeeee;
}
.scroll {
overflow-y: auto;
overflow-x: hidden;
}
.msg_input {
background:#583983;
height: 42px;
padding: 5px;
border-style: solid;
border-width: 1px;
border-color: #eeeeee;
}
</style>
</head>
<body>
<div class="popup-wrap">
<a href="#" id="addClass">
<div class="shell-1">
<div class="shell-2">
<div class="popup-avatar"></div>
</div>
</div>
</a>
<div class="tinyBanner">Talk to Ella</div>
</div>
<div class="msgbox_wrap" id="qnimate">
<div class="msg_head">Talk to Ella
<div class="close">X</div>
</div>
<div class="msg_wrap">
<div class="convo scroll">
<div id="chatlog"></div>
</div>
<div class="msg_input">
<form method="post" name="talkform" id="talkform" action="index.php">
<form id="talkform" class="talkform">
<input id="say" name="say" placeholder="You say...." type="text" style="background: #white; height: 41px; width: 237px; font-color: #B1B1B1; font-size: 14px; font-weight: 400; border-radius:5px 5px 5px 5px;">
</form>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
// This minimize and close
$(document).ready(function(){
$('.msg_head').click(function(){
$('.msgbox_wrap').animate({height:45},'slow');
});
$('.close').click(function(){
$('.msgbox_wrap').hide();
});
});
</script>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
//popup chat fromm avatar icon
$(document).ready(function(){
$("#addClass").click(function () {
$('#qnimate').addClass('msgbox_wrap-on');
});
});
</script>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
//This autoscrolls
setInterval(function(){
$('.msg_wrap').load('convo scroll');
$('#chatlog').animate({scrollTop: $('msg_wrap')[0]}, 1000);
});
</script>
</body>
</html>
Nothing in your code animates the chat box back to full height. You set it to 45px and never do anything else.
$('.msgbox_wrap').animate({height:200},'slow');
I'm trying to accomplish the following layout:
I want a centered Brain with four square links. The "Polaroids" one the left and the right should appear if you are hovering over the right part of the navigation button. So if you hover over the first like in the picture, the first polaroid left up corner should appear.
I tried the following div structure:
.html,
body {
height: 100%;
}
.title {
font-family: lato;
}
.main-content {
width: 100%;
float: left;
background-color: #fefdf9;
height: 100%;
}
.container {
height: 100%;
width: 100%;
margin: 0px auto;
}
.page {
width: 100%;
float: left;
padding: 0px 0px 0px 0px;
}
.top-left {
background-color: #fefdf9;
width: 35%;
float: left;
padding: 0px 0px 0px 0px;
min-height: 1px;
}
.top-middle {
background-color: #fefdf9;
width: 30%;
float: left;
padding: 0px 0px 0px 0px;
}
.top-right {
background-color: #fefdf9;
width: 35%;
float: left;
padding: 0px 0px 0px 0px;
min-height: 1px;
}
.content {
width: 100%;
float: left;
height: auto;
padding-top: 8px;
}
.footer {
background-color: #383838;
text-align: center;
float: left;
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
margin: auto;
}
.FooterText {
FONT-SIZE: 26px;
FONT-FAMILY: "Lato Bold";
color: rgb(255, 79, 78);
}
.header {
width: 40%;
float: left;
max-height: 60px;
}
.header-top {
width: 100%;
float: left;
line-height: 0;
font-family: "Lato Thin";
}
.header-bot {
width: 100%;
height: 4%;
display: inline;
font-family: "Lato Black";
font-size: 30px;
margin-top: -5px;
}
.Left {
width: 37%;
min-height: 1px;
float: left;
white-space: nowrap;
}
.left > div {
height: 50px;
width: 100px;
background: #555;
display: inline-block;
margin: 10px;
}
.Middle {
width: 26%;
float: left;
margin: auto;
height: 580px;
}
.Right {
width: 37%;
min-height: 1px;
float: left;
}
#h1 {
margin: 0px;
padding: 0px;
}
img {
max-width: 100%;
max-height: 100%;
image-rendering: crisp-edges;
}
#Willkommenstext {
font-size: 18px;
text-align: justify;
}
.News {
position: relative;
width: 40%;
padding-left: 20%
}
.News img {
border: 10px solid #fff;
height: 100%;
overflow: hidden;
max-height: 100%;
border-bottom: 45px solid #fff;
-webkit-box-shadow: 3px 3px 3px #777;
-moz-box-shadow: 3px 3px 3px #777;
box-shadow: 3px 3px 3px #777;
}
.News p {
position: absolute;
text-align: center;
width: 100%;
bottom: 0px;
left: 60px;
font: 400 18px/1'Lato', cursive;
color: #888;
}
.Kontakt {
position: relative;
width: 40%;
padding-left: 25%;
margin-top: -15%;
}
.Kontakt img {
border: 10px solid #fff;
height: 100%;
overflow: hidden;
max-height: 100%;
border-bottom: 45px solid #fff;
-webkit-box-shadow: 3px 3px 3px #777;
-moz-box-shadow: 3px 3px 3px #777;
box-shadow: 3px 3px 3px #777;
}
.Kontakt p {
position: absolute;
text-align: center;
width: 100%;
bottom: 0px;
left: 60px;
font: 400 18px/1'Lato', cursive;
color: #888;
}
.Kalender {
position: relative;
width: 40%;
padding-left: 10%
}
.Kalender img {
border: 10px solid #fff;
height: 100%;
overflow: hidden;
max-height: 100%;
border-bottom: 45px solid #fff;
-webkit-box-shadow: 3px 3px 3px #777;
-moz-box-shadow: 3px 3px 3px #777;
box-shadow: 3px 3px 3px #777;
}
.Kalender p {
position: absolute;
text-align: center;
width: 100%;
bottom: 0px;
left: 60px;
font: 400 18px/1'Lato', cursive;
color: #888;
}
.Anfahrt {
position: relative;
width: 40%;
padding-left: 5%;
margin-top: -15%;
}
.Anfahrt img {
border: 10px solid #fff;
height: 100%;
overflow: hidden;
max-height: 100%;
border-bottom: 45px solid #fff;
-webkit-box-shadow: 3px 3px 3px #777;
-moz-box-shadow: 3px 3px 3px #777;
box-shadow: 3px 3px 3px #777;
}
.Anfahrt p {
position: absolute;
text-align: center;
width: 100%;
bottom: 0px;
left: 60px;
font: 400 18px/1'Lato', cursive;
color: #888;
}
.left1 {
width: 10%;
background-color: white;
min-height: 1px;
}
.left2 {
width: 10%;
background-color: white;
min-height: 1px;
}
body {
background: #F1F1F1;
padding: 0;
margin: 0;
font-size: small;
}
ul.square-menu {
font-size: 0;
list-style-type: none;
list-style: none;
padding: 0;
font-family: "Kavoon", Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
width: 400px;
margin: 40px auto;
}
ul.square-menu li {
float: left;
margin: 0px;
}
ul.square-menu li a {
display: block;
text-decoration: none;
padding: 80px 60px;
color: white;
font-weight: normal;
font-size: 150%;
width: 60px;
height: 20px;
text-align: center;
text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.05);
-webkit-transition: all 0.1s ease-in;
-ms-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in;
transition: all 0.1s ease-in;
}
ul.square-menu li a.slink-x {
background-image: url(../images/NavLeftUp.gif);
background-repeat: no;
background-size: 100%;
}
ul.square-menu li a.slink-y {
background-image: url(../images/NavRightUp.gif);
background-repeat: no;
background-size: 100%;
}
ul.square-menu li a.slink-z {
background-image: url(../images/NavLeftDown.gif);
background-repeat: no;
background-size: 100%;
}
ul.square-menu li a.slink-a {
background-image: url(../images/NavRightDown.gif);
background-repeat: no;
background-size: 100%;
}
ul.square-menu li a:hover {
font-size: 26px;
a -moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
-moz-box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.12);
-webkit-box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.12);
box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.12);
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="main-content">
<div class="container">
<div class="page">
<div class="top-left">
</div>
<div class="top-middle">
<div class="header">
<div class="header-top" style="display=" inline="">
<h1>Test Header</h1>
</div>
<div class="header-bot">
<h2>Test Underline</h2>
</div>
</div>
</div>
<div class="top-right">
</div>
</div>
<div class="content">
<div class="Left">
<div class="News">
<p>News</p>
<img src="./images/news.jpg">
</div>
<div class="Kontakt">
<p>News 2</p>
<img src="./images/news.jpg">
</div>
</div>
<div class="Middle">
<ul class="square-menu">
<li>
Home
</li>
<li>
About
</li>
<li>
News
</li>
<li>
Contact
</li>
<br style="clear:both;" />
</ul>
<table id="Willkommenstext" width="420" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae fringilla neque, a elementum ligula. Proin arcu velit, euismod a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae fringilla neque, a elementum ligula.
Proin arcu velit, euismod a.</td>
</tr>
</tbody>
</table>
</div>
<div class="Right">
<div class="Kalender">
<p>Kalender</p>
<img src="./images/news.jpg">
</div>
<div class="Anfahrt">
<p>Anfahrt</p>
<img src="./images/news.jpg">
</div>
</div>
<div class="footer">
<table width="50%" align="center">
<tbody>
<tr>
<td>BildLogo</td>
<td>Impressum</td>
<td>About</td>
<td>Kontakt</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
The result is this:
I am a ABSOLUTE Beginner and managed to get to this point, so i wont stop^^ As far as I understood I can not change the boxes visibility with css and hover because my divs are not nested.
I stumbled upon javascript and jquery for this, but this looks like kinda too complicated to get it working without learning the language.
Is there a way to change the div structure so i can hide the Polaroids with css?
I would be very thankful for a solution to this, I am kinda stuck since a few days. If there is no other way than java/jquery i would take that also :D
Thank you very much my friends! :)