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!
Related
I have a parent DIV wrap and 3 main child DIVs.inputQ,inputQL,inputQR. I am using a background color for wrap, but this color is not showing up for inputQL, inputQR.Since inputQL, inputQR are inside wrap, I believe its background color should be added to child one as well. I am a beginner in this area, can you please let me what is wrong here ? how can I add same background color for inputQL, inputQR ?
Fiddle : https://jsfiddle.net/anoopcr/hfmghkp0/
<div class="wrap">
<div class="inputQ">
<div class="InputQuest">Text Middle</div>
<div><input id="amnttext" class="textbox"></input></div>
</div>
<div class="inputQL">
<div class="InputQuest">Text Left</div>
<div><input id="loandtext" class="textbox"></input></div>
</div>
<div class="inputQR">
<div class="InputQuest">Text Right</div>
<div><input id="emidtext" class="textbox"></input></div>
</div>
</div>
CSS:
.wrap {
width: 80%;
margin-top: 80px;
margin: auto;
padding: 10px;
background:#eee;
}
.inputQ{width:60%;margin: auto; padding:10px;height:50px;margin-top:50px; }
.inputQL{width:45%;margin: auto; height:50px;margin-top:50px;float:left;}
.inputQR{width:45%;margin: auto; height:50px;margin-top:50px;float:right; }
.InputQuest
{
width:50%;
float:left;
font-family: arial;
font-size:18px;
text-align:center;
line-height: 30px;
margin:auto;
}
.textbox
{
float:left;
margin:auto;
font-size:16px;
font-family: verdana;
padding:5px;
border:1px solid #ccc;
border-radius:4px;
border-top-right-radius:0px;
border-bottom-right-radius:0px;
width:30%;
}
You Also neede to cell .wrap { overflow: hidden; }
try this
.wrap {
width: 80%;
margin-top: 80px;
margin: auto;
padding: 10px;
background:#eee;
overflow: hidden;
}
.inputQ{width:60%;margin: auto; padding:10px;height:50px;margin-top:50px; }
.inputQL{width:45%;margin: auto; height:50px;margin-top:50px;float:left;}
.inputQR{width:45%;margin: auto; height:50px;margin-top:50px;float:right; }
.InputQuest
{
width:50%;
float:left;
font-family: arial;
font-size:18px;
text-align:center;
line-height: 30px;
margin:auto;
}
.textbox
{
float:left;
margin:auto;
font-size:16px;
font-family: verdana;
padding:5px;
border:1px solid #ccc;
border-radius:4px;
border-top-right-radius:0px;
border-bottom-right-radius:0px;
width:30%;
}
<div class="wrap">
<div class="inputQ">
<div class="InputQuest">Text Middle</div>
<div><input id="amnttext" class="textbox"></input></div>
</div>
<div class="inputQL">
<div class="InputQuest">Text Left</div>
<div><input id="loandtext" class="textbox"></input></div>
</div>
<div class="inputQR">
<div class="InputQuest">Text Right</div>
<div><input id="emidtext" class="textbox"></input></div>
</div>
</div>
I want to have 2 elements in a div but only one should be visible, and I want to have a vertical scrollbar.
Unfortunately, the second element is visible and there is no scrollbar.
#visu {
top:10px;
height:180px;
width:50%;
overflow:auto;
background-color:yellow;
}
#element1 {
position:absolute;
top:15px;
left:80px;
}
#element2 {
position:absolute;
top:200px;
left:80px;
}
.element {
margin-right:-50px;
}
.namecontainer {
display:flex;
border:4px solid #000033; border-radius:10px;
padding:10px; box-sizing:border-box;
background-color:white;
width:280px;
height:150px;
margin-left:0px;
align-items: center;
justify-content:center:
color:#1a1a1a;
}
.namecontainer p {
font-size:35px;
font-family: 'Arial';
font-weight:bold;
color:#1a1a1a;
text-align:center;
width:380px;
}
<div id="visu">
<div id="element1" class="element">
<div class="namecontainer">
<p class= "name" id="name1" >element 1</p>
</div>
</div>
<div id="element2" class="element">
<div class="namecontainer">
<p class= "name" id="name3" >element 2</p>
</div>
</div>
</div>
You need to play with margin and drop absolute positionnong cause it takes element off the flow and is not necessary here https://jsfiddle.net/vpdc5L4m/13/
#visu {
top: 10px;
height: 180px;
width: 50%;
overflow: auto;
background-color: yellow;
}
#element1 {}
#element2 {}
.element {
margin: 15px auto ;
}
.namecontainer {
display: flex;
border: 4px solid #000033;
border-radius: 10px;
padding: 10px;
box-sizing: border-box;
background-color: white;
width: 280px;
height: 150px;
margin:auto;
align-items: center;
justify-content: center: color: #1a1a1a;
}
.namecontainer p {
font-size: 35px;
font-family: 'Arial';
font-weight: bold;
color: #1a1a1a;
text-align: center;
width: 380px;
}
<div id="visu">
<div id="element1" class="element">
<div class="namecontainer">
<p class="name" id="name1">element 1</p>
</div>
</div>
<div id="element2" class="element">
<div class="namecontainer">
<p class="name" id="name2">element 2</p>
</div>
</div>
<div id="element3" class="element">
<div class="namecontainer">
<p class="name" id="name3">a third one ?</p>
</div>
</div>
</div>
To hide a CSS element, you can use
display: none;
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/
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
http://jsfiddle.net/PRAPc/
I want a search icon like this rendered in the beginning of the textbox and I can't get the following to work. Please help.
html:
<body class="claro" data-maq-flow-layout="true" data-maq-comptype="desktop" data-maq-ws="collapse" style="margin-top:0" id="myapp" data-maq-appstates="{}">
<div id="top_bar">
<div style="width: 900px; height:50px; margin-left: auto; margin-right: auto;">
<a href="/" class="logo logo_a">
<div class="logo">
</div>
</a>
<div class="midArea_div">
<div class="searchBox_div">
<input type="text" data-dojo-type="dijit.form.TextBox" class="searchBox"></input>
</div>
</div>
</div>
</div>
<div id="top_bar_divider"></div>
<div data-dojo-type="dijit.layout.BorderContainer" persist="false" gutters="true" style="min-width: 1em; min-height: 1px; z-index: 0; width: 600px; height: 687px; margin-left: auto; margin-right: auto;" design="headline">
<div data-dojo-type="dijit.layout.ContentPane" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" region="center" splitter="false" maxSize="Infinity">
</div>
</div>
</body>
js:
require([
"dijit/dijit",
"dojo/parser",
"maqetta/space",
"maqetta/AppStates",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/form/TextBox"
]);
css:
html,body {
height: 100%;
width: 100%;
}
.logo_a{
background:url("icon1.png");
}
.logo{
width:60px;
height:50px;
display:inline-block;
vertical-align:middle;
}
.logo_a:active{
background-position:0 1px;
}
#top_bar{
padding:0px;
background: -webkit-linear-gradient(#464646, #121212);
background: -moz-linear-gradient(#464646, #121212);
background: -ms-linear-gradient(#464646, #121212);
background: -o-linear-gradient(#464646, #121212);
background: linear-gradient(#464646, #121212);
color: #ccc;
text-shadow:none;
height:50px;
width:100%;
}
#top_bar_divider{
background-color:#1ba0e1;
height:4px;
width:100%;
}
.searchBox{
height: 30px;
width: 400px;
padding-left:30px;
font-size:20px;
}
.searchBox_div{
display:inline-block;
verticle-align:middle;
background: #FFF url("http://app.maqetta.org/maqetta/user/CoQ/ws/workspace/project1/search_icon.png") no-repeat scroll 5px 6px;
}
.midArea_div{
margin-left: 100px;
verticle-align:middle;
display:inline-block;
}
.searchIcon{
}
Your current method doesn't work because the textbox is on top of its background so it isn't visible. You can do this using a pseudo-element on .searchBox_div (doesn't work in <= IE8).
jsFiddle
.searchBox_div {
position:relative;
}
.searchBox_div:before {
content:"";
display:block;
position:absolute;
background: url(http://app.maqetta.org/maqetta/user/CoQ/ws/workspace/project1/search_icon.png) no-repeat center center;
width:24px;
height:24px;
left:4px;
top:50%;
margin-top:-12px;
z-index:1;
}
Alternatively you could apply these styles to another div inside .searchBox_div to get around the IE8 issue at the cost of more markup.
jsFiddle
HTML
<div class="midArea_div">
<div class="searchBox_div">
<input type="text" data-dojo-type="dijit.form.TextBox" class="searchBox"></input>
<div class="overlay"></div>
</div>
</div>
CSS
.searchBox_div {
position:relative;
}
.overlay {
position:absolute;
background: url(http://app.maqetta.org/maqetta/user/CoQ/ws/workspace/project1/search_icon.png) no-repeat center center;
width:24px;
height:24px;
left:4px;
top:50%;
margin-top:-12px;
z-index:1;
}