I'm playing with CSS divs as a chart and I'm trying to make a stacked chart where the div equals 100% of the width of a div and the left portion of the bar is one color and the other portion of the bar is another. Right now I have:
.chart div {
font: 25px sans-serif;
background-color: #2c3e50;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
<div class="chart">
<div style="width: 49.81%;">1, $4,980,777</div>
<div style="width: 41.10%;">2, $4,109,778</div>
</div>
Here is the https://jsfiddle.net/j63grq88/
Try adding display: inline-block; to both divs
TRY THIS:
.chart{
overflow-x:hidden;
}
.chart div {
font: 25px sans-serif;
background-color: #2c3e50;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
position: relative;
}
.chart div:after{
content: '';
position: absolute;
top:0;
left:0;
width: 300%;
height: 100%;
background: red;
z-index: -1;
}
<div class="chart">
<div style="width: 49.81%;">1, $4,980,777</div>
<div style="width: 41.10%;">2, $4,109,778</div>
</div>
Related
I have a problem with a to fixed divs in the right and left bottom corner. On a desktop they look good, the divs are in the corner. However, when on mobile, the divs are fixed and overlap the rest of the content. I tried a margin-bottom but that didn't fix the problem.
What I want is that the two info divs are fixed but when you are on mobile that there is a gap between the info divs and the div class="wrap".
Here's my html
<div class="wrap">
<h1 class="titel">Media Media B.V.</h1>
</div>
<div class="info container">
<div class="row">
<div class="address col-md-6">
<p><strong>Media Media B.V.</strong><br/>
Vriendsgracht 77<br/>
2542AH Utrecht<br/>
The Netherlands</p>
<p><abbr title="Phone">Skype:</abbr> john.doe<br/>
info#media.nl</p>
</div>
<div class="vat col-md-6">
<p><abbr title="Chamber of Commerce">CoC:</abbr> 4444444<br/>
<abbr title="Value Added Tax">VAT:</abbr> NL444444444</p>
</div>
</div>
</div>
This is the css i used
body {
background-color: #1A4C62;
height: 100%;
}
.wrap {
background-color: blue;
margin-bottom: 7.5%;
position: relative;
}
.titel {
color: #fff;
font-family: 'Lato', sans-serif;
text-align: center;
padding-top: 7.5%;
}
.titel2 {
color: #fff;
font-family: 'Lato', sans-serif;
text-align: center;
}
.logo {
margin: 0 auto;
}
.ondertitel {
color: #fff;
font-family: 'Lato', sans-serif;
text-align: center;
}
.info {
color: #fff;
font-family: 'Lato', sans-serif;
}
div.info {
width: 100%;
}
div.info div p {
margin: 2px 0px 5px 0px;
}
div.info div strong {
display: inline-block;
font-size: 13px;
}
div.info .address {
position: fixed;
bottom: 0;
left: 0;
width: 150px;
padding: 10px 25px 10px 15px;
border: 1px solid #fff;
}
div.info .vat {
position: fixed;
bottom: 0;
right: 0;
width: 150px;
padding: 10px 15px 10px 25px;
border: 1px solid #fff;
}
You use only col-md rules, set col-sm and col-xs attributes to your HTML and it should solve the problem for mobiles
I'm trying to get a vertical bar graph made in css, so it appears to look like this:
But it's flipped upside down with my code. How can the CSS elements be aligned from the bottom?
HTML:
<div id="skill">
<div><span class="bar nrml"></span>
<span class="bar moderate"></span><span class="bar severe"></span>
</div>
CSS:
#skill {
font: 12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
height: 200px;
position: relative;
padding: 0px 0;
}
#skill div {
margin-bottom: 0px;
background: #e9e5e2;
width: 1em;
border-radius: 10px;
height: 200px;
}
.bar {
width: 1em;
height: 200px;
margin: 1px 2px;
position: absolute;
border-radius: 10px;
}
.severe {
height: 25%;
background-color: #f674a4;
}
.moderate {
height: 50%;
background-color: #f0bb4b;
}
.nrml {
height: 100%;
background-color: #a1ce5b;
}
JSFiddle
You have to just add bottom:0; to the class .severe. Here a new updated fiddle: https://jsfiddle.net/sebastianbrosch/yoqhkpwh/2/
Just wanna ask for your help regarding my markup, I am trying to do exactly the same like this image:
http://prntscr.com/6wrpr3
Here's my markup:
<div id="two-box">
<div class="wrapper clearfix">
<div class="column blue">
<div id="circle">
<div id="content">
<h2>PARALLAX</h2>
<h1>Text</h1>
<h2>ARE COOL!</h2>
</div>
</div>
</div>
<div class="column red">
<div id="circle-red">
<h2>LET IT</h2>
<h1>Fade</h1>
<h2>RIGHT NOW!</h2>
</div>
</div>
</div>
</div>
<div id="carport">
<div class="wrapper clearfix">
<div id="starynight"></div>
<div id="car"></div>
<div id="road"></div>
</div>
</div>
ANd now for my CSS:
.wrapper {
width: 90%;
margin: 0 auto;
max-width: 1140px;
}
.two-box{
width: 100%;
}
.column{
width: 50%;
position: relative;
padding: 40px 0;
}
.blue{
background-color: #3498db;
float: left;
}
.red{
background-color: #e74c3c;
float: right;
}
#content{
margin-top: 150px;
}
.column h2{
color: #fff;
font-family: 'Lato', sans-serif;
font-size: 3.5em;
font-weight: 300;
line-height: 1em;
text-align: center;
margin: 0;
}
.column h1{
color: #fff;
font-family: 'Pacifico', sans-serif;
font-size: 4.2em;
line-height: 0em;
text-align: center;
border-top: 4px solid #fff;
border-bottom: 4px solid #fff;
padding: 40px;
margin: 0;
}
#circle{
background-color: #3aa3e9;
border-radius: 50%;
width: 450px;
height: 450px;
margin: 0 auto;
}
#circle-red{
background-color: #f25a4a;
border-radius: 50%;
width: 450px;
height: 450px;
margin: 0 auto;
}
#road{
background: url('http://arubacontests.com/wp-content/uploads/2015/04/road.jpg') no-repeat center;
width: 1020px;
height: 145px;
display: block;
}
#car{
background: url('http://arubacontests.com/wp-content/uploads/2015/04/car.png') no-repeat center;
width: 325px;
height: 125;
display: block;
position: absolute;
z-index: 9999;
}
#starynight{
background: url('http://arubacontests.com/wp-content/uploads/2015/04/starynight.jpg') no-repeat center;
width: 1012px;
height: 768px;
display: block;
}
Here's the Codepen:
Let me know if there are things on my markup and CSS that i need to fix or show me the actual codepen. Thanks!
Note: The main issue here is the positioning of elements. Let's say I want the text and circle to be align together and not have a padding. Similar thing with the background and the car image they wont just align at all.
Something like this?
http://jsfiddle.net/4kk1fyjg/
I basically set the background-position to cover, fixed the car height (missing px at the end) and set the wrapper position to relative so that the car should be absolute positioned according to the container.
let me know if this works as expected.
Not sure about the car position, but you can adjust the position changing the right or left property
EDIT
Here you are:
http://jsfiddle.net/4kk1fyjg/2/
Just wrap the content inside another div, set the circle position to relative, display as table, the new wrapping div as table-row and the #content as table-cell, then make the table cell vertically align in the middle and that should be it.
You miss <div id="content"> in circle-red.
Remove width from #starnight and add background-size: 100% do the same for #road.
To #car change position to relative and add:
float:right;
bottom:100px;
right:150px;
To #content remove margin-top and add padding-top:125px;
And finaly for .column h1 change margin to margin: 0 40px;
hope this work how expected
JSFiddle
I am trying to place a vote counter inside a div called drop-section. I have managed to create the desired effect, which works perfectly in all cases except when I place the thing inside drop-section. When I do that, the arrows are no longer up against the top and bottom of the container. I can't figure out why the up and down arrows would move like that if they have absolute positioning. I've looked at the drop-section css and can't see any reason why it should be doing that.
Here is the html:
<html>
<body>
<div id="wrapper">
<div id="drop-section">
<div id="menu">
<a class="item" href="drop_index.php">Dead Drop</a>
<a class="item" href="add_topic.php">New Post</a>
<a class="item" href="admin/add_cat.php">New Category</a>
<div id="userbar">Hello, dude.</div>
</div> <!--menu-end-->
<!--vote-box-container up and down elements lose
abs position when vote-box-container is
inside drop section-->
</div> <!--drop-section-end-->
<!--vote-box-container works perfectly here outside the drop section-->
<div id="vote-box-container">
<div id = "vote-box">
<div class="up">
<img src="img/up.png">
</div>
<div class="down">
<img src="img/down.png">
</div>
<div id = "votes">0</div>
</div> <!--vote-box-end-->
</div> <!--vote-box-container-end-->
</div> <!--wrapper-end-->
</body>
</html>
Here is the CSS file:
#wrapper {
width: auto;
}
#menu {
clear: both;
width:88%;
margin: 0 auto;
height:20px;
background: none;
text-align: left;
font-size: .9em;
padding-bottom: 2%;
}
#menu a:hover {
background: #930c0c;
padding: 7px;
color: #fff;
}
.item {
color: #fff;
background-color: #000;
font-family: 'Play', sans-serif;
margin: 7px;
padding: 7px;
text-decoration: none;
}
#userbar {
float: right;
}
#drop-section {
background-image: url(../img/wrapper-bg.png);
background-repeat: repeat-x repeat-y;
border-style: solid;
border-width: 2px;
border-color: #222;
box-shadow: 10px 10px 5px #000;
width: auto;
line-height: 40px;
padding: 10px 25px;
margin-bottom: 1%;
font-family: sans-serif;
overflow: auto;
}
#vote-box-container {
height: 80px;
width: 50px;
float: left;
background: #000;
margin-left: 5px;
position: relative;
}
#vote-box {
height: 80px;
width: 30px;
position: absolute;
left: 10px;
display: table;
padding: 0;
}
#votes {
color: white;
display: table-cell;
vertical-align: middle;
font-weight: bold;
text-align: center;
}
.up {
position: absolute;
top: 0px;
}
.down {
position: absolute;
bottom: 0px;
}
The line-height in your #drop-section css is adding space above and below the arrow images. Try adding line-height:0 to the image containers .up and .down within #drop-section
I need to present a header menu with 3 elements:
one is left aligned
one is centered
one is right aligned
I would like a gray background for this menu.
The problem: if I have links in my left or right elements and it is not clickable because of the centered element.
How to prevent this problem? or another way of having this kind of menu?
Any idea is highly appreciated.
jsFiddle: http://jsfiddle.net/sxmf0Lve/
<div class="headerContainer">
<div class="headerLeft">
Left
</div>
<div class="headerTitle">Middle</div>
<div class="headerRight">
Right
</div>
</div>
.headerContainer {
padding-top: 10px;
padding-left: 0px;
padding-right: 5px;
max-width: 100%;
height: 30px;
background-color: #fcfcfc;
border-bottom: 1px solid #f6f6f6;
}
.headerTitle {
position: absolute;
/* z-index: -1; */
top: 10px;
width: 100%;
margin: auto;
text-align: center;
font-size: x-large;
font-weight: bold;
}
.headerLeft {
float: left;
}
.headerRight {
float: right;
}
Updated fiddle: http://jsfiddle.net/7mo7hyza/
Your z-index idea is good, but you didn't perform it well: z-index only works between elements that are both not in the normal workflow of the document (they have position: absolute/relative/..)
So you simply have to position your left/right containers with position: absolute instead of float, and make the big container relative so that you can position the other containers relatively to that one.
.headerContainer {
position: relative;
} .headerTitle {
z-index: 0;
} .headerLeft {
position: absolute;
left: 0;
z-index: 1;
} .headerRight {
position: absolute;
right: 0;
z-index: 1;
}
Make the left and right position relative and give them a higher z-index.
.headerContainer {
padding-top: 10px;
padding-left: 0px;
padding-right: 5px;
max-width: 100%;
height: 30px;
background-color: #fcfcfc;
border-bottom: 1px solid #f6f6f6;
}
.headerTitle {
position: absolute;
/* z-index: -1; */
top: 10px;
width: 100%;
margin: auto;
text-align: center;
font-size: x-large;
font-weight: bold;
}
.headerLeft,
.headerRight {
position: relative;
z-index: 2;
}
.headerLeft {
float: left;
}
.headerRight {
float: right;
}
<div class="headerContainer">
<div class="headerLeft">
Left
</div>
<div class="headerTitle">Middle</div>
<div class="headerRight">
Right
</div>
</div>
Try to avoid using float-ing elements or messing with the z-index. There are two more appropriate methods for what you're trying to achieve:
Method 1: CSS box model
.headerContainer {
padding-top: 10px;
padding-left: 0px;
padding-right: 5px;
max-width: 100%;
height: 30px;
background-color: #fcfcfc;
border-bottom: 1px solid #f6f6f6;
display: flex;
flex-wrap: nowrap;
}
.headerLeft,
.headerTitle,
.headerRight {
display: inline-block;
}
.headerLeft,a
.headerRight {
flex-grow: 0;
}
.headerTitle {
flex-grow: 1;
text-align: center;
font-size: x-large;
font-weight: bold;
}
<div class="headerContainer">
<div class="headerLeft">
Left
</div>
<div class="headerTitle">Middle</div>
<div class="headerRight">
Right
</div>
</div>
See JsFiddle
Method 2: Table layout
.row {
display: table-row;
width: 100%;
background-color: #eee;
}
.cell {
display: table-cell;
}
.middle {
width: 100%;
text-align: center;
}
<div class="headerContainer row">
<div class="cell">
Left
</div>
<div class="cell middle">
<h1>Middle</h1>
</div>
<div class="cell">
Right
</div>
</div>
See JsFiddle