here is the link to the site ( http://pavilioncreative.com/ ) hit refresh if you don't see a fullscreen gif as the background.
Im trying to get the red box to be alway centre no matter what size the screen is at. The problem is that the side menu has a position of fixed so the main content div is stretching fully 100% across the screen, under the side menu.
I think I might be going about it all wrong ?
<html lang="en">
<head>
<title>FirstPage</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/reset.css" >
<link rel="stylesheet" href="css/text.css" >
<link rel="stylesheet" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Lora:400,700' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
</head>
<body>
<div class="wraper">
<ul>
<li class="menu" >
<div class="menu_tab_wrap">
<div class="menu_tab">
<div class="menu_off_wrap">
<div class="menu_off">
<div class="barOne"></div>
<div class="spacer"></div>
<div class="barTwo"></div>
<div class="spacer"></div>
<div class="barThree"></div>
</div>
</div>
</div>
</div>
<div class="menu_tab_wrap_on">
<div class="menu_tab_on">
<div class="menu_on_wrap">
<div class="menu_on">
<div class="cross"></div>
</div>
</div>
</div>
</div>
<div class="logo_wrap">
<div class="logo">
<img src="img/logo.svg">
</div>
</div>
</li>
<section id="menu_out">
<div class="menu_inner_wrap">
<div class="menu_list">
<ul class="menu_ul">
<li class="menu_li"> Home </li>
<span class="in_lable">Back to the home page</span>
<li class="menu_li"> About </li>
<span class="in_lable">Find out more about me</span>
<li class="menu_li"> Portfolio </li>
<span class="in_lable">Take a look at my past work</span>
<li class="menu_li"> Contact Me </li>
<span class="in_lable">Get in contact with me</span>
</ul>
</div>
</div>
</section>
<li class="content">
<div class="content_wrap">
<h1>test</h1>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function () {
var hoverIn = false; //You need this counter to detect whether animate occurs.
$(".menu_tab").hover(function() {
if (hoverIn)return; //if the hover is activated, it stops the function
//I also took the liberty to help you add stop to prevent multiple hover. Feel free to implement that else where
$(".barOne").stop(true, true).animate({
"bottom": "+=5px"
}, "fast");
$(".barThree").stop(true, true).animate({
"top": "+=5px"
}, "fast");
hoverIn = true;
}, function() {
if (!hoverIn)return; //if the hover is deactivated, it stops this function
$(".barOne").stop(true, true).animate({
"bottom": "-=5px"
}, 300);
$(".barThree").stop(true, true).animate({
"top": "-=5px"
}, 300);
hoverIn = false;
});
});
$(document).ready(function () {
if($(window).width() > 700) {
$(".menu_tab").click(function(){
$("#menu_out").animate({"width": "30em"}, "slow");
$(".menu_tab_wrap_on").stop().fadeIn();
$(".menu_list").stop().delay( 400 ).fadeIn('slow');
});
}else{
$(".menu_tab").click(function(){
$("#menu_out").animate({"width": "100%"}, "slow");
$(".menu_tab_wrap_on").stop().fadeIn();
$(".menu_list").stop().delay( 400 ).fadeIn('slow');
});
}
});
$(document).ready(function () {
$(".menu_tab_wrap_on").click(function(){
$(".menu_tab_wrap_on").stop().hide('fast');
$("#menu_out").animate({"width": "0em"}, "slow");
$(".menu_list").stop().hide();
});
});
</script>
</body>
</html>
html{
-webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape */
}
.wraper{
width: 100%;
margin: auto;
padding: 0;
}
.wraper ul{
width: 100%;
margin: 0 auto;
padding: 0;
}
.wraper ul li{
padding: 0;
margin: 0 auto;
display: inline-block;
}
.wraper ul .menu{
width: 7%;
min-width: 7em;
max-width: 7em;
background: black;
height: 100%;
position: fixed;
z-index: 20;
float: left;
}
.wraper ul .content{
background-color: blue;
width: 93%;
height: 70em;
float: right;
}
.wraper ul .content .content_wrap{
width: 80%;
margin: auto;
text-align: center;
border: red solid 1px;
}
.menu .menu_tab_wrap{
position: relative;
}
.menu .menu_tab{
width: 100%;
background-color: #232323;
height: 6em;
display: table;
position: absolute;
width: 100%;
cursor: pointer;
}
.menu .menu_tab .menu_off_wrap {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
.menu .menu_tab .menu_off_wrap .menu_off{
margin-left: auto;
margin-right: auto;
position: relative;
}
.menu .menu_tab .menu_off_wrap .menu_off .barOne,.barTwo,.barThree{
width: 3em;
padding: 2px;
background-color: white;
margin: auto;
position: relative;
}
.menu .menu_tab .menu_off_wrap .menu_off .spacer{
width: 5em;
height: 5px;
}
.menu .menu_tab_wrap_on{
position: relative;
display: none;
}
.menu .menu_tab_wrap_on .menu_tab_on{
width: 100%;
background-color: white;
height: 6em;
display: table;
position: absolute;
width: 100%;
cursor: pointer;
}
.menu .menu_tab_wrap_on .menu_tab_on .menu_on_wrap {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
.menu .menu_tab_on .menu_on_wrap .menu_on{
margin-left: auto;
margin-right: auto;
position: relative;
text-align: center;
}
.menu .menu_tab_on .menu_on_wrap .menu_on .cross{
width: 3em;
height: 3em;
color: #232323;
margin: auto;
position: relative;
}
.cross:before, .cross:after {
position: absolute;
content: ' ';
height: 3em;
width: 4px;
background-color: #333;
}
.cross:before {
transform: rotate(45deg);
}
.cross:after {
transform: rotate(-45deg);
}
.menu .logo_wrap{
width: 100%;
text-align: center;
}
.menu .logo_wrap .logo{
width: 7em;
margin: auto;
position:absolute;
bottom:0;
padding-bottom: 2em;
}
.menu .logo_wrap .logo img{
width: 70%;
height: auto;
}
#menu_out{
background-color: #232323;
height: 100%;
width: 0em;
position: fixed;
z-index: -1;
overflow-y:scroll;
overflow-x:hidden;
border-right: 0.5em black solid;
z-index: 10;
}
#menu_out .menu_inner_wrap{
position: relative;
}
#menu_out .menu_list{
width: 70%;
height: auto;
margin: auto;
padding-top: 5em;
padding-bottom: 0em;
display: none;
position: relative;
}
#menu_out .menu_list .menu_ul{
padding: 0;
margin: 0 auto;
width: 100%;
padding-left: 4em;
padding-bottom: 2em;
}
#menu_out .menu_list .menu_ul .menu_li{
display: block;
padding: 0;
margin: 0 auto;
}
#menu_out .menu_list .menu_ul .menu_li a{
font-size: 40px;
color: white;
text-decoration: none;
font-family: 'Lora', serif;
font-weight: 700;
opacity: 0.8;
}
#menu_out .menu_list .menu_ul .menu_li a:hover{
opacity: 1;
}
#menu_out .menu_list .menu_ul .in_lable{
font-size: 15px;
color: #80E577;
font-weight: 100;
font-family: 'Open Sans', sans-serif;
position: relative;
bottom: 10px;;
}
#menu_out .menu_inner_wrap .footer{
width: 100%;
margin: auto;
position:absolute;
bottom:0;
height: 10em;
}
#media only screen and (max-width: 800px) {
.wraper ul .content{
background-color: blue;
width: 90%;
height: 70em;
float: right;
}
}
#media only screen and (max-width: 700px) {
.wraper ul .content{
background-color: blue;
width: 100%;
height: 70em;
float: none;
}
.wraper ul .menu{
width: 100%;
min-width: none;
max-width: none;
height: 5em;
}
.menu .menu_tab{
height: 100%;
display: table;
position: absolute;
width: 6em;
cursor: pointer;
right: 0;
}
.menu .logo_wrap{
width: 100%;
text-align: center;
}
.menu .logo_wrap .logo{
width: 7em;
margin: auto;
position:absolute;
bottom:0;
padding-top: 1em;
padding-bottom: 1em;
}
.menu .menu_tab_wrap_on .menu_tab_on{
width: 6em;
height: 100%;
right: 0;
}
#menu_out .menu_list{
width: 100%;
height: auto;
margin: auto;
padding-top: 8em;
text-align: center;
}
#menu_out .menu_list .menu_ul{
padding: 0;
margin: 0 auto;
width: 100%;
padding-left: 0em;
text-align: center;
}
#menu_out .menu_list .menu_ul .menu_li a{
font-size: 35px;
color: white;
text-decoration: none;
font-family: 'Lora', serif;
font-weight: 700;
}
#menu_out .menu_list .menu_ul .menu_li a .in_lable{
font-size: 10px;
color: #80E577;
font-family: 'Open Sans', sans-serif;
font-weight: 100;
}
#menu_out{
width: 0;
border-right: none;
}
}
Looking at your CSS, I see this:
#content_wrap .content {
max-width: 1050px;
width: 80%;
margin: auto;
height: 700em;
border: red solid 1px;
margin-right: 7%;
margin-left: 13%;
}
If you remove margin left and margin right, does it accomplish what you're after?
Example:
#content_wrap .content {
max-width: 1050px;
width: 80%;
margin: auto;
height: 700em;
border: red solid 1px;
}
(When you remove margin-left and margin-right, margin: auto will then apply auto to margin top, right, bottom, and left.)
UPDATE 2/25/2016:
After following the steps above, you're most of the way there. However, if you want the content to change it's position (or re-center itself) as the menu expands out from the left side, it'll require a little more CSS and some JavaScript to add and remove a class. Note: The above CSS changes are necessary for this to work.
#content_wrap{
//This should be the exact same with as the menu when it's not expanded out
padding-left: 7em;
//Set this to the same amount of time it takes for the menu to expand
//This will animate the effect using CSS
transition: 0.5s;
}
#content_wrap.menu_showing {
//This should be the exact same with as the menu when it's expanded out
padding-left: 30em
}
Now just toggle that class on and off with JavaScript as you click the "Expand Menu" icon. Here's an example using jQuery:
$(".menu_tab").click(function(){
$("#content_wrap").toggleClass("menu_showing");
});
Related
1 2 I am trying to make the Google Search Page in HTML & CSS. However, when I try to center the Google Logo, the image re-adjusts itself when the device width is changed. I've been stuck in this section for quite a while now, and cannot seem to find any answers to my inquiry. Some assistance would be appreciated.
body {
width: 100%;
max-width: 100%;
background-color: #202124;
overflow: hidden;
}
.navbar {
display: flex;
float: right;
position: relative;
word-spacing: 11px;
padding-top: 13px;
padding-right: 129px;
}
.navbartxt a {
text-decoration: none;
color: white;
font-family: arial, sans-serif;
font-size: 13px;
}
.navbartxt a:hover {
text-decoration: underline;
}
.dots {
width: 16px;
position: absolute;
margin-left: 123px;
margin-top: 1px;
}
.pfp {
position: absolute;
border-radius: 100%;
margin-top: -7px;
margin-left: 163px;
}
.searchbox {
display: flex;
position: absolute;
}
.searchsections {
width: 100%;
max-width: 100%;
display: flex;
position: relative;
}
.Google {
position: absolute;
margin-top: 72px;
margin-left: 240px;
}
<nav>
<div class="navbar">
<div class="navbartxt">
Gmail
Images
</div>
<img class="dots" src="/CSS/CSS Images/9 dots.png" />
<img class="pfp" src="/CSS/CSS Images/MyPfpGoogle.png" />
</div>
</nav>
<section class="searchsections">
<div class="Google">
<img src="/CSS/CSS Images/Google Logo.png" />
</div>
</section>
Just replace your .Google class with this :-
.Google {
display: flex;
justify-content: center; /* for horizontal center */
align-items: center; /* For Vertical Center */
}
.Google > img {
display: block;
}
How it works learn Here
The mobile application has a page that shows a room with a few fix features and several that can be conditionally displayed. The display (portrait mode only) is large enough that scrolling is not required.
Now, I want to have a similar display except that there are several row of controls that affect which items are displayed. The number of controls will vary. All of the images (*.svg) are 360 x 242 pixels.
How can I make all of the images overlap, even when scrolling?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Scroll Room</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="merged_mobile.min.css" media="screen">
</head>
<body>
<div class="content_view">
<!-- Channel Mapping -->
<div class="page">
<div class="page_name">
<p>Room View</p>
</div>
<div class="ul_wrapper">
<ul>
<li>
<button id="height_1" class="nav-side-menu-item">
<span>Option 1</span>
<img src="arrow.png" />
<span></span>
</button>
</li>
<li>
<button id="height_2" class="nav-side-menu-item">
<span>Option 2</span>
<img src="arrow.png" />
<span></span>
</button>
</li>
<li>
<div class="nav-side-menu-item-divider">Divider</div>
</li>
<li>
<button id="option_a" class="nav-side-menu-item">
<span>Alpha</span>
<img src="arrow.png" />
<span></span>
</button>
</li>
<li>
<button id="option_b" class="nav-side-menu-item">
<span>Beta</span>
<img src="arrow.png" />
<span></span>
</button>
</li>
<li>
<div class="nav-side-menu-item-divider">Room Diagram</div>
</li>
<li>
<div class="moving_room">
<img class="room_base_img" src="background.svg" alt="room background">
<img class="room_diagram_img" src="walls_transparent.svg" alt="transparent walls">
<img class="room_diagram_img" src="table.svg" alt="table">
<img class="room_diagram_img" src="couch.svg" alt="couch">
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
merged_mobile.min.css
:root{
--row-height: 67px;
--highlight-color: #077bff;
--tertiary-background-color: #404040;
--primary-font-color: white;
--secondary-font-color: #ccc;
--header-color: #fff;
}
/* Thin */
#font-face {
font-family: "SF Display Thin";
font-display: block;
src: url("../fonts/SF_Pro_Display_Thin.woff2");
}
/* Regular */
#font-face {
font-family: "SF Display Regular";
font-display: block;
src: url("../fonts/SF_Pro_Display_Regular.woff2");
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
min-width: 300px;
}
body{
font-family: 'SF Display Regular', sans-serif;
height: 100%;
background-color: black;
color: white;
padding: 0;
margin: 0;
caret-color: orange;
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none;
}
p {
margin: 0;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
border: none;
outline-style: none;
}
li {
padding: 0;
margin: 0;
}
button {
height: 36px;
width: 100%;
cursor: pointer;
padding: 0;
margin: 0;
font-weight: 200;
}
::-webkit-scrollbar-track
{
background-color: #404040;
}
::-webkit-scrollbar
{
width: 6px;
}
::-webkit-scrollbar-thumb
{
background: dimgray;
}
.content_view {
overflow-x: hidden;
height: 100%;
}
#room_diagram_button{
background-color: red;
}
#room_diagram_button img{
width: 25px;
float: right;
margin-top: 22px;
padding-right: 10px;
}
.room_diagram {
position: relative;
}
.room_base_img {
height: 290px;
position: relative;
width: 100%;
left: 0;
}
.room_diagram_img {
height: 290px;
position: absolute;
width: 100%;
left: 0;
}
.room_diagram_img.speaker {
display: none;
}
.moving_room {
height: 290px;
/*position: absolute;*/
width: 100%;
/*left: 0;*/
}
.nav-side-menu-item {
color: var(--primary-font-color);
font-size: 20px;
height: var(--row-height);
background-color: transparent;
border: none;
}
.nav-side-menu-item span:first-child{
float: left;
height: 100%;
white-space: nowrap;
width: calc(100% - 150px);
text-align: left;
margin-left: 15px;
overflow: hidden;
text-overflow: ellipsis;
line-height: var(--row-height);
}
.nav-side-menu-item span:nth-child(2), .nav-side-menu-item span:nth-child(3) {
font-size: 14px;
padding-right: 10px;
float:right;
width: 90px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
background-color: transparent;
text-align: right;
height: var(--row-height);
line-height: var(--row-height);
}
.nav-side-menu-item img{
width: 22px;
height: 22px;
float: right;
margin-top: 22px;
padding-right: 10px;
}
.nav-side-menu-item-divider {
text-decoration: none;
color: var(--primary-font-color);
font-size: 20px;
text-align: center;
line-height: normal;
background-color: dimgray;
cursor: auto;
padding-top: 5px;
padding-bottom: 5px;
}
.page {
width: 100%;
height: 100%;
position: absolute;
}
.page_name{
position: relative;
background: #404040;
height: 50px;
}
.page_name p{
font-size: 24px;
line-height:50px;
height: 50px;
white-space: nowrap;
text-align: center;
min-width: 320px;
}
.back_button img{
width: 30px;
height: 30px;
}
.back_button{
height: 50px;
width: 50px;
position: absolute;
border: none;
outline-style: none;
background-color: var(--header-color);
}
.page_contents{
padding: 15px;
}
.ul_wrapper {
height: -moz-calc(100% - 50px);
height: -webkit-calc(100% - 50px);
height: calc(100% - 50px);
display: block;
overflow: auto;
}
.ul_wrapper li {
line-height: 0;
border-bottom: 1px white solid;
}
I added id attributes so that I could manipulate the controls with jQuery.
<li>
<div id="moving_room">
<img class="room_base_img" id="roombg" src="background.svg" alt="room background">
<img class="room_moveable_img" id="roomwalls" src="walls_transparent.svg" alt="transparent walls">
<img class="room_moveable_img" id="roomt" src="table.svg" alt="table">
<img class="room_moveable_img" id="roomc" src="couch.svg" alt="couch">
</div>
</li>
And some new styles.
.room_base_img {
position: relative;
width: 100%;
height: auto;
}
.room_moveable_img {
height: auto;
position: relative;
width: 100%;
}
I determined the height of the top image and applied it to the images below it.
var imght = $("#roombg").height();
$("#roomwalls").attr("style", "top: _px".stuffus(0 - imght));
$("#roomt").attr("style", "top: _px".stuffus(0 - 2 * imght));
$("#roomc").attr("style", "top: _px".stuffus(0 - 3 * imght));
The last image had to be scrolled 6000px but it works.
Example: https://gyazo.com/8d717ee1a21ed49033deece5a105239d (Photoshop).
Black = Slider, Grey = Image, White = Textarea with changeable background color.
I also want to make this responsive to phone devices and such, but that doesn't work either, if I just take an image that is half's the page widht and a height.
I am trying to align an image to the left and the text exactly in a container next to it with the background of the text changeable. I tried using the properties left: ; Right: ;, margins and paddings but that doesn't work.
The image and text should be underneath the div called A3L_Slogan and A3L_Catchphrase. I hope anyone can point me out in the good direction.
Below you can find a JS fiddle without any of that code in it
body {
width: 100%;
margin: 0;
font-family: 'open sans', sans-serif;
zoom: 1;
overflow-x: hidden;
}
header {
padding: 20px 0;
background-color: #ffffff;
box-shadow: 0 4px 6px rgba(0,0,0,.2);
}
.container {
padding: 0 20px;
margin: 0 auto;
}
.logo-box {
float: left;
margin-right: 20px;
}
.logo-box a {
outline: none;
display: block;
}
.logo-box img {display: block;}
nav {
overflow: hidden;
}
ul {
list-style: none;
margin: 0;
padding: 0px 10px 0px 0px;
float: right;
}
nav li {
display: inline-block;
margin-left: 25px;
height: 70px;
line-height: 70px;
transition: .5s linear;
}
nav a {
text-decoration: none;
display: block;
position: relative;
color: #868686;
text-transform: uppercase;
}
nav a:after {
content: "";
width: 0;
height: 2px;
position: absolute;
left: 0;
bottom: 15px;
background: #868686;
transition: width .5s linear;
}
nav a:hover:after {width: 100%;}
#media screen and (max-width: 660px) {
header {text-align: center;}
.logo-box {
float: none;
display: inline-block;
margin: 0 0 16px 0;
}
ul {float: none;}
nav li:first-of-type {margin-left: 0;}
}
#media screen and (max-width: 550px) {
nav {overflow: visible;}
nav li {
display: block;
margin: 0;
height: 40px;
line-height: 40px;
}
nav li:hover {background: rgba(0,0,0,.1);}
nav a:after {content: none;}
}
.A3L_Slogan, .slideshow{
position: relative;
}
.slideshow{
height: 600px;
}
.fadein img {
width: 100%;
position: absolute;
max-height: 600px;
left:0;
top:0;
}
.A3L_Slogan {
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
}
.slogan_title {
font-size: 46px;
font-weight: 700;
padding: 15px;
text-transform: uppercase;
}
.slogan_catchphrase {
font-size: 30px;
font-weight: 500;
text-transform: uppercase;
}
#media only screen and (max-width: 640px) {
.slideshow{
height: 300px;
}
.fadein img {
width: 100%;
position: absolute;
max-height: 300px;
left:0;
top:0;
}
}
#media only screen and (max-width: 600px) {
.slideshow{
height: 200px;
}
.fadein img {
width: 100%;
position: absolute;
max-height: 200px;
left:0;
top:0;
}
}
#media only screen and (max-width: 480px) {
.logo {
max-width: 270px;
}
}
}
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function () {
$('.fadein img:gt(0)').hide();
setInterval(function () {
$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');
}, 4000);
});
</script>
</head>
<body>
<header>
<div class="container">
<div class="logo-box">
<a href="/">
<img class="logo" src="images/logo.png">
</a>
</div>
<nav>
<ul>
<li>Forums</li>
<li>Rules</li>
<li>Monetization</li>
<li>Sign-up</li>
<li>Staff</li>
</ul>
</nav>
</div>
</header>
<div class="slideshow">
<div class="fadein">
<img src="http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-159465.jpg" alt="">
<img src="http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-160434.png" alt="">
<img src="http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-150988.jpg" alt="">
</div>
</div>
<div class="A3L_Slogan">
<div class="slogan_title">
Hardcore Roleplay Community
</div>
<div class="slogan_catchphrase">
The next level roleplay experience
</div>
</div>
</body>
</html>
Put your image and text in a container such as:
<div class="container-row">
<div class="hero-image">
<img src="http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-159465.jpg" alt="">
</div>
<div class="A3L_Slogan">
<div class="slogan_title">
Hardcore Roleplay Community
</div>
<div class="slogan_catchphrase">
The next level roleplay experience
</div>
</div>
</div>
and you can use flexbox to align the items
.container-row{
display: flex;
}
.container-row .hero-image{
flex: 1;
}
.container-row .A3L_Slogan {
flex: 2;
}
I'm trying to recreate this
My current code is this
The issue is that I want the balance div to stretch as the balance gets bigger, as currently it exceeds its bounds and is shifted underneath, other small issues about appearance are present too!
</style><style type="text/less">
#HeaderHeight: 150px;
#HeaderMargin: #HeaderHeight / 4;
#Color: #ff003c;
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
div.header {
width: 100%;
height: #HeaderHeight;
background: #333;
div.profile-right {
float: right;
img.avatar {
float: right;
margin: #HeaderMargin #HeaderMargin #HeaderMargin 10px;
height: #HeaderHeight / 2;
width: #HeaderHeight / 2;
border-radius: 100%;
}
div.data {
float: right;
display: table;
height: #HeaderHeight;
color: #FFF;
div.container {
display: table-cell;
vertical-align: middle;
span.username {
font-size: 1.2em;
display: block;
}
div.info {
width: 100%;
font-size: 1.2em;
display: block;
i.sign.out.icon {
margin: 0;
font-size: 1.2em;
line-height: 1em;
float: right;
width: 15%;
}
div.balance {
border-width: 10px;
font-size: 1.2em;
border: 2px #Color solid;
border-radius: 10px;
width: 75%;
span.funds {
font-size: 1em;
text-align: left;
margin-left: 4px;
}
i.add.icon {
width: initial !important;
height: initial !important;
font-size: 1em;
float: right;
margin: 1px 5px;
color: #000 !important;
background-color: #Color !important;
padding: 1px !important;
}
}
}
}
}
}
}
div.page-content {
width: 100%;
height: calc(~"100%" - #HeaderHeight);
background: black;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
<div class="header">
<div class="profile-right">
<img src="http://placehold.it/184x184" class="avatar">
<div class="data">
<div class="container">
<span class="username">Username</span>
<div class="info">
<i class="sign out icon"></i>
<div class="balance">
<span class="funds">$<span class="value">4.20</span></span>
<i class="circular inverted add icon"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="page-content"></div>
I think I have managed to achieve what you want using display:table and display:table-cell. The plus icon is set to a fixed width but if the value gets larger it will expand the div.
I have also removed some of the floats and switched them to display:inline-block so they can be aligned vertically. I have changed the HTML very slightly by adding some additional wrappers.
You might want to implement the changes in to your main stylesheet because currently I am just overriding your styles at the bottom of the stylesheet.
https://codepen.io/anon/pen/jwyXMM
You can use display:inline-block; so that your content fits properly in the balance div.
</style><style type="text/less">
#HeaderHeight: 150px;
#HeaderMargin: #HeaderHeight / 4;
#Color: #ff003c;
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
div.header {
width: 100%;
height: #HeaderHeight;
background: #333;
div.profile-right {
float: right;
img.avatar {
float: right;
margin: #HeaderMargin #HeaderMargin #HeaderMargin 10px;
height: #HeaderHeight / 2;
width: #HeaderHeight / 2;
border-radius: 100%;
}
div.data {
float: right;
display: table;
height: #HeaderHeight;
color: #FFF;
div.container {
display: table-cell;
vertical-align: middle;
width:200px;
span.username {
font-size: 1.2em;
display: block;
}
div.info {
width: 100%;
font-size: 1.2em;
display: inline-block;
i.sign.out.icon {
margin: 0;
font-size: 1.2em;
line-height: 1em;
float: right;
width: 15%;
}
div.balance {
border-width: 10px;
font-size: 1.2em;
border: 2px #Color solid;
border-radius: 10px;
width: 100%;
display:inline-block;
span.value{
font-size:1em;
width:70%;
}
span.funds {
font-size: 1em;
text-align: left;
margin-left: 4px;
}
i.add.icon {
width: 25% !important;
height: initial !important;
font-size: 1em;
float:right;
margin: 1px 5px;
color: #000 !important;
background-color: #Color !important;
padding: 1px !important;
}
}
}
}
}
}
}
div.page-content {
width: 100%;
height: calc(~"100%" - #HeaderHeight);
background: black;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
<div class="header">
<div class="profile-right">
<img src="http://placehold.it/184x184" class="avatar">
<div class="data">
<div class="container">
<span class="username">Username</span>
<div class="info">
<div class="balance">
<i class="sign out icon"></i>
<span class="funds">$<span class="value">5333.20</span></span>
<i class="circular inverted add icon"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="page-content"></div>
I have also moved (i.sign.out.icon) sign out icon within the balance div and made width of balance div to 100% so that everything stays on same line and fits properly.
I made a chart with html+css (i really need it to work in all browsers)
its ok but the bars are on the top and i need them to stick to the bottom
i tried vertical-align and tried some other things but neither of them worked
Here is a jsfiddle (if you see it you'll know what i mean)
JsFiddle
Code:
CSS:
.clear {clear:both; line-height: 0; width: 0; height: 0}
#chart {
width: 100%;
height: 220px;
font-family: Arial,sans-serif;
font-size: 12px;
line-height: 17px;
color: #777777;
}
#scale, #chartwrap, #description {
float: left;
margin-right: 7px;
}
#scale {
margin-top: -7px;
}
#scale i {
display: block;
text-align: right;
}
#chartbox {
height: 170px;
display: inline-block;
border: 2px solid #C7C7C7;
border-right: 0;
border-top: 0;
}
.thisday {
display: inline-block;
height: 170px;
margin: 0 18px;
width: 40px;
vertical-align: bottom;
}
.vbottom {
display: block;
}
.thisday .in, .thisday .out {
width: 18px;
display: inline-block;
vertical-align: bottom;
}
.thisday .in span, .thisday .out span {
text-align: center;
font-size: 11px;
color: #2F6D91;
display: block;
}
div.inbar, div.outbar {
width: 18px;
float: left;
background: #41799F;
}
div.outbar {
background: #A5D2F0;
}
div#days {
margin-top: 5px;
}
div#days i {
font-size: 11px;
float: left;
width: 36px;
margin: 0 18px;
}
#description {
margin-left: 7px;
}
#outdes {
margin-top: 1px;
}
#indes i, #outdes i {
float: left;
display: inline-block;
width: 12px;
height: 12px;
background: #40779D;
}
#outdes i {
background: #A5D2F0;
}
#indes span, #outdes span {
float: left;
margin-left: 3px;
line-height: 12px;
font-size: 11px;
}
HTML:
<div id="chart">
<div id="scale">
<i>500</i>
<i>450</i>
<i>400</i>
<i>350</i>
<i>300</i>
<i>250</i>
<i>200</i>
<i>150</i>
<i>100</i>
<i>50</i>
<i>0</i>
</div>
<div id="chartwrap">
<div id="chartbox">
<!-- DAILY -->
<div class="thisday">
<div class="vbottom">
<div class="in">
<span>50</span>
<div class="inbar" style="height:20px;"></div>
</div><div class="out">
<span>10</span>
<div class="outbar" style="height:5px;"></div>
</div>
</div>
</div>
<!-- /DAILY -->
<!-- DAILY -->
<div class="thisday">
<div class="vbottom">
<div class="in">
<span>50</span>
<div class="inbar" style="height:20px;"></div>
</div><div class="out">
<span>10</span>
<div class="outbar" style="height:5px;"></div>
</div>
</div>
</div>
<!-- /DAILY -->
<br class="clear">
</div>
<div id="days">
<i>02-17</i>
<i>02-18</i>
<br class="clear">
</div>
</div>
<div id="description">
<div id="indes"><i></i><span>Received</span><br class="clear"></div>
<div id="outdes"><i></i><span>Sent</span><br class="clear"></div>
</div>
<br class="clear">
</div>
here is your new CSS code :
.clear {clear:both; line-height: 0; width: 0; height: 0}
#chart {
width: 100%;
height: 220px;
font-family: Arial,sans-serif;
font-size: 12px;
line-height: 17px;
color: #777777;
}
#scale, #chartwrap, #description {
float: left;
margin-right: 7px;
}
#scale {
margin-top: -7px;
}
#scale i {
display: block;
text-align: right;
}
#chartbox {
height: 170px;
display: inline-block;
border: 2px solid #C7C7C7;
border-right: 0;
border-top: 0;
}
.thisday {
display: inline-block;
height: 170px;
margin: 0 18px;
width: 40px;
vertical-align: bottom;
position: relative;
}
.vbottom {
display: block;
position: absolute;
bottom:0px;
}
.thisday .in, .thisday .out {
width: 18px;
display: inline-block;
vertical-align: bottom;
}
.thisday .in span, .thisday .out span {
text-align: center;
font-size: 11px;
color: #2F6D91;
display: block;
}
div.inbar, div.outbar {
width: 18px;
float: left;
background: #41799F;
}
div.outbar {
background: #A5D2F0;
}
div#days {
margin-top: 5px;
}
div#days i {
font-size: 11px;
float: left;
width: 36px;
margin: 0 18px;
}
#description {
margin-left: 7px;
}
#outdes {
margin-top: 1px;
}
#indes i, #outdes i {
float: left;
display: inline-block;
width: 12px;
height: 12px;
background: #40779D;
}
#outdes i {
background: #A5D2F0;
}
#indes span, #outdes span {
float: left;
margin-left: 3px;
line-height: 12px;
font-size: 11px;
}
To sum up, I just added position: relative; to the end of .thisday, and I also added position: absolute; and then bottom:0px; to .vbottom.
Also, this method will still work if one day you enlarge your graphic. It will stick to the bottom of your graph and you will not have to reajust from top. If you want the bars to go a pixel more or less from the bottom, just do bottom:-1px; or bottom:1px; instead of 0px and it will be readjusted !
This will make the bars always align along the bottom of the chart. It's a nice solution as long as you don't need to support earlier versions of IE than 8.
.thisday {
display: inline-table;
height: 170px;
margin: 0 18px;
width: 40px;
}
.vbottom {
display: table-cell;
vertical-align: bottom
}
.thisday is the container and has been given display: inline-table, and the area supposed to be in the bottom has display: table-cell and vertical-align: bottom.
EDIT: since .vbottom is not absolutely positioned, width on .thisday can be left out altogether, in case you might want to add more bars per day or so. That's one clear advantage of this method.
Forked fiddle: http://jsfiddle.net/7VvZA/1/
Add position relative for chartbox class:
position: relative;
and position absolute for vbottom class:
position: absolute;
bottom: 0;
UPDATE (I work in devtools and don't save changes here is updated version):
http://jsfiddle.net/QzHzT/2/