HTML: Why is Div is not in Top Corner? - javascript

I got 2 div in-line to each other.
If the second div is 2 lines long, the first div is no longer in the top corner...
Why is that?
EDIT: Why does div1 automatically vertical-align when the second div has 1 line but doesn't when it has 2 or more lines?
Check http://jsfiddle.net/d5Z6V/354/
<div id="wrapper">
<div id="div1">Not in top corner</div>
<div id="div2">
<div>asd</div>
<div>asd</div>
</div>
</div>
<br>
<div id="wrapper">
<div id="div1">In top corner</div>
<div id="div2">
<div>asd</div>
</div>
</div>
#wrapper {
border: 1px solid blue;
}
#div1 {
display: inline-block;
width:120px;
height:120px;
border: 1px solid red;
}
#div2 {
display: inline-block;
width:160px;
height:160px;
border: 1px solid green;
}

You need to vertically align it to top like this:
#wrapper {
border: 1px solid blue;
}
#div1 {
display: inline-block;
width:120px;
height:120px;
border: 1px solid red;
vertical-align: top;
}
#div2 {
display: inline-block;
width:160px;
height:160px;
border: 1px solid green;
vertical-align: top;
}
<div id="wrapper">
<div id="div1">Not in top corner</div>
<div id="div2">
<div>asd</div>
<div>asd</div>
</div>
</div>
<br>
<div id="wrapper">
<div id="div1">In top corner</div>
<div id="div2">
<div>asd</div>
</div>
</div>

add vertical-align:top; to #div1

Related

Equal borders on touching div container "table"

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>

responsive grid using display table and float

DEMO : http://jsfiddle.net/5adjhd1x/2/
How can I make below dialpad responsive? I tried to use width 33% and some JS in demo 1 : http://jsfiddle.net/5adjhd1x/, but I couldn't have margin for them.
.key {
width:40px;
height:40px;
background:red;
float:left;
border-radius:50%;
cursor:pointer;
text-align: center;
display:table;
margin:1%;
}
.key > span {
display:table-cell;
vertical-align:middle;
}
.clearFloat {
clear:both;
}
<div class="keyWrap">
<div class="key"><span>1</span>
</div>
<div class="key"><span>2</span>
</div>
<div class="key"><span>3</span>
</div>
<div class="clearFloat"></div>
<div class="key"><span>4</span>
</div>
<div class="key"><span>5</span>
</div>
<div class="key"><span>6</span>
</div>
<div class="clearFloat"></div>
<div class="key"><span>7</span>
</div>
<div class="key"><span>8</span>
</div>
<div class="key"><span>9</span>
</div>
<div class="clearFloat"></div>
<div class="key"><span>0</span>
</div>
<div class="key dlt"><span>Del</span>
</div>
</div>
<br> <br>
How can I make them to have margin in percentage and responsive?
Answer at here dude:
http://jsfiddle.net/5adjhd1x/6/
Give me a like !
.key {overflow: hidden; display: block; background: grey; padding: 0;}
.key li {width: 32%; margin-right: 2%; margin-bottom: 10px; float: left; display: inline-block; background: red;}
.key li:nth-child(3n) {margin-right: 0%;}

CSS3 Divs side by side, arrangement

I have problem with divs arrangement.
Here is my code:
#container{
}
#block1{
vertical-align: top;
display: inline-block;
width:49%;
height:50px;
background-color:red;
}
#block2{
vertical-align: top;
display: inline-block;
width:49%;
height:100px;
background-color:blue;
}
<div id="container">
<div id="block1"></div>
<div id="block2"></div>
<div id="block1"></div>
<div id="block1"></div>
</div>
And issue is arrangement, it looks like this:
But i need to look like this. Arrange divs up without white spaces.
Any ideas here? Thanks :).
Here is JSFiddle, so you can play with it: http://jsfiddle.net/cn2r3tga/
css
#container{
}
#block1{
background-color: #FF0000;
display: inline-block;
float: left;
height: 50px;
margin: 2px 0;
vertical-align: top;
width: 100%;
}
#block2{
background-color: #0000FF;
display: inline-block;
float: left;
height: 100px;
margin: 2px 0;
vertical-align: top;
width: 100%;
}
.alignment{
float: left;
width: 50%;
}
HTML
<div id="container">
<div class="alignment">
<div id="block1"></div>
<div id="block1"></div>
</div>
<div class="alignment">
<div id="block2"></div>
<div id="block1"></div>
</div>
</div>
Note: ID of any HTML control should be unique
Reorder your div's like this (also changed the id to class):
<div id="container">
<div class="block2"></div>
<div class="block1"></div>
<div class="block1"></div>
<div class="block1"></div>
</div>
Then use float instead of inline-block:
.block1{
vertical-align: top;
float: right;
width:49%;
height:50px;
background-color: red;
}
.block2{
float: right;
width:49%;
height:100px;
background-color: blue;
}
Updated Fiddle
You can group them into two divs and then get the desired result. As shown below:
#container{
}
.left{
float:left;
width:49%;
margin-right:2%
}
.right{
float:right;
width:49%;
}
.block1{
vertical-align: top;
display: inline-block;
width:100%;
height:50px;
margin-bottom: 10px;
background-color:red;
}
.block2{
vertical-align: top;
display: inline-block;
width:100%;
height:100px;
background-color:blue;
}
<div id="container">
<div class="left">
<div class="block1"></div>
<div class="block1"></div>
</div>
<div class="right">
<div class="block2"></div>
<div class="block1"></div>
</div>
</div>
https://jsfiddle.net/cn2r3tga/3/
Updated fiddle.
"float:right"
should be used for those going to the right.
first you use id which should be used only once so use classes instead which you can re-use as many times as you want.
Secondly I would add another 2 div within your .container to make the result you want and add the css to keep the shape your want:
<div class="container">
<div calss="left">
<div class="block1"></div>
<div class="block1"></div>
</div>
<div class="right">
<div class="block2"></div>
</div>
</div>

Click button expands the div horizontally by closing other two divs

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.

Div elements won't use whole space

I want to place 12 cards (2 rows -> 6 cards in one row). My code needs to be responsive so I used width/height %. Problem is that there is a lot of whitespace/empty space and cards are tiny. Here is code that I used:
JSFIDDLE: http://jsfiddle.net/A2bU7/
CSS:
#pagewrap
{
display:flex;
display: -webkit-flex;
display: -moz-flex;
width:100%;
}
#board{
//padding: 5px;
background-color:#cccccc;
width:100%;
height:70%;
}
#board > div {
background-color: grey;
border:#000 1px solid;
width:10%;
height:20%;
float:left;
margin:15px;
padding:15px;
font-size:64px;
cursor:pointer;
box-shadow: 0px 5px 14px grey;
border-radius: 5px;
transition: 0.2s;
}
#board > div:nth-child(6n+1) {
clear: both;
}
#board > div:hover {
box-shadow: 0px 0px 25px black;
transition-timing-function: all ease-in-out;
}
HTML:
<html>
<div id="pagewrap">
<div id="board">
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
</div>
<div>
</html>
Margin stretches the outside of your div that's why you getting whitespace/empty space and padding stretches on the inside. So you should tune in/out your margin/padding of your card and choose what you like.
#board > div {
margin: 5px;
padding: 25px 20px;
}
fiddle with margin/padding change.
fiddle with percentile width/height.
Reduce your margin and maybe increase your padding.

Categories

Resources