I'm building a custom search bar with the following features:
Live-type filtering of data (the data is currently hard-coded in)
Up/down-arrowing through the dropdown list
Fixed-width search box with filter change (ID/Creator/Description/etc.)
Search button onclick event to pull search box data
It should look like this:
This is what it looks like in IE:
Firefox:
Chrome:
It's in the sandbox of my server, so you can check out the code there. Here's the HTML/CSS, though. I tried to 'fake' inline by floating to the left, but I'm getting some weird behavior.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Solr Search Prototype</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="scripts.js"></script>
<link href='style.css' rel='stylesheet' type='text/css' />
</head>
<body>
<div id='container'>
<div class='inline' id='refine'>Creator<div class="arrow-down"></div></div>
<input class='inline' id='search' type='text' size='30' />
<div class='inline' id='submit'>Search</div>
<div id='refineDropdown'><ul id='refineList'></ul></div>
<div id='dropdown'><ul id='list'></ul></div>
<ul id='hidden'></ul>
<br class="clearBoth" />
</div>
</body>
</html>
body {
margin:50px;
font-family:Arial, sans-serif;
font-size:13px;
}
div.inline { float:left; }
.clearBoth { clear:both; }
#refine {
margin-right:-3px;
overflow:hidden;
white-space:nowrap;
background: rgb(238,238,238); /* Old browsers */
background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
border-top-left-radius:4px;
border-bottom-left-radius:4px;
border:1px solid #AAA;
height:12px;
padding:6px 6px 6px 6px;
text-align:center;
font-size:11px;
font-family:Helvetica, sans-serif;
color:#666;
text-shadow:0px 1px 0px #e8eae5;
}
#refine:hover {
background: rgb(238,238,238); /* Old browsers */
background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(221,221,221,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(221,221,221,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */
cursor:pointer;
}
#submit {
margin-right:-1px;
overflow:hidden;
white-space:nowrap;
background: rgb(238,238,238); /* Old browsers */
background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
border-top-right-radius:4px;
border-bottom-right-radius:4px;
border:1px solid #AAA;
height:12px;
padding:6px 6px 6px 6px;
text-align:center;
font-size:11px;
font-family:Helvetica, sans-serif;
color:#666;
text-shadow:0px 1px 0px #e8eae5;
}
#submit:hover {
background: rgb(238,238,238); /* Old browsers */
background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(221,221,221,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(221,221,221,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */
cursor:pointer;
}
.refineClicked {
background:white !important;
border-bottom-left-radius:0px !important;
border-bottom:none !important;
}
.arrow-down {
margin:0 0 1px 7px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #666;
}
#search {
margin-right:-5px;
padding:4px;
border:1px solid #AAA;
color:#444;
}
#search:focus { outline:none }
#refineDropdown {
position:relative;
margin-top:-3px;
padding:3px;
width:150px;
max-height:200px;
background:#fff;
border-left:1px solid #AAA;
border-right:1px solid #AAA;
border-bottom:1px solid #AAA;
word-wrap:normal;
overflow:auto;
}
#hidden { display:none }
#dropdown {
margin-top:-1px;
margin-left:50px;
padding:3px;
width:213px;
max-height:200px;
background:#fff;
border-left:1px solid #CCC;
border-right:1px solid #CCC;
border-bottom:1px solid #CCC;
word-wrap:normal;
overflow:auto;
}
ul {
list-type:none;
margin:0;
padding:0;
}
li {
padding:5px 10px 5px 10px;
}
li:hover {
margin:-1px;
background:#E5F3FF;
border:1px solid #3366FF;
cursor:pointer;
}
.selected {
margin:-1px;
background: #E5F3FF;
border:1px solid #3366FF;
}
Tried on your test server and worked well. I changed html markup a bit.
Html
<div id='container'>
<div class='inline' id='refine'>Long test blah
<div class="arrow-down"></div>
</div>
<input class='inline' id='search' type='text' size='30' />
<div class='inline' id='submit'>Search</div>
<div class="hidden" id='refineDropdown'>
<ul id='refineList'></ul>
</div>
<div class="hidden" id='dropdown'>
<ul id='list'></ul>
</div>
<ul class='hidden'></ul>
<br class="clearBoth" />
Code / Live Example
I hope it suits to your need.
Related
I am making a customized navigation bar for my website, but the list items do not show up as I wanted.
here's what I've tried JSFiddle.
In my localhost i get This Output.
Thanks for your time.
here's the html code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div class="top-nav-shadow">
<nav class="navbar bg-nav">
<div class="navbar-brand">
Contact: +91 xxxxxxxxxx or xxxxxxxxx
</div>
<div class="top-nav-logo">
<img src="images/IN.png">
<img class="img2" src="images/PV.png">
</div>
</nav>
</div>
<div> </div>
<div class="nav-shadow">
<nav class="navbar bg-nav-inverse">
<div class="container-fluid">
<div>
<img src="images/logo.png" class="navbar-logo">
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Services</li>
<li>Courses</li>
</ul>
</div>
</div>
</nav>
</div>
</body>
</html>
Here's the css
#charset "utf-8";
/* CSS Document */
.bg-nav
{
background: #008080; /* Old browsers */
background: -moz-linear-gradient(-45deg, #008080 0%, #008080 80%, #ffffff 81%, #ffffff 81%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #008080 0%,#008080 80%,#ffffff 81%,#ffffff 81%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #008080 0%,#008080 80%,#ffffff 81%,#ffffff 81%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008080', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
border-top:1px solid #008080;
max-height:30px;
}
.bg-nav-inverse
{
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(-45deg, #ffffff 0%, #ffffff 17%, #008080 18%, #008080 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #ffffff 0%,#ffffff 17%,#008080 18%,#008080 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #ffffff 0%,#ffffff 17%,#008080 18%,#008080 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#008080',GradientType=1 );
color:black;
border-bottom:1px solid #008080;
max-height:50px;
}
.top-nav-shadow
{ margin-top:3px;
-webkit-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75);
box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75);
}
.nav-shadow
{
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
.navbar-logo
{
max-width:11%;;
margin-top:-45px;
margin-left:0px;
margin-bottom:-20px;
}
.top-nav-logo
{
margin-top:-18px;
}
.top-nav-logo img
{
max-height:60px;
margin-left:30px;
}
.top-nav-logo .img2
{
max-height:73px;
padding-left:10px;
}
.navbar-brand
{
font-family:Aharoni;
font-size:18px;
color:white;
padding:0px;
margin-top:-48px;
}
.navbar-brand a{
text-decoration:none;
color:white;
background-color:transparent;
font-size:20px;
}
.navbar-brand a: hover
{
text-decoration:none;
color:#CCC;
}
#media only screen and (max-width: 600px)
{
.bg-nav
{
background: #008080; /* Old browsers */
background: -moz-linear-gradient(-45deg, #008080 0%, #008080 63%, #ffffff 64%, #ffffff 64%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #008080 0%,#008080 63%,#ffffff 64%,#ffffff 64%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #008080 0%,#008080 63%,#ffffff 64%,#ffffff 64%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008080', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.bg-nav-inverse
{
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(-45deg, #ffffff 0%, #ffffff 37%, #008080 38%, #008080 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #ffffff 0%,#ffffff 37%,#008080 38%,#008080 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #ffffff 0%,#ffffff 37%,#008080 38%,#008080 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#008080',GradientType=1 );
color:black;
}
}
I am desiring an output as This Image
I have posted all that I have done, so i would like you to suggest me where i am doing the mistake.
I had some spare time and was curious about Bootstrap so I integrated your desired output the way I thought best (using Bootstrap for the first time haha).
Code snippet :
#charset "utf-8";
.navbar {
border: 1px solid #008080;
border-width: 1px 0;
box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75), 0 8px 6px -6px black;
}
.navbar-contact,
.nav {
background: #008080;
overflow: hidden;
}
.navbar-contact {
max-height: 29px;
}
.bottom {
margin-top: -30px;
}
/* White Angles (Common) */
.nav:before,
.navbar-contact:after {
content: "";
background: #fff;
position: absolute;
width: 2em; height: 2.5em;
transform: skew(-30deg);
}
/* .navbar-contact angle position */
.navbar-contact:after {
right: -1em;
top: 0;
}
/* .nav angle position */
.nav:before {
left: -1em;
top: 0;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<html>
<body>
<nav class="navbar p-0">
<div class="top d-flex w-100">
<div class="px-2 navbar-contact text-white position-relative flex-grow-1">Contact: <a class="text-white" href="#">+91 xxxxxxxxxx or xxxxxxxxxx </a></div>
<div class="pt-1 pr-3 d-flex mt-auto bg-white position-relative">
<img class="position-relative ml-2 mr-1" src="http://computervision.in/images/IN.png" height="50">
<img class="position-relative mx-3" src="http://computervision.in/images/PV.png" height="55">
</div>
</div>
<div class="bottom d-flex w-100">
<a href="" class="navbar-brand mr-0">
<img src="http://computervision.in/images/logo.png" height="60">
</a>
<ul class="nav mt-auto flex-grow-1 pl-4 position-relative">
<li class="nav-item active"><a class="nav-link text-white active" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link text-white" href="#">Services</a></li>
<li class="nav-item"><a class="nav-link text-white" href="#">Courses</a></li>
</ul>
</div>
</nav>
</body>
</html>
JSFiddle :
https://jsfiddle.net/3L7tmbxk/
To sum it up :
I transformed your gradient backgrounds into pseudo element angles. They are placed relatively to their containers for better responsivity and take advantage of Bootstrap 4 flexbox implementation.
I used Bootstrap classes as much as possible but I think you could improve it even more. It's my first time using it so I don't know all the possible configurations and all the available classes.
I set the height of your images directly into their img tag.
I have edited your CSS as your desired output. I will suggest you to mustn't use margins in negative. It is not a appropriate way to make a good layout.
#charset "utf-8";
/* CSS Document */
.bg-nav
{
background: #008080; /* Old browsers */
background: -moz-linear-gradient(-45deg, #008080 0%, #008080 80%, #ffffff 81%, #ffffff 81%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #008080 0%,#008080 80%,#ffffff 81%,#ffffff 81%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #008080 0%,#008080 80%,#ffffff 81%,#ffffff 81%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008080', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
border-top:1px solid #008080;
max-height:30px;
}
.bg-nav-inverse
{
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(-45deg, #ffffff 0%, #ffffff 17%, #008080 18%, #008080 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #ffffff 0%,#ffffff 17%,#008080 18%,#008080 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #ffffff 0%,#ffffff 17%,#008080 18%,#008080 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#008080',GradientType=1 );
color:black;
border-bottom:1px solid #008080;
max-height:50px;
}
.top-nav-shadow
{ margin-top:3px;
-webkit-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75);
box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75);
}
.nav-shadow
{
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
.navbar-logo
{
max-width:11%;
position: absolute;
top: 28px;
}
.top-nav-logo
{
display: inline-flex;
justify-content: flex-end;
float:right;
}
.top-nav-logo img
{
max-height:44px;
margin-left:30px;
}
.top-nav-logo .img2
{
max-height:47px;
padding-left:30px;
}
.navbar-brand
{
font-family:Aharoni;
font-size:18px;
color:white;
padding:0px;
display: inline-flex;
}
.navbar-brand a{
text-decoration:none;
color:white;
background-color:transparent;
font-size:20px;
}
.navbar-brand a: hover
{
text-decoration:none;
color:#CCC;
}
.nav.navbar-nav{
list-style: none;
display: inline-flex;
margin-left: 220px;
padding: 0;
}
.nav.navbar-nav a{
text-decoration: none;
margin-right: 50px;
}
#media only screen and (max-width: 600px)
{
.bg-nav
{
background: #008080; /* Old browsers */
background: -moz-linear-gradient(-45deg, #008080 0%, #008080 63%, #ffffff 64%, #ffffff 64%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #008080 0%,#008080 63%,#ffffff 64%,#ffffff 64%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #008080 0%,#008080 63%,#ffffff 64%,#ffffff 64%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008080', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.bg-nav-inverse
{
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(-45deg, #ffffff 0%, #ffffff 37%, #008080 38%, #008080 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #ffffff 0%,#ffffff 37%,#008080 38%,#008080 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #ffffff 0%,#ffffff 37%,#008080 38%,#008080 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#008080',GradientType=1 );
color:black;
}
}
Is it real to make such border through css?
I thought about
border: 3px solid white;
border-top: none;
and pseudo-element with gradient, but its not exactly the same.
You can do this by adding a pseudo-element with a gradient. transparent -> white -> transparent.
FIDDLE
CSS
div
{
width: 600px;
height: 200px;
border: 5px solid black;
border-radius: 20px;
position: relative;
margin: 50px;
}
div:before
{
content: '';
position: absolute;
top:-5px;
left:0;right:0;
margin:auto;
height: 5px;
width: 80%;
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 1%, rgba(255,255,255,1) 17%, rgba(255,255,255,1) 85%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(1%,rgba(255,255,255,0)), color-stop(17%,rgba(255,255,255,1)), color-stop(85%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,1) 17%,rgba(255,255,255,1) 85%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,1) 17%,rgba(255,255,255,1) 85%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,1) 17%,rgba(255,255,255,1) 85%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,1) 17%,rgba(255,255,255,1) 85%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
}
[Update: this can be done with a radial gradient, but Im no longer in front of my computer.]
I'm not sure that there's a border gradient (yet anyway), but I built something with nested s for you. Just an idea. It's just missing the solid white across the bottom. Hope it's helpful.
jsfiddle: http://jsfiddle.net/itsmikem/HfCT3/
css:
div {
position:relative;
}
#outer {
background: #cccc00;
width:200px;
padding:10px;
}
#mid {
border-radius:10px;
background: #ffffff;
background: -webkit-linear-gradient(left, #ffffff 0%,#cccc00 50%,#ffffff 100%);
background: linear-gradient(to right, #ffffff 0%,#cccc00 50%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 );
padding:3px;
}
#inner {
/*width:100%;
height:100%;*/
background:#cccc00;
border-radius:10px;
padding:10px;
}
html:
<div id="outer">
<div id="mid">
<div id="inner">stuff
</div>
</div>
</div>
I'm not sure why this downdown menu won't show up in IE. Can anyone see what the problem is? It works in all the other browsers, just not IE. I know gradients in IE take a lot of thought. Here is my code.
.menu {
border: 1px solid #ccc;
background: #006699; /* Old browsers */
background: -moz-linear-gradient(top, #006699 0%, #1f416b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#006699), color-stop(100%,#1f416b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #006699 0%,#1f416b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #006699 0%,#1f416b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #006699 0%,#1f416b 100%); /* IE10+ */
background: linear-gradient(to bottom, #006699 0%,#1f416b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006699', endColorstr='#1f416b'); /* IE6-9 */
}
.menu li a {
padding: 15px 45px;
text-decoration: none;
font-size: 0.9em;
color: #fff;
font-family: Arial, sans-serif;
}
.menu li.current > a,
.menu li.current > a:hover,
.menu li.current.hover > a {
background: rgb(70,168,217); /* Old browsers */
background: -moz-linear-gradient(top, rgba(122,188,255,1) 0%, rgba(96,171,248,1) 44%, rgba(64,150,238,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(122,188,255,1)), color-stop(44%,rgba(96,171,248,1)), color-stop(100%,rgba(64,150,238,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* W3C */
color: #fff;
text-shadow: 0px -1px 0px rgba(0,0,0,0.2);
cursor: default;
}
.menu li a:hover,
.menu li.hover > a {
background: #b32416; /* Old browsers */
background: -moz-linear-gradient(top, #b32416 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b32416), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b32416 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b32416 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b32416 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
background: linear-gradient(to bottom, #b32416 0%,#8f0222 44%,#6d0019 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b32416', endColorstr='#6d0019'); /* IE6-9 */
}
Which IE version?
I know that you need something like this in the head of your html page. Has to do with SVG or something. Conditional Formatting.
<!-- following class is conditional for IE9 and must be put in elements for css gradient to work -->
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
Then apply this gradient class to elements using the gradients.
http://www.colorzilla.com/gradient-editor/
EDIT
OK. Did a little research and found that the filter should have an 8 digit hex code where the first two are the opacity. I think FF for 100% and 00 for 0%. Also, use double quotes ". Might make a difference.
So do something like this:
filter:progid:DXImageTransform.Microsoft.gradient
(startColorstr="#ff7abcff",endColorstr="#ff4096ee",GradientType=0);
I have a pretty straight-forward navigation menu, and I'm trying to style one item differently than the others. However, only the background is applied while other things like border radius and link color are not.
This is the menu:
<div class="menu">
<ul>
<li>Page1</li>
<li>Page2 </li>
<li>Page3 </li>
<li class="extranav">Extra</li>
</ul>
</div>
These are the generic menu list styles:
.menu ul{ margin:0px; padding:0px;}
.menu ul li{ float:left; background:url(../images/sprator.png) right top no-repeat; padding-right:1px;}
.menu ul li a{display:block; padding:0px 23px; font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#fff; line-height:46px; text-decoration:none; text-transform:uppercase;}
.menu ul li a:hover{ display:block;background: #b04141; /* Old browsers */
background: -moz-linear-gradient(top, #b04141 0%, #c35151 39%, #c35151 62%, #c35151 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b04141), color-stop(39%,#c35151), color-stop(62%,#c35151), color-stop(100%,#c35151)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b04141 0%,#c35151 39%,#c35151 62%,#c35151 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b04141 0%,#c35151 39%,#c35151 62%,#c35151 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b04141 0%,#c35151 39%,#c35151 62%,#c35151 100%); /* IE10+ */
background: linear-gradient(top, #b04141 0%,#c35151 39%,#c35151 62%,#c35151 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b04141', endColorstr='#c35151',GradientType=0 ); /* IE6-9 */}
And this is what I'm trying to apply to the extra nav element:
.extranav a{
height:46px;
color:#FF0000;
line-height:46px;
display:block;
background: #206818; /* Old browsers */
background: -moz-linear-gradient(top, #024A00 0%, #206818 39%, #347C2C 62%, #3E8636 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#024A00), color-stop(39%,#206818), color-stop(62%,#347C2C), color-stop(100%,#3E8636)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #024A00 0%,#206818 39%,#347C2C 62%,#3E8636 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #024A00 0%, #206818 39%, #347C2C 62%, #3E8636 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #024A00 0%, #206818 39%, #347C2C 62%, #3E8636 100%); /* IE10+ */
background: linear-gradient(top, #024A00 0%, #206818 39%, #347C2C 62%, #3E8636 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#024A00', endColorstr='#3E8636',GradientType=0 ); /* IE6-9 */}
-moz-border-radius: 0px 0px 10px 0px;
-webkit-border-radius:0px 0px 10px 0px;
-khtml-border-radius: 0px 0px 10px 0px;
border-radius:0px 0px 10px 0px;
}
The background properties are applied properly, while other things like link color and border radius are not. Why is this happening and how do I fix it?
Fiddle: http://jsfiddle.net/68Vb6/
The border radius is not part of the style, you have a } that ends the style block before it.
Change this line:
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#024A00', endColorstr='#3E8636',GradientType=0 ); /* IE6-9 */}
to:
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#024A00', endColorstr='#3E8636',GradientType=0 ); /* IE6-9 */
The .menu ul li a selector is more specific than the .extranav a selector, so the settings in the first rule will take precedence. Change the selector to .menu ul li.extranav a to make it more specific.
I was stupid and built a web widget in jsFiddle using absolute positioning because it was just a quick prototype to show someone how the functionality would work.
Well we decided that we're gonna use it now and I'm having a hell of a time converting the elements to utilize relative positioning. Also, I'm in the middle of trying to convert this to a jQuery UI widget, so I want everything set up so that it just dumps onto the page without issue.
The widget can be seen HERE. Basically it's a search box of sorts that will allow some filtering with the left-most button.
The components are as such:
#refine: The left-most button.
#refineDropdown: The drop down menu that appears when you click on the refine button
#search: The input box
#dropdown: The live-type search filtering box
#submit: The right-most search button
Question: When creating a widget, should positioning be done relatively or absolutely? If I have multiple instances of this on a page, the position of the dropdowns should be independent of their position on the page, but I don't fully understand positioning and HTML arrangement to get this to work.
CSS:
.inline { float:left; }
.clearBoth { clear:both; }
#refine {
position: relative;
margin-right: -3px;
overflow:hidden;
white-space:nowrap;
background: rgb(238,238,238); /* Old browsers */
background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
border-top-left-radius:4px;
border-bottom-left-radius:4px;
border:1px solid #AAA;
height:12px;
padding:6px 25px 6px 6px;
text-align:center;
font-size:11px;
font-family:Helvetica, sans-serif;
color:#666;
text-shadow:0px 1px 0px #e8eae5;
}
#refine:hover {
background: rgb(238,238,238); /* Old browsers */
background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(221,221,221,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(221,221,221,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */
cursor:pointer;
}
#submit {
float: left;
margin-right:-1px;
overflow:hidden;
white-space:nowrap;
background: rgb(238,238,238); /* Old browsers */
background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
border-top-right-radius:4px;
border-bottom-right-radius:4px;
border:1px solid #AAA;
height:12px;
padding:6px 6px 6px 6px;
text-align:center;
font-size:11px;
font-family:Helvetica, sans-serif;
color:#666;
text-shadow:0px 1px 0px #e8eae5;
}
#submit:hover {
background: rgb(238,238,238); /* Old browsers */
background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(221,221,221,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(221,221,221,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */
cursor:pointer;
}
.refineClicked {
background:white !important;
border-bottom-left-radius:0px !important;
border-bottom:none !important;
}
.arrow-down {
position: absolute;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #666;
right: 7px;
top: 10px;
}
#search {
float: left;
height: 24px;
margin-right:-5px;
padding: 0px 7px 0px 7px;
border:1px solid #AAA;
color:#444;
}
#search:focus { outline:none }
#refineDropdown {
position:relative;
top:40px;
left:30px;
width:150px;
max-height:200px;
background:#fff;
border-left:1px solid #AAA;
border-right:1px solid #AAA;
border-bottom:1px solid #AAA;
word-wrap:normal;
overflow:auto;
}
#dropdown {
top: 76px;
padding:3px;
width:200px;
max-height:200px;
background:#fff;
border-left:1px solid #CCC;
border-right:1px solid #CCC;
border-bottom:1px solid #CCC;
word-wrap:normal;
overflow:auto;
left: 59px;
position: absolute;
}
ul {
list-type:none;
margin:0;
padding:0;
}
li {
padding:5px 10px 5px 10px;
}
li:hover {
margin:-1px;
background:#E5F3FF;
border:1px solid #3366FF;
cursor:pointer;
}
.selected {
margin:-1px;
background: #E5F3FF;
border:1px solid #3366FF;
}
.hidden { display:none }
I believe the reason you want this to be done with relative positioning is that you believe absolute positioning is always absolute in relation to the page. Surprise: it isn't.
In fact, what it is absolute to is the first parent that has its position attribute set. As such, the simple solution could be to wrap your entire widget into a div and declare the position of that div as relative.
For example:
<p>adsadds
<div class='container'>
<div class='absolutelyPositioned'>BlaBla</div>
</div>
sddasda</p>
With this css:
.container
{
position: relative;
}
.absolutelyPositioned
{
position: absolute;
top: 100px;
left: 100px;
}
will have the inner div with "BlaBla" in it position not at (100, 100) of the web page, but of the container div. In other words if I turn <p>adsadds into <p>adsadds <br /> the "BlaBla" will be pushed down as well.