WHAT I HAVE
I have this Table.
With this HTML
<div class="list-item">
<p>
<input type="checkbox">
<span class="list-type"><img src="/images/types/{{this.type}}.png" title="{{this.type}}" /></span>
<span class="list-title">{{this.title}}</span>
<span class="list-owner">{{this.owner}}</span>
<span class="list-date">16 Dec 2014</span>
</p>
</div><br>
With this CSS
.list-item{
display: inline-block;
width: 100%;
border: solid 1px #dddddd;
}
.list-type{
margin-left: 10px;
margin-right: 10px;
}
WHATH I WANTO TO ACCOMPLISH
But i want to create something like a table inside the <div>.
NOTE I KNOW that a <table> fits perfect, but for how this content is beign created i need to simulate a table with this <div>, so table unforntannly its not an option here.
I need to replicate something like this (check image).
NOTE ignore the Star icon
WHAT I ALREADY TRY
Settin margin-left to each of the <span> but the order of the "admin" and "date" are not equals, if i use margins i get this (check image).
Im getting this with this CSS
.list-item{
display: inline-block;
width: 100%;
border: solid 1px #dddddd;
}
.list-type{
margin-left: 10px;
}
.list-title{
margin-left: 10px;
}
.list-owner{
margin-left: 100px;
}
.list-date{
margin-left: 190px;
}
Try CSS tables:
.list-item {
display: table;
}
.list-item > p {
display: table-row;
}
.list-item > p > * {
display: table-cell;
}
I have changed some Tags and some CSS, I like the use of percentage width and divs. If this does not help you maybe it can give you more ideas.
.list-item{
display: inline-block;
width: 100%;
border: solid 1px #dddddd;
}
.cb{
float: left;
width:3%;
}
.list-type{
float: left;
width:8%;
}
.list-title{
float:left;
width:35%;
}
.list-owner{
float:left;
width:15%;
}
.list-date{
float: left;
width: 20%;
}
<div class="list-item">
<p>
<input type="checkbox" class="cb">
<div class="list-type"><img src="/images/types/{{this.type}}.png" title="{{this.type}}" /></div>
<div class="list-title">Title</div>
<div class="list-owner">Owner</div>
<div class="list-date">16 Dec 2014</div>
</p>
</div><br>
<div class="list-item">
<p>
<input type="checkbox" class="cb">
<div class="list-type"><img src="/images/types/{{this.type}}.png" title="{{this.type}}" /></div>
<div class="list-title">Title22</div>
<div class="list-owner">Owner22</div>
<div class="list-date">16 Dec 201422</div>
</p>
</div><br>
<div class="list-item">
<p>
<input type="checkbox" class="cb">
<div class="list-type"><img src="/images/types/{{this.type}}.png" title="{{this.type}}" /></div>
<div class="list-title">Title 333</div>
<div class="list-owner">Owner 333</div>
<div class="list-date">16 Dec 2014333</div>
</p>
</div>
Did this help???
Try with the below css:
.list-title{ margin-left: 10px; width: 200px;}
.list-owner{ margin-left: 10px; width: 40px;}
.list-date{ margin-left: 10px; width: 40px;}
Note: Change the width size according to your need.
Tabular data: use tables.
Or as #oriol suggested, use CSS tables.
Related
I have two hr tags and i am trying to take them near each other but they go under each other what should i do for this
here are my codes
html
<hr style="margin-right: 2%;width:70%;border-width:2px;border-color:black;border-radius:4px;">
there are two of these hr tags this is the second one
<hr style="margin-right: 2%;width: 2%;border-width:2px;border-color:black;border-radius:4px;">
now what should i do to these lines go near each other like this
Just make them display: inline-block
hr {
display: inline-block;
width: 30%;
}
https://codepen.io/alexmoronto/pen/aaboNj
You can give border bottom for both div's. Try to avoid hr tag. If you need that hr tag then use bootstrap column method. it will be essay
Assign the width for big and small lines in their class respectively.
.line-container {
width: 100%;
height: 4px;
}
.line {
background-color: #000;
height: 100%;
display: inline-block;
}
.big {
width: 85%;
float: left;
}
.small {
width: 10%;
float: right;
}
<div class="line-container">
<span class="line big"></span>
<span class="line small"></span>
</div>
Use display:flex and instead hr use div and in style use border and margin
.wrap{
display:flex
}
.line{
border-bottom:1px solid black;
width:50%;
margin:5px;
}
<div class="wrap">
<div class="line"></div>
<div class="line"></div>
</div>
Or use display:inline-block; to hr and set width and margin
hr{
display:inline-block;
margin:5px;
width:45%;
}
<hr/>
<hr/>
I'm trying to make different boxes that are placed in the same line using CSS.
However, without any style rule (at least that I've noticed) making it do so, the second box is lower than the first. Why is that? How can I fix it?
If you have any question, feel free to ask, I'll do my best to answer.
Thank you in advance.
Code snippet below.
JSFiddle
.index-links {
width: 90%;
position: relative;
left: 5%;
padding: 1%;
}
.index-link {
display: table-cell;
height: 150px;
width: 150px;
border: 2px solid black;
margin: 1%;
padding: 0.5%;
text-align: center;
vertical-align: middle;
position: relative;
cursor: pointer;
float: left;
}
.index-link > .index-link-perms::before {
content: " | "
}
<div class="index-links">
<br>
<div class="index-link" data-color="black" data-x-index="1" data-y-index="1">Link 1<span class="index-link-perms">Access: Everyone</span>
</div>
<br>
<div class="index-link" data-color="pink" data-x-index="2" data-y-index="1">Link 2<span class="index-link-perms">Access: SM</span>
</div>
</div>
Remove the br tag between the divs.
<div class="index-links">
<br>
<div class="index-link" data-color="black" data-x-index="1" data-y-index="1">Link 1<span class="index-link-perms">Access: Everyone</span>
</div>
<div class="index-link" data-color="pink" data-x-index="2" data-y-index="1">Link 2<span class="index-link-perms">Access: SM</span>
</div>
</div>
change the CSS as below
.index-links {
display:flex;
width: 90%;
position: relative;
left: 5%;
padding: 1%;
}
I've got a problem with my HW. I cant align 2 elements on the left side https://jsfiddle.net/tkjxLfjy/ This is the code and i tried things like float:left but didn't work... So can you help me to put the meter and the text under the picture (the black sqare)?
According to w3school:
Elements after a floating element will flow around it. To avoid this,
use the clear property.
Add Clear:both to the div. The image has float:left so the next elements sit behind that.
Jsfiddle
figure div
{
clear: both;
}
You can remove float:left and add display: block to the image
Basically display: block reserve the whole line for the element, so that no other element set beside it, unless it's positioned.
Here is a fiddle
You should try like like this-
.clr{
clear:both
}
body {
font-family: serif;
height:100%;
width: 100%;
}
#container {
width: 650px;
border-radius: 10px;
height: 280px;
background-color: pink;
}
.header {
text-align: center;
position:relative;
top: 15px;
}
/* Figure one */
figure{
float: left;
}
img {
width: 150px;
height: 150px;
background: black;
}
meter {
width: 90px;
}
.meter-col{
float: left;
}
<div id="container">
<div class="header">
<h2>Profile</h2>
</div>
<figure>
<figcaption>User: Kent</figcaption>
<img src="avatar.png" />
</figure>
<div class="meter-col">
<div>Profile completed: 60%</div>
<meter value="60" min="0" max="100">2 out of 10</meter>
</div>
<div class="clr"></div>
</div>
May it will helps you.
<div id="container">
<div class="header">
<h2>Profile</h2>
</div>
<figure>
<figcaption>User: Kent</figcaption>
<img src="avatar.png" />
<div>
Profile completed: 60%
<meter value="60" min="0" max="100">2 out of 10</meter>
</div>
</figure>
</div>
No need of other changing 'cause the tag has a default "block" behavior.
I changed a few things around. I also updated a few things to HTML5 (preferred). I changed everything to display block and changed the div that all of that lives in to float: left. JS fiddle link below.
https://jsfiddle.net/tkjxLfjy/6/
HTML:
<body>
<div id="container">
<header>
<h2>Profile</h2>
</header>
<figure>
<figcaption>User: Kent</figcaption>
<img src="avatar.png" />
<label for="meter">Profile completed: 60%</label>
<meter name="meter" value="60" min="0" max="100">2 out of 10</meter>
</figure>
</div>
</body>
CSS:
body {
font-family: serif;
height:100%;
width: 100%;
}
#container {
width: 650px;
border-radius: 10px;
height: 280px;
background-color: pink;
float: left;
}
header {
text-align: center;
position:relative;
top: 15px;
}
/* Figure one */
img {
width: 150px;
height: 150px;
background: black;
display: block;
}
meter {
float: left;
width: 90px;
}
I'm building a website, but I have a problem.
I have one div that creates the content with a BG color!
The problem is, the text appears in line to the bottom but I want them next to each other!
Here is a link to a screenshot for an example:
http://www.mupload.nl/img/9x7jco1v45f.png
I've tried some code in my CSS but nothing worked.
This is what I have now:
CSS:
#rechts {
float: right;
margin-right: 10px;
}
#lings {
float: left;
margin-left: 10px;
}
.inhoud {
padding-bottom:100px; /* Height of the footer element */
padding-top:150px;
background-color: #f5f5f5;
z-index: 999;
margin-left: 10%;
margin-right: 10%;
}
HTML:
<div class="inhoud">
<p class="contactInhoudLings">
// Here is the personal info.
<p class="contactInhoudRechts">
// here is the PHP Contact form.
</p>
</div><!-- #inhoud -->
utilize display:inline-block; like below
.container {
background-color: lightgray;
}
.section {
display: inline-block;
vertical-align: top;
width: 49%;
}
<div class="container">
<div class="section">
Some random inforamtion here<br/>
more contact information
</div>
<div class="section right">
Name<br/>
<input type="text" /><br/>
Email<br/>
<input type="text" /><br/>
Phone<br/>
<input type="text" /><br/>
</div>
</div>
For the HTML you provided, simply change your css to
.contactInhoudLings{
float: left;
width: 50%;
}
.contactInhoudRechts{
float: left;
width: 50%;
}
Demo
You could use flex to split the container in two or any other number.
.container {
display: flex;
}
.col {
flex-basis: 0;
flex-grow: 1;
}
<div class="container">
<div class="col">
text
</div>
<div class="col">
your form
<form>
<label for=name>Name:<label/>
<input type=text name=name placeholder=name />
<input type=submit />
</form>
</div>
</div>
If you want margin-left and margin-right than try this:
HTML
<div class="inhoud">
<p class="contactInhoudLings">
// Here is the personal info.
<p class="contactInhoudRechts">
// Here is the PHP Contact form.
</p>
</div><!-- #inhoud -->
CSS
.inhoud{
width: 100%;
}
.contactInhoudLings{
background-color: red;
float: right;
margin-right: 1%;
width:49%;
}
.contactInhoudRechts{
background-color: green;
float: left;
margin-left: 1%;
width:49%;
}
Look also the jsfiddle example
i have a legend for a graph that sometimes is scrollable and sometimes isn't.
Unfortunately when the scrollbar shows up, it pushes all of the elements over to the left a bit. So they don't line up with a total (outside the scrollable area)
Example: http://jsfiddle.net/3sKVR/
A simple answer would be to just set a fixed width, but unfortunately, it has to be responsive.
Also, i can't use custom scrollbars to maintain consistency with the rest of the site and also bring down page-load times.
Any help would be greatly appreciated (with internet points!)
Cut down version of code:
HTML:
<div id="legend_cont">
<div id="legend_list">
<div id="legend">
<div class="legend_row">
<div class="legend_cell">
<div class="legend_colour" style="background-color:#ffb100"></div>
</div>
<div class="legend_cell">Merch G</div>
<div class="legend_cell legend_value">$1423.24</div>
</div>
<div class="legend_row">
<div class="legend_cell">
<div class="legend_colour" style="background-color:#ed5929"></div>
</div>
<div class="legend_cell">Merch L</div>
<div class="legend_cell legend_value">$1351.07</div>
</div>
<div class="legend_row">
<div class="legend_cell">
<div class="legend_colour" style="background-color:#3f9c35"></div>
</div>
<div class="legend_cell">Merch N</div>
<div class="legend_cell legend_value">$1194.90</div>
</div>
<div class="legend_row">
<div class="legend_cell">
<div class="legend_colour" style="background-color:#009bbb"></div>
</div>
<div class="legend_cell">Merch T</div>
<div class="legend_cell legend_value">$1188.14</div>
</div>
</div>
</div>
<div id="legend_total">Total:<span id="legend_total_value">$0.00</span>
</div>
</div>
CSS:
#legend_cont {
height: 100%;
border-left: 2px solid #ADADAD;
width: 40%;
float: right;
}
#legend_list {
height: 169px;
overflow: auto;
margin: 20px 4% 20px 7%;
}
#legend {
display: table;
width: 90%;
}
.legend_row {
display: table-row;
}
.legend_cell {
display: table-cell;
padding: 5px;
vertical-align: middle;
}
.legend_colour {
width: 10px;
height: 20px;
background-color: #c1c1c1;
border-radius: 3px;
}
.legend_value {
text-align: right;
}
#legend_total {
height: 50px;
line-height: 50px;
width: 88%;
border-top: 1px solid;
margin-left: 8%;
}
#legend_total_value {
float: right;
padding-right: 5px;
}
1) Make sure there is always a scroll bar
CSS
#legend_cont {
overflow-y: scroll;
}
2) Use js to grab the variable width of the scrollbar (example here)
3) Set the padding-right in #legend_total_value equal to that variable in jquery.
JS
$('#legend_total_value').css('padding-right', wScroll);
Try applying padding-right to compensate for the size of scrollbar when it's not there and position the total accordingly.
#legend_list {
height: 169px;
overflow: auto;
margin: 20px 4% 20px 7%;
padding-right:15px;
}
Demo