HTML
<div class="right-details">
<div class="right-details-row">
<b>Left title</b>
</div>
<div class="right-details-row">
<div class="right-details-row-l">K</div>
<div class="right-details-row-r">Laass</div>
</div>
</div>
<div class="details-divider"></div>
<div class="left-details">
<div class="left-details-row">
<b>Right Title</b>
</div>
<div class="left-details-row">
<div class="left-details-row-l">Option 1</div>
<div class="left-details-row-r">Chosen 1</div>
</div>
<div class="left-details-row">
<div class="left-details-row-l">Option 2</div>
<div class="left-details-row-r">Chosen 2</div>
</div>
<div class="left-details-row">
<div class="left-details-row-l">Option 2</div>
<div class="left-details-row-r">Chosen 2</div>
</div>
</div>
CSS
.left-details{
display:table-cell;
border: 1px solid #000000;
border-radius: 4px;
width:237px;
}
.details-divider{
width:20px;
display:table-cell;
}
.right-details{
margin-left: 20px;
display:table-cell;
border: 1px solid #000000;
border-radius: 4px;
width:350px;
}
.left-details-row{
width: 232px;
float:left;
margin: 0 0 5px 4px;
}
.left-details-row-l{
width:110px;
float:left;
overflow:hidden;
}
.left-details-row-r{
width:122px;
float:left;
overflow:hidden;
}
.right-details-row{
width: 345px;
float:left;
margin: 0 0 5px 4px;
}
.right-details-row-l{
width: 35px;
float:left;
margin: 0 0 2px 4px;
}
.right-details-row-r{
width: 296px;
float:left;
overflow:hidden;
}
As you see in jsfiddle , in the left Div text is in the bottom, How to shift it to the top?
Add vertical-align:top to your .right-details rule:
.right-details {
margin-left: 20px;
display:table-cell;
border: 1px solid #000000;
border-radius: 4px;
width:350px;
vertical-align:top;
}
jFiddle example
add
vertical-align: top;
to .right-details
.left-details{
display:table-cell;
border: 1px solid #000000;
border-radius: 4px;
width:237px;
vertical-align: top;
}
note the last property
http://jsfiddle.net/V5JtR/1/
Related
I am trying to build a CSS grid layout with margins around the elements within the grid cells. However, severeal problems arise…
Here is my code:
*{
margin:0;
padding:0;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.grida{
position:fixed;
left:0; top:29px; width:100%;
height:calc(100% - 29px);
overflow:hidden;
display:grid;
grid-template-columns:134px 34% auto;
}
.wrapa{
padding-top:5px;
background:#eee;
margin:5px;
border:2px solid green;
border-radius:9px;
}
.inpsearch, .inptags{
display:block;
width:100%;
line-height:21px;
outline:none;
padding:0 9px;
background:white;
margin:5px;
border:2px ridge gold;
border-radius:9px;
}
.titles{
height:calc(100% - 40px);
overflow-y:scroll;
padding:9px 0;
margin:5px;
border:2px ridge gold;
border-radius:5px;
}
.storytxt{
display:block;
padding:14px;
width:100%;
height:calc(100% - 40px);
outline:none;
resize:none;
overflow-y:scroll;
background:#eee;
margin:5px;
border:2px ridge gold;
border-radius:9px;
}
<div class='grida'>
<div class='wrapa'>
<div class='lang'>lorem</div>
<div class='lang'>lorem</div>
<div class='lang'>lorem</div>
</div>
<div class='wrapb'>
<input type='search' class='inpsearch' placeholder='SEARCH'>
<div class='titles'>
<div class='title'>lorem ipsum</div>
<div class='title'>lorem ipsum</div>
<div class='title'>lorem ipsum</div>
</div>
</div>
<div class='wrapc'>
<input type='text' class='inptags' placeholder='TAGS'>
<textarea class='storytxt'></textarea>
</div>
</div>
These are my problems:
Why is there no space between the HTML elements with classes inpsearch and inptags? (in the upper part of the visual output)
Why are parts of the HTML elements with classes inptags and storytxt not visible on the right? (int the lower part of the visual output)
Any help?
I would do this way.
*{
margin:0;
padding:0;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.grida{
position:fixed;
left:0; top:29px; width:100%;
height:calc(100% - 29px);
overflow:hidden;
display:grid;
grid-template-columns:134px 34% auto;
}
.wrapa{
padding-top:5px;
background:#eee;
margin:5px;
border:2px solid green;
border-radius:9px;
}
.wrapb, wrapc{
padding: 0 10px;
}
.inpsearch, .inptags{
display:block;
width:100%;
line-height:21px;
outline:none;
padding:0 9px;
background:white;
margin-bottom:5px;
border:2px ridge gold;
border-radius:9px;
}
.titles{
height:calc(100% - 40px);
overflow-y:scroll;
padding:9px 0;
border:2px ridge gold;
border-radius:5px;
}
.storytxt{
display:block;
padding:14px;
width:100%;
height:calc(100% - 40px);
outline:none;
resize:none;
overflow-y:scroll;
background:#eee;
border:2px ridge gold;
border-radius:9px;
}
<body>
<div class='grida'>
<div class='wrapa'>
<div class='lang'>lorem</div>
<div class='lang'>lorem</div>
<div class='lang'>lorem</div>
</div>
<div class='wrapb'>
<input type='search' class='inpsearch' placeholder='SEARCH'>
<div class='titles'>
<div class='title'>lorem ipsum</div>
<div class='title'>lorem ipsum</div>
<div class='title'>lorem ipsum</div>
</div>
</div>
<div class='wrapc'>
<input type='text' class='inptags' placeholder='TAGS'>
<textarea class='storytxt'></textarea>
</div>
</div>
</body>
So you need to:
add to wrapb and wrapc a padding: padding: 0 10px
remove the margin from titles and storytxt
replace margin: 5px in inpsearch and inptags with margin-bottom: 5px
Apparently, you cannot properly use margin in css grid. However, you can use grid-gap to introduce the 5px margin. See this link. (Well, I did not found a solution with margins but I am a CSS novice after all :-) !)
EDIT
The problem with your storytxt is that the margin is added on top of the width which is set to 100% through width and display: block. I accounted for this by using width: calc(100% - 10px) with a margin of 5px.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.grida {
position: fixed;
left: 0;
top: 29px;
width: 100%;
height: calc(100% - 29px);
overflow: hidden;
display: grid;
grid-template-columns: 134px 34% auto;
grid-gap: 5px;
}
.wrapa {
padding-top: 5px;
background: #eee;
margin: 0px;
border: 2px solid green;
border-radius: 9px;
}
.wrapb,
.wrapc {
border: 0px black solid;
/* used for debugging */
}
.inpsearch,
.inptags {
display: block;
width: 100%;
line-height: 21px;
outline: none;
padding: 0 9px;
background: white;
margin: 0px;
border: 2px ridge gold;
border-radius: 9px;
}
.titles {
height: calc(100% - 40px);
overflow-y: scroll;
padding: 9px 0;
margin: 5px;
border: 2px ridge gold;
border-radius: 5px;
}
.storytxt {
display: block;
padding: 14px;
height: calc(100% - 40px);
width: calc(100% - 10px);
margin: 5px;
outline: none;
resize: none;
overflow-y: scroll;
background: #eee;
border: 2px ridge gold;
border-radius: 9px;
}
<div class='grida'>
<div class='wrapa'>
<div class='lang'>lorem</div>
<div class='lang'>lorem</div>
<div class='lang'>lorem</div>
</div>
<div class='wrapb'>
<input type='search' class='inpsearch' placeholder='SEARCH'>
<div class='titles'>
<div class='title'>lorem ipsum</div>
<div class='title'>lorem ipsum</div>
<div class='title'>lorem ipsum</div>
</div>
</div>
<div class='wrapc'>
<input type='text' class='inptags' placeholder='TAGS'>
<textarea class='storytxt'></textarea>
</div>
</div>
Please let me know if this post helped you! Thanks!
I have a css table and am trying to make a space between each row, the gap should have no color. I have tried a few things that have not worked such as:
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
and
border-collapse: collapse;
The code is below along with a jsfiddle.
Thanks.
HTML
<div class="live-mu-table" >
<div class="live-mu-table-tr">
<div class="live-mu-table-tdq" id="a-1">q1</div>
<div class="live-mu-table-tdspacer1"></div>
<div class="live-mu-table-tda" id="a-3">A3</div>
</div>
<div class="live-mu-table-tr">
<div class="live-mu-table-tdq" id="q-2">q2</div>
<div class="live-mu-table-tdspacer1"></div>
<div class="live-mu-table-tda" id="a-1">A1</div>
</div>
<div class="live-mu-table-tr">
<div class="live-mu-table-tdq" id="q-3">q3</div>
<div class="live-mu-table-tdspacer1"></div>
<div class="live-mu-table-tda" id="a-2">A2</div>
</div>
</div>
CSS
.live-mu-table{
display: table;
background-color:Azure;
margin-bottom: 5px;
padding-bottom: 5px;
position:relative;
margin-left: auto;
margin-right: auto;
width:75%;
// border-collapse: collapse;
}
.live-mu-table-tr{
display: table-row;
height:30px;
}
.live-mu-table-tdq{
display: table-cell;
border:1px solid #000;
width:60%;
text-align:center;
vertical-align:middle;
cursor: pointer;
}
.live-mu-table-tda{
display: table-cell;
border:1px solid #000;
width:30%;
text-align:center;
vertical-align:middle;
cursor: pointer;
}
.live-mu-table-tdspacer1{
display: table-cell;
border:1px solid #000;
width:10%;
text-align:center;
vertical-align:middle;
}
Use border-spacing to create the spacing.
And if you want the gaps to have no background color, move the background-color from the table to the table-rows.
.live-mu-table {
display: table;
margin-bottom: 5px;
padding-bottom: 5px;
position: relative;
margin-left: auto;
margin-right: auto;
width: 75%;
border-spacing: 0 3px; /* new */
}
.live-mu-table-tr {
display: table-row;
height: 30px;
background-color: Azure; /* moved */
}
.live-mu-table-tdq {
display: table-cell;
border: 1px solid #000;
width: 60%;
text-align: center;
vertical-align: middle;
cursor: pointer;
}
.live-mu-table-tda {
display: table-cell;
border: 1px solid #000;
width: 30%;
text-align: center;
vertical-align: middle;
cursor: pointer;
}
.live-mu-table-tdspacer1 {
display: table-cell;
border: 1px solid #000;
width: 10%;
text-align: center;
vertical-align: middle;
}
<div class="live-mu-table">
<div class="live-mu-table-tr">
<div class="live-mu-table-tdq" id="a-1">q1</div>
<div class="live-mu-table-tdspacer1"></div>
<div class="live-mu-table-tda" id="a-3">A3</div>
</div>
<div class="live-mu-table-tr">
<div class="live-mu-table-tdq" id="q-2">q2</div>
<div class="live-mu-table-tdspacer1"></div>
<div class="live-mu-table-tda" id="a-1-2">A1</div>
</div>
<div class="live-mu-table-tr">
<div class="live-mu-table-tdq" id="q-3">q3</div>
<div class="live-mu-table-tdspacer1"></div>
<div class="live-mu-table-tda" id="a-2">A2</div>
</div>
</div>
I'm building the following (see image). Basically, I need 5 buttons with overlapping buttons (each with numbers) on the top. However, I'm unsure how to go about this?
One solution:
https://jsfiddle.net/ryd5e51n/
<div class="button">
<div class="button-top"><span class="text">1</span></div>
<div class="button-bottom"></div>
</div>
.button
{
display: table;
}
.button-top
{
background-color: black;
width: 36px;
height: 36px;
border-radius: 18px;
margin: auto;
position: relative;
z-index: 2;
box-shadow: 0px 0px 2px 2px #bbbbbb;
color: white;
text-align: center;
}
.text
{
display: block;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.button-bottom
{
background-color: #efefef;
width: 100px;
height: 90px;
margin-top: -15px;
position: relative;
z-index: 1;
border: 2px solid #bbbbbb;
border-radius: 20px;
}
You can do this with a single element:
HTML:
<div class="button">
</div>
<div class="button">
</div>
<div class="button">
</div>
<div class="button">
</div>
<div class="button">
</div>
CSS:
div.button {
display:block;
float:left;
margin:18px 5px 0;
position:relative;
overflow:visible;
background:none #efefef;
width:100px;
height:100px;
border:2px solid #ccc;
border-radius:10px;
counter-increment: button;
}
div.button:before {
content:counter(button);
display:block;
padding:8px 14px;
background:none #000;
border:2px solid #ccc;
border-radius:100px;
color:#fff;
position:absolute;
left:50%;
top:-18px;
transform: translateX(-50%);
}
See fiddle: https://jsfiddle.net/jj2nk5f1/2/
Here it is.
.button {
float: left;
margin-left: 10px;
}
.number {
width: 20px;
height: 20px;
border-radius: 10px;
background-color: black;
margin-left: 15px;
}
.block {
width: 50px;
height: 50px;
border: 1px solid black;
margin-top: -10px;
}
<div class="button">
<div class="number"></div>
<div class="block"></div>
</div>
<div class="button">
<div class="number"></div>
<div class="block"></div>
</div>
<div class="button">
<div class="number"></div>
<div class="block"></div>
</div>
<div class="button">
<div class="number"></div>
<div class="block"></div>
</div>
<div class="button">
<div class="number"></div>
<div class="block"></div>
</div>
There are two issues that I have;
1) I'd like the images in the header to stay within my 990px header during browser window resize.
2) How do I align (middle) images withtin header?
This is what I get after resize
Orange image goes under black one.
While they suppose to stay like this (within 990px of course)
Here is the code:
body {
background-color: #e8e8e8;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
padding: 0;
margin: 0;
}
h1 {
padding: 0px;
margin: 0px;
}
#container {
margin:0px auto;
border:0px solid #bbb;
padding:10px;
min-width: 990px;
}
.white-box {
width: 180px;
margin: 0px;
}
#main-header {
border:1px solid #bbb;
height:98px;
padding:3px;
background:#FFF
min-width: 930px;
}
#main-content {
margin-top:10px;
padding-bottom:10px;
}
#main-body {
margin-left:10px;
width:666px;
height:150px;
}
#main-footer {
margin-top:10px;
margin-bottom:10px;
padding:10px;
border:1px solid #bbb;
}
.box {
padding: 8px;
border: 1px solid silver;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-webkit-border-radius: 5px;
border-radius: 8px;
background-color: #fff;
}
.box1 {
width: 200px;
float: left;
}
.box2 {
margin-left: 224px;
}
div.left {
width: 200px;
float: left;
}
div.right {
width: 730px;
float: right;
margin-right:3px;
}
</style>
</head>
<body>
<div id="main-header">
<div class="left"><img src="imgn/banners/logo.gif" border="0" alt=""></div>
<div class="right"><img src="imgn/banners/banner1.gif" border="0" alt=""></div>
</div>
<div id="container">
<div id="main-content">
<div class="box box1">
left
</div>
<div class="box box2">
<p>Main Bbody 1...</p>
</div>
</div>
<div id="main-footer">Main Footer</div>
</div>
</body>
HTML:
<div id="main-header">
<div class="left"><img src="imgn/banners/logo.gif" alt="" border="0"></div>
<div class="right"><img src="imgn/banners/banner1.gif" alt="" border="0"></div>
</div>
<div id="container">
<div id="main-content">
<div class="box box1">
left
</div>
<div class="box box2">
<p>Main Bbody 1...</p>
</div>
<div style="clear:both;"></div>
</div>
<div id="main-footer">Main Footer</div>
</div>
CSS:
body {
background-color: #e8e8e8;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
padding: 0;
margin: 0;
}
h1 {
padding: 0px;
margin: 0px;
}
#container {
margin:0px auto;
border:0px solid #bbb;
padding:10px;
min-width: 990px;
}
.white-box {
width: 180px;
margin: 0px;
}
#main-header {
border:1px solid #bbb;
height:98px;
padding:3px;
background:#FFF
min-width: 933px;
}
#main-content {
margin-top:10px;
padding-bottom:10px;
}
#main-body {
margin-left:10px;
width:666px;
height:150px;
}
#main-footer {
margin-top:10px;
margin-bottom:10px;
padding:10px;
border:1px solid #bbb;
}
.box {
padding: 8px;
border: 1px solid silver;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-webkit-border-radius: 5px;
border-radius: 8px;
background-color: #fff;
}
.box1 {
width: 200px;
float: left;
}
.box2 {
float:right; margin-left:0px; width:748px;
}
div.left {
width: 200px;
float: left;
}
div.right {
width: 730px;
float: right;
margin-right:3px;
}
Use the CSS background-image property instead of using an image. This way you can set the width of the container div as a percentage of the width of the outer container div based on the new size of the window after resize.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body { background-color: #e8e8e8; font-family: Arial, Helvetica, sans-serif; font-size:12px; padding: 0; margin: 0; }
h1 { padding: 0px; margin: 0px; }
#wrapper{width:990px; margin:0 auto;}
#container { margin:0px auto; border:0px solid #bbb; padding:10px; width: 990px; }
.white-box { width: 180px; margin: 0px; }
#main-header { border:1px solid #bbb; height:98px; padding:3px; background:#FFF; width: 990px; margin:0px auto; }
#main-content { margin-top:10px; padding-bottom:10px; }
#main-body { margin-left:10px; width:666px; height:150px; }
#main-footer { margin-top:10px; margin-bottom:10px; padding:10px; border:1px solid #bbb; }
.box { padding: 8px; border: 1px solid silver; -moz-border-radius: 8px; -o-border-radius: 8px; -webkit-border-radius: 5px; border-radius: 8px; background-color: #fff; }
.box1 { width: 200px; float: left; }
.box2 { float:right; margin-left:0px; width:748px; }
div.left { width: 200px; float: left; }
div.right { width: 730px; float: right; margin-right:3px; }
</style>
</head>
<body>
<div id="wrapper">
<div id="main-header">
<div class="left"><img src="http://img89.imageshack.us/img89/2675/logoxnx.gif" alt="" border="0"></div>
<div class="right"><img src="http://img199.imageshack.us/img199/9759/banner2b.gif" alt="" border="0"></div>
</div>
<div id="container">
<div id="main-content">
<div class="box box1">
left
</div>
<div class="box box2">
<p>Main Bbody 1...</p>
</div>
<div style="clear:both;"></div>
</div>
<div id="main-footer">Main Footer</div>
</div>
</div>
</body>
</html>
As suggested by Pete in another thread: You need to increase the min-width of #main-header to around 950px
HTML:
<div class="spoiler-content-block">
<div class="spoiler-inner-content-block">
<div class="top-block top-block-tight">
Name
</div>
<div class="bottom-block">
<span class="previous-number">0</span>
</div>
</div>
<div class="spoiler-inner-content-block">
<div class="top-block">
Time of last login
</div>
<div class="bottom-block">
<br>
<span class="previous-number">0</span>
</div>
</div>
<div class="spoiler-inner-content-block">
<div class="top-block top-block-tight">
Status
</div>
<div class="bottom-block">
<span class="current-number">0</span><br>
<span class="previous-number">0</span>
</div>
</div>
</div>
CSS:
div.spoiler-content{
border: 1px solid #DDDDDD;
padding: 10px;
white-space: nowrap;
text-align:center;
}
div.spoiler-content-block{
display: inline-block;
border:1px solid #ececec;
white-space: normal;
padding: 5px;
text-align: center;
vertical-align: middle;
}
div.spoiler-inner-content-block{
display:inline-block;
white-space: nowrap;
}
.top-block{
border: 1px solid #ececec;
padding: 5px;
margin-bottom: 5px;
height: 30px;
}
.bottom-block{
border: 1px solid #ececec;
padding: 5px;
}
Example: http://jsfiddle.net/nonamez/aGQ8F/
The problem is in the <div class="bottom-block"> - when there is one value it goes bottom, how to fix it?
Try adding a vertical-align:top to your div.spoiler-inner-content-block
div.spoiler-inner-content-block{
display:inline-block;
white-space: nowrap;
vertical-align:top;
}
I've forked your fiddle
Fiddle
You need to add vertical-align:top to the spoiler-inner-content-block