I wanted to make my text to make my text lower to make it to the center of the <div> tag. But I tried to use margin-top to make it lower a little bit but it just can't work. This is my code.
.loremipsum {
background-color: white;
height: 1060px;
}
.content {
font-family: 'Lato';
text-align: center;
}
h3 {
font-size: 75px;
}
.h3 {
border: 2px black solid;
width: 750px;
margin: auto;
margin-top: 100px;
}
<div class="loremipsum" id="loremipsum" >
<div class="h3">
<h3 class="content" >Why Choose Us?</h3>
</div>
<p class="content">We create the best front-end design.Each template cost only $5.</p>
</div>
I recommend you to look up a lot of web based tutorials before you go any further, as web based development is vast (esp for a complete beginner)
I've created a quick demo of margin and padding examples below, (I would post as a comment, although for demonstration purposes, this might be better)
html{background:gray;}
div {
height: 20px;
border: 1px solid black;
}
.right {
margin-right: 100px;
}
.left {
margin-left: 100px;
}
.top {
margin-top: 100px;
}
.bottom {
margin-bottom: 100px;
}
.left-padded{
padding-left:100px;
}
.right-padded{
padding-right:100px;
}
.top-padded{
padding-top:100px;
}
.bottom-padded{
padding-bottom:100px;
}
<div class="normal">I'm normal</div>
<div class="right">I'm margin-right</div>
<div class="left">I'm margin-left</div>
<div class="top">I'm margin-top</div>
<div class="bottom">I'm margin-bottom</div>
<div class="left-padded">I'm padded-left</div>
<div class="right-padded">I'm padded-right</div>
<div class="top-padded">I'm padded-top</div>
<div class="bottom-padded">I'm padded-bottom</div>
You can set property to important. so it will give priority
` .h3 {
border: 2px black solid;
width: 750px;
margin:auto;
margin-top:100px;
}
h3.content{padding:25px} `
Check it on fiddle : [http://jsfiddle.net/515zttfr/][1]
Related
I have a series of CSS-styled boxes. Each box has a heading, followed by a number in a paragraph tag. Some of the headings are 2 lines, and in this case, the number shows up right where I want it: centered in the bottom part of the box. Where the heading is only 1 line, the number floats up higher than I'd like. How can I get the number to be in the center of the white space? What's going on here?
Code here: https://jsfiddle.net/snp3gvke/
<div class="sm red left-margin"><h2>Website<br/>Visitors</h2><p>120,363</p> </div>
Try adding vertical-align:middle; and line-height
This is the hacky solution, but you can solve your problem by adding two line breaks to your headings. That's essentially the problem - when your heading only takes one line, it doesn't push the number down as far into the white part of the div.
p {
font-weight: bold;
font-size: 2em;
text-align: center;
position:absolute;
bottom: 5%;
width: 100%;
}
I was able to do it by using flexbox. I had to make some changes to your CSS to override the colors coming from langsdale-dashboard.css file.
I went ahead and made your CSS a little bit more efficient also. I made changes only on the CSS to make things work. Here's what I did:
Applied the colors to the h2 instead of the parent container.
Removed the height from the parent containers and set the heights to the h2 and p instead.
Applied display:flex; justify-content:center; and align-items:center to both the h2 and the p.
I'm including the code below. You can also view it on JSFiddle: https://jsfiddle.net/m0nk3y/snp3gvke/11/
Let me know if you have any questions.
.lg,.med,.sm {
border-radius: 15px;
border-style: solid;
border-width: 1px;
position: relative;
}
.lg {
width: 700px;
}
.med {
width: 500px;
display: inline-block;
}
.sm {
width: 175px;
display: inline-block
}
.sm, .med, .lg {
vertical-align: top;
}
.left-margin {
margin-left: 15px;
}
.row {
margin-bottom: 10px;
}
h2,
p {
display: flex;
margin: 0;
text-align: center;
justify-content: center;
align-items: center;
}
h2 {
height: 75px;
border-radius: 12px 12px 0 0;
}
p {
height: 100px;
font-weight: bold;
font-size: 2em;
}
.blue, .red, .green, .orange {
background: transparent;
}
.blue {
border-color: #41B6E6;
}
.blue h2 {
background: #41B6E6;
}
.red {
border-color: #ce2029;
}
.red h2 {
background: #ce2029;
}
.green {
border-color: #C4D600;
}
.green h2 {
background: #C4D600;
}
.orange {
border-color: #E35205;
}
.orange h2 {
background: #E35205;
}
<link href="https://langsdale.ubalt.edu/zz-test/langsdale-dashboard.css" rel="stylesheet"/>
<body>
<div class="row">
<div class="lg blue">
<h2>Walk-in Visitors</h2>
<p>109,328</p>
</div>
</div>
<div class="row">
<div class="med red">
<h2>Special Collections<br/>Flickr Views</h2>
<p>75,985</p>
</div>
<div class="sm green left-margin">
<h2>Questions<br/>Answered</h2>
<p>19,570</p>
</div>
</div>
<div class="row">
<div class="sm blue">
<h2>Materials<br/>Circulated</h2>
<p>375,985</p>
</div>
<div class="med orange left-margin">
<h2>Instruction Session<br/>Attendees</h2>
<p>2,045</p>
</div>
</div>
<div class="row">
<div class="med green">
<h2>Database Searches</h2>
<p>330,479</p>
</div>
<div class="sm red left-margin">
<h2>Website<br/>Visitors</h2>
<p>120,363</p>
</div>
</div>
<div class="row">
<div class="lg orange">
<h2>Titles Borrowed via ILL</h2>
<p>5,773</p>
</div>
</div>
</body>
Is there a way to achieve the following behavior in css/html :
Please note the green side bar has not to be responsive but I cannot give it a fixed width with
width: XX px;
because it can contain more or less elements, so no idea of XX in advance.
The brown bar has to be responsive and takes all the remaining width.
Thanks in advance for any trick! I have tried tables but with no success as we can't specify a div to restrict its with to what is necessary.
You can achieve that easily with flexbox. Here's the example:
http://codepen.io/anon/pen/JKXXNE
#container {
display:flex;
}
#sidebar, #content {
height: 100px;
}
#sidebar {
background-color: green;
}
#content {
background-color: brown;
flex: 1;
}
You can use Flexbox, and if you set flex: 1 on right div it will take rest of free space and width of left div will still be dynamic.
.parent {
display: flex;
border: 2px solid black;
}
.left {
background: #22B14C;
padding: 10px;
}
.right {
background: #EFE4B0;
padding: 10px;
flex: 1;
}
span {
margin: 0 20px;
}
<div class="parent">
<div class="left"><span>Span</span><span>Span</span></div>
<div class="right">Right</div>
</div>
This can also be done with CSS Table layout you just need to set width: 100% on .right div and it will take rest of free space
.parent {
display: table;
border: 2px solid black;
}
.left {
background: #22B14C;
display: table-cell;
padding: 10px;
}
.right {
background: #EFE4B0;
display: table-cell;
width: 100%;
padding: 10px;
}
span {
margin: 0 20px;
}
<div class="parent">
<div class="left"><span>Span</span><span>Span</span></div>
<div class="right">Right</div>
</div>
For older browsers, use display: table
html, body{
height: 100%;
margin: 0;
}
.tbl{
display:table;
}
.row{
display:table-row;
}
.cell{
display:table-cell;
}
.content{
width: 100%;
}
#left_col {
background: orange none repeat scroll 0 0;
width: 1%;
}
#right_col {
background: green none repeat scroll 0 0;
width: 100%;
}
<div class="tbl content">
<div class="row">
<div id="left_col" class="cell">
wide content <br>
content <br>
wider contentcontent <br>
</div>
<div id="right_col" class="cell"></div>
</div>
</div>
Another way to achieve this without using flexbox can be:
Working Fiddle:
https://jsfiddle.net/y00e5w6m/
(Note i have used sample css and input just to showcase how this can be done. This should be tuned a bit according to requirements)
Sample Output:
Html:
<div style="float:left;width:100%;border:1px solid #000;">
<div id="dynamic-content" style="float:left;background-color:#090;border:1px solid #900">
<div style="float;left;">
Mango
</div>
<div style="float;left;margin-left:5px;">
Banana
</div>
<div style="float;left;margin-left:5px">
Orange
</div>
</div>
<div id="other-content" style="float:left;background-color:#630;border:1px solid #009;">
</div>
</div>
JS:
var items=["mango","grapes","banana"];
var windowWidth = $(window).width();
console.log(windowWidth);
var dynamicContentWidth = $("#dynamic-content").width();
console.log(dynamicContentWidth);
var otherContentWidth = dynamicContentWidth >= windowWidth ? windowWidth : windowWidth-dynamicContentWidth-20;
console.log(otherContentWidth);
$("#other-content").width(otherContentWidth);
$("#other-content").height($("#dynamic-content").height());
So I've been struggling with this for some while and the motive is just to learn but I simply want to center two <h2> titles next to each other. Preferably wrapping them in some sort of a container so that I simply can apply margin: 0 auto; Like:
<div>
<h2>Hello!</h2>
<h2>Hello!</h2>
</div>
Here, check the snippet. You'll get both h2 centered.
.container{
text-align:center;
}
h2{
text-align:left;
display:inline-block;
}
<div class="container">
<h2>Hello!</h2>
<h2>Hello!</h2>
</div>
A little different approach than Xahed, but working just as good
DEMO HERE:
http://jsfiddle.net/s0y9pg0L/
.container {
margin: 0 auto;
width:250px;
border: 1px solid red;
}
.centered-text {
text-align: center;
}
h2 {
display: inline-block;
}
with HTML
<div class="container">
<div class="centered-text">
<h2>Hello!</h2>
<h2>Hello!</h2>
</div>
</div>
This is a little more proof if you're actually gonna use it in a website.
Simplest version I can think of is, very similar to the other ones posted (sorry).
If you do not want to affect all other h2s in the page, give the specific ones a class
h2{
display: inline-block;
}
.wrapper{
text-align: center;
}
<div class="wrapper">
<h2>Hello!</h2>
<h2>Hello!</h2>
</div>
Here, I hope this helps. I think this is what you meant by center two h2 titles next to each other.
#wrapper {
width: 500px;
overflow: hidden;
border: 1px solid black;
margin: 0 auto
}
#title1 {
float:left;
width: 249px;
margin: 0 auto;
text-align: center;
}
#title2 {
overflow: hidden;
width: 249px;
text-align: center;
}
<div id="wrapper">
<div id="title1"><h2>Hello!</h2></div>
<div id="title2"><h2>Hello!</h2></div>
</div>
Is it possible, with CSS, while using a row with two column, one with an image and another with text, to have their content vertically aligned in the middle?
I've been banging my head for days over this and tried everything I could possibly think of.
This is the basic structure that I'm using which is entirely based on percentages. This is for a responsive one-page layout based on a series of sections, each with min-height set to 100%.
CSS
html, body {
width: 100%;
height: 100%;
}
section {
width: 100%;
min-height: 100%;
display:table;
height:inherit;
}
.row {
width: 100%;
height: 100%;
display:table-cell;
}
.col-left, .col-right {
float: left;
width: 50%;
height: 100%;
}
/*--this should be vertically centred--*/
.content {
}
HTML
<section>
<div class="row">
<div class="col-left">
<div class="content">
<h1>SOME TEXT</h1>
</div>
</div>
<div class="col-right">
<div class="content">
<img src="SOME IMAGE URL">
</div>
</div>
</div>
</section>
JSFiddle
.row {
...
display:table-row;
}
.col-left, .col-right {
...
display: table-cell;
vertical-align: middle;
}
Demo
You were 95% of the way there as you laid out the structure using display:table, and display:table-cell, but you floated what should have been display:table-cell, and set table-cell on what should have been table row. Use this instead:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
section {
width: 100%;
min-height: 100%;
display:table;
height:inherit;
}
.row {
width: 100%;
height: 100%;
display:table-row;
}
.col-left, .col-right {
display:table-cell;
width: 50%;
height: 100%;
vertical-align:middle;
}
.col-left {
background: MidnightBlue
}
.col-right {
background: ForestGreen;
text-align: center;
}
.content {
border: 1px dashed red;
}
h1 {
font-family: sans-serif;
color: white;
}
<section>
<div class="row">
<div class="col-left">
<div class="content">
<h1>I should be vertically aligned in the middle...<br><br>And so should the image on the right...
</h1>
</div>
</div>
<div class="col-right">
<div class="content">
<img src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png">
</div>
</div>
</div>
</section>
you can try this:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
section {
width: 100%;
min-height: 100%;
display:table;
height:inherit;
}
.row {
width: 100%;
height: 100%;
display:table;
}
.col-left, .col-right {
float: left;
display:table;
vertical-align:middle;
width: 50%;
height: 100%;
}
.col-left {
background: MidnightBlue
}
.col-right {
background: ForestGreen;
text-align: center;
}
.content {
display:table-cell;
vertical-align:middle;
height:100%;
border: 1px dashed red;
}
h1 {
font-family: sans-serif;
color: white;
}
<section>
<div class="row">
<div class="col-left">
<div class="content">
<h1>I should be vertically aligned in the middle...<br><br>And so should the image on the right...
</h1>
</div>
</div>
<div class="col-right">
<div class="content">
<img src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png">
</div>
</div>
</div>
</section>
For anyone interested in this topic, this issue and the answers provided raised in me another question regarding which method to apply in this situation, and in fact, for building columns in general: Floating or Display property. For any newbie or self-taught wannabe developer like my self may be interesting to know what I've concluded after research and testing.
I find my self often using different methods for building columns that revolve around Floating the elements and in one way or another always require some hacking in the end to do exactly what I want, leaving me with a feeling of inconsistency and unreliability.
One would think that something so vital for layout structure would have at this point in time some obvious, elegant and simple solution. Apparently it has, and it's called Display Table. It might have limitations in some very specific situations but in general it's all you need. It's rock solid and you can pretty much do anything you want with it. Unfortunately, I think the word "table" is still a kind of taboo. This method however is simple, comprehensible, reliable and doesn't require any hacks to behave as expected. Vertical alignment which is always a struggle is also made easy this way.
A simple structure like this is all you need:
.container {
display: table;
}
.row {
display: table-row;
}
.col {
display: table-cell;
}
For some reason (probably because of the nasty word "table"), you wont be able to find this method suggested anywhere with a simple search on basic css columns.
I thought this articles on the subject were interesting:
Give Floats the Flick in CSS Layouts
Farewell Floats: The Future of CSS Layout
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