i try to style an form control over CSS (example http://jsfiddle.net/fyVs4/).
But the CSS selector .form-control:before won't work- Curiouse, i had make a other button with CSS ober button:before and that's work:
Won't work
.form-control:before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
display: block;
width: 7px;
height: 42px;
background: #00122A url('../images/button/left.png');
border-radius: 10px 0 0 10px;
}
WORK
nav ul li button:before {
content: "";
position: absolute;
top: 0;
left: -5px;
bottom: 0;
display: block;
width: 5px;
height: 37px;
background: #00122A url('../images/button/left.png');
border-radius: 10px 0 0 10px;
}
What i'm doing wrong?
Related
Hi guys i have one css code working on pure css, but i need to pass then for styled-components or material ui, and work too, anyone can help me ?
position: relative;
width: 200px;
height: 50px;
background-color: blue;
border-radius: 9999px 0 0 9999px;
margin: 30px;
text-align: center;
color: #fff;
padding-top: 10px;
}
#top,
#bottom {
position: absolute;
height: 30px;
width: 30px;
right: 0;
overflow: hidden;
}
#top {
top: -30px;
}
#bottom {
bottom: -30px;
}
#top::before,
#bottom::before {
content: "";
position: absolute;
right: 0;
height: 200%;
width: 200%;
border-radius: 100%;
box-shadow: 10px 10px 5px 100px blue;
z-index: -1;
}
#top::before {
top: -100%;
}
This code is used for create a curve on css, but i need to do the same in the styled component.
I try do to the same using makeStyles of material ui but i can't too.
I m trying to design a both and ribbon shape button on hover should show horizontal line and icon on both ends.
https://imgur.com/a/iYvJUzJ
.right-left-flag {
position: relative;
background: black;
padding: 22.1px 40px;
color: #fff;
text-transform: uppercase;
}
.right-left-flag:before,
.right-left-flag:after {
border-color: #000 transparent;
top: 0;
}
.right-left-flag:before,
.right-left-flag:after {
border-style: solid;
height: 0;
width: 0;
display: block;
content: "";
position: absolute;
}
.right-left-flag:before {
left: -19.5px;
border-width: 33px 0 28.5px 20px;
}
.right-left-flag:after {
right: -19.5px;
border-width: 33px 20px 28.5px 0;
}
Read More
Hope this will help you get some idea about how to do.
You can add any font icon to the after and before elements of the span inside the content.
.right-left-flag {
position: relative;
background: black;
padding: 22px 40px;
color: #fff;
text-transform: uppercase;
top: 30px;
left: 30px;
display: inline-flex;
}
.right-left-flag:before,
.right-left-flag:after {
border-color: #000 transparent;
top: 0;
}
.right-left-flag:before,
.right-left-flag:after {
border-style: solid;
height: 0;
width: 0;
display: block;
content: "";
position: absolute;
}
.right-left-flag:before {
left: -19.5px;
border-width: 33px 0 28.5px 20px;
}
.right-left-flag:after {
right: -19.5px;
border-width: 33px 20px 28.5px 0;
}
.right-left-flag:hover>span {
opacity: 1
}
.right-left-flag>span {
opacity: 0;
position: absolute;
left: 5px;
right: 5px;
top: 50%;
transform: translateY(-50%);
height: 1px;
background: #fff;
transition: all .2s;
}
.right-left-flag>span:before {
content: ':)';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.right-left-flag>span:after {
content: ':)';
position: absolute;
left: auto;
right: 0;
top: 50%;
transform: translateY(-50%);
}
Read More<span></span>
I just checked my website via my GalaxyS5 smart phone and noticed the some information garbled on bottom portion of site. It normally looks fantastic on the smart phone but this seems like a big problem to me as most of my visitors are mobile visitors.
Attached are screen shots from my mobile device. Can someone identify the issue with the website?
.art-button-wrapper .art-button
{
font-weight: bold;
font-size: 12px;
display: inline-block;
vertical-align: middle;
white-space: nowrap;
text-align: left;
text-decoration: none !important;
color: #FEF200 !important;
width: auto;
outline: none;
border: none;
background: none;
line-height: 31px;
height: 31px;
margin: 0 !important;
padding: 0 19px !important;
overflow: visible;
cursor: default;
z-index: 0;
}
.art-button img, .art-button-wrapper img
{
margin: 0;
vertical-align: middle;
}
.art-button-wrapper
{
vertical-align: middle;
display: inline-block;
position: relative;
height: 31px;
overflow: hidden;
white-space: nowrap;
width: auto;
margin: 0;
padding: 0;
z-index: 0;
}
.firefox2 .art-button-wrapper
{
display: block;
float: left;
}
input, select, textarea, select
{
vertical-align: middle;
font-weight: bold;
font-size: 12px;
}
.art-block select
{
width:96%;
}
.art-button-wrapper.hover .art-button, .art-button:hover
{
color: #FFF200 !important;
text-decoration: none !important;
}
.art-button-wrapper.active .art-button
{
color: #FFF200 !important;
}
.art-button-wrapper .l, .art-button-wrapper .r
{
display: block;
position: absolute;
z-index: -1;
height: 93px;
margin: 0;
padding: 0;
background-image: url('../images/button.png');
}
.art-button-wrapper .l
{
left: 0;
right: 8px;
}
.art-button-wrapper .r
{
width: 409px;
right: 0;
clip: rect(auto, auto, auto, 401px);
}
.art-button-wrapper.hover .l, .art-button-wrapper.hover .r
{
top: -31px;
}
.art-button-wrapper.active .l, .art-button-wrapper.active .r
{
top: -62px;
}
.art-button-wrapper input
{
float: none !important;
}
/* end Button */
/* begin Box, Block, VMenuBlock */
.art-vmenublock
{
position: relative;
z-index: 0;
margin: 0 auto;
min-width: 1px;
min-height: 1px;
}
.art-vmenublock-body
{
position: relative;
z-index: 1;
padding: 0;
}
.art-vmenublock-cc
{
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #FFFFFF;
}
.art-vmenublock
{
margin: 7px;
}
/* end Box, Block, VMenuBlock */
/* begin Box, Box, VMenuBlockContent */
.art-vmenublockcontent
{
position: relative;
z-index: 0;
margin: 0 auto;
min-width: 1px;
min-height: 1px;
}
.art-vmenublockcontent-body
{
position: relative;
z-index: 1;
padding: 5px;
}
.art-vmenublockcontent-cc
{
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #FFFFFF;
}
.art-vmenublockcontent
{
position: relative;
z-index: 0;
margin: 0 auto;
min-width: 1px;
min-height: 1px;
}
.art-vmenublockcontent-body
{
position: relative;
z-index: 1;
padding: 5px;
}
.art-vmenublockcontent-cc
{
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #FFFFFF;
}
/* end Box, Box, VMenuBlockContent */
I am working on a CSS only lightbox solution for my project. I've googled it but so far found only partial solutions.
I am looking for these features:
display content of any width and any height (no fixed height/width)
center verticaly and horizontaly
display scrollbars if content width and/or height overflows lightbox boundary due to viewport dimensions.
So far I have this:
.lb-overlay {
text-align: center;
background: #c0c0c0;
background: rgba(0,0,0,0.5);
border: #a0a0a0 solid 1px;
position: fixed;
left: 0;
top: 0; right: 0; bottom: 0;
z-index: 10000;
}
.lb-overlay:after {
content: '';
display: inline-block;
height: 100%;
width: 0;
vertical-align: middle;
background-color: #f00;
}
.lb-wrap {
display: inline-block;
vertical-align: middle;
position: relative;
background: #ffffff;
max-height: 90%;
max-width: 90%;
z-index: 10001;
-webkit-box-shadow: 0 0 8px rgba(0,0,0,0.25);
-moz-box-shadow: 0 0 8px rgba(0,0,0,0.25);
box-shadow: 0 0 8px rgba(0,0,0,0.25);
}
.lb-content {
position: relative;
overflow: auto;
margin: 2em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.lb-close {
position: absolute; right: 0; top: 0;
background-color: #d00000;
margin: 0;
color: #fff;
padding: 4px;
line-height: 1em;
width: 2em;
height: 2em;
border: 0;
outline: 0;
cursor: pointer;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.lb-close:hover { background-color: #f00000; }
http://jsfiddle.net/TomasReichmann/F4D5u/1/
problems:
vertical scrollbar doesn't appear
horizontal scrollbar works only in chrome
Ideally, I am looking for compatibility with modern browsers and IE8+, but I can live with IE9+
Can you guys help?
Get rid of the unnecessary sizing models
Full-size the overlay as width: 100%; height: 100%;
Use margin: auto and position: absolute; top: 0; left: 0; bottom: 0; right: 0; to center align the wrap within the overlay both vertically and horizontally
Use width and height instead of max-width and max-height
Use padding on wrap to control the border around the content
Use overflow: auto; width: 100%; height: 100%; in content
Summed up: http://jsfiddle.net/F4D5u/8/
Complete style code:
.lb-overlay {
background: #c0c0c0;
background: rgba(0,0,0,0.5);
position: fixed;
left: 0; top: 0; right: 0; bottom: 0;
z-index: 10000;
margin: 0;
width: 100%; height: 100%;
}
.lb-wrap {
margin: auto;
position: absolute; top: 0; left: 0; bottom: 0; right: 0;
background: #ffffff;
width: 70%; height: 70%;
padding : 2em;
-webkit-box-shadow: 0 0 8px rgba(0,0,0,0.25);
-moz-box-shadow: 0 0 8px rgba(0,0,0,0.25);
box-shadow: 0 0 8px rgba(0,0,0,0.25);
}
.lb-content {
overflow: auto;
width: 100%; height: 100%;
}
.lb-close {
position: absolute; right: 0px; top: 0px;
background-color: #d00000;
margin: 0;
color: #fff;
padding: 4px;
line-height: 1em;
width: 2em;
height: 2em;
border: 0;
outline: 0;
cursor: pointer;
}
.lb-close:hover { background-color: #f00000; }
I cannot figure out why my css is creating this funky bottom margin or border I took a little video so you can see it: http://img.zobgib.com/2011-04-25_1317.swf The margin/border doesn't show except when the page is resized to pretty small. My css is pretty standard, and I have not inline styling or JS styling that would cause it. What would cause this weird margin?
Here is my CSS
html {
}
body {
}
#content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#drawn {
background: #fff !important;
}
#content > * {
}
#toolcontainer {
left: 0;
right: 0;
height: 50px;
min-width: 940px;
}
#toolcontainer > * {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
margin-left: 10px;
}
#slidescontainer {
position: absolute;
left: 0;
bottom: 0;
top: 52px;
width: 130px;
min-height: 658px;
}
#newslide {
background: url(/static/img/new_slide.png) !important;
border: 1px solid #FFFFFF;
}
#slidescontainer canvas {
position: relative;
}
#slidescontainer > * {
height: 80px;
width: 106px;
margin: 10px;
background: #ffffff;
border: 1px solid #000;
}
#container {
position: absolute;
min-height:608px;
min-width: 810px;
/* height: 608px;
width: 810px;*/
background-color: #fff;
background-image: none;
top: 52px;
bottom: 0;
right: 0px;
left: 132px;
background: #d5d5d5;
border: 10px solid #000;
}
#container canvas {
/* left: 50%;
margin-left: -405px;
top: 50%;
margin-top: -304px;*/
}
#debug {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100px;
overflow: auto;
border: 1px solid black;
background: black;
color: #34e338;
z-index: 50;
}
canvas {
position: absolute;
}
#colorSelector {
position: relative;
width: 46px;
height: 46px;
}
#colorSelector div {
position: absolute;
border: 1px solid #FFFFFF;
background: #000000;
width: 46px;
height: 46px;
}
You are using a lot of browser-specific CSS, and it looks like you were accessing it in an unsupported browser (Firefox doesn't support Microsoft markup, for obvious reasons). I'd recommend trying CSS3 selectors and rules instead of the browser-specific rules.
Try adding style = "overflow:hidden" to your html tag like this:
<html xmlns="http://www.w3.org/1999/xhtml" style = "overflow:hidden">
If it is an issue with page height, that may clear it up
I fixed it by changing the min-height in #container to 638px.