I am trying to place a button next to an inline-block div with a fixed width. But it goes right under the div. I have tried reducing the width of the container this doesn't work. I'd like to accomplish this without the button of class add being in a separate container. The button should be beside the .input-wrap div
Here's the code:
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
color: rgb(149, 152, 154);
}
.input-block {
margin-bottom: 40px;
}
.input-block>* {
margin-bottom: 20px;
}
.description {
display: block;
font-size: 20px;
}
.radio-container {
display: inline;
margin-right: 30px;
}
.radio-container>input {
margin-right: 10px;
}
[type="radio"]:checked,
[type="radio"]:not(:checked) {
position: absolute;
left: -99999px;
}
[type="radio"]:checked+label,
[type="radio"]:not(:checked)+label {
position: relative;
padding-left: 28px;
cursor: pointer;
line-height: 20px;
display: inline-block;
color: rgb(149, 152, 154);
}
[type="radio"]:checked+label::before,
[type="radio"]:not(:checked)+label::before {
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 18px;
height: 18px;
border: 1px solid rgb(149, 152, 154);
border-radius: 100%;
background: transparent;
}
[type="radio"]:checked+label::after,
[type="radio"]:not(:checked)+label::after {
content: "";
width: 10.6px;
height: 10px;
position: absolute;
top: 5px;
left: 4.5px;
border-radius: 100%;
transition: all 0.2s ease;
background: rgb(149, 152, 154);
}
[type="radio"]:not(:checked)+label::after {
opacity: 0;
transform: scale(0);
}
[type="radio"]:checked+label::after {
opacity: 1;
transform: scale(1);
}
.round-process {
width: 100%;
height: 40px;
border-radius: 15px;
border: 1px solid rgb(149, 152, 154);
text-align: left;
color: darkgray;
font-size: 20px;
outline: none;
padding-left: 15px;
text-transform: capitalize;
background: none;
}
input[type="number"] {}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.input-wrap {
position: relative;
width: 200px;
/* text-align: center;*/
display: inline-block;
}
div.vertical-line {
width: 1px;
height: 40px;
position: absolute;
top: 0px;
left: 150px;
background-color: rgb(149, 152, 154);
}
.text-container {
/* width: 200px;*/
}
.mb {
font-weight: 800;
color: rgb(149, 152, 154);
position: relative;
top: 11.5px;
left: 10px;
}
.add {
border-radius: 50%;
border: none;
width: 20px;
height: 20px;
text-align: center;
color: black;
box-shadow: rgba(0, 0, 0, 0.117647) 0px 5px 30px, rgba(0, 0, 0, 0.2) 0px 1px 10px;
background-color: white;
}
.add:active {
box-shadow: rgba(0, 0, 0, 0.117647) 0px 5px 30px, rgba(0, 0, 0, 0.239216) 0px 0px 0px;
}
.add:focus {
outline: 0px;
}
<html>
<body>
<div class="main">
<div class="input-block">
<div class="description">Total Memory</div>
<div class="text-container">
<div class="input-wrap">
<input class="round-process" maxlength="5" type="number">
<div class="vertical-line" />
<span class="mb">MB</span>
</div>
<button class="add">×</button>
</div>
</div>
</div>
</body>
</html>
You have missing closing tags in your html. When you close those tags the button will align on the right-bottom corner of your div. It worked for me when I closed the divs like this,
<body>
<div class="main">
<div class="input-block">
<div class="description">Total Memory</div>
<div class="text-container">
<div class="input-wrap">
<input class="round-process" maxlength="5" type="number">
<div class="vertical-line" ></div>
<span class="mb">MB</span>
</div>
<button class="add">×</button>
</div>
</div>
</div>
</body>
Hope this helps.
Okay i was able to solve this by removing .text-container . Then i moved the input-wrap width property to .round-process
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
color: rgb(149, 152, 154);
}
.input-block {
margin-bottom: 40px;
}
.input-block > * {
margin-bottom: 20px;
}
.description {
display: block;
font-size: 20px;
}
.radio-container {
display: inline;
margin-right: 30px;
}
.radio-container > input {
margin-right: 10px;
}
[type="radio"]:checked,
[type="radio"]:not(:checked) {
position: absolute;
left: -99999px;
}
[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label {
position: relative;
padding-left: 28px;
cursor: pointer;
line-height: 20px;
display: inline-block;
color: rgb(149, 152, 154);
}
[type="radio"]:checked + label::before,
[type="radio"]:not(:checked) + label::before {
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 18px;
height: 18px;
border: 1px solid rgb(149, 152, 154);
border-radius: 100%;
background: transparent;
}
[type="radio"]:checked + label::after,
[type="radio"]:not(:checked) + label::after {
content: "";
width: 10.6px;
height: 10px;
position: absolute;
top: 5px;
left: 4.5px;
border-radius: 100%;
transition: all 0.2s ease;
background: rgb(149, 152, 154);
}
[type="radio"]:not(:checked) + label::after {
opacity: 0;
transform: scale(0);
}
[type="radio"]:checked + label::after {
opacity: 1;
transform: scale(1);
}
.round-process {
width: 200px;
height: 40px;
border-radius: 15px;
border: 1px solid rgb(149, 152, 154);
text-align: left;
color: darkgray;
font-size: 20px;
outline: none;
padding-left: 15px;
text-transform: capitalize;
background: none;
}
input[type="number"] {}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.input-wrap {
position: relative;
/* width: 200px;*/
/* text-align: center;*/
display: inline-block;
}
.vertical-line {
width: 1px;
height: 40px;
position: absolute;
top: 0px;
left: 150px;
background-color: rgb(149, 152, 154);
}
.mb {
font-weight: 800;
color: rgb(149, 152, 154);
position: relative;
top: 11.5px;
left: 10px;
}
.add {
border-radius: 50%;
border: none;
width: 30px;
height: 30px;
text-align: center;
color: #57C48E;
box-shadow: rgba(0, 0, 0, 0.117647) 0px 5px 30px, rgba(0, 0, 0, 0.2) 0px 1px 10px;
background-color: white;
vertical-align: top;
margin-top: 5px;
margin-left: 20px;
}
<div class="main">
<div class="input-block">
<div class="description">Total Memory</div>
<div class="input-wrap">
<input class="round-process" maxlength="5" type="number">
<div class="vertical-line" />
<span class="mb">MB</span>
</div>
<button class="add">✚</button>
<button class="add disabled">✚</button>
</div>
</div>
Related
At the moment my css looks like this:
But I want the inverse of the green border-radius blocks, I want this:
Any idea how to achieve this with the least amount of extra divs and stuff? Here is my code so far:
.navbar {
background-color: blue;
height: 35px;
}
button {
color: white;
border: none;
// background-color: green;
background-color: transparent;
height: 100%;
padding: 0px 10px;
cursor: pointer;
}
button.selected {
background-color: white;
color: black;
cursor: default;
border-radius: 15px 15px 0px 0px;
position: relative;
height: 30px;
vertical-align: bottom;
}
button:after,
button:before {
background-color: rgb(188, 218, 188);
height: 20px;
width: 20px;
position: absolute;
content: '';
bottom: 0px;
}
button:after {
right: -20px;
border-bottom-left-radius: 15px;
}
button:before {
left: -20px;
border-bottom-right-radius: 15px;
}
<div class="navbar">
<button>tab1</button>
<button>tab2</button>
<button class="selected">tab3</button>
<button>tab4</button>
</div>
One possible solution would be using box-shadow for the before and after.
Also you may consider using pointer-events:none for the pseudo-elements since you don't want to block the other elements on the nav.
Another solution would be using svg for your buttons.
.navbar {
background-color: blue;
height: 35px;
overflow:hidden;
}
button {
color: white;
border: none;
background-color: transparent;
height: 100%;
padding: 0px 10px;
cursor: pointer;
}
button.selected {
background-color: white;
color: black;
cursor: default;
border-radius: 15px 15px 0px 0px;
position: relative;
height: 30px;
vertical-align: bottom;
}
button:after,
button:before {
background-color: transparent;
height: 20px;
width: 20px;
position: absolute;
content: '';
bottom: 0px;
box-shadow: 2px 10px 1px white;
pointer-events:none;
}
button:after{box-shadow: -2px 10px 1px white;}
button:after {
right: -20px;
border-bottom-left-radius: 15px;
}
button:before {
left: -20px;
border-bottom-right-radius: 15px;
}
<div class="navbar">
<button>tab1</button>
<button>tab2</button>
<button class="selected">tab3</button>
<button>tab4</button>
</div>
I think you should add a dic contain content text, like this:
.navbar {
background-color: blue;
height: 35px;
}
.content {
color: white;
border: none;
background-color: blue;
height: 100%;
padding: 10px 10px;
cursor: pointer;
}
button{
background-color: white;
padding: 0px;
border: 0px;
margin-left: -4px;
}
button.selected{
background-color: blue;
}
button.selected .content{
background-color: white;
color: black;
cursor: default;
border-radius: 15px 15px 0px 0px;
position: relative;
vertical-align: bottom;
}
button.before-selected .content{
border-bottom-right-radius: 10px;
}
button.after-selected .content{
border-bottom-left-radius: 10px;
}
<div class="navbar">
<button><div class="content">tab1</div></button>
<button class="before-selected"><div class="content">tab2</div></button>
<button class="selected"><div class="content">tab3</div></button>
<button class="after-selected"><div class="content">tab4</div></button>
</div>
I'd suggest using svg with background-image or using the clip-path property on ::before and ::after.
You have to use SVGs on ::before and ::after of the tab element. Here's an example:
header {
background: gray;
}
nav {
padding-top: 10px;
}
.tab {
background: none;
border: none;
padding: 10px;
width: 100px;
}
.tab.selected {
background: white;
border-radius: 10px 10px 0 0;
position: relative;
}
.tab.selected::before,
.tab.selected::after {
content: '';
bottom: 0;
height: 10px;
position: absolute;
width: 10px;
}
.tab.selected::before {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><path d='M 0 10 L 10 10 L 10 0 Q 10 10 0 10 Z' fill='%23ffffff'></path></svg>");
left: -10px;
}
.tab.selected::after {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><path d='M 0 10 L 10 10 L 10 0 Q 10 10 0 10 Z' fill='%23ffffff'></path></svg>");
right: -10px;
transform: scaleX(-1);
}
<header>
<nav>
<button class="tab">Tab</button>
<button class="tab selected">Tab</button>
<button class="tab">Tab</button>
</nav>
</header>
Codepen link.
You can use the following property to get the inverted image of the green border radius blocks:
transform: rotate(180deg);
So your CSS will be like:
button:after,
button:before {
background-color: rgb(188, 218, 188);
height: 20px;
width: 20px;
position: absolute;
content: '';
bottom: 0px;
transform: rotate(180deg);
}
Or you can use the following and style it better:
.navbar {
background-color: blue;
height: 35px;
}
button {
color: white;
border: none;
// background-color: green;
background-color: transparent;
height: 100%;
padding: 0px 10px;
cursor: pointer;
}
button.selected {
background-color: white;
color: black;
cursor: default;
border-radius: 15px 15px 0px 0px;
position: relative;
height: 30px;
vertical-align: bottom;
}
button:after,
button:before {
background-color: transparent;
height: 20px;
width: 20px;position: absolute;
content: '';
bottom: 0px;
transform: rotate(180deg);
}
button:after {
right: -20px;
border-bottom-left-radius: 15px;
-webkit-box-shadow: inset 0px 6px 5px 0px #000000;
box-shadow: inset 0px 6px 5px 0px #000000;
}
button:before {
left: -20px;
border-bottom-right-radius: 15px;
-webkit-box-shadow: inset 4px 8px 5px -3px #000000;
box-shadow: inset 4px 8px 5px -3px #000000;
}
<div class="navbar">
<button>tab1</button>
<button>tab2</button>
<button class="selected">tab3</button>
<button>tab4</button>
</div>
So I am trying to do conditional rendering and i've narrowed it down to the outside parent <div> tag being the culprit. So, I removed the conditional rendering and am trying to figure out why my card styling is being altered. Below I posted screenshots with and without parent div tag.
return (
<div>
<div className="card" id="chatcard">
<div className="card-body">
<h5 className="card-title">{this.props.user.user}</h5>
<div className="card-text">
<ChatList
user={this.props.user}
socket={this.props.socket}
currentUser={this.props.currentUser}
/>
</div>
</div>
<div className="card-footer">
<small className="text-muted">
<form>
<ChatField
user={this.props.user}
socket={this.props.socket}
chatusers={this.props.index}
/>
</form>
</small>
</div>
</div>
</div>
);
CSS
.chat {
color: white;
}
.chat .dropdown-toggle:after {
content: none;
}
.userbutton {
size: 2px;
}
.card {
color: black;
}
.card-text {
overflow: auto;
height: 10rem;
}
.onlinebar {
position: "absolute";
color: red;
bottom: 0;
left: 0;
}
#chatbtn {
color: black;
width: 200px;
margin-left: 5px;
margin-top: 0px;
}
.chatcollapse {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#chatHeader {
margin: 0px;
padding: 0px;
}
#chatcard {
width: 2rem;
}
.card-deck .card {
max-width: calc(25% + 80px);
}
.card-body {
padding: 0px;
margin: 0px;
}
.bubble-r {
align-items: flex-end;
position: relative;
background: #0072c6;
max-width: 100px;
padding: 5px;
font-family: arial;
margin: 0 auto;
font-size: 14px;
color: white;
border-radius: 6px;
}
.bubble-r:after,
.bubble-r:before {
left: 100%; /*change this from right to left*/
top: 42%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.bubble-r:after {
border-color: rgba(200, 200, 204, 0);
border-left-color: #0072c6; /*change this from right to left */
border-width: 8px;
margin-top: -3px;
}
.bubble-r:before {
border-color: rgba(200, 204, 0, 0);
border-left-color: #0072c6; /*change this from right to left*/
border-width: 8px;
margin-top: -3px;
}
.bubble {
position: relative;
background: #cad5d7;
max-width: 100px;
padding: 5px;
font-family: arial;
margin: 0 auto;
font-size: 14px;
border-radius: 6px;
}
.bubble:after,
.bubble:before {
right: 100%;
top: 42%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.bubble:after {
border-color: rgba(255, 255, 204, 0);
border-right-color: #cad5d7;
border-width: 8px;
margin-top: -3px;
}
.bubble:before {
border-color: rgba(255, 204, 0, 0);
border-right-color: #cad5d7;
border-width: 8px;
margin-top: -3px;
}
#chatcard {
width: 40rem;
}
I adjusted the width within this and it worked. It's odd that adding the div tag caused this.
Index.html
<div class="wrap">
<div class="toggle">
<input type="checkbox" onclick='window.location.assign("newuser.html")'/>
<span class="btn"></span>
<span class="texts"></span>
<span class="bg"></span>
</div>
</div>
Index.css
#import url(http://fonts.googleapis.com/css? family=Open+Sans:400,600|Lato:300,400,700&subset=latin,cyrillic);
* {
margin: 0;
padding: 0;
}
body {
background: #ecf0f1;
}
.wrap {
width: 90px;
margin: 50px auto;
}
.toggle {
position: relative;
width: 82px;
height: 35px;
border: 3px solid #f9f9f9;
border-radius: 40px;
}
.toggle input[type="checkbox"] {
opacity: 0;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 84px;
height: 34px;
}
.toggle .btn {
display: block;
position: absolute;
z-index: 4;
top: -3px;
left: -1px;
width: 37px;
height: 37px;
background: #F5F5F5;
border: 1px solid #e8e8e8;
border-radius: 100%;
box-shadow: 0 2px 4px rgba(100, 100, 100, 0.1);
transition: left .25s ease-in-out;
}
.toggle input[type="checkbox"]:checked ~ .btn {
left: 44px;
}
.toggle .texts {
position: absolute;
top: 9px;
z-index: 2;
width: 100%;
font-family: 'Lato', Helvetica, sans-serif;
font-weight: bold;
color: #fff;
text-transform: uppercase;
font-size: 14px;
}
.toggle .texts:before {
content: "On";
position: absolute;
left: 12px;
}
.toggle .texts:after {
content: "Off";
position: absolute;
right: 11px;
}
.toggle .bg {
display: block;
background: #F56557;
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 40px;
box-shadow: inset 0 0px 2px 1px rgba(0, 0, 0, 0.3);
transition: background .25s ease-in;
}
.toggle input[type="checkbox"]:checked ~ .bg {
background: #48C893;
}
I am creating an Android mobile application and I ran this code in Eclipse Luna. I managed to show the button but when it is clicked, nothing happens.
Your code is working. The style is changed onclick.
The problem might be somewhere else
* {
margin: 0;
padding: 0;
}
body {
background: #ecf0f1;
}
.wrap {
width: 90px;
margin: 50px auto;
}
.toggle {
position: relative;
width: 82px;
height: 35px;
border: 3px solid #f9f9f9;
border-radius: 40px;
}
.toggle input[type="checkbox"] {
opacity: 0;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 84px;
height: 34px;
}
.toggle .btn {
display: block;
position: absolute;
z-index: 4;
top: -3px;
left: -1px;
width: 37px;
height: 37px;
background: #F5F5F5;
border: 1px solid #e8e8e8;
border-radius: 100%;
box-shadow: 0 2px 4px rgba(100, 100, 100, 0.1);
transition: left .25s ease-in-out;
}
.toggle input[type="checkbox"]:checked ~ .btn {
left: 44px;
}
.toggle .texts {
position: absolute;
top: 9px;
z-index: 2;
width: 100%;
font-family: 'Lato', Helvetica, sans-serif;
font-weight: bold;
color: #fff;
text-transform: uppercase;
font-size: 14px;
}
.toggle .texts:before {
content: "On";
position: absolute;
left: 12px;
}
.toggle .texts:after {
content: "Off";
position: absolute;
right: 11px;
}
.toggle .bg {
display: block;
background: #F56557;
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 40px;
box-shadow: inset 0 0px 2px 1px rgba(0, 0, 0, 0.3);
transition: background .25s ease-in;
}
.toggle input[type="checkbox"]:checked ~ .bg {
background: #48C893;
}
<div class="wrap">
<div class="toggle">
<input type="checkbox" />
<span class="btn"></span>
<span class="texts"></span>
<span class="bg"></span>
</div>
</div>
Look into the below jsfiddle for your code
your onClick might be faster that your vision
your code seems working fine please check from your end
I'm using Easy-UI layout, the blue part is the "north" layout to show nav, and down that is the layout part of "center".
But the pulldown div is coverd by "center" layout panel when mouse move-on.
I set z-index into pulldown div, but it doesn't work. How can I fix is?
.hd-main .has-pulldown {
cursor: pointer;
position: relative;
*z-index: 10000
}
.hd-main .pulldown {
position: absolute;
cursor: default;
display: none;
top: 30px;
left: 0
}
.hd-main .pulldown .arrow {
*margin-bottom: -1px;
_margin-bottom: 0;
height: 0;
width: 0;
font-size: 0;
line-height: 0;
border-width: 7px;
border-style: solid;
border-color: transparent transparent #F6F6F9 transparent;
_filter: chroma(color=tomato);
_border-color: tomato tomato #F6F6F9 tomato;
position: relative;
display: block;
left: 20px;
z-index: 2
}
.hd-main .pulldown .content {
background: #F6F6F9;
color: #333;
text-align: left;
border-radius: 3px;
border: rgb(175, 175, 175) 1px solid;
border-width: 0 1px 1px 1px;
box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
position: relative;
z-index: 1
}
.hd-main .pulldown-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
filter: alpha(opacity=0)
}
.hd-main .navs .def-nav,
.hd-main .navs .pulldown-nav,
.hd-main .navs .separate {
display: block;
float: left;
height: 48px;
font: 18px/30px"Microsoft YaHei", "Microsoft JhengHei";
color: #d8d8d8;
text-align: center;
width: 90px;
line-height: 48px
}
.hd-main .navs .pulldown-nav {
position: relative
}
.hd-main .navs .pulldown-nav em {
position: absolute;
display: block;
left: 69px;
top: 18px;
height: 12px;
width: 12px;
font-size: 0;
background-position: -89px -45px
}
.hd-main .navs .pulldown-nav:hover .f-icon,
.hd-main .navs .pulldown-nav:active .f-icon {
position: absolute;
display: block;
right: 11px;
top: 18px;
height: 12px;
width: 12px;
font-size: 0;
background-position: -89px -55px
}
<ul>
<li class="info-i user-name has-pulldown">
<em class="f-icon pull-arrow"></em>
<span class="name top-username">David</span>
<div class="pulldown user-info">
<em class="arrow"></em>
<div class="content">
<span class="li">aa</span>
<span class="li">bb</span>
<span class="li">cc</span>
<span class="li">dd</span>
<span class="separate-li no-height"></span>
<span class="li">Log Out</span>
</div>
</div>
</li>
</ul>
I have been trying to make a profile bar for my website which contained 3 elements, link, picture, and just a text (<p>), profile bar itself was a div container.
The reason of choosing relative position was because of elements overlapping when browser was scaled, but then there was another problem, when browser was scaled, container content would start disappearing and then image would wrap to the bottom of elements.
HTML & CSS for profile bar container:
<div class="profilebar">
<a class="profilename" style="cursor: pointer;" >{{ username }} ▾</a>
<img class="profilepicture" src="{{ avatar }}"></img>
<p class="balance" style="text-decoration:none">${{ balance }}</p>
</div>
.profilename {
position: relative;
margin-top: 0.4%;
margin-left: 4%;
font-family: sans-serif;
width: 0.5%;
font-size: 11pt;
color: white;
text-decoration: none;
}
.profilepicture {
position: absolute;
margin-left: 1.4%;
}
.balance {
position: relative;
margin-top: 3%;
color: red;
font-family: sans-serif;
font-size: 12pt;
color: #C90205;
margin-left: 45.3%;
}
Fiddle ( Try scaling browser down in fullscreen mode and you'll see the result ).
Is there a problem that container can't make elements float right?, i want it to reach the navigator buttons (Button1-4) without elements inside overlapping each other, what's the best way to do so?
Set a fixed pixel width on the "profilebar" container, rather than a percentage.
.profilebar {
float: right;
width: 150px;
height: 7%;
margin-top: 0.5%;
margin-right: 1%;
min-width: 70px;
}
Here you can see an example with 150px width:
https://jsfiddle.net/c7qoh9xg/
float: left; causes links to wrap and are there below the menu
See https://jsfiddle.net/hv5r8kxh/4/
Check the updated fiddle - https://jsfiddle.net/afelixj/hv5r8kxh/2/
Changed the order of profilepicture and profilename
*,
*::before,
*::after {
box-sizing: border-box;
}
*::selection {
background-color: #F06262;
}
*::-moz-selection {
background-color: #F06262;
}
html,
body {
margin: 0;
height: 100%;
background-color: #2B2B2B;
}
.main {
position: relative;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 10%;
z-index: 1;
min-height: 120px;
max-height: 120px;
background-color: rgba(26, 26, 26, 0.9);
min-width: 800px;
}
.logo {
display: block;
float: left;
top: 3%;
left: 0;
right: 3%;
/*background-image: url('images/logo.png');
width: 150px;
height: 155px;*/
font-size: 32pt;
font-family: sans-serif;
color: white;
margin-top: 3.5%;
margin-left: 1.3%;
}
.menu {
display: inline-block;
position: relative;
top: 0;
left: 0;
right: 0;
background-color: rgba(26, 26, 26, 0.9);
width: 100%;
border-style: solid;
border-color: rgba(26, 26, 26, 0.9);
border-radius: 0;
z-index: 1;
/* max-height: 8%; */
/* max-width: 102.5%; */
min-height: 55px;
min-width: 800px;
overflow: hidden;
}
.button1 {
display: block;
font-size: 10pt;
float: left;
right: 15%;
left: 30%;
top: 0%;
white-space: nowrap;
color: white;
margin-top: 0%;
width: 7%;
font-family: sans-serif;
height: 3%;
padding: 25px 2px 55px 2px;
vertical-align: center;
text-align: center;
line-height: 6px;
border-right: 1px solid rgba(0, 0, 0, 0.25);
border-left: 1px solid rgba(0, 0, 0, 0.25);
box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
border-radius: 5px;
min-width: 100px;
transition: 0.1s ease-in;
}
.button1:hover {
color: #C90205;
}
.button2 {
font-size: 10pt;
float: left;
right: 10%;
left: 23%;
top: 10%;
white-space: nowrap;
color: white;
width: 7%;
margin-top: 0%;
font-family: sans-serif;
height: 3%;
text-align: center;
padding: 25px 0px 55px 0px;
text-align: center;
vertical-align: center;
line-height: 6px;
border-right: 1px solid rgba(0, 0, 0, 0.25);
border-left: 1px solid rgba(0, 0, 0, 0.25);
box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
border-radius: 5px;
min-width: 100px;
transition: 0.1s ease-in;
}
.button2:hover {
color: #C90205;
}
.button3 {
font-size: 10pt;
float: left;
right: 10%;
left: 23%;
top: 3%;
white-space: nowrap;
color: white;
margin-top: 0%;
width: 7%;
font-family: sans-serif;
height: 3%;
text-align: center;
padding: 25px 0px 55px 0px;
text-align: center;
line-height: 6px;
border-right: 1px solid rgba(0, 0, 0, 0.25);
border-left: 1px solid rgba(0, 0, 0, 0.25);
box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
border-radius: 5px;
min-width: 100px;
transition: 0.1s ease-in;
}
.button3:hover {
color: #C90205;
}
.button4 {
font-size: 10pt;
float: left;
right: 10%;
left: 23%;
top: 3%;
white-space: nowrap;
color: white;
margin-top: 0%;
width: 7%;
font-family: sans-serif;
height: 3%;
text-align: center;
padding: 25px 0px 55px 0px;
text-align: center;
line-height: 6px;
border-right: 1px solid rgba(0, 0, 0, 0.25);
border-left: 1px solid rgba(0, 0, 0, 0.25);
box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
border-radius: 5px;
min-width: 100px;
transition: 0.1s ease-in;
}
.button4:hover {
color: #C90205;
}
.button5 {
font-size: 10pt;
float: left;
right: 10%;
left: 23%;
top: 3%;
white-space: nowrap;
color: white;
margin-top: 0%;
width: 7%;
font-family: sans-serif;
height: 3%;
text-align: center;
padding: 25px 0px 55px 0px;
text-align: center;
line-height: 6px;
border-right: 1px solid rgba(0, 0, 0, 0.25);
border-left: 1px solid rgba(0, 0, 0, 0.25);
box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
border-radius: 5px;
min-width: 100px;
transition: 0.1s ease-in;
}
.button5:hover {
color: #C90205;
}
.button6 {
font-size: 10pt;
float: left;
right: 10%;
left: 23%;
top: 8%;
white-space: nowrap;
color: white;
margin-top: 0%;
font-family: sans-serif;
height: 10%;
width: 7%;
text-align: center;
height: 10%;
text-align: center;
padding: 28px 0px 55px 0px;
text-align: center;
line-height: 2px;
border-right: 1px solid rgba(0, 0, 0, 0.25);
border-left: 1px solid rgba(0, 0, 0, 0.25);
box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
border-radius: 5px;
min-width: 100px;
transition: 0.1s ease-in;
}
.button6:hover {
color: #C90205;
}
.profilebar {
float: right;
width: 11%;
height: 7%;
margin-top: 0.5%;
margin-right: 1%;
min-width: 180px;
}
.profilename {
position: relative;
margin-top: 0.4%;
margin-left: 4%;
font-family: sans-serif;
/* width: 0.5%; */
font-size: 11pt;
color: white;
text-decoration: none;
float: right;
}
.profilepicture {
/* position: absolute; */
margin-left: 15px;
float: right;
}
.balance {
position: relative;
margin-top: 25px;
color: red;
font-family: sans-serif;
font-size: 12pt;
color: #C90205;
text-align: right;
/* margin-left: 45.3%; */
}
.mainpage {
position: relative;
height: calc(93% - 185px);
width: 100%;
min-height: 430px;
min-width: 800px;
}
<div class="main">
<a class="logo" href="/" style="text-decoration:none">Sample Text</a>
</div>
<div class="menu">
<a class="button1" href="/" style="text-decoration:none">Button 1</a>
<a class="button2" href="/" style="text-decoration:none">Button 2</a>
<a class="button3" href="/" style="text-decoration:none">Button 3</a>
<a class="button4" href="/" style="text-decoration:none">Button 4</a>
<a class="button5" href="/" style="text-decoration:none">Button 5</a>
<a class="button6" href="/" style="text-decoration:none">Button 6</a>
<div class="profilebar">
<img class="profilepicture" src="http://i.imgur.com/9xyQ4DW.png" />
<a class="profilename" style="cursor: pointer;" >username ▾</a>
<p class="balance" style="text-decoration:none">$0</p>
</div>
</div>
<div class="mainpage"></div>