I'm having an issue customizing the CSS of some button widgets that came with a WordPress theme I'm running. I grabbed a quick screen capture video of what's happening because it's hard to describe.
Video Link: https://drive.google.com/open?id=1mYvOtAjz-0QnJYV3_nGYXnFoRpsRdVo_
The CSS I have applied on the buttons:
.lc_button {
height: 100px !important;
width: 200px !important;
font-size: 18px !important;
border: 1px solid #dd3333 !important;
text-align: center;
background-color: white;
border-radius: 5%;
}
.lc_button:hover {
background-color: white;
border: 4px solid #dd3333 !important;
color: #151515 !important;
}
.lc_button a:hover {
color: #151515 !important;
}
Any idea what I have to do to get the inside to stay visible no matter where the cusror is at inside the button?
Thanks
I've tried to solve your problem. I am successful. You can use this code of mine.
HTML
<div class="lc_button">
Watch video
</div>
CSS
.lc_button a {
display: block;
width: 200px;
height: 100px;
line-height: 100px;
font-size: 18px;
font-weight: 700;
color: #000000;
border-radius: 5%;
box-sizing: border-box;
transition: 0.3s;
background-color: white;
text-decoration: none;
text-transform: uppercase;
text-align: center;
position: relative;
}
.lc_button a:before {
display: block;
position: absolute;
border-radius: 5%;
left: 0;
top: 0;
content: "";
width: 200px;
height: 100px;
box-sizing: border-box;
border: 1px solid red;
transition: 0.3s;
}
.lc_button a:hover:before {
border: 4px solid red;
}
.lc_button a:hover {
color: #151515 !important;
background-color: #ffffff;
}
.lc_button a {
display: block;
width: 200px;
height: 100px;
line-height: 100px;
font-size: 18px;
font-weight: 700;
color: #000000;
border-radius: 5%;
box-sizing: border-box;
transition: 0.3s;
background-color: white;
text-decoration: none;
text-transform: uppercase;
text-align: center;
position: relative;
}
.lc_button a:before {
display: block;
position: absolute;
border-radius: 5%;
left: 0;
top: 0;
content: "";
width: 200px;
height: 100px;
box-sizing: border-box;
border: 1px solid red;
transition: 0.3s;
}
.lc_button a:hover:before {
border: 4px solid red;
}
.lc_button a:hover {
color: #151515 !important;
background-color: #ffffff;
}
<div class="lc_button">
Watch video
</div>
The .css you've provided seems fully functional, and customizable. (aka, not broken, works fine).
The whole .css and the .html might shed some light on things without any "major alterations".
.lc_button {
height: 100px !important;
width: 200px !important;
font-size: 18px !important;
border: 1px solid #dd3333 !important;
text-align: center;
background-color: white;
border-radius: 5%;
}
.lc_button:hover {
background-color: white;
border: 4px solid #0000ff !important;
color: #00ff00 !important;
}
.lc_button a:hover {
color: #151515 !important;
}
<body>
<button class="lc_button">Test</button>
</body>
I've shared the code snippet..I think this will help you to solve the problem...
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{
font-family: 'PT Sans', sans-serif;
display: table;
width: 100%;
background: #f54785;
}
.container{
display: table-cell;
vertical-align: middle;
text-align: center;
height: 100vh;
}
button{
display: inline-block;
position: relative;
background: none;
border: none;
color: #fff;
font-size: 18px;
cursor: pointer;
margin: 20px 30px;
background: rgba(0,0,0,0.09);
}
span{
display: block;
padding: 25px 80px;
}
button::before, button::after{
content:"";
width: 0;
height: 2px;
position: absolute;
transition: all 0.2s linear;
background: #fff;
}
span::before, span::after{
content:"";
width:2px;
height:0;
position: absolute;
transition: all 0.2s linear;
background: #fff;
}
button:hover::before, button:hover::after{
width: 100%;
}
button:hover span::before, button:hover span::after{
height: 100%;
}
.btn-1::after{
left:0;
bottom: 0;
transition-duration: 0.4s;
}
.btn-1 span::after{
right:0;
top: 0;
transition-duration: 0.4s;
}
.btn-1::before{
right: 0;
top: 0;
transition-duration: 0.4s;
}
.btn-1 span::before{
left: 0;
bottom: 0;
transition-duration: 0.4s;
}
<div class="container">
<button class="btn-1"><span>Hover Me</span></button>
</div>
This will help you to solve the problem...
button {
height: 100px !important;
width: 200px !important;
font-size: 18px !important;
border: 1px solid #dd3333 !important;
text-align: center;
background-color: white;
border-radius: 5%;
}
button:hover {
background-color: white;
border: 4px solid #dd3333 !important;
color: #151515 !important;
}
button a:hover {
color: #151515 !important;
}
<div class="container">
<button class="lc_button"><span>Hover Me</span></button>
</div>
Related
I have a button with a hover effect that fills the background from left to right:
Current HTML
Mehr erfahren
Current CSS
body {
background-color: #f6f6f6;
}
a {
text-decoration: none;
color: black;
}
a:hover {
text-decoration: none;
}
.button {
font-size: 20px;
color: black;
background-color: white;
padding: 20px;
border-radius: 50px;
display: inline-block;
background-image: radial-gradient(circle at left, black 50%, black 50%);
background-size: 0 100%;
background-repeat: no-repeat;
transition: 0.4s;
}
.button:hover {
color: white;
background-size: 100% 100% !important;
}
.button::before {
content: "";
display: inline-block;
width: 15px;
height: 15px;
-moz-border-radius: 7.5px;
-webkit-border-radius: 7.5px;
border-radius: 7.5px;
background-color: white;
border: 1px solid black;
margin-right: 15px;
}
Find it also here on codepen
Goal is that the right side of the fill color has rounded corners like here:
Any ideas? Thanks in advance
As mentioned in this other SO question, there is no way to add border-radius directly to the background-image. If you are open to another option to get your desired result using a pseudo background element and adding a <span> around your text for z-index adjustment, then you can reference my example below.
body {
background-color: #f6f6f6;
}
a {
text-decoration: none;
color: black;
}
a:hover,
a:focus {
text-decoration: none;
}
.button {
font-size: 20px;
color: black;
background-color: white;
padding: 20px;
border-radius: 50px;
display: inline-block;
transition: 0.4s;
}
.button:hover,
.button:focus {
color: white;
}
/* New CSS */
.button {
position: relative;
overflow: hidden;
-webkit-mask-image: -webkit-radial-gradient(white, black);
}
.button:hover::after,
.button:focus::after {
transform: translateX(0);
}
.button::after {
content: '';
position: absolute;
top: 0;
left: 0;
background: #000;
width: 100%;
height: 100%;
border-radius: 50px;
transform: translateX(-100%);
z-index: 0;
transition: 0.4s;
}
.button span {
position: relative;
z-index: 1;
}
.button span::before {
content: "";
display: inline-block;
width: 15px;
height: 15px;
-moz-border-radius: 7.5px;
-webkit-border-radius: 7.5px;
border-radius: 7.5px;
background-color: white;
border: 1px solid black;
margin-right: 15px;
}
<span>Mehr erfahren</span>
So, if i would click "PROJECTEN", it would allegedly bring me to the PROJECTEN page, but instead it just does the animation that i asked it to.
That is the html, now for the CSS of the Home page:
body{
background-color: black;
}
.projectenknop{
position: relative;
border-radius: 0 50px 0 50px;
border: 1px solid white;
font-family: "Bebas Neue";
font-size: 2vw;
color: #ffffff;
margin: 10% 0 0 25%;
width: 10vw;
text-align: center;
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
background-color: transparent;
}
.projectenknop:after {
content: "";
background: #f1f1f1;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px !important;
margin-top: -120%;
opacity: 0;
transition-duration: 0.8s;
}
.projectenknop:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s;
}
.overknop {
position: relative;
border-radius: 50px 0 50px 0;
border: 1px solid white;
font-family: "Bebas Neue";
font-size: 2vw;
color: #ffffff;
margin: 10% 0 0 50%;
width: 10vw;
text-align: center;
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
background-color: transparent;
}
.overknop:after {
content: "";
background: #f1f1f1;
display: block;
right: 0;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px !important;
margin-top: -120%;
opacity: 0;
transition-duration: 0.8s;
}
.overknop:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s;
}
#tekstkader{
border: 0.1px solid black;
width: 29.5vw;
height: 180vh;
margin: 13.4% 0 0 35.5%;
text-align: center;
font-family: "Bebas Neue";
color: black;
opacity: 0.7;
font-size: 1.5vw;
}
#linkprojecten:link{
color: azure;
text-decoration: none;
}
#linkprojecten:visited{
color: azure;
text-decoration: none;
}
#linkprojecten:hover{
color: azure;
text-decoration: none;
}
#linkprojecten:active{
color: azure;
text-decoration: none;
}
<div class="rij">
<div class="kol-6 kol-t-6 kol-m-6">
<button class="projectenknop"><a id="linkprojecten" href="projecten.html">PROJECTEN</a></button>
</div>
<div class="kol-6 kol-t-6 kol-m-6">
<button class="overknop">OVER</button>
</div>
</div>
<div id="tekstkader">
<br>Dit is een fanpagina over Alicha De Bevere,<br>een grafische studente in Ter Sterre.
</div>
And now the PROJECTEN HTML and CSS:
body{
background-color: black;
}
.homeknop {
position: relative;
border-radius: 0 50px 0 50px;
border: 1px solid white;
font-family: "Bebas Neue";
font-size: 2vw;
color: #ffffff;
margin: 10% 0 0 25%;
width: 10vw;
text-align: center;
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
background-color: transparent;
}
.homeknop:after {
content: "";
background: #f1f1f1;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px !important;
margin-top: -120%;
transition-duration: 0.8s;
opacity: 0;
}
.homeknop:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s;
}
.overknop {
position: relative;
border-radius: 50px 0 50px 0;
border: 1px solid white;
font-family: "Bebas Neue";
font-size: 2vw;
color: #ffffff;
margin: 10% 0 0 50%;
width: 10vw;
text-align: center;
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
background-color: transparent;
}
.overknop:after {
content: "";
background: #f1f1f1;
display: block;
right: 0;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px !important;
margin-top: -120%;
opacity: 0;
transition-duration: 0.8s;
}
.overknop:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s;
}
#linkhome:link{
color: azure;
text-decoration: none;
}
#linkhome:visited{
color: azure;
text-decoration: none;
}
#linkhome:hover{
color: azure;
text-decoration: none;
}
#linkhome:active{
color: azure;
text-decoration: none;
}
<video autoplay muted loop id="bgvideo">
<source src="BGVIDEOPROJECTEN.mp4" type="video/mp4">
</video>
<div class="rij">
<div class="kol-6 kol-t-6 kol-m-6">
<button class="homeknop"><a id="linkhome" href="index.html">HOME</a></button>
</div>
<div class="kol-6 kol-t-6 kol-m-6">
<button class="overknop">OVER</button>
</div>
</div>
So yeah, cant figure it out.
And also i wanted to make the button do the animation after i hover, but it just doesnt work. It gets buggy and is all over the place.
Try switching the order of the link and button, i.e. putting the <button> inside of the <a> instead.
Below is the css for my slider. The problem is that the slider is totally failing on IE.
Here is also the online version: https://codepen.io/mariomez/pen/yLNYdRg
I tried using MS fillers but it didn't go well as I am not familiar with how to properly use them.
.valeurPrix {
position: absolute;
top: -59px;
left: 177px;
}
.range-slider {
position: relative;
width: 450px;
float: left;
margin-right: 5px;
}
.range-slider .input-range {
-webkit-appearance: none;
width: 449px;
height: 5px;
border-radius: 5px;
background: #ccc;
outline: none;
}
.range-slider .input-range::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #164188;
cursor: pointer;
-webkit-transition: background .15s ease-in-out;
transition: background .15s ease-in-out;
}
.range-slider .input-range::-webkit-slider-thumb:hover {
background: #164188;
}
.range-slider .input-range:active::-webkit-slider-thumb {
background: #164188;
}
.range-slider .input-range::-moz-range-thumb {
width: 20px;
height: 20px;
border: 0;
border-radius: 50%;
background: #164188;
cursor: pointer;
-webkit-transition: background .15s ease-in-out;
transition: background .15s ease-in-out;
}
.range-slider .input-range::-moz-range-thumb:hover {
background: #164188;
}
.range-slider .input-range:active::-moz-range-thumb {
background: #164188;
}
.range-slider .range-value {
display: inline-block;
position: relative;
width: 100px;
color: #fff;
font-size: 23px;
line-height: 32px;
text-align: center;
border-radius: 3px;
background: #164188;
padding: 5px 10px;
margin-left: 7px;
}
::-moz-range-track {
background: #ccc;
border: 0;
}
input::-moz-focus-inner {
border: 0;
}
Can you please guide me on how to use MS fillers on this code?
First, since the input event only supports input of type text and password in the IE browser, I suggest you could try to use the mouseup event to get the range value. Code as below:
var range = $('.input-range'),
value = $('.range-value');
value.html(range.attr('value') + ' %');
range.on('mouseup', function() {
value.html(this.value + ' %');
});
Second, please try to use the following CSS style:
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.PrixMin {
float: left;
color: #164188;
font-size: 19px;
margin-right: 5px;
}
.selecteurPrix {
padding-top: 15px;
}
body {
font-family: sans-serif;
padding: 40px;
}
.valeurPrix {
position: absolute;
top: -59px;
left: 177px;
}
.range-slider {
position: relative;
width: 450px;
float: left;
margin-right: 5px;
}
#media (-webkit-min-device-pixel-ratio:0) {
/* Non-IE styles here*/
.range-slider .input-range {
-webkit-appearance: none;
width: 449px;
height: 5px;
border-radius: 5px;
background: #ccc;
outline: none;
}
}
#media (-ms-high-contrast:none),(-ms-high-contrast:active) {
/* IE styles here*/
.range-slider .input-range {
/*removes default webkit styles*/
-webkit-appearance: none;
/*fix for FF unable to apply focus style bug */
border: 1px solid white;
/*required for proper track sizing in FF*/
width: 450px;
outline: none;
}
}
.range-slider .input-range::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #164188;
cursor: pointer;
-webkit-transition: background .15s ease-in-out;
transition: background .15s ease-in-out;
}
.range-slider .input-range::-webkit-slider-thumb:hover {
background: #164188;
}
.range-slider .input-range:active::-webkit-slider-thumb {
background: #164188;
}
.range-slider .input-range::-moz-range-thumb {
width: 20px;
height: 20px;
border: 0;
border-radius: 50%;
background: #164188;
cursor: pointer;
-webkit-transition: background .15s ease-in-out;
transition: background .15s ease-in-out;
}
.range-slider .input-range::-moz-range-thumb:hover {
background: #164188;
}
.range-slider .input-range:active::-moz-range-thumb {
background: #164188;
}
.range-slider .range-value {
display: inline-block;
position: relative;
width: 100px;
color: #fff;
font-size: 23px;
line-height: 32px;
text-align: center;
border-radius: 3px;
background: #164188;
padding: 5px 10px;
margin-left: 7px;
}
::-moz-range-track {
background: #ccc;
border: 0;
}
input::-moz-focus-inner {
border: 0;
}
input[type=range] {
margin: 2px;
}
input[type=range]::-ms-track {
width: 450px;
height: 5px;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;
/*leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 6px 0;
/*remove default tick marks*/
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #ccc;
border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
background: #ccc;
border-radius: 10px;
}
input[type=range]::-ms-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #164188;
}
input[type=range]:focus::-ms-fill-lower {
background: #ccc;
}
input[type=range]:focus::-ms-fill-upper {
background: #ccc;
}
</style>
The result in IE browser as below (you could find the whole sample code from here):
body {
padding: 30px;
}
input[type=range] {
/*removes default webkit styles*/
-webkit-appearance: none;
/*fix for FF unable to apply focus style bug */
border: 1px solid white;
/*required for proper track sizing in FF*/
width: 300px;
}
input[type=range]::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background: #ddd;
border: none;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: goldenrod;
margin-top: -4px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #ccc;
}
input[type=range]::-moz-range-track {
width: 300px;
height: 5px;
background: #ddd;
border: none;
border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: goldenrod;
}
/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
outline: 1px solid white;
outline-offset: -1px;
}
input[type=range]::-ms-track {
width: 300px;
height: 5px;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;
/*leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 6px 0;
/*remove default tick marks*/
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #777;
border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
background: #ddd;
border-radius: 10px;
}
input[type=range]::-ms-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: goldenrod;
}
input[type=range]:focus::-ms-fill-lower {
background: #888;
}
input[type=range]:focus::-ms-fill-upper {
background: #ccc;
}
<input type="range">
I wrote a little html page that contains some buttons. What I want to do is to have them look like this :
I'm not good at all at css, I tried some combination but what I get is to have them "below the blue line" like this :
Here is my html code :
<div class="module form-module">
<div class="flex-container">
<article class="article">
<table>
<tr>
<td>
<button>Configurations</button>
</td>
<td>
<button>Create User </button>
</td>
<td>
<button>Update User</button>
</td>
<td>
<button>Create Group</button>
</td>
<td>
<button>Update Group</button>
</td>
</tr>
</table>
</article>
</div>
</div>
You can find my css code in that plunker : https://plnkr.co/edit/sCcBBFfWRiCwGz8hs8oR?p=catalogue
Can you please help me to fix this little problem in html ?
CSS changes:
.form-module {
border-bottom: 5px solid #33b5e5;
position: relative;
background: #ffffff;
width: 100%;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
margin: 0 auto;
align: right;
}
.flex-container > * {
padding: 15px;
-webkit-flex: 1 100%;
flex: 1 100%;
}
table {
border-spacing:0px;
}
td {
padding:0px;
}
Changes expalined:
The blue line is a border, and was set on the button's parent container. It was set to top when you wanted it to be on the bottom, so that's first change.
Then you had padding, which was separating the buttons from the edges of the container, that's second change, set it to 0px.
Finally, both the table and each button had a 1px border which would separate it from the edges of the container, third change was setting those borders to 0px.
Small suggestion:
In case you're not aware: it's really helpful to use browser inspector to better understand what's going on with CSS. Also, if you don't wish to make everything from scratch, I'd recommend you have a look at Bootstrap, it's quite easy and might save you a bunch of time.
Good luck.
In case it's useful, here's the complete CSS:
body {
background: #e9e9e9;
color: #666666;
font-family: 'RobotoDraft', 'Roboto', sans-serif;
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
table {
border-spacing:0px;
}
td {
padding:0px;
}
/* Pen Title */
.pen-title {
padding: 50px 0;
text-align: center;
letter-spacing: 2px;
}
.pen-title h1 {
margin: 0 0 20px;
font-size: 48px;
font-weight: 300;
}
.pen-title span {
font-size: 12px;
}
.pen-title span .fa {
color: #33b5e5;
}
.pen-title span a {
color: #33b5e5;
font-weight: 600;
text-decoration: none;
}
/* Form Module */
.form-module {
position: relative;
background: #ffffff;
width: 100%;
border-bottom: 5px solid #33b5e5;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
margin: 0 auto;
align: right;
}
.form-module .toggle {
cursor: pointer;
position: absolute;
top: -0;
right: -0;
background: #33b5e5;
width: 30px;
height: 30px;
margin: -5px 0 0;
color: #ffffff;
font-size: 12px;
line-height: 30px;
text-align: center;
}
.form-module .toggle .tooltip {
position: absolute;
top: 5px;
right: -65px;
display: block;
background: rgba(0, 0, 0, 0.6);
width: auto;
padding: 5px;
font-size: 10px;
line-height: 1;
text-transform: uppercase;
}
.form-module .toggle .tooltip:before {
content: '';
position: absolute;
top: 5px;
left: -5px;
display: block;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid rgba(0, 0, 0, 0.6);
}
.form-module .form {
display: none;
padding: 40px;
}
.form-module .form:nth-child(2) {
display: block;
}
.form-module h2 {
margin: 0 0 20px;
color: #33b5e5;
font-size: 18px;
font-weight: 400;
line-height: 1;
}
.form-module table {
width: 100%
}
.form-module input {
outline: none;
width: 80%;
border: 1px solid #d9d9d9;
padding: 10px 15px;
font-weight: 400;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.form-module input:focus {
border: 1px solid #33b5e5;
color: #333333;
}
.form-module button {
cursor: pointer;
background: #33b5e5;
width: 90%;
border: 0;
padding: 10px 15px;
color: #ffffff;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.form-module button:hover {
background: #178ab4;
}
.form-module select {
cursor: pointer;
width: 85%;
height:80%;
padding: 10px 15px;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.flag button {
background: white;
color: #178ab4;
}
.flag button:hover {
background: white;
border: 20px;
border-color: #178ab4;
}
.flag {
cursor: pointer;
background: white;
width: 100%;
border: 0;
padding: 10px 15px;
border-color: #178ab4;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.flag a {
cursor: pointer;
background: white;
width: 100%;
border: 0;
color: #33b5e5;
border-color: #178ab4;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.flag a :hover {
background: white;
}
.form-module .cta {
background: #f2f2f2;
width: 100%;
padding: 15px 40px;
box-sizing: border-box;
color: #666666;
font-size: 12px;
text-align: center;
}
.form-module .cta a {
color: #333333;
text-decoration: none;
}
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
align: right;
}
.flex-container > * {
padding: 0px;
-webkit-flex: 1 100%;
flex: 1 100%;
}
.article {
text-align: left;
}
.detail button {
width: 120px
}
.detail table {
border-collapse: separate;
border-spacing: 5px 10px;
width: 100%
}
.search table {
border-collapse: separate;
border-spacing: 5px 10px;
width: 70%
}
.search button {
width: 120px
}
.search input {
outline: none;
width: 90%;
border: 1px solid #d9d9d9;
padding: 10px 15px;
font-weight: 400;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.search select {
cursor: pointer;
width: 90%;
padding: 10px 15px;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.resultSearch table {
border-collapse: separate;
border-spacing: 5px 10px;
width: 80%
}
.dropbtn {
outline: none;
border:1;
width: 80%;
border: 1px solid #d9d9d9;
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
}
#myInput {
border-box: box-sizing;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
outline: none;
width: 100%;
border: 1px solid #d9d9d9;
padding: 10px 15px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd}
.show {display:block;}
#searchbox
{
width: 35px;
}
#media all and (min-width: 768px) {
.nav {text-align:left;-webkit-flex: 1 auto;flex:1 auto;-webkit-order:1;order:1;}
.article {-webkit-flex:5 0px;flex:5 0px;-webkit-order:2;order:2;}
footer {-webkit-order:3;order:3;}
}
.newUser button {
width: 120px
}
.newUser table {
border-collapse: separate;
border-spacing: 5px 10px;
width: 90%
}
.return table{
border-collapse: separate;
border-spacing: 5px 10px;
width: 90%;
}
.returnCheckBox input {
align: left;
width:0%;
}
.invoiceListTable table {
border-collapse: separate;
border-spacing: 5px 10px;
width: 90%
}
.sessionInfo table {
border-collapse: separate;
border-spacing: 5px 10px;
width: 100%;
align: right;
}
.sessionInfo {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
align: right;
}
.sessionInfo > * {
padding: 15px;
-webkit-flex: 1 100%;
flex: 1 100%;
align: right;
}
.sessionInfo {
position: relative;
background: #ffffff;
width: 20%;
border-top: 5px solid #33b5e5;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
margin: 0 auto;
align: right;
}
.sessionInfo .toggle {
cursor: pointer;
position: absolute;
top: -0;
right: -0;
background: #33b5e5;
width: 30px;
height: 30px;
margin: -5px 0 0;
color: #ffffff;
font-size: 12px;
line-height: 30px;
text-align: center;
}
.sessionInfo .toggle .tooltip {
position: absolute;
top: 5px;
right: -65px;
display: block;
background: rgba(0, 0, 0, 0.6);
width: auto;
padding: 5px;
font-size: 10px;
line-height: 1;
text-transform: uppercase;
}
.sessionInfo .toggle .tooltip:before {
content: '';
position: absolute;
top: 5px;
left: -5px;
display: block;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid rgba(0, 0, 0, 0.6);
}
.form-module .form {
display: none;
padding: 40px;
align:right;
}
UPDATE:
You mentioned the buttons should be outside and above the form-module, so the html needs to be changed and not just the css. We removed the flex-container div which was nested inside form-module div and placed it after this container is closed. Since the buttons were getting their layout properties from .form-module's style, it was necessary to create a new class "buttons". Basically now form-module and buttons are in different containers and with separated style properties.
To understand how container blocks work:
http://www.w3schools.com/html/html_blocks.asp
html:
<div class="flex-container buttons">
<article class="article">
<table>
<tr>
<td>
<button>Configurations</button>
</td>
<td>
<button>Create User </button>
</td>
<td>
<button>Update User</button>
</td>
<td>
<button>Create Group</button>
</td>
<td>
<button>Update Group</button>
</td>
</tr>
</table>
</article>
</div>
<div class="module form-module">
</div>
changed css:
body {
background: #e9e9e9;
color: #666666;
font-family: 'RobotoDraft', 'Roboto', sans-serif;
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.buttons table {
width: 100%;
border-spacing:0px;
}
.buttons td {
padding:0px;
}
.buttons input {
outline: none;
width: 80%;
border: 1px solid #d9d9d9;
padding: 10px 15px;
font-weight: 400;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.buttons input:focus {
border: 1px solid #33b5e5;
color: #333333;
}
.buttons button {
cursor: pointer;
background: #33b5e5;
width: 90%;
border: 0;
padding: 10px 15px;
color: #ffffff;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.buttons button:hover {
background: #178ab4;
}
.buttons select {
cursor: pointer;
width: 85%;
height:80%;
padding: 10px 15px;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
complete css:
body {
background: #e9e9e9;
color: #666666;
font-family: 'RobotoDraft', 'Roboto', sans-serif;
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.buttons table {
width: 100%;
border-spacing:0px;
}
.buttons td {
padding:0px;
}
.buttons input {
outline: none;
width: 80%;
border: 1px solid #d9d9d9;
padding: 10px 15px;
font-weight: 400;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.buttons input:focus {
border: 1px solid #33b5e5;
color: #333333;
}
.buttons button {
cursor: pointer;
background: #33b5e5;
width: 90%;
border: 0;
padding: 10px 15px;
color: #ffffff;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.buttons button:hover {
background: #178ab4;
}
.buttons select {
cursor: pointer;
width: 85%;
height:80%;
padding: 10px 15px;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
/* Pen Title */
.pen-title {
padding: 50px 0;
text-align: center;
letter-spacing: 2px;
}
.pen-title h1 {
margin: 0 0 20px;
font-size: 48px;
font-weight: 300;
}
.pen-title span {
font-size: 12px;
}
.pen-title span .fa {
color: #33b5e5;
}
.pen-title span a {
color: #33b5e5;
font-weight: 600;
text-decoration: none;
}
/* Form Module */
.form-module {
position: relative;
background: #ffffff;
width: 100%;
border-top: 5px solid #33b5e5;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
margin: 0 auto;
align: right;
}
.form-module .toggle {
cursor: pointer;
position: absolute;
top: -0;
right: -0;
background: #33b5e5;
width: 30px;
height: 30px;
margin: -5px 0 0;
color: #ffffff;
font-size: 12px;
line-height: 30px;
text-align: center;
}
.form-module .toggle .tooltip {
position: absolute;
top: 5px;
right: -65px;
display: block;
background: rgba(0, 0, 0, 0.6);
width: auto;
padding: 5px;
font-size: 10px;
line-height: 1;
text-transform: uppercase;
}
.form-module .toggle .tooltip:before {
content: '';
position: absolute;
top: 5px;
left: -5px;
display: block;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid rgba(0, 0, 0, 0.6);
}
.form-module .form {
display: none;
padding: 40px;
}
.form-module .form:nth-child(2) {
display: block;
}
.form-module h2 {
margin: 0 0 20px;
color: #33b5e5;
font-size: 18px;
font-weight: 400;
line-height: 1;
}
.form-module table {
width: 100%
}
.form-module input {
outline: none;
width: 80%;
border: 1px solid #d9d9d9;
padding: 10px 15px;
font-weight: 400;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.form-module input:focus {
border: 1px solid #33b5e5;
color: #333333;
}
.form-module button {
cursor: pointer;
background: #33b5e5;
width: 90%;
border: 0;
padding: 10px 15px;
color: #ffffff;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.form-module button:hover {
background: #178ab4;
}
.form-module select {
cursor: pointer;
width: 85%;
height:80%;
padding: 10px 15px;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.flag button {
background: white;
color: #178ab4;
}
.flag button:hover {
background: white;
border: 20px;
border-color: #178ab4;
}
.flag {
cursor: pointer;
background: white;
width: 100%;
border: 0;
padding: 10px 15px;
border-color: #178ab4;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.flag a {
cursor: pointer;
background: white;
width: 100%;
border: 0;
color: #33b5e5;
border-color: #178ab4;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.flag a :hover {
background: white;
}
.form-module .cta {
background: #f2f2f2;
width: 100%;
padding: 15px 40px;
box-sizing: border-box;
color: #666666;
font-size: 12px;
text-align: center;
}
.form-module .cta a {
color: #333333;
text-decoration: none;
}
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
align: right;
}
.flex-container > * {
padding: 0px;
-webkit-flex: 1 100%;
flex: 1 100%;
}
.dropbtn {
outline: none;
border:1;
width: 80%;
border: 1px solid #d9d9d9;
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd}
.show {display:block;}
ul{
list-style-type:none;
width:500px;
}
li{
width:33%;
text-align:center;
float:left;
border-bottom:2px solid #33b5e5;
}
Maybe instead of a 'table' use a 'list' html element like ul or li.
plunker
New HTML:
<div class="module form-module">
<div class="flex-container">
<article class="article">
<ul>
<li>
<button>Configurations</button>
</li>
<li>
<button>Create User </button>
</li>
<li>
<button>Update User</button>
</li>
</ul>
</article>
</div>
</div>
and add the following CSS:
ul{
list-style-type:none;
width:500px;
}
li{
width:33%;
text-align:center;
float:left;
border-bottom:2px solid #33b5e5;
}
I've having problems rending off screen elements properly. I believe the problem has to do with overflow properties. If I view the browser at full screen(1080p) its fine, but when I resize the browser to a smaller resolution, and then SCROLL down, the styles disappear for off screen elements.
EDIT [ Removed links to prevent broken links in the future ]
/* DEFAULT */
* {
margin: 0px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
}
#font-face {
font-family: leela;
src: url('leelawad_0.ttf');
}
html, body {
height: 100%;
background-color: rgb(255,255,255);
}
h1 {
color: rgb(183,183,183);
font-family: leela;
font-size: 16px;
font-weight: normal;
text-transform: uppercase;
}
a {
color: rgb(102,102,102);
text-decoration: none;
}
/* ID */
#container {
height: 100%;
overflow-x: hidden;
width: 100%;
}
#header {
border: 1px solid rgb(153,153,153);
border-top: 0px;
background-color: rgb(255,255,255);
padding: 8px;
position: fixed;
width: 100%;
z-index: 3;
}
#quickSearch {
border: 1px solid rgb(153,153,153);
background-color: rgb(250,250,250);
height: 30px;
margin: 8px 8px 8px 8px;
}
#quickSearch input {
background-color: rgb(250,250,250);
border: 0px;
height: 28px;
margin-left: 10px;
margin-top: 0px;
float: left;
}
#naviContainer {
float: left;
width: 200px;
border-right: 1px solid rgb(153,153,153);
background-color: rgb(225,225,225);
height: 100%;
}
#navigation {
background-color: rgb(225,225,225);
float: left;
width: 200px;
margin-top: 31px;
position: relative;
z-index: 2;
height: 100%;
}
#navigation ul {
margin: 0px;
padding: 0px;
width: 200px;
}
#navigation li {
display: block;
list-style-type: none;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
#navigation li:hover {
background-color: rgb(173,173,173);
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
#navigation h1 {
border-bottom: 1px dotted rgb(153,153,153);
background-color: rgb(127,127,127);
padding: 8px;
}
#navigation h1.fix {
border-top: 1px dotted rgb(153,153,153);
}
#navigation ul li {
border-bottom : 1px dotted rgb(153,153,153);
}
#navigation li a {
display: block;
padding: 8px;
}
#contentContainer {
margin-left: 201px;
margin-top: 31px;
position: relative;
}
#breadcrumbs {
background-color: rgb(239,239,239);
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: rgb(153,153,153);
padding: 8px;
position: inherit;
}
#breadcrumbs ul {
display: inline;
margin-left: 0px;
padding: 0px;
}
#breadcrumbs li {
display: inline;
}
#content {
padding: 8px;
position: inherit;
}
/* CLASSES */
.divider {
border-left: solid 1px rgb(102,102,102);
margin: 0px 7px 0px 5px;;
}
Any input would be greatly appreciated!
Try adding using position:fixed (I made it yellow so it would stand out):
#navigation {
background-color: yellow;
border-right: 1px solid #999999;
border-top: 0 none;
float: left;
height: 100%;
margin-top: 31px;
position: fixed;
width: 200px;
z-index: 2;
}
[Edit] 2nd attempt, remove height.
#navigation {
background-color: #E1E1E1;
float: left;
//height: 100%;
margin-top: 31px;
position: relative;
width: 200px;
z-index: 2;
}
that was nothing more then height:100% issue
Remove height:100% from #naviContainer will fix this.
#navigation {
background-color: #E1E1E1;
float: left;
min-height: 100%;
margin-top: 31px;
position: relative;
width: 200px;
z-index: 2;
}
#naviContainer {
background-color: #E1E1E1;
border-right: 1px solid #999999;
float: left;
min-height: 100%; /* the fix */
width: 200px;
}