I'm trying to add a background that is split in 3 parts. 5% gray on the left, white, 5% gray on the right...
SO I created a gradient with CSS, which is partially okay in Chrome but in IE it doesn't work at all...
How would you create the effect I'm looking for?
Here is the website.
CSS Gradients can cause havoc due to their lack luster support accross platforms. You would most likely want to do the div method mentiond by #Louis in the comments to your question. Something like this could work:
<body>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
<style>
.left, .right{
width:5%;
background:gray;
height:100%;
float:left;
margin:0;
}
.center{
width:90%;
background:white;
height:100%;
float:left;
margin:0;
}
</style>
</body>
Css gradient:
<div class="container"></div>
css is too long so look in this fiddle.
This one works in IE 9.
Another option:
<div class="container">
<div class="white"></div>
</div>
<style>
body { background: blue;}
.container {
height: 50px;
background: gray;
}
.white {
height: 50px;
background: white;
margin: 0 5%;
}
</style>
Fiddle
this website will help you to create css gradient
http://gradients.glrzad.com/
also try to run this in IE
there is support for the gradient in latest IE but i think not for old ones.
other solution is that make a photoshoped image of your own design and use this as your background image.
Related
How to, as the title suggests, make a div didn't move. So, when the user scroll our web, the content is moving but not the div-element. If let say the div-element I want to implement is a sidebar, how can I do that with only a CSS script? (or with HTML5 power).
<style type="text/css">
div.fixedDiv{position:fixed;top:0;left:0;}
</style>
You can try this... Jsfiddle
Html
<div class="wrapper">
<div class="fixed"></div>
</div>
Css..
.wrapper { position: relative; height: 1500px; background:red; }
.fixed { position: fixed; left:0; top:50; width:100px; height:100px; background: green; }
<style>
#yourdiv{
position:absolute;
left:100px;
top:150px;
}
</style>
<div id="yourdiv">Hello I'm div</div>
Adjust the coordinates left and top as you desire.
Anyways you can see css positionings here.
I've been trying to make this work for a while and it never seems to work out. I think its because my HTML structure is slightly different than the ones in the example. My problem is, on pages that are smaller than the viewport, the footer is not automatically pushed to the bottom, and the #main div is not extended to the footer.
Here's my HTML:
<html>
<body>
<div id='container'>
<div id='main'>
<div id='content'> </div>
</div>
<div id='footer'> </div>
</div>
</body>
</html>
And here would be my basic CSS, without implementation of CSS Sticky Footer:
div#container {
width:960px;
margin:0 auto;
}
div#main {
background-color:black
padding-bottom:30px;
}
div#content {
width:425px;
}
div#footer {
position:relative;
bottom:0;
width:inherit;
height:90px;
}
To clarify: Lets say the background of div#main is black. Now lets say, on a page, there's only 1 line of text in div#main. So I want to make the #main area extend all the way down to the footer (which is at the bottom of the page) even when there isn't enough content to force that to happen. make sense?
And One more thing. The #main area has a different background color than the body. So the #main background has to extend all the way down to the footer, cause if there's a gap, the body color peaks through instead
Try making the footer position:fixed.
http://jsfiddle.net/QwJyp/
Update
I'm a little bit closer: http://jsfiddle.net/QwJyp/1/. Perhaps somebody can build off it. If you remove the line with !important defined, it allows the main with height:100% to show up. But there's still a lot of extra padding at the bottom of the div which I can't figure out. I'll continue later when I have more time. Good luck! Hopefully this helps with some direction.
Here you go: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
EDIT
Using the technique in the article above (tested - and works in fiddle):
HTML
<html>
<head>
</head>
<body>
<div id='container'>
<div id='main'>
<div id='content'>Hello</div>
</div>
<div id='footer'> </div>
</div>
</body>
</html>
CSS
html, body {
margin: 0; padding: 0; height: 100%;
}
div#container,div#main {
background-color: #333;
}
div#container {
min-height:100%; width:960px; margin:0 auto; position:relative;
}
div#main {
padding-bottom:90px; margin:0; padding:10px;
}
div#content {
width:425px;
}
div#footer {
position:absolute; bottom:0; width: 100%; height:90px; background-color: #ADF;
}
idea is to have #main with padding-bottom x, container min-height: 100%, footer after container and with margin-top -x
Try using with absolute position for the footer div
<div id='container'>
<div id='main'>
<div id='content'> </div>
</div>
<div id='footer'> </div>
</div>
Make sure that body height is 100%
html,body
{ height:100%;
padding:0;
margin:0;
}
div#container {
width:960px;
margin:0 auto;
position:relative;
height:100%;
}
div#main {
background-color:black;
padding-bottom:90px;
}
div#content {
width:425px;
}
div#footer {
position:absolute;
bottom:0;
width:inherit;
height:90px;
width:960px;
}
I know the html is structured differently than what you're working with, but perhaps you can alter your core structure to mimic this (because it works): CSS Sticky Footer
It looks like this group has done a lot of research on the topic and have found this it be the best (maybe the only?) way...through many different versions.
Hello and nice to meet you.
I would like to ask the following.
<body>
<div style="border:1px solid #ff0000">
<pre>dfssdgfdsgsd sdgsdg
sgdsdsgsdg</pre>
</div>
<div style="border:1px solid #ff0" id="secondDiv">
ggg
</div>
</body>
Is it possible to make #secondDiv to take 100%(in height) of the remaining vertical space?
I don't want to use min-height(doesn't work in ie) or javascript.
Complete html http://paste2.org/p/1177197
Thanks.
ps:I know that there exist a lot of related questions so i'm sorry in case of a duplicate.
If you can use fixed height for the top div then it is easy to work around the second div, by using absolute positioning.
CSS
html,body{
margin:0;
padding:0;
width:100%;
height:100%;
}
#head{
border:1px solid #ff0000;
height:50px;
}
#content{
position:absolute;
top:50px;
bottom:0;
width:100%;
border:1px solid #ff0;
}
HTML
<body>
<div id="head">
<pre>dfssdgfdsgsd sdgsdg
sgdsdsgsdg</pre>
</div>
<div id="content">
ggg
</div>
</body>
Demo: http://www.jsfiddle.net/RVTpT/
add #secondDiv { height:100%; } to your CSS.
I believe in order for this to work in IE you need to set
html, body { height:100%; }
as well
I am have buttons like this:
<button type="button" class="img img_button_bla" onclick="...">Bla!</button>
The img class is:
.img {
display:inline-block;
border:0 none;
background-image:url(/i_common/master.png) !important; /*regular sprite image*/
background-image:url(/i_common/master.gif); /*sprite image for ie*/
}
The img_button_bla class simply sets the width, height and background position.
What I am trying to do, is to style the button so the Bla! does not show on the button. I tried text-indent:-9999px; Which mostly worked, but not in IE7. For some reason, in IE7 only SOME of the buttons styled this way do not show up at all, but the space the button takes up is just blank.
I have also tried setting line-height:0;font-size:0 which almost works except for a little black line that shows.
I also tried changing it to block:display which fixes the problem in IE7, but then messes up the layout since needs to be a inline-block.
I have tried searching around, but couldn't find any answer where it is using a button tag, a display of inline-block and using a sprite image.
Anyone have any ideas of what I could do to get this to work? I don't want to remove the text inside the button tag(there where no problems before because they used to be empty) for accessibility reasons and so the buttons will still show up in the mobile version of the site(basically no css on it).
Edit:
I was able to make an example file showing the problem, although in the example it doesn't work in IE8 either. Below works in FF and Chrome
<html>
<head>
<STYLE TYPE="text/css">
#content {
width: 980px;
margin-left: auto;
margin-right: auto;
padding: .5em;
background-color: #fff;
text-size: 1.1em;
}
.left {
float: left;
}
.right {
float: right;
}
.img {
display:inline-block;
border:0 none;
background-color:red; /*using color instead of sprite image for easyer testing */
text-indent:-9999px;
}
.img_button {
width:50px;
height:25px;
}
</STYLE>
</head>
<body>
<div id="content">
<div class="left">
<button class="img img_button">Hi!</button>
</div>
<div class="right">
There
</div>
</div>
</body>
</html>
FYI, you can style input type=submit instead of having to rely on the buggy button element which is NOT recommended because in certain cases it passes the wrong information.
I have a snippet # http://work.arounds.org/using-css-sprites-with-input-type-submit-buttons/ which you can base it off..
<input type="submit" id="submit" value="Get rid of me please">
<style>
input#submit {
border:0;
background:url(sprite.gif) no-repeat 0 200px;
text-indent:-999em;
line-height:3000;
width:200px;
height:200px;
}
</style>
The line-height is for IE and text-indent is for modern browsers. You might need to specify a text-indent of 0 for IE since it doesn't apply text-indent offsetting.
I've been running into a presentation issue with Internet Explorer. The following simple block of code renders as I would expect it to in Safari, FireFox, Chrome, and Opera. However it results in a noticeable space between the left and right floated DIV elements in both IE6 and IE7.
My question is: Is there a more correct way to achieve a float such that the same CSS works in both IE and the other browsers I've mentioned? If not, what is the best approach for getting rid of the space in Internet Explorer?
Thanks, Matt
<style>
.left {
width:100px;
float:left;
border: solid black 1px;
}
.right {
width: 100px;
margin-left:100 px;
border: solid red 1px;
}
</style>
<div class="left">
a
</div>
<div class="right">
b
</div>
Since this is a community wiki. I thought I'd post the working code with the solution proposed below by Plan B.
<style>
.left {
width:100px;
border: solid black 1px;
float:left;
}
.right {
width:100px;
border: solid red 1px;
float:left;
}
.clear {
clear:both;
}
</style>
<div class="left">
a
</div>
<div class="right">
b
</div>
<div class="clear"></div>
c
Float them both left, add the following after both divs:
<div class="clear"></div>
.clear { clear: both; }
That or use padding instead of margins.
.body {
padding:0px;
margin:0px;
}
It is the double margin float bug. Described well here:
http://www.positioniseverything.net/explorer/doubled-margin.html
Try adding display: inline to floated divs. I believe this is an IE bug of adding more margins to floated elements. display: inline worked for me in the past. Hope this helps.