I have a makeshift table of items that are rounded and equal borders by removing the bottom border from every container that ins't the first or the last.
What I'm trying to achieve, is when I hover, I'd like to have the entire "container" have a white border but it's not really possible at the moment because of the zero border. Does anyone have any suggestions? I'm assuming I have to do this with javascript.
Here is what I have so far (jsfiddle)
HTML
<div id="container">
<div class="item-container">
1
</div>
<div class="item-container">
2
</div>
<div class="item-container">
3
</div>
<div class="item-container">
4
</div>
<div class="item-container">
5
</div>
</div>
CSS
body {
background-color:#000;
}
#container { width:500px;}
.item-container { border:3px solid #7F7F7F;color:#7F7F7F;padding:10px;width:100%;border-bottom:0 }
.item-container:not(:first-child) { border-bottom:0; }
.item-container:hover { border:3px solid #fff;cursor:pointer;color:#fff; }
.item-container:first-child { border-top-right-radius:3px;border-top-left-radius:3px; }
.item-container:last-child { border-bottom:3px solid #7F7F7F;border-bottom-right-radius:3px;border-bottom-left-radius:3px; }
You may create the border differently:
body {
background-color: #000;
}
#container {
width: 500px;
color: #7F7F7F;
border-radius: 3px;
border-bottom: 3px solid;
}
.item-container {
border: 3px solid #7F7F7F;
border-bottom: 0;
padding: 10px;
position: relative;
}
.item-container:after {
content: "";
position: absolute;
bottom: -3px;
right: -3px;
left: -3px;
height: 3px;
background-color: #7F7F7F;
}
#container .item-container:hover {
border-color: #fff;
z-index: 2;
transition: 1s;
}
#container .item-container:hover::after {
background-color: #fff;
z-index: 2;
transition: 1s;
}
<div id="container">
<div class="item-container">
1
</div>
<div class="item-container">
2
</div>
<div class="item-container">
3
</div>
<div class="item-container">
4
</div>
<div class="item-container">
5
</div>
</div>
Related
I have an overlay. If the user clicks on a box the overlay slides up. My problem now is, that the overlay works without any issues in Mozilla Firefox and Chrome. But in Explorer the overlay goes all over the display. How can I solve this problem for IE? Is there something I didnt see? Or do I need a plugin for that?
This picture shows the normal version which I want to work in IE.
At the Moment it looks like this in IE.
$('.top').on('click', function() {
$parent_box = $(this).closest('.box');
$parent_box.siblings().find('.overlay').slideUp();
$parent_box.find('.overlay').slideToggle(1000, 'swing');
});
$('.overlay').on('click', function() {
$parent_box.find('.overlay').slideToggle(1000, 'swing');
});
.services-section {
background-color: #E6E6E6;
height: auto;
}
.services-section hr {
border-bottom: hidden;
width: 42px;
margin-left: 0px;
}
.services-section .services-detail {
border-radius: 4px;
transition: all 0.3s ease-in-out;
position: relative;
top: 0px;
padding: 60px 40px 60px 40px;
margin-top: 32px;
background-color:rgba(237, 238, 239, 0.8);
height: 500px;
}
.services-section .services-detail:hover {
box-shadow: 0px 16px 22px 0px rgba(90, 91, 95, 0.3);
top: -2px;
background-color:#FAFAFA;
color:#000;
}
.services-section .services-detail {
font-size: 60px;
color: #000;
margin-bottom: 10px;
}
.services-section .services-detail:hover .fa {
color: #fd2034;
}
.services-detail h5 {
color: #000;
font-size: 25px;
font-family: 'Poppins', sans-serif;
}
.services-detail:hover h5 {
color: #000;
}
.services-detail p {
color: #000;
font-size: 18px;
}
.services-detail:hover p {
color: #000;
}
.overlay{
display: none; /* Hidden by default*/
position: fixed; /* Stay in place*/
z-index: 1; /* Sit on top */
left: 0;
bottom: 2%;
width: 100%; /* Full width */
height: 92%; /* Full height */
border-radius: 10px;
overflow: auto; /* Enable scroll if needed
background-color: rgb(217,217,217); /* Fallback color */
background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
background-color: rgb(255,255,255);
-webkit-animation-name: slideIn; /* Fade in the background */
-webkit-animation-duration: 0.4s;
animation-name: slideIn;
animation-duration: 0.4s
}
.overlay h3{
color: black;
text-align: left;
margin-left: 15%;
}
.overlay p {
font-size: 0.2em;
color: black;
float: left;
width: 100%;
}
.overlay a {
font-size: 0.8em;
color: black;
float:left;
}
.overlay-header {
padding: 1px 16px;
background-color: #fff;
color: black;
text-align: center;
border-bottom: 2px solid #ffcc00;
}
.overlay img{
width: 18%;
float: right;
margin: 1%;
margin-right: -20%;
}
.des{
margin: 15px;
font-size: 1em;
}
.overlay:hover {
box-shadow: 0px 16px 22px 0px rgba(90, 91, 95, 0.3);
background-color:#FAFAFA;
color:#000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Provider Section Start -->
<section id="provider" class="services-section section-space-padding
mica-bg">
<div class="container">
<div class="section-title">
<i class="fa fa-paper-plane-o"></i>
<h3 class="white-color"><span>Blume</span></h3>
</div>
<div class="col-md-4 col-sm-6 3d-hover box">
<div class="services-detail hover-effect-2d top">
<i><img src="container/rfid/micarfid.png" alt="micarfid"
style="background-color:#ffcc00; border:5px solid #ffcc00; border-
radius: 10px; width:200px; margin-left:-15px;"></i>
<h5>Blume</h5>
<hr>
<p>This is a test for blume.</p>
</div>
<div class="overlay">
<div class="overlay-header">
<img src="test/blume.jpg" alt="blume" style="width:15%;float:right; margin-right:10%;margin-top:0.5%;background:#ffcc00;border:2px solid #ffcc00; border-radius: 10px;">
<h3>Blume</h3>
</div>
<div class="des">
<p>This is a test for blume.<</p>
</div>
<div class="body col-md-10 col-sm-6">
<p style="width:100%;margin-top:10px;float:left;">Tutorial</p><i class="fa fa-youtubeOverlay fa-youtube-play"></i>
</div>
<div class="body col-md-10 col-sm-6">
<p style="width:100%;margin-top:10px;float:left;">PDF-Doku</p><i class="fa fa-pdfOverlay fa-file-pdf-o" style="margin-top:-10px;"></i>
</div>
<div class="body col-md-10 col-sm-6">
<p style="width:100%;margin-top:10px;float:left;">Image Download</p><i class="fa fa-zipOverlay fa-file-archive-o" style="margin-top:-15px;"></i>
</div>
<div class="body col-md-10 col-sm-6">
<p style="width:100%;margin-top:8px;">Application Download</p><i class="fa fa-imgOverlay fa-picture-o" style="margin-top:-80px;"></i>
<img src="images/application.png" alt="application" style="width:80%;float:left; margin-top:-20px;margin-left:50px;">
</div>
</div>
</div>
</div>
</section>
<!-- Provider Section End -->
<!-- Back to Top Start -->
<i class="fa fa-long-arrow-up"></i>
<!-- Back to Top End -->
<!-- All Javascript Plugins -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/plugin.js"></script>
<!-- Main Javascript File -->
<script type="text/javascript" src="js/scripts.js"></script>
<script type="text/javascript" src="js/js.js"></script>
It's likely that this issue is caused by the use of position: fixed in your overlay element.
Position fixed elements geometry historically relates to the initial containing block (most often the viewport).
https://www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Fixed_positioning
For a full cross browser implementation try using position:absolute instead, making sure the containing element (div.box) makes use of position:relative.
I tried using flexbox, as sweet as flexbox is for keeping it responsive, I quickly found out that it wasn't possible to selectively place a div in between rows when wrapping.
Tried doing it via inline-block rather than using flexbox, and it works fine if I ignore keeping the page responsive. But that's the crux of the matter; I need for it to stay responsive.
Regardless of how many items are in the row, it should display the bio row below the row of where the row of the selected (clicked) picture is. If a picture is selected in a different row, the original bio row is closed, and reopened in the row below the row of the newly selected picture.
This is the closest I've managed for flexbox:
.container {
max-width: 1220px;
border: 5px solid black;
display: flex;
margin: 0 auto;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.item {
border-width: 1px;
border-style: solid;
border-color: black;
width: 200px;
height: 300px;
}
.one {
background: #B5AC01;
}
.two {
background: #ECBA09;
}
.three {
background: #E86E1C;
}
.four {
background: #D41E45;
}
.five {
background: #D41EFF;
}
.six {
background: #D4FF45;
}
body {
margin: 0px;
padding: 0px;
}
<div class="container">
<div class="item one"></div>
<div class="item two"></div>
<div class="item three"></div>
<div class="item four"></div>
<div class="item five"></div>
<div class="item six"></div>
<div class="item four"></div>
<div class="item five"></div>
<div class="item six"></div>
<div class="item one"></div>
<div class="item two"></div>
<div class="item three"></div>
</div>
That didn't work out, as it's apparently a toughie to be able to find a row and insert a div in between those rows. So I switched tacks and tried inline-block, only to find that while it's less complicated, it's still complicated.
.container {
max-width: 1220px;
border: 5px solid black;
margin: 0 auto;
font-size: 0;
}
.item {
display: inline-block;
width: 200px;
height: 300px;
margin: 0px;
padding: 0px;
border: 1px solid black;
font-size: 14pt;
color: white;
text-align: center;
line-height: 300px;
}
.bio {
height: 500px;
width: 100%;
background: #333;
color: white;
font-size: 24pt;
text-align: center;
line-height: 500px;
}
.selected {
box-shadow: inset 0 0 10px #000000;
font-weight: 800;
}
.row {
display: inline-block;
font-size: 0;
}
.subrow {
display: inline-block;
font-size: 0;
}
.one {
background: #B5AC01;
}
.two {
background: #ECBA09;
}
.three {
background: #E86E1C;
}
.four {
background: #D41E45;
}
.five {
background: #D41EFF;
}
.six {
background: #D4FF45;
}
body {
margin: 0px;
padding: 0px;
}
<div class="container">
<div class="row">
<div class="subrow">
<div class="item one">Pic</div>
<div class="item two">Pic</div>
<div class="item three selected">Clicked Pic</div>
</div>
<div class="subrow">
<div class="item four">Pic</div>
<div class="item five">Pic</div>
<div class="item six">Pic</div>
</div>
</div>
<div class="bio">
Bio goes here with pic
</div>
<div class="row">
<div class="subrow">
<div class="item four">Pic</div>
<div class="item five">Pic</div>
<div class="item six">Pic</div>
</div>
<div class="subrow">
<div class="item one">Pic</div>
<div class="item two">Pic</div>
<div class="item three">Pic</div>
</div>
</div>
</div>
Haven't had much luck. Would love a CSS/HTML only solution, but I'm open to Javascript/jQuery if that's necessary to pull it off. Ideas? Thanks in advance for your time.
Edit: someone posted a solution below suggesting using offsetTop to track wrappage to determine where to insert the bio row. While it's not a CSS/HTML only solution, it's not a bad solution. I'll experiment with the JS code some more tomorrow morning when I've had more sleep in me.
$(function(){
$('.item').click(function() {
var $this = $(this);
$('.selected').removeClass('selected');
$this.addClass('selected');
moveBio();
});
function moveBio() {
var $bio = $(".bio");
var itemsPerRow = 0;
$bio.hide(); // hide so doesn't affect calculations
var firstItem = $('.item').eq(0);
var itemTop = firstItem.position().top;
$('.item').each(function(i) { // loop till we hit next row
if($(this).position().top != itemTop) {
itemsPerRow = i;
return false;
}
});
selectedIndex = $(".item").index($('.selected')[0]);
selectedRowNum = Math.floor(selectedIndex / itemsPerRow) + 1;
$(".bio").insertAfter($(".item").eq((selectedRowNum * itemsPerRow) - 1)).show();
}
$(window).resize(function() {
$(".bio").hide(); // hide Bio so it doesn't interfere with the flex layout during resize
clearTimeout(window.resizedFinished);
window.resizedFinished = setTimeout(function(){
moveBio(); // show Bio again now that resize has stabilised
}, 250);
});
});
.container {
max-width: 1220px;
border: 5px solid black;
display: flex;
margin: 0 auto;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
position: relative;
}
.item {
border-width: 1px;
border-style: solid;
border-color: black;
width: 200px;
height: 300px;
}
.bio {
height: 500px;
width: 100%;
background: #333;
color: white;
font-size: 24pt;
text-align: center;
line-height: 500px;
}
.one {
background: #B5AC01;
}
.two {
background: #ECBA09;
}
.three {
background: #E86E1C;
}
.four {
background: #D41E45;
}
.five {
background: #D41EFF;
}
.six {
background: #D4FF45;
}
.selected {
box-shadow: inset 0 0 10px #000000;
font-weight: 800;
}
body {
margin: 0px;
padding: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item one"></div>
<div class="item two"></div>
<div class="item three"></div>
<div class="item four"></div>
<div class="item five"></div>
<div class="item six selected"></div>
<div class="bio">
Bio goes here with pic
</div>
<div class="item one"></div>
<div class="item two"></div>
<div class="item three"></div>
<div class="item four"></div>
<div class="item five"></div>
<div class="item six"></div>
</div>
Added dynamic browser resizing
Here's an easier to resize example: http://jsbin.com/wamisiliza/edit?output
It's an interesting question. I have no idea with CSS. But I came up with a quite complicated javascript method.
First get the array of all the items, just like your first example. And for each item, compare the offsetTop with the former item, if the values are not equal, insert a new Bio row between the two rows.
Sorry about the poor English, looking forword to a better answer.
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 7 years ago.
Improve this question
I am trying to create a progress bar and I want a cycle divider so that I can divide the situations I have
Can someone give me a solution ?
I tried to recreate your progress bar, see my fiddle here.
Just add a class .current to the .cycle you want to be currently highlighted. I used pure CSS on this with floats for better compatibility.
You can add numbers to the circles by adding .counter class to the .progress element.
.progress, .progress * { box-sizing: border-box; }
.progress {
width: 410px;
padding: 15px;
padding-left: 25px;
margin: 20px;
border-radius: 3px;
background: #ddd;
}
.progress .cycle {
width: 90px;
height: 10px;
border: 1px solid #111;
float: left;
position: relative;
background: #555;
}
.progress .cycle:first-of-type {
width: 0px;
}
.progress .cycle.current ~ .cycle {
background: #fff;
}
.progress .cycle:after {
content: '';
width: 30px;
height: 30px;
border: 1px solid #111;
border-radius: 50%;
position: absolute;
top: -12px;
right: -15px;
z-index: 2;
background: #555;
}
.progress .cycle.current:after {
background: deepskyblue;
}
.progress .cycle.current ~ .cycle:after {
background: #fff;
}
/* With Counters */
.progress.counter {
counter-reset: cycle;
}
.progress.counter .cycle:after {
counter-increment: cycle;
content: counter(cycle);
line-height: 30px;
text-align: center;
font-family: Arial;
}
Using Floats
<div class="progress">
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle current"></div>
<div class="cycle"></div>
<div style="clear: both; height: 0px;"> </div>
</div>
<div class="progress">
<div class="cycle"></div>
<div class="cycle current"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div style="clear: both; height: 0px;"> </div>
</div>
<div class="progress counter">
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle current"></div>
<div style="clear: both; height: 0px;"> </div>
</div>
I also created another demo here using the CSS3 flex-box approach.
The contents of the .progress element will now adjust according to the width of the element. This gives way to adding more cycles dynamically and adjusting the progress bar width without worrying about fixed widths. Also, this prevents the cycles from wrapping in very compressed widths.
body { font-family: Arial; font-weight: normal;}
.progress, .progress * { box-sizing: border-box; }
.progress {
padding: 25px;
margin: 20px;
border-radius: 3px;
display: flex;
flex-flow: row nowrap;
background: #ddd;
}
.progress .cycle {
height: 10px;
border: 1px solid #111;
flex: 1 0 auto;
position: relative;
background: #555;
}
.progress .cycle:first-of-type {
width: 0px;
flex: 0 0;
}
.progress .cycle.current ~ .cycle {
background: #fff;
}
.progress .cycle:after {
content: '';
width: 30px;
height: 30px;
border: 1px solid #111;
border-radius: 50%;
position: absolute;
top: -12px;
right: -15px;
z-index: 2;
background: #555;
}
.progress .cycle.current:after {
background: deepskyblue;
}
.progress .cycle.current ~ .cycle:after {
background: #fff;
}
/* With Counters */
.progress.counter {
counter-reset: cycle;
}
.progress.counter .cycle:after {
counter-increment: cycle;
content: counter(cycle);
line-height: 30px;
text-align: center;
font-family: Arial;
}
/* Fixed Width */
.fixed1 {
width: 400px;
}
.fixed2 {
width: 300px;
}
<h2>Using Flex</h2>
6 cycles (fixed width)
<div class="progress fixed1">
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle current"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div style="clear: both; height: 0px;"> </div>
</div>
9 cycles (100% width)
<div class="progress">
<div class="cycle"></div>
<div class="cycle current"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
</div>
5 cycles (fixed width, numbered)
<div class="progress counter fixed2">
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle current"></div>
</div>
7 cycles (100%, numbered)
<div class="progress counter">
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle current"></div>
<div class="cycle"></div>
<div class="cycle"></div>
</div>
The only problem for the CSS3 flexbox approach is browser support. If the browser support is alright with you, then go for the flex-box approach :)
Guys I am new to jQuery...please help me to learn this. I want to expand the div(#center) taking width:100% on click that in turn closes the other 2 divs (#left and #right) in my case.
Please someone help me to solve this. And the most imp thing is that the transition should be swift nd not at once. Reply is appreciated. And its not lyk i dint try it first. I tried using click function to make it happen..bt dint work as desired
body {
width: 100%;
height: auto;
}
#taskDetails {
width: 900px;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#description {
width: 900px;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#details {
float: left;
width: 900px;
margin: 0 auto;
height: auto;
border: 2px solid #a1a1a1;
display: inline-block;
}
#left {
float: left;
width: 250px;
margin: 0 auto;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#center {
width: 370px;
float: left;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
margin-left: 9px;
}
#right {
float: right;
width: 250px;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#head {
top: 0;
width: 100%;
height: 30px;
background: #8CBF26;
border-radius: 2px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a {
padding: 0 10px;
border-radius: 8px;
display: block;
width: 60px;
height: 25px;
border: 2px solid #a1a1a1;
background-color: #00ABA9;
text-decoration: none;
}
.heading {
padding: 5px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="abc.css">
<script href="abc.js"></script>
</head>
<body>
<div id="main">
<div id="taskDetails">
<div id="head">
<div class="heading">FORM</div>
</div>
<div id="formTab">
<div id="form">
</div>
</div>
</div>
<div id="description">
<div id="head">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
<div id="content">
<div class="rte">
</div>
<div class="text">
</div>
</div>
</div>
<div id="details">
<div id="left">
<div id="head">
<div class="heading">Projects</div>
</div>
<div class="data">
</div>
</div>
<div id="center">
<div id="head">
<div class="heading">Details</div>
</div>
<div class="data">
</div>
</div>
<div id="right">
<div id="head">
<div class="heading">Tab 3</div>
</div>
<div class="data">
</div>
</div>
</div>
</div>
</body>
You can use this example for "tab2"
$("#tab2").click(function () {
$("#center").css("width", "100%");
$("#left").fadeOut("slow");
$("#right").fadeOut("slow");
});
check my fiddle: http://jsfiddle.net/u87z1m3n/1/
And put id's to the li's in order to be able to select them:
<li id="tab1">Tab 1
</li>
<li id="tab2">Tab 2
</li>
<li id="tab3">Tab 3
</li>
The example is very coarse as the code needs a lot more refining...
But I think that it gives an answer to your question...
Study the example below. Let me know if you have any questions.
$("#head li").click(function () {
$("#center, #left, #right").eq($(this).index()).css("width", "100%");
$("#center, #left, #right").not($(this)).hide();
});
body {
width: 100%;
height: auto;
}
.current {
width: 100%
}
#taskDetails {
width: 900px;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#description {
width: 900px;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#details {
float: left;
width: 900px;
margin: 0 auto;
height: auto;
border: 2px solid #a1a1a1;
display: inline-block;
}
#left {
float: left;
width: 250px;
margin: 0 auto;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#center {
width: 370px;
float: left;
height: 200px;
border: 2px solid #a1a1a1;
background: red;
margin-left: 9px;
}
#right {
float: right;
width: 250px;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#head {
top: 0;
width: 100%;
height: 30px;
background: #8CBF26;
border-radius: 2px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a {
padding: 0 10px;
border-radius: 8px;
display: block;
width: 60px;
height: 25px;
border: 2px solid #a1a1a1;
background-color: #00ABA9;
text-decoration: none;
}
.heading {
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div id="taskDetails">
<div id="head">
<div class="heading">FORM</div>
</div>
<div id="formTab">
<div id="form">
</div>
</div>
</div>
<div id="description">
<div id="head">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
<div id="content">
<div class="rte">
</div>
<div class="text">
</div>
</div>
</div>
<div id="details">
<div id="left">
<div id="head">
<div class="heading">Projects</div>
</div>
<div class="data">
</div>
</div>
<div id="center">
<div id="head">
<div class="heading">Details</div>
</div>
<div class="data">
</div>
</div>
<div id="right">
<div id="head">
<div class="heading">Tab 3</div>
</div>
<div class="data">
</div>
</div>
</div>
</div>
Here's a CodePen demo showing the final result of everything below. Please read it carefully so you can learn the process and understand everything that's happening.
First of all, your HTML needed a lot of cleanup. You called head as an ID, but used it multiple times throughout your code. If you're going to use a selector more than once, it should be a class instead. I changed it in the HTML and the CSS.
HTML
<div id="main">
<div id="taskDetails">
<div class="head">
<div class="heading">FORM</div>
</div>
<div id="formTab">
<div id="form"></div>
</div>
</div>
<div id="description">
<div class="head">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
<div id="content">
<div class="rte"></div>
<div class="text"></div>
</div>
</div>
<div id="details">
<div id="left">
<div class="head">
<div class="heading">Projects</div>
</div>
<div class="data"></div>
</div>
<div id="center">
<div class="head">
<div class="heading">Details</div>
</div>
<div class="data"></div>
</div>
<div id="right">
<div class="head">
<div class="heading">Tab 3</div>
</div>
<div class="data"></div>
</div>
</div>
</div>
Next, in your CSS, you hadn't set the widths of your containers correctly, so adding something like width:100% wasn't doing anything because there was no max width to fill. I added that to your styles. Remember, I also updated the markup from changing your head id to a class.
Additionally, I removed the floats from you left,right, and center divs because that removes the blocks from the flow of the document, which can lead to funny behavior. Instead, I changed them to display:inline-block and set their widths relative to the container.
Finally, I added a .wide class at the end which will set the width of the center div.
CSS
body {
margin:0;
padding:0;
width: 100%;
height: auto;
}
#main {
width:100%;
}
#taskDetails {
width:auto;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#description {
width:auto;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#details {
width:100%;
margin: 0 auto;
height: auto;
border: 2px solid #a1a1a1;
display: inline-block;
}
#left {
display:inline-block;
margin:0;
padding:0;
width:20%;
margin: 0 auto;
height: 200px;
border: 1px solid #a1a1a1;
background: #dddddd;
}
#center {
display:inline-block;
margin:0;
padding:0;
width:50%;
height: 200px;
border: 1px solid #a1a1a1;
background: red;
}
#right {
display:inline-block;
margin:0;
padding:0;
width:20%;
height: 200px;
border: 1px solid #a1a1a1;
background: #dddddd;
}
.head {
top: 0;
width: 100%;
height: 30px;
background: #8CBF26;
border-radius: 2px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a {
padding: 0 10px;
border-radius: 8px;
display: block;
width: 60px;
height: 25px;
border: 2px solid #a1a1a1;
background-color: #00ABA9;
text-decoration: none;
}
.heading {
padding: 5px;
}
.wide {
width:100% !important;
transition:.5s;
}
Now, this can be done with jQuery, so make sure you add the script in the head of your HTML.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
The jQuery script is pretty simple, and does three things:
1. When you click on any of the tab buttons, it will hide the #left and #right divs.
2. The #center div expands to 100% of the container.
3. When you click on the tab again, it will shrink the #center div and bring the other two back.
jQuery
$(".head ul li").click(function() {
$("#left, #right").animate({width:"toggle"});
$("#center").toggleClass('wide');
})
I used toggle in both of the calls because it gives a fairly nice animation without making you code in specifics. It also handles adding or removing a class, so your script can stay simple if all you want to do is add or remove that class with each click.
If you want something more complex, you'll definitely want to look at JavaScript instead of jQuery as #Katana314 mentioned above. They're for two different things, so make sure you understand the difference between the two.
This question already has answers here:
Why doesn't the menu background color change?
(4 answers)
Closed 9 years ago.
I have created 2 menus: prod & prod2, I find when the mouse focus on prod2, the background color is changed, but when the mouse focus on prod1, the background color doesn't change, why it doesn't change?
HTML
<body>
<ul class="hMenu">
<li onmouseover="showMenu(this);" onmouseout="hideMenu(this);">
<a style="color: red;" href="javascript:void(0);">prod</a>
<div><br/>
<!-- here-->
<div class="arrow_box" >
<div class="lay1">
<div>Manage Content<br> Message </div>
<br><br>
<div>Manage Assignment<br> User Inquiry</div>
</div>
</div>
</div>
</li>
<li onmouseover="showMenu(this);" onmouseout="hideMenu(this);">
<a style="color: red;" href="javascript:void(0);">prod2</a>
<div class="arrow_box">
<div class="lay1">
<div>Manage Content<br> Message <br> Help </div>
<br><br>
<div>Manage Assignment<br> User Inquiry</div>
</div>
</div>
</li>
</ul>
<br/><br/><br/><br/><br/>
Test
</body>
CSS
<style>
ul.hMenu {
margin: 0;
padding: 0;
z-index: 1;
}
ul.hMenu > li {
margin: 0;
padding: 0;
list-style: none;
float: left;
width:140px;
}
ul.hMenu li a {
display: block;
text-align: left;
text-decoration: none
}
ul.hMenu li > div {
position: absolute;
display: none;
}
ul.hMenu div a {background: yellow;
}
div.lay1{ float:left;}
div.lay1 br{line-height:50%}
.topMenu{font:bold 12px arial;color:#169e39;text-decoration: none;}
.secondMenu{font:12px arial;color:#000000;text-decoration: none;}
.arrow_box {
position: relative;
background: red;
border: 4px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(149, 213, 53, 0);
border-bottom-color: red;
border-width: 13px;
left: 10%;
margin-left: -13px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #c2e1f5;
border-width: 19px;
left: 10%;
margin-left: -19px;
}
</style>
Javascript
<script>
function showMenu(obj){
var a=obj.children[0];
a.style.color="blue";
var div = obj.children[1];
obj.style.backgroundColor="yellow";
div.style.display="block";
}
function hideMenu(obj){
var a=obj.children[0];
a.style.color="red";
var div = obj.children[1];
div.style.display="none";
obj.style.backgroundColor="";
}
</script>
Give CSS
.arrow_box{ position:absolute; white-space:nowrap}