I have a problem to convert this below navigation bar from vertical to horizontal.
http://codepen.io/anon/pen/bdpRjx
Who could help me to take a look on my code. Here is my CSS but the effect and size are chaotic.
*{
box-sizing: border-box;
}
body{
height:100%;
background-color: #444;
}
h1{
font-size:1em;
text-align:center;
color: #eee;
letter-spacing:1px;
text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
.nav-container{
width:100%;
margin-top:10px;
box-shadow: 0 2px 2px 2px black;
transition: all 0.3s linear;
}
.nav{
list-style-type:none;
margin:0;
padding:0;
}
li{
height:50px;
width: 300px;
position:relative;
background: linear-gradient(#292929, #242424);
display: inline;
}
ul{
float:left;
width: 100%;
}
a {
border-top: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid black;
text-decoration:none;
display:inline;
height:100%;
width:300px;
line-height:50px;
color:#bbb;
text-transform: uppercase;
font-weight: bold;
border-left:5px solid transparent;
letter-spacing:1px;
transition: all 0.3s linear;
}
.active a{
color: #B93632;
border-left:5px solid #B93632;
background-color: #1B1B1B;
outline:0;
width: 200px;
}
li:not(.active):hover a{
color: #eee;
border-left: 5px solid #FCFCFC;
background-color: #1B1B1B;
}
span[class ^= "icon"]{
position:absolute;
left:20px;
font-size: 1.5em;
transition: all 0.3s linear;
}
Thank you very much for any suggestion.
Regards
Ryan
Apologies in advance if this is in no way what you meant, but I think all you want to do, basically, is set the list item display to inline-block. Something like this:
.nav-container li {
box-shadow: 0 2px 2px 2px black;
display: inline-block;
width: 300px;
}
You'd need to remove the box shadow and width from .nav-container and put it here instead.
You're obviously going to see a lot of issues on smaller screens if that's all you do, but maybe that gets you started?
Related
While trying to style my html with CSS i have to use an LI and i am getting trouble with it.
If the Html or js is need i will provide it asap.
The error i am getting is at the "LI" every time
The exact error i am getting is "property value expectedcss(css-propertyvalueexpected)"
#menu{
list-style:none;
padding: 0;
margin: 0;
li: {
display : block;
border-right: 1px solid #fff;
background: #E7E7E7;
color: #3B3B3b;
text-decoration:none;
padding:0 10px;
float:left
padding-left:0
position:relative
line-height: 4.5em
width: 10em
text-align: center
&:hover{
background-color: #3d6fc3;
background-image: -webkit-linear-gradient(left,#4577cb,#3264b6);
background-image: -o-linear-gradient(left,#4577cb,#3264b6);
background-image: -moz-linear-gradient(left,#4577cb,#3264b6);
background-image: -ms-linear-gradient(left,#4577cb,#3264b6);
background-image: linear-gradient(left,#4577cb,#3264b6);
color:#fff;
}
ul {
position:absolute;
}
a{
color: #3B3B3B;
text-decoration:none;
&:hover {
color:#fff;
}
}
}
ul {
border-top:1px solid #fff;
list-style:none;
padding:0;
margin:0;
li {
ul {
margin-top: -73px;
margin-left: 170px;
}
}
}
#drop-down{
display:none;
}
}
I created a flask application using a template that I found online. I am not well-versed with html or css. After calling the application, I realized that the background of the web page has a red-to-blue gradient that I would like to change to a regular dark blue color. Could you please let me know where in my code I can do this. The code is pasted below. Thanks in advance.
I tried changing background-image to none and background to #e6e6e6 (which represents the blue that I want) in multiple places, but it still did not work
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
.btn { display: inline-block; *display: inline; *zoom: 1; padding: 4px 10px 4px; margin-bottom: 0; font-size: 13px; line-height: 18px; color: #333333; text-align: center;text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); vertical-align: middle; background-color: #00008B; }
.btn-large { padding: 9px 14px; font-size: 15px; line-height: normal; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.btn:hover { color: #333333; text-decoration: none; background-color: #e6e6e6; background-position: 0 -15px; -webkit-transition: background-position 0.1s linear; -moz-transition: background-position 0.1s linear; -ms-transition: background-position 0.1s linear; -o-transition: background-position 0.1s linear; transition: background-position 0.1s linear; }
.btn-primary, .btn-primary:hover { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); color: #ffffff; }
.btn-primary.active { color: rgba(255, 255, 255, 0.75); }
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] { filter: none; background-color: #4a77d4; }
.btn-block { width: 100%; display:block; }
* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; }
html { width: 100%; height:100%; overflow:scroll; }
body {
width: 100%;
height:100%;
font-family: 'Open Sans', sans-serif;
background-image: none;
background-color: #e6e6e6;
color: #fff;
font-size: 18px;
text-align:center;
letter-spacing:1.2px;
}
.login {
position: absolute;
top: 40%;
left: 50%;
margin: -150px 0 0 -150px;
width:400px;
height:450px;
}
.login h1 { color: #fff; text-shadow: 0 0 10px rgba(0,0,0,0.3); letter-spacing:1px; text-align:center; }
input {
width: 100%;
margin-bottom: 15px;
background-image:none;
background: #e6e6e6;
border: none;
outline: none;
padding: 10px;
font-size: 13px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
border: 1px solid rgba(0,0,0,0.3);
border-radius: 4px;
box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px 1px rgba(255,255,255,0.2);
}
input:focus { box-shadow: inset 0 -5px 45px rgba(100,100,100,0.4), 0 1px 1px rgba(255,255,255,0.2); }
You can try adding !important to override the background from the template. it would look something like this
background-image:none !important;
background-color: #e6e6e6 !important;
So I've got this button, and it looks just fine in Chrome, but load it in Firefox and it's TOTALLY different. I've tried adding prefixes and it doesn't seem to change anything.
var checkbox = document.getElementById("cb4");
checkbox.indeterminate = true;
body
{
font-family:arial;
}
.flipswitch
{
position: relative;
background: white;
width: 120px;
height: 40px;
-webkit-appearance: initial;
border-radius: 3px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
outline:none;
font-size: 14px;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
cursor:pointer;
border:1px solid #ddd;
}
.flipswitch:indeterminate:after
{
position:absolute;
top:5%;
display:block;
line-height:32px;
width:45%;
height:90%;
box-sizing:border-box;
text-align:center;
color:black;
border:#888 1px solid;
border-radius:3px;
}
.flipswitch:not(:indeterminate):after
{
position:absolute;
top:5%;
display:block;
line-height:32px;
width:45%;
height:90%;
box-sizing:border-box;
text-align:center;
transition: all 0.3s ease-in 0s;
color:black;
border:#888 1px solid;
border-radius:3px;
}
.flipswitch:indeterminate:after
{
left:30%;
content:"???";
background:grey;
}
.flipswitch:not(:indeterminate):after
{
left:2%;
content: "OFF";
background:#f00;
}
.flipswitch:not(:indeterminate):checked:after
{
left:53%;
content: "ON";
background:#0f0;
}
<!--Marketing Emails -->
<div class="form-row">
<h4>Do you wish to receive Marketing Emails</h4>
<p>Emails reminding you to keep your account updated, and to continue your job search with redacted</p>
<div>
<input type="checkbox" id="cb4" class="flipswitch" name="marketing"/>
<span></span>
</div>
</div>
It is meant to display as it does in Chrome.
Any advice would be appreciated - if I find anything new I'll make an edit.
Cheers all.
You just need to add the -moz-appearance: initial; for Firefox.
var checkbox = document.getElementById("cb4");
checkbox.indeterminate = true;
body
{
font-family:arial;
}
.flipswitch
{
position: relative;
background: white;
width: 120px;
height: 40px;
-webkit-appearance: initial;
-moz-appearance: initial;
border-radius: 3px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
outline:none;
font-size: 14px;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
cursor:pointer;
border:1px solid #ddd;
}
.flipswitch:indeterminate:after
{
position:absolute;
top:5%;
display:block;
line-height:32px;
width:45%;
height:90%;
box-sizing:border-box;
text-align:center;
color:black;
border:#888 1px solid;
border-radius:3px;
}
.flipswitch:not(:indeterminate):after
{
position:absolute;
top:5%;
display:block;
line-height:32px;
width:45%;
height:90%;
box-sizing:border-box;
text-align:center;
transition: all 0.3s ease-in 0s;
color:black;
border:#888 1px solid;
border-radius:3px;
}
.flipswitch:indeterminate:after
{
left:30%;
content:"???";
background:grey;
}
.flipswitch:not(:indeterminate):after
{
left:2%;
content: "OFF";
background:#f00;
}
.flipswitch:not(:indeterminate):checked:after
{
left:53%;
content: "ON";
background:#0f0;
}
<!--Marketing Emails -->
<div class="form-row">
<h4>Do you wish to receive Marketing Emails</h4>
<p>Emails reminding you to keep your account updated, and to continue your job search with redacted</p>
<div>
<input type="checkbox" id="cb4" class="flipswitch" name="marketing"/>
<span></span>
</div>
</div>
I'm looking for a way to create a tab bar that looks like the one in google chrome without using CSS3 or image resources. I want it to work in IE8.
...
This is a CSS3 example that I found on the Internet, but as you can see, it uses "transform", which is not available in IE8.
.tab-box {
height:50px;
background: #fff;
border-radius: 4px;
border:1px solid #ccc;
margin:0 10px 0;
box-shadow: 0 0 2px #fff inset;
-webkit-transform: perspective(100px) rotateX(30deg);
-moz-transform: perspective(100px) rotateX(30deg);
}
For old IE<9 add the class ie,
for non-IE<9 browsers do your amazing stuff with gradient etc....
html, body{height:100%; margin:0;font:16px/24px sans-serif;}
body{background:#abc;}
div{background:#fff;overflow:auto;}
/*TABS DEFAULT STYLES*/
/* here goes your awesomeness*/
.tabs{margin-bottom:0;padding:0;list-style:none;}
.tabs:after{content:"";display:table;clear:both;}
/*TABS IE*/
.tabs.ie li{
position:relative;
overflow:hidden;
float:left;
margin-right: -6px; /* (3) than adjust this value for the overlap */
}
.tabs.ie li a{
background: #ddd;
position:relative;
display:block;
padding: 4px 12px;
margin: 0 12px; /* (2) adjust the value till the borders corner touch */
}
.tabs.ie li a:before,
.tabs.ie li a:after{
content: "";
position:absolute;
top: 1px; width: 1px; /*(fictive 1px "roundness")*/
border-bottom: 60px solid #ddd; /* (1) Edit px till border is not cut */
}
.tabs.ie li a:before{
left: -21px; /* 20border + 1width */
border-left: 20px solid transparent;
}
.tabs.ie li a:after{
right: -21px; /* 20border + 1width */
border-right: 20px solid transparent;
z-index:2;
}
/* ACTIVE TAB */
.tabs.ie li a.active{
background:#fff;
}
.tabs.ie li a.active:after,
.tabs.ie li a.active:before{
border-bottom-color:#fff;
z-index:2;
}
.tabs.ie li:after{
content: "";
position:absolute;
top: 1px; width: 2px;
border-bottom: 60px solid #999;
right: -10px;
border-right: 20px solid transparent;
z-index:1;
}
<ul class="tabs ie">
<li><a>HOME</a></li>
<li><a class="active">ABOUT</a></li>
<li><a>PROJECTS</a></li>
<li><a>CONTACT</a></li>
</ul>
<div><h1>ABOUT</h1></div>
I have a form of textboxes with validation.
It is working fine if we click the save button first time it showing correctly. But once if we fill the text boxes and then remove the text from text boxes it is error message is getting displayed on text boxes. please see this fiddle:
http://jsfiddle.net/9fYxb/2/
CSS:
#field
{
margin-left: .5em;
float: right;
}
#field, label
{
float:left;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
}
br
{
clear: both;
}
input
{
border: 1px solid black;
margin-bottom: .5em;
width: 72px;
}
input.error
{
border: 1px solid red;
}
label.error
{
position:fixed;
Background-image:url("../images/unchecked.jpg");
background-repeat:no-repeat;
padding-left: 20px;
margin-left: .3em;
vertical-align:middle;
background-color: #FFEBE8;
border: solid 1px red;
width:210px;
height:15px;
}
label.valid
{
position:absolute;
Background-image:url("../images/checked.gif") ;
background-repeat:no-repeat;
padding-left: 20px;
margin-left: .3em;
vertical-align:top;
background-color:White;
border:none;
width:1px;
height: 16px;
}
Do you need float left for #field and label?
#field, label {
float:left;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
}
If you remove that and also remove position form label error and label valid:
http://jsfiddle.net/kimiliini/8SM7f/
Also, you would probably want to fix the mobile number check. Your current:
/[789]\d{9}$/
Would validate
// This as OK
7111111111
// But this would also validate this as OK:
123155551333321212121521251215421212487884655487111111111
Try using:
/^[789]\d{9}$/
The ^ denotes start of string.
Background-image is also bad. The CSS property does not have capital B.
Change your CSS for label.error from:
label.error
{
position:absolute;
Background-image:url("../images/unchecked.jpg");
background-repeat:no-repeat;
padding-left: 20px;
margin-left: .3em;
vertical-align:middle;
background-color: #FFEBE8;
border: solid 1px red;
width:210px;
height:15px;
}
to:
label.error
{
clear:both;
float:right;
Background-image:url("../images/unchecked.jpg");
background-repeat:no-repeat;
padding-left: 20px;
margin-left: .3em;
vertical-align:middle;
background-color: #FFEBE8;
border: solid 1px red;
width:210px;
height:15px;
}