HTML:
<body>
<div><p>Something</p></div>
<div class = "myPanel">
<div class = "heading">my header</div>
<div class = "body">my body</div>
</div>
<div><p>Something</p></div>
</body>
css:
.myPanel: {
border: 1px solid #687D6D;
border-radius: 5px 5px 0 0;
box-shadow: 10px 10px 1px black;
margin: 3%;
}
.myPanel .heading {
background: #B6F0C4;
border-radius: 5px 5px 0 0;
color: #687D6D;
padding: 10px 20px;
}
.myPanel .body {
padding: 10px 20px;
}
JSFiddle
What I'm curious is that, even if I set border on .myPanel, it doesn't work on .myPanel .body, there's no border around .myPanel .body, why?
here is your problem:
.myPanel: {
just remove the : (colon)
snippet below:
.myPanel {
border: 1px solid #687D6D;
border-radius: 5px 5px 0 0;
box-shadow: 10px 10px 1px black;
margin: 3%;
}
.myPanel .heading {
background: #B6F0C4;
border-radius: 5px 5px 0 0;
color: #687D6D;
padding: 10px 20px;
}
.myPanel .body {
padding: 10px 20px;
}
<div>
<p>Something</p>
</div>
<div class="myPanel">
<div class="heading">my header</div>
<div class="body">my body</div>
</div>
<div>
<p>Something</p>
</div>
Related
I want to have the texts which follow the choices ("A", "B" etc.) in the same line as those choices.
.answer {
box-shadow: inset 0px 0px 4px 0 #b7b7b7;
margin: 5px;
padding: 10px;
font-size: 14px;
border-radius: 7px;
margin-bottom: 10px;
}
<div class="choices">
<div class="answer">A) <p style="">casa</p></div>
<div class="answer">B) <p>kasa</p></div>
<div class="answer">C) <p>fsdfsdf</p></div>
<div class="answer">D) <p>sefsfesf</p></div>
<div class="answer">E) <p>sfesfesfs</p></div>
</div>
How can I do this? Thanks in advance
I suppose your problem/wish is to have the p tag text in the same line as "A)", "B)" etc.?
If yes, add this CSS rule:
.answer p {
display: inline;
}
.answer {
box-shadow: inset 0px 0px 4px 0 #b7b7b7;
margin: 5px;
padding: 10px;
font-size: 14px;
border-radius: 7px;
margin-bottom: 10px;
}
.answer p {
display: inline;
}
<div class="choices">
<div class="answer">A)
<p style="">casa</p>
</div>
<div class="answer">B)
<p>kasa</p>
</div>
<div class="answer">C)
<p>fsdfsdf</p>
</div>
<div class="answer">D)
<p>sefsfesf</p>
</div>
<div class="answer">E)
<p>sfesfesfs</p>
</div>
</div>
I have the following html code:
<div class="demand page">
<div id="crumby-title">
<div class="page-icon">
<i class="fa fa-line-chart"></i>
</div>
<div class="page-title">
Demand
</div>
</div>
<div id="chart" class="demand-chart">
</div>
</div>
and the css/less:
.rtm {
.app__header {
background-color: #ffffff;
box-shadow: 1px 2px 2px rgba(1, 1, 1, 0.15);
}
.app__inner-content {
background-color: #ffffff;
}
.demand-chart{
padding-top: 50px;
}
#crumby-title {
display: block;
border-bottom: 1px solid #eee;
}
.page-icon {
font-size: 20px;
position: absolute;
padding: 14px 18px;
background: #e7e7e7;
}
.page-title {
float: left;
font-size: 20px;
font-weight: 5px 10px 10px 75px;
height: 55px;
}
}
I tried to do like this in order to show the page-icon and page-title one near the other but how it is done now they are one over the other (the icon is on top of the title)
How can I solve this? Thanks
When you say "near each other" I am assuming you mean "beside each other".
You can add flexbox properties to #crumby-title. Then remove position and float properties from .page-icon and page-title. You can also remove height from .page-title
.app__header {
background-color: #ffffff;
box-shadow: 1px 2px 2px rgba(1, 1, 1, 0.15);
}
.app__inner-content {
background-color: #ffffff;
}
.demand-chart {
padding-top: 50px;
}
#crumby-title {
display: flex;
align-items: center;
border-bottom: 1px solid #eee;
}
.page-icon {
font-size: 20px;
padding: 14px 18px;
background: #e7e7e7;
}
.page-title {
font-size: 20px;
font-weight: 5px 10px 10px 75px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="demand page">
<div id="crumby-title">
<div class="page-icon">
<i class="fa fa-line-chart"></i>
</div>
<div class="page-title">
Demand
</div>
</div>
<div id="chart" class="demand-chart">
</div>
</div>
Give float:left to .page-icon instead of position:absolute and add <div class="clear"></div> after page-title.
.app__header {
background-color: #ffffff;
box-shadow: 1px 2px 2px rgba(1, 1, 1, 0.15);
}
.app__inner-content {
background-color: #ffffff;
}
.demand-chart{
padding-top: 50px;
}
#crumby-title {
display: block;
border-bottom: 1px solid #eee;
}
.page-icon {
font-size: 20px;
float: left;
padding: 14px 18px;
background: #e7e7e7;
}
.page-title {
float: left;
font-size: 20px;
font-weight: 5px 10px 10px 75px;
height: 55px;
}
.clear{
clear:both;
}
<div class="demand page">
<div id="crumby-title">
<div class="page-icon">
<i class="fa fa-line-chart"></i>
</div>
<div class="page-title">
Demand
</div>
<div class="clear"></div>
</div>
<div id="chart" class="demand-chart">
</div>
</div>
I want to show u another version of ankita pantel's put them in a table and add padding-top to Demand
.app__header {
background-color: #ffffff;
box-shadow: 1px 2px 2px rgba(1, 1, 1, 0.15);
}
.app__inner-content {
background-color: #ffffff;
}
.demand-chart{
padding-top: 50px;
}
#crumby-title {
display: block;
border-bottom: 1px solid #eee;
}
.page-icon {
font-size: 20px;
padding: 14px 18px;
background: #e7e7e7;
}
.page-title {
padding-top: 30px;
float: left;
font-size: 20px;
font-weight: 5px 10px 10px 75px;
height: 55px;
}
<div class="demand page">
<div id="crumby-title">
<table>
<tr>
<td>
<div class="page-icon">
<i class="fa fa-line-chart"></i>
</div>
</td>
<td>
<div class="page-title">
Demand
</div>
</td>
</tr>
</table>
</div>
<div id="chart" class="demand-chart">
</div>
</div>
All the cool kids are using flex box.
display:flex; flex-direction:row; makes the child items stack in a row. (flex-direction:row is default so you can skip that)
#crumby-title {
...
display: flex;
flex-direction:row;
}
then you can (if you want) center the text with
.page-title {
....
display: flex;
align-items: center;
}
Fiddle
While building a page, I encountered a problem i couldn't explain:
The first div in a sidebar has a weird break above
Second picture, showing that the top div in sidebar (template-sidebar-payment) doesn't actually contain that gap.
I had a margin appear from nowhere, without it being set anywhere (I've searched broad and wide).
#template-sidebar {
display: table-cell;
width: 200px;
padding-right: 15px;
height: 626px;
background: #FFF;
border-right: 7px solid #fec30d;
}
.sidebar-element {
height: 200px;
border-top: 10px solid #ffffff;
border-bottom: 10px solid #ffffff;
}
.sidebar-element hr {
border: none;
height: 1px;
color: #c6c6c6;
background-color: #c6c6c6;
/*border: 0.5px solid #c6c6c6;*/
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
}
.sidebar-element h4 {
padding-top: 10px;
}
#template-sidebar-payment {
border-top: 0;
!important
}
#template-sidebar-rules {
border-bottom: 0;
!important
}
<div id="template-sidebar">
<div id="template-sidebar-payment" class="sidebar-element">
<hr noshade/>
<h4>Sposoby płatności</h4>
</div>
<div id="template-sidebar-delivery" class="sidebar-element">
<hr noshade/>
<h4>Sposoby dostawy</h4>
</div>
<div id="template-sidebar-rules" class="sidebar-element">
<hr noshade/>
<h4>Regulamin</h4>
</div>
</div>
Please note, that the reason for making this a table-cell is because I want the sidebar to scale along the (right hand side) content as it expands in length.
As for now, I tried removing certain things, adding display: blocks etc. but nothing helped.
If any more code is needed (I guess there might be a case where te problem could lie somewhere else?) please ask in comments and I will be happy to provide.
we need live demo for inspecting this situation. but i think setting vertical align to sidebar will solve your problem.
#template-sidebar {
vertical-align:top;
}
I think it's the margin from the hr. Add a margin-top: 0 to it:
#template-sidebar{
display: table-cell;
width: 200px;
padding-right: 15px;
height: 626px;
background: #FFF;
border-right: 7px solid #fec30d;
}
.sidebar-element{
height: 200px;
border-top: 10px solid #ffffff;
border-bottom: 10px solid #ffffff;
}
.sidebar-element hr {
border: none;
height: 1px;
margin-top: 0;
color: #c6c6c6;
background-color: #c6c6c6;
/*border: 0.5px solid #c6c6c6;*/
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
}
.sidebar-element h4 {
padding-top: 10px;
}
#template-sidebar-payment{
border-top: 0; !important
}
#template-sidebar-rules{
border-bottom: 0; !important
}
<div id="template-sidebar">
<div id="template-sidebar-payment" class="sidebar-element">
<hr noshade/>
<h4>Sposoby płatności</h4>
</div>
<div id="template-sidebar-delivery" class="sidebar-element">
<hr noshade/>
<h4>Sposoby dostawy</h4>
</div>
<div id="template-sidebar-rules" class="sidebar-element">
<hr noshade/>
<h4>Regulamin</h4>
</div>
</div>
The only issue I see, is the padding-right.
Attempt altering padding-right from 15px to 5px and see if that changes anything.
EDIT: Saw your comment. See below.
It probably origins from the
.sidebar-element h4 {
padding-top: 10px;
}
part of your style sheet.
('Boy... I saw on search that misalign topic about the <input> wrapped on an <a> tag... LOL)
Anyway...
I'm in a bit of a pickle here... I have a bunch of divs as an inline block lead by a lone <button>, and this lone button --- no matter how much design genius I summon from myself, I can't get to align properly.
Just look at the code at the end of the post.
Notes:
The button-holder class didn't used to exist; it was just the <button><span> combo. I added it thinking I can fix it by doing negative values on the margin (to no avail).
Can anyone advise?
FULL code:
<style type="text/css">
body { margin:0; padding:0;font-size: 9pt; }
#main { margin: 0; padding: 0; width:100%; text-align:center; }
#bar {display: table; margin: 0; padding: 0; width:100%; height:45px }
[class~=banner] { font-size: 14pt;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
display: table-cell;
height: 45px;
vertical-align: middle;}
.cellOne { background-color:#FFC316;
color: #35549A;
width: 8%;
text-align:center;}
.cellTwo { background-color: #35549A;
color: #FFF;
padding: 0px 0px 0px 2%;
width: 68%;
text-align: left;}
.cellThree { background-color: #35549A;
color: #FFC316;
width: 12%;
text-align: left;}
#three_element {margin: 0 auto; padding:0% 18.5% 0% 18.5%; text-align:center; }
.button-holder {
width: 250px;
height: calc(250px / 1.604);
margin: -1.45% 1.5% -1.65% 1.5%;
display:inline-block;
padding:5px;
box-sizing:border-box;
}
#addbutton {
border-radius: 25px 25px 25px 25px;
-moz-border-radius: 25px 25px 25px 25px;
-webkit-border-radius: 25px 25px 25px 25px;
display:table;
border: 0px;
box-sizing:border-box;
padding:0px;
margin:0px;
background-color:#E6E7E8;
text-align:center;}
#addbutton .add {
display: table-cell;
font-size: calc(250px / 1.604 - 50px);
color: #384D94;
width: 240px;
height: calc(240px / 1.604);
vertical-align: middle;
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
[class~=objective-edit-tile] {
width: 250px;
height: calc(250px / 1.604);
margin: 1.5%;
display:inline-block;
box-sizing:border-box;
padding:5px;}
[class~=objective-edit-tile] div {
font-family:"Yanone Kaffeesatz","Arial Narrow",Arial,sans-serif;
box-sizing:border-box;
color:#FFFFFF;
margin:0px;
display:inline-block;
}
.tr-1-square-red div {background-color: #BE1E2D;}
.tr-1-square-yellow div {background-color: #E39F15;}
.tr-1-square-green div {background-color:#266733;}
.text-block-name {
border-radius: 25px 25px 0px 0px;
-moz-border-radius: 25px 25px 0px 0px;
-webkit-border-radius: 25px 25px 0px 0px;
border:#FFFFFF 1px solid;
width: 100%;
height: 66.7%;
font-size: 180%;
padding-top:17%;
}
.text-block-days {
border-radius: 0px 0px 0px 25px;
-moz-border-radius: 0px 0px 0px 25px;
-webkit-border-radius: 0px 0px 0px 25px;
border-top: #FFF 1px solid;
font-weight:700;
width: 34%;
height: 33%;
padding-top:6.5%;}
.text-block-next-step {
border-radius: 0px 0px 25px 0px;
-moz-border-radius: 0px 0px 25px 0px;
-webkit-border-radius: 0px 0px 25px 0px;
border-top: #FFF 1px solid;
font-size:9px;
width: 64%;
height: 33%;
padding:8% 2px 0px 1px;}
</style>
</head>
<body>
<div id="main">
<div id="bar">
<div class="banner cellOne">Pipeline</div>
<div class="banner cellTwo"> <Title> </div>
<div class="banner cellThree">PracticePipeline.com</div>
</div>
<div role="content" id="three_element">
<div class="button-holder">
<button id="addbutton" name="buttton">
<span class = "add">+</span>
</button>
</div>
<div class = "tr-1-square-red objective-edit-tile" id="tile-n">
<div class = "text-block-name" >GGN </div>
<div class = "text-block-days" > -10 Days</div>
<div class = "text-block-next-step" >Research GGN background </div>
</div>
<div class = "tr-1-square-yellow objective-edit-tile " id="tile-n">
<div class = "text-block-name" >GGN </div>
<div class = "text-block-days" > -10 Days</div>
<div class = "text-block-next-step" >Research GGN background </div>
</div>
<div class = "tr-1-square-green objective-edit-tile " id="tile-n">
<div class = "text-block-name" >Stark Indust.. </div>
<div class = "text-block-days" > 7 Days</div>
<div class = "text-block-next-step" >Invite Stark Industri.. </div>
</div>
</div>
</div>
</body>
I dont know if this is going to help much but it worked when i tried it.
The tag padding-bottom keep making a little bit higher if you want it to align better.
#addbutton .add {
display: table-cell;
font-size: calc(250px / 1.604 - 50px);
color: #384D94;
width: 240px;
height: 140px;
vertical-align: middle;
margin: 0px;
padding: 0px;
box-sizing: border-box;
padding-bottom: 7%
}
I actually solved my own problem:
The problem was just that I was over analyzing things. Basic lay-outing worked:
.button-holder {
margin:1.5%;
display:inline-block;
padding:5px;
box-sizing:border-box;
}
#addbutton {
border-radius: 25px 25px 25px 25px;
-moz-border-radius: 25px 25px 25px 25px;
-webkit-border-radius: 25px 25px 25px 25px;
width: 240px;
height: calc(250px / 1.604 - 10px);
border: 0px;
margin:0px;
padding: 0px;
background-color:#E6E7E8;
box-sizing:border-box;
text-align:center;
}
#addbutton .add {
font-size: 97px;
color: #384D94;
}
I want to display the div content (having different heights) one after the other, with 2 divs side by side. I have tried to do this but I am getting space between divs having different heights.
Here is the code:
<html>
<div class="itemlist">
<div class="ItemView">
<p>content</p>
</div>
<div class="ItemView">
<p>content</p>
</div>
<div class="ItemView">
<p>content</p>
</div>
<div class="ItemView">
<p>content</p>
</div>
<div class="ItemView">
<p>content</p>
</div>
</div>
.ItemView {
width: 46%;
float:left;
background: #fff;
margin: 10px 10px 0px 10px;
border: solid 1px #aaa;
text-align: left;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 2px 2px 2px #ddd;
-webkit-box-shadow: 2px 2px 2px #ddd;
box-shadow: 2px 2px 2px #ddd;
min-height: 90px;
padding: 0;
}
Current output:
You should seperate the 2 columns and put all elements of a column in a floated container.
See this FIDDLE
HTML :
<div class="itemlist">
<div class="col">
<div class="ItemView">
<p>content</p>
</div>
...
</div>
<div class="col">
<div class="ItemView">
<p>content</p>
</div>
...
</div>
</div>
CSS :
.ItemView {
width: 100%;
background: #fff;
margin: 10px 0 0;
border: solid 1px #aaa;
text-align: left;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 2px 2px 2px #ddd;
-webkit-box-shadow: 2px 2px 2px #ddd;
box-shadow: 2px 2px 2px #ddd;
min-height: 90px;
padding: 0;
}
.col{
float:left;
width:46%;
margin: 0 10px;
}
.big {
height:200px;
}