This is demo: http://jsfiddle.net/KS4eS/
Please take a look at demo first.
I'd like To set their alignment the same.
Something like this. How can I?
center
------------------------------------------------------
A2345343
B435234
C4364353
D3426432632
E46324362
F235235
GGGGG
------------------------------------------------------
HTML
<div class='general'>
<div class='list'>
<div class="top_page_function">A2345343</div>
<div class="top_page_function">B435234</div>
<div class="top_page_function">C4364353</div>
<div class="top_page_function">D3426432632</div>
<div class="top_page_function">E46324362</div>
<div class="top_page_function">F235235</div>
<div class="top_page_function">GGGGG</div>
</div>
</div>
CSS
.general {
background-color: rgb(255, 255, 255);
border-radius: 8px 8px 8px 8px;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
margin-bottom: 30px;
text-align: center;
padding: 10px;
}
.list{
width: 400px;
min-width: 250px;
margin-bottom: 20px;
}
This will get what you want:
.general {
background-color: rgb(255, 255, 255);
border-radius: 8px 8px 8px 8px;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
margin-bottom: 30px;
padding: 10px;
text-align:center;
}
.list{
margin-bottom: 20px;
text-align: left;
margin: 0 auto;
display: inline-block;
}
It will also work with any width. See here: http://jsfiddle.net/KS4eS/8/
Another trick is to add a wrap to .List div.
HTML:
<div class='general'>
<div class='list_wrap'>
<div class='list'>
<div class="top_page_function">A2345343</div>
<div class="top_page_function">B435234</div>
<div class="top_page_function">C4364353</div>
<div class="top_page_function">D3426432632</div>
<div class="top_page_function">E46324362</div>
<div class="top_page_function">F235235</div>
<div class="top_page_function">GGGGG</div>
</div>
</div>
</div>
CSS
.general {
background-color: rgb(255, 255, 255);
border-radius: 8px 8px 8px 8px;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
margin-bottom: 30px;
text-align: center;
padding: 10px;
}
.list_wrap{
margin:0 auto;
width: 250px;
}
.list{
width: 100%;
text-align:left;
margin-bottom: 20px;
}
JSFiddle
You can align your column like this:
.list div {
text-align:left;
margin-left:200px;
}
Maybe setting a container around the top_page_function class divs and setting its position to absolute with left as 50%,will do.
Other solutions work too, prefer them, but just because i have made the fiddle, I'm posting it.
And yes, you have to set the height of list clss on your own too.That's one con of this method.
JSFiddle
Related
Hi I am designing a blog site using pure html and css and I have some design in mind. Currently it looks like before graph and I would like to achieve after graph. Right now all these classes are in inline-block and I do not want to change the dom structure. Please refer to this code snippet for implementation:
https://jsfiddle.net/yueeee/vb1we2tk/4/
.container {
padding: 10px 40px;
padding-left: 0px;
width: 100%;
height: 100%;
}
.meta {
position: relative;
display:inline-block;
height: 100%;
width: 10%;
max-width: 200px; /*in large resolution dont always want width to be 12%*/
margin-right: 40px;
/* background-color: transparent; */
padding: 0px 10px;
text-align: right;
vertical-align:top; /*always align to the top of container*/
}
.content {
width: 30%;
display:inline-block;
padding: 20px 30px;
background-color: white;
position: relative;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
vertical-align:top; /*always align to the top of container*/
}
<div class="container">
<div class="meta">
<div class="time">
<p>2020/12/09<br>22:18:35</p>
</div>
<div class="tag">
<p>tag1</p>
<p>tag2</p>
</div>
</div>
<div class="content post">
<div class="text">
<h2> title </h2>
<p>content<br>content<br>content<br>content<br>content<br>
</p>
</div>
</div>
</div>
The difficulty I met is how do I set metadata's height equals to content. I checked solution on setting container as table and metadata/ content as table-cell. However, it would cause some other styling issue so I still want to keep everything as inline-block. The other way I am thinking is to set the height of metadata equal to container. It failed because container does not height attribute. I tried something like setting height = 100% cause I do not want a stable height but also did not work.
Need your advice.
Before:
After:
The best choice in these cases is to use the flex property. I added some Properties to both the .container and .meta selectors and deleted some, act like code to get the desired result.
.container {
display: flex;
padding: 10px 40px;
padding-left: 0px;
width: 100%;
height: 100%;
}
.meta {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 10%;
margin-right: 40px;
padding: 0px 10px;
text-align: right;
}
.content {
width: 30%;
display:inline-block;
padding: 20px 30px;
background-color: white;
position: relative;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<div class="container">
<div class="meta">
<div class="time">
<p>2020/12/09<br>22:18:35</p>
</div>
<div class="tag">
<p>tag1</p>
<p>tag2</p>
</div>
</div>
<div class="content post">
<div class="text">
<h2> title </h2>
<p>content<br>content<br>content<br>content<br>content<br>
</p>
</div>
</div>
</div>
When you uncomment the unordered list tag the second container div falls a bit down. If you actually could explain me why this is happening and told me how to remove this behavior I would be thankful.
html,
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
margin-right: 50px;
margin-left: 50px;
margin-top: 100px;
display: inline-block;
width: 300px;
height: 300px;
background-color: rgb(255, 255, 255);
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
text-align: center;
color: rgb(38, 48, 90);
}
ul {
list-style-position: inside;
display: block;
}
<div class="container">
<h1> Depr </h1>
<!--<ul>
<li>Derping</li>
<li>Derping</li>
</ul>-->
</div>
<div class="container">
<h1> Derpina</h1>
</div>
The main reason behind why this occurs is, when you make any element to be inline-block, it aligns to baseline by default. So, when the heights of all elements are not same, it gets scrambled and aligned to their baseline. This is the main problem with all the inline-block and we should correct it by giving the right vertical alignment. To do that, please follow the below snippet:
I found your issue to be vertical alignment. Just give:
.container {
vertical-align: middle; /* This */
position: relative;
margin-right: 50px;
margin-left: 50px;
margin-top: 100px;
display: inline-block;
width: 300px;
height: 300px;
background-color: rgb(255,255,255);
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0,
0.24);
text-align: center;
color: rgb(38, 48, 90);
}
Preview
Without the <ul> and with it:
JSBin: http://jsbin.com/zalagixovu/edit?output
Normally the elements of an HTML markup appear in the order they are written in the markup file, and the inline elements appear from left to right.
But I want the children of a certain div (only, NOT all the elements of the entire page) to appear from right to left.
In case you wonder why it is needed, I want to do this to solve the following problem:
PROBLEM:
JSFiddle here.
.wrapper {
height: 100%;
width: 826px;
margin: 50px auto;
display: table;
background-color: #003b80;
}
.cell {
display: table-cell;
vertical-align: top;
}
.left-cell {
width: 50%;
background-color: chocolate;
}
.right-cell {
background-color: darkslategrey
}
.step-container {
max-height: 200px;
font-size: 0;
}
.right-cell .step-container {
margin-top: 125px;
}
.content-box {
display: inline-block;
width: 350px;
height: 200px;
/*border: 5px solid blue;*/
font-size: 0;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.69);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.69);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.69);
background-color: dodgerblue
}
.right-cell .content-box {
background-color: darkturquoise
}
.middle-cell {
height: 100%;
background-color: white;
width: 1.5px;
font-size: 0;
box-shadow: 0px 0px 10px black;
-moz-box-shadow: 0px 0px 10px black;
-webkit-box-shadow: 0px 0px 10px black;
}
.number-outer-container {
display: inline-block;
position: absolute;
}
.left-cell .number-outer-container {
/*margin-left:39px;*/
}
.number-inner-container {
height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
}
.number-banner {
width: 50px;
height: 50px;
background-color: crimson;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
.notch-outer-container {
display: inline-block;
}
.left-cell .notch-outer-container {
margin-right: 24px;
}
.right-cell .notch-outer-container {
margin-left: 10px;
}
.notch-inner-container {
height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
}
.notch {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
}
.left-face-notch {
border-right: 15px solid #520f23;
}
.right-face-notch {
border-left: 15px solid #571780;
}
<div class="wrapper">
<div class="cell left-cell" align="left">
<div class="step-container">
<div class="content-box"></div>
<div class="notch-outer-container">
<div class="notch-inner-container">
<div class="right-face-notch notch"></div>
</div>
</div>
<div class="number-outer-container">
<div class="number-inner-container">
<div class="number-banner"></div>
</div>
</div>
</div>
</div>
<div class="cell middle-cell"></div>
<div class="cell right-cell" align="right">
<div class="step-container">
<div class="number-outer-container">
<div class="number-inner-container">
<div class="number-banner"></div>
</div>
</div>
<div class="notch-outer-container">
<div class="notch-inner-container">
<div class="left-face-notch notch"></div>
</div>
</div>
<div class="content-box"></div>
</div>
</div>
</div>
In this SSCCE, inside .left-cell .step-container, I have three elements appearing on the same line: .content-box, .notch-outer-container, and .number-outer-container; and to make the .notch appear to be overlapping the right-cell by 50% of its width, I gave .number-outer-container a position:absolute; and .notch-outer-container a margin-right which pushes the number-outer-container to right side to an extent that it appears to be overlapping the (.middle-cell and) right-cell by 50% of it's width.
The problem is that in the .right-cell, this strategy is NOT working. First the .number-right-container appears and still it is absolute, I can not give it a left property with value relative to its parent (otherwise I would try a left:-25px to make it appear 25px behind the left edge of its parent, because it has width:50px;). Then the .notch is hidden below it...
So I am thinking about finding a way through which I can get the elements render from RTL (Right To Left) rather than LTR only inside .right-cell on the page. So that I can follow the same strategy I have used for the .left-cell, in the .right-cell.
There's numerous ways to achieve what you want using either flexing, floats or other options, but I'd say one of the easiest ways, if the rest of the layout works as you want it to, is to use the direction attribute.
div {
direction: rtl;
}
div div {
display: inline-block;
direction: ltr;
}
<div>
<div>first</div>
<div>second</div>
<div>last</div>
</div>
I'm making a title bar, links on the left, center, and the right. Each separated by divs.
Floating left is no problem, centering the second div is no problem. But when I try to float the last div to the right it is clearing the other divs and is not inside my header. Why is this? It has to be something simple I am missing? Thank you very much
http://jsfiddle.net/GX9xn/
HTML
<div class="header-fixed">
<div class="header-container">
<div class="nav-float-left">
<div id="search">
<span>search</span>
</div>
</div>
<div class="nav-center">
title
</div>
<div class="nav-float-right">
<a>
<span>more</span>
</a>
<div>
</div>
</div>
CSS
.header-fixed {
height:56px;
border-top: 1px solid #222;
width: 100%;
background: green;
position: fixed;
}
.header-container {
width: 700px;
margin: 0 auto;
height: 56px;
}
.nav-float-left {
float:left;
height: 56px;
color: rgba(255, 255, 255, .55);
font-family:'Museo Sans W01 300',san-serif;
font-size: 13px;
text-shadow: 0px 1px 1px rgba(0, 0, 0, .95);
filter: dropshadow(color= rgba(0, 0, 0, .95), offx=0, offy=1);
}
.nav-center {
letter-spacing: 0.05em;
margin: 0 auto;
height: 43px;
width: 100px;
padding-top: 13px;
background: black;
color: #d4d2d2;
font-size: 29px;
font-family: “Lucida Grande”, sans-serif;
text-align: center;
box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, .57);
-webkit-box-shadow:inset 0px 0px 3px 0px rgba(0, 0, 0, .57);
-o-box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, .57);
-moz-box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, .57);
cursor: pointer;
}
.nav-center .ss-pika {
font-size: 17px;
margin-left: 1px;
margin-right: 0px;
}
.nav-center a {
display:block;
}
.nav-float-right {
position:relative;
float:right;
height: 55px;
width: 205px;
}
The center div will be above the float right div because it is a block element and block elements are not placed inline.
A walk around is to add the float-right element first.
<div class="nav-float-left">
<div id="search">
<span>search</span>
</div>
</div>
<div class="nav-float-right">
<a><span>more</span></a>
<div>
<div class="nav-center">
title
</div>
If you use float you also need to set the display property in order to do as you want.
I changed your fiddle by adding display:inline-block.
As you may notice you need to set the dimensions width for your divs (height optional).
Here : Fiddle
You can use display:table; , display:table-cell; instead of floats to arrange elements in single line:
Fiddle
Try this
.nav-float-right {
position:relative;
float:right;
height: 55px;
width: 205px;
bottom: 57px;
left: 12px;
}
You can adjust the right div by set the bottom and left attributes.
Fiddel: http://jsfiddle.net/GX9xn/6/
Please try this FIDDLE
There is slight change in your CSS file
.nav-float-right {
position:absolute;
float:right;
height: 55px;
width: 205px;
right:0;
top:0;
background: #fff;
}
I have a pretty simple div structure - tree boxes with middle box highlighted with box-shadow:
.offerBox {
width: 300px;
margin: 10px;
}
.obOffer {
width: 33%;
float: left;
height: 100px;
text-align: center;
}
.obOfferPrice {
padding: 10px;
color: white;
background-color: #85AADD;
}
.obHiLight {
box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
}
<div class="offerBox">
<div class="obOffer">
<div class="obOfferTitle">Free</div>
<div class="obOfferPrice">Free</div>
</div>
<div class="obOffer obHiLight">
<div class="obOfferTitle">Title</div>
<div class="obOfferPrice">$10</div>
</div>
<div class="obOffer">
<div class="obOfferTitle">Title 2</div>
<div class="obOfferPrice">$10</div>
</div>
</div>
One of the elements inside those boxes have a background-color property set. For some reasons this background-color removes the box-shadow from the right and only from the right.
Any ideas why and how to fix it?
Live Example of the problem:
http://jsfiddle.net/SqvUd/
You just need to add z-index and position:relative;
See the example:
.offerBox {
border-radius: 6px;
width: 300px;
margin: 10px;
}
.obOffer {
position: relative; // 👈 this
width: 33%;
float: left;
height: 100px;
text-align: center;
z-index: 0;
}
.obOfferPrice {
padding: 10px;
color: white;
background-color: #85AADD;
}
.obHiLight {
z-index: 10;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
}
<div class="offerBox">
<div class="obOffer">
<div class="obOfferTitle">Free</div>
<div class="obOfferPrice">Free</div>
</div>
<div class="obOffer obHiLight">
<div class="obOfferTitle">Title</div>
<div class="obOfferPrice">$10</div>
</div>
<div class="obOffer">
<div class="obOfferTitle">Title 2</div>
<div class="obOfferPrice">$10</div>
</div>
</div>
It has to do with the z-index of the items. Try adding this to your existing css:
.obOffer {
position: relative;
z-index: 10;
}
.obHiLight {
position:relative;
z-index: 100;
}
adding .obHiLight{opacity:0.999} creates a new stacking context for that element, which makes it appear above the others as well. This might work for tables too (didn't test :) . #ItJustWerks #brian-tacker