The text is supposed to sit in the middle (vertically) on the navigation bar.
My code isn't working.
Can anyone explain why?
<style>
#navigationbar {
background: rgb(252,219,121);
background: -moz-linear-gradient(top, rgba(252,219,121,1) 2%, rgba(254,191,1,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgba(252,219,121,1)), color-stop(100%,rgba(254,191,1,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(252,219,121,1) 2%,rgba(254,191,1,1) 100%);
background: -o-linear-gradient(top, rgba(252,219,121,1) 2%,rgba(254,191,1,1) 100%);
background: -ms-linear-gradient(top, rgba(252,219,121,1) 2%,rgba(254,191,1,1) 100%);
background: linear-gradient(to bottom, rgba(252,219,121,1) 2%,rgba(254,191,1,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcdb79', endColorstr='#febf01',GradientType=0 );
height: 40px;
}
#logo {
color:white;
vertical-align:middle;
margin-left:10px;
}
* {
margin:0px;
}
</style>
<link rel="stylesheet" type="text/css" href="style.css">
<div id='navigationbar'>
<a id='logo' href='http://localhost/'>WORK.</a>
</div>
vertical-align only works on elements with specific properties, generally with the CSS table display properties (table-cell, table, table-row and so forth).
However there is a simple way to vertically center things when you know the height of their container. Just add line-height: 40px to your #logo CSS (you could alternatively add it to the container, it makes no difference in this case).
#logo {
color:white;
line-height: 40px;
margin-left:10px;
}
If you wanted to use vertical-align, you would need to set display: table on the container (#navigationbar) and display: table-cell to your #logo that has vertical-align: middle. This will achieve the same effect.
You need to set the line height on the container for the vertical align to know what to be in the vertical middle of. See JSBIN demo
#navigationbar {
background: rgb(252,219,121);
background: -moz-linear-gradient(top, rgba(252,219,121,1) 2%, rgba(254,191,1,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgba(252,219,121,1)), color-stop(100%,rgba(254,191,1,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(252,219,121,1) 2%,rgba(254,191,1,1) 100%);
background: -o-linear-gradient(top, rgba(252,219,121,1) 2%,rgba(254,191,1,1) 100%);
background: -ms-linear-gradient(top, rgba(252,219,121,1) 2%,rgba(254,191,1,1) 100%);
background: linear-gradient(to bottom, rgba(252,219,121,1) 2%,rgba(254,191,1,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcdb79', endColorstr='#febf01',GradientType=0 );
height: 40px;
line-height:40px;
}
Add this to your current CSS (demo here):
#navigationbar {
width: 100%;
display: table;
}
#logo {
display: table-cell;
}
Like #Ennui said:
vertical-align only works on elements with specific properties, generally with the CSS table display properties (table-cell, table, table-row and so forth).
You could use line-height:33px; , but i also recommend wrapping your 'a tag' into a 'div tag' , so it will be easy to manipulate it later on. Example:
<style>
#logo {
width: 30px;
height: 40px;
margin-left: 10px;
}
#logo a{
color: white;
line-height: 33px;
}
</style>
<body>
<div id='navigationbar'>
<div id='logo'><a href='http://localhost/'>WORK.</a></div>
</div>
</body>
If you need to move that logo around later, it will be easy to just use absolute value on the #logo.
Related
I have below code to set the background image to button.
CSS:
input.hButton{
background-image: url('images/hbutton.png');
height: 21px;
width: 110px;
text-align: center;
color: #696969;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
display:block;
}
HTML:
<input type="button" class="hButton" id="customize" value="Customize Table"></input>
Output:
Here when the button text is too long, button is split. How can I get it fixed?
Add
background-size: 100% 100%;
or find your perfect setting here:
http://www.css3.info/preview/background-size/
Btw in your case should be better:
use a gradient
use border-radius for the upper corners
use a thin border
replace your css code background-image property with this one :
background-image: url('images/hbutton.png') top repeat-y;
Hi please use the pure css code.. and remove your older method..
Fiddle:http:http://jsfiddle.net/nikhilvkd/RZ4vV/1/
What's Here?
1-Gradient
2-Border radius
3.border top,right and left
.hButton{
border:solid 1px #0e4f85;
border-bottom:none;
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;
padding:3px;
color:#696969;
background: #f7f5f5; /* Old browsers */
background: -moz-linear-gradient(top, #f7f5f5 0%, #e0dede 50%, #e0dede 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f5f5), color-stop(50%,#e0dede), color-stop(99%,#e0dede)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f7f5f5 0%,#e0dede 50%,#e0dede 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f7f5f5 0%,#e0dede 50%,#e0dede 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f7f5f5 0%,#e0dede 50%,#e0dede 99%); /* IE10+ */
background: linear-gradient(to bottom, #f7f5f5 0%,#e0dede 50%,#e0dede 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f5f5', endColorstr='#e0dede',GradientType=0 ); /* IE6-9 */
}
How would I make the first vertical 5 pixels of a background colour blue in a div? So, in other words in the following example there would be a blue bar running across the top for 500 pixels that is 5 pixels high.
To be clear I have a special reason I can not use a border, etc (I wish it was that easy!)
This is what I have so far (link to fiddle here):
CSS:
.box {
height: 200px;
width: 500px;
background-color: red;
}
HTML:
<div class="box">
</div>
Box-shadow has slightly better browser support than gradients. So that's my method. Frankly, box-shadows are pretty awesome. You can do so many things with them to keep your markup clean.
box-shadow: inset 0px 5px 0 0 blue
-webkit-box-shadow: inset 0px 5px 0 0 blue
Use a CSS gradient.
jsFiddle example
.box {
height: 200px;
width: 500px;
background-color: red;
background: -moz-linear-gradient(top, #1e5799 5px, #ff0000 2%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(5px,#1e5799), color-stop(2%,#ff0000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 5px,#ff0000 2%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 5px,#ff0000 2%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 5px,#ff0000 2%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 5px,#ff0000 2%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#ff0000',GradientType=0 ); /* IE6-9 */
}
I think I'd probably opt for a :before pseudo-element.
.box:before {
content: '';
width: 100%;
display: block;
height: 5px;
background: blue;
}
jsFiddle
Add a 5 pixel left-side border:
border-left: 5px solid blue;
The easiest way to do this without a border would probably be adding another div element.
HTML
<div class="box" id="other_box">
</div>
<div class="box">
</div>
CSS
.box {
height: 200px;
width: 500px;
background-color: red;
}
#other_box {
height: 5px;
background-color: blue;
}
And if you truly wanted it to be the first 5px of 200px main div, you can just change the height of the main div to 195px.
JSFiddle:
http://jsfiddle.net/jfJcU/3/
Or, you could wrap the new div within the main div:
http://jsfiddle.net/jfJcU/5/
I saw an amazing border effect on a website, and I'm wondering how the effect is achieved best. It's a seperator between navigation items in a vertical list:
I will choose the best answer based on the cross-browser compatibilty (and as non-hacky as possible).
Here you go
You may have to mess with it depending on what you want to put inside you list! If you want to change the color of the glow, you can just alter the colors in the gradient. This is a nice generator, which you probably already knew about.
HTML:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
CSS:
ul {
list-style: none;
width: 200px;
}
li {
background: rgb(30,30,30);
text-align: center;
height: 40px;
color: rgb(140,140,140);
border-bottom: 1px solid black;
}
li:after {
content: '';
display: block;
position: relative;
top: 41px;
height: 1px;
background: #1e1e1e; /* Old browsers */
background: -moz-linear-gradient(left, #1e1e1e 0%, #757575 50%, #1e1e1e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1e1e1e), color-stop(50%,#757575), color-stop(100%,#1e1e1e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #1e1e1e 0%,#757575 50%,#1e1e1e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #1e1e1e 0%,#757575 50%,#1e1e1e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #1e1e1e 0%,#757575 50%,#1e1e1e 100%); /* IE10+ */
background: linear-gradient(to right, #1e1e1e 0%,#757575 50%,#1e1e1e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e1e1e', endColorstr='#1e1e1e',GradientType=1 ); /* IE6-9 */
}
I have this very simply CSS code.
body {
background-color: #08407A;
min-width: 1000px;
height: 500px;
}
This one doesn't work in IE at all. The background is fully colored, but I need only background for 500px. I have tried all that background-cover, behavior. But it didn't work out for me.
You shouldn't be using the body as fixed width container.
Limiting the width of body doesn't make sense, as it represents the entire browser window.
Instead, try using a block element, such as a <div> to achieve your results.
HTML:
<div class="myDiv">
This is my content
</div>
CSS:
.myDiv { background-color:#08407A; min-width:1000px; height:500px; }
Working directly with body isn't good idea. Instead, use an element:
HTML
<body>
<div id="bg"></div>
<div id="wrapper">
HTML DATA
</div>
</body>
CSS
#bg {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 500px;
background-color: #08407A;
}
#wrapper {
position: relative;
}
Check this FIDDLE DEMO.
It will not work like that.
Whatever colour you give for body will be shown across the page. To show color only for 500px you need to add a div with height 500px and give background color to it.
But if you don't want to use a div and you are using a modern browser you can try something like this using background style
http://jsfiddle.net/hZfJJ/1/
body {
background: -moz-linear-gradient(top, rgba(255,61,61,1) 0%, rgba(255,61,61,1) 40%, rgba(255,255,255,1) 40%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,61,61,1)), color-stop(40%,rgba(255,61,61,1)), color-stop(40%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,61,61,1) 0%,rgba(255,61,61,1) 40%,rgba(255,255,255,1) 40%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,61,61,1) 0%,rgba(255,61,61,1) 40%,rgba(255,255,255,1) 40%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,61,61,1) 0%,rgba(255,61,61,1) 40%,rgba(255,255,255,1) 40%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,61,61,1) 0%,rgba(255,61,61,1) 40%,rgba(255,255,255,1) 40%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3d3d', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
background-repeat : no-repeat;
height:100%;
}
html {
height: 100%;
}
ok say the content inside the <body> totals 300px high.
If I set the background of my <body> using -webkit-gradient or -moz-linear-gradient
Then I maximize my window (or just make it taller than 300px) the gradient will be exactly 300px tall (the height of the content) and just repeat to fill the rest of the window.
I am assuming this is not a bug since it is the same in both webkit and gecko.
But is there a way to make the gradient stretch to fill the window instead of repeat?
Apply the following CSS:
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}
Edit: Added margin: 0; to body declaration per comments (Martin).
Edit: Added background-attachment: fixed; to body declaration per comments (Johe Green).
Regarding a previous answer, setting html and body to height: 100% doesn't seem to work if the content needs to scroll. Adding fixed to the background seems to fix that - no need for height: 100%;
E.g.:
body {
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8)) fixed;
}
I know I'm late to the party, but here's a more solid answer.
All you need to do is use min-height: 100%; rather than height: 100%; and your gradient background will extend the entire height of the content without repeating, even if the content is scrollable.
Like this:
html {
min-height: 100%;
}
body {
background: linear-gradient(#b5e48c, #457b9d);
}
There's a second solution though.
As others have said, adding the value fixed to the background declaration, will make the gradient extend the full height of the viewport.
Like this:
body {
background: linear-gradient(#b5e48c, #457b9d) fixed;
}
Granted, you still need to declare min-height: 100%; in the html.
Here's a demo in CodePen where you can play with both solutions: https://codepen.io/ricardozea/pen/abwGBmz?editors=1100
Here's what I did to solve this problem... it will show the gradient for the full length of the content, then simply fallback to the background color (normally the last color in the gradient).
html {
background: #cbccc8;
}
body {
background-repeat: no-repeat;
background: #cbccc8;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8));
background: -moz-linear-gradient(top, #fff, #cbccc8);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cbccc8');
}
<body>
<h1>Hello world!</h1>
</body>
I've tested this in FireFox 3.6, Safari 4, and Chrome, I keep the background-color in the body for any browsers that for some reason don't support styling the HTML tag.
Setting html { height: 100%} can wreak havoc with IE. Here's an example (png). But you know what works great? Just set your background on the <html> tag.
html {
-moz-linear-gradient(top, #fff, #000);
/* etc. */
}
Background extends to the bottom and no weird scrolling behavior occurs. You can skip all of the other fixes. And this is broadly supported. I haven't found a browser that doesn't let you apply a background to the html tag. It's perfectly valid CSS and has been for a while. :)
There is a lot of partial information on this page, but not a complete one. Here is what I do:
Create a gradient here: http://www.colorzilla.com/gradient-editor/
Set gradient on HTML instead of BODY.
Fix the background on HTML with "background-attachment: fixed;"
Turn off the top and bottom margins on BODY
(optional) I usually create a <DIV id='container'> that I put all of my content in
Here is an example:
html {
background: #a9e4f7; /* Old browsers */
background: -moz-linear-gradient(-45deg, #a9e4f7 0%, #0fb4e7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#a9e4f7), color-stop(100%,#0fb4e7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #a9e4f7 0%,#0fb4e7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #a9e4f7 0%,#0fb4e7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #a9e4f7 0%,#0fb4e7 100%); /* IE10+ */
background: linear-gradient(135deg, #a9e4f7 0%,#0fb4e7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
background-attachment: fixed;
}
body {
margin-top: 0px;
margin-bottom: 0px;
}
/* OPTIONAL: div to store content. Many of these attributes should be changed to suit your needs */
#container
{
width: 800px;
margin: auto;
background-color: white;
border: 1px solid gray;
border-top: none;
border-bottom: none;
box-shadow: 3px 0px 20px #333;
padding: 10px;
}
This has been tested with IE, Chrome, and Firefox on pages of various sizes and scrolling needs.
Adding a space and the word fixed to the end should be sufficient. No need to set heights.
body{
background: linear-gradient(#e4efe9,#93a5cf) fixed;
}
Dirty; maybe could you just add a min-height: 100%; to the html, and body tags? That or at least set a default background color that is the end gradient color as well.
I had trouble getting the answers in here to work.
I found it worked better to fix a full-size div in the body, give it a negative z-index, and attach the gradient to it.
<style>
.fixed-background {
position:fixed;
margin-left: auto;
margin-right: auto;
top: 0;
width: 100%;
height: 100%;
z-index: -1000;
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
}
.blue-gradient-bg {
background: #134659; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(top, #134659 , #2b7692); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom, #134659, #2b7692); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(top, #134659, #2b7692); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom, #134659 , #2b7692); /* Standard syntax */
}
body{
margin: 0;
}
</style>
<body >
<div class="fixed-background blue-gradient-bg"></div>
</body>
Here's a full sample
https://gist.github.com/morefromalan/8a4f6db5ce43b5240a6ddab611afdc55
I have used this CSS code and it worked for me:
html {
height: 100%;
}
body {
background: #f6cb4a; /* Old browsers */
background: -moz-linear-gradient(top, #f2b600 0%, #f6cb4a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2b600), color-stop(100%,#f6cb4a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* IE10+ */
background: linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2b600', endColorstr='#f6cb4a',GradientType=0 ); /* IE6-9 */
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
width: 100%;
background-position: 0px 0px;
}
A related information is that you can create your own great gradients at http://www.colorzilla.com/gradient-editor/
/Sten
background: #13486d; /* for non-css3 browsers */
background-image: -webkit-gradient(linear, left top, left bottom, from(#9dc3c3), to(#13486d)); background: -moz-linear-gradient(top, #9dc3c3, #13486d);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc3c3', endColorstr='#13486d');
background-repeat:no-repeat;
this is what I did:
html, body {
height:100%;
background: #014298 ;
}
body {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5c9cf2), color-stop(100%,#014298));
background: -moz-linear-gradient(top, rgba(92,156,242,1) 0%, rgba(1,66,152,1) 100%);
background: -o-linear-gradient(top, #5c9cf2 0%,#014298 100%);
/*I added these codes*/
margin:0;
float:left;
position:relative;
width:100%;
}
before I floated the body, there was a gap on top, and it was showing the background color of html. if I remove the bgcolor of html, when I scroll down, the gradient is cut. so I floated the body and set it's position to relative and the width to 100%. it worked on safari, chrome, firefox, opera, internet expl.. oh wait. :P
what do you guys think?
instead of 100% i just add some pixxel got this now and it works for whole page without gap:
html {
height: 1420px; }
body {
height: 1400px;
margin: 0;
background-repeat: no-repeat; }