I'm using Bootstrap to create my personal webpage, and i tried to add a gradient background to <body> but i ended up with a meaningless space of gradient there. Here is images, i can't include jsfiddle because i have more than one CSS files.
http://jsfiddle.net/eJ3CL/
You can't see the problem in jsfiddle since bootstrap is not included there, but here are the screenshots:
EDIT:
Edited Fiddle to include bootstrap and set height of content middle to 120px so that others can see the problem that OP wants to convey.
What is causing this? How can I fix this problem?
Edited: Here is all the relevant code.
<head>
<title>Burak Özmen - A Newbie Designer</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/reset.css" rel="stylesheet" type="text/css">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container container-top">
<div class="page-header">
<h1>Burak Özmen <small>A Newbie Developer</small></h1>
</div>
</div>
<div class="container container-middle">
<div class="navbar navbar-static-top navbar-inverse">
<div class="navbar-inner">
<ul class="nav">
<li>Home</li>
<li>About Me</li>
<li>Link</li>
</ul>
</div>
</div>
<div class="vertical-middle">In development... </div>
</div>
</body>
</html>
style.css:
body {
background: rgb(249,252,247); /* Old browsers */
background: -moz-linear-gradient(top, rgba(249,252,247,1) 0%, rgba(245,249,240,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(249,252,247,1)), color-stop(100%,rgba(245,249,240,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(249,252,247,1) 0%,rgba(245,249,240,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(249,252,247,1) 0%,rgba(245,249,240,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(249,252,247,1) 0%,rgba(245,249,240,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(249,252,247,1) 0%,rgba(245,249,240,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9fcf7', endColorstr='#f5f9f0',GradientType=0 ); /* IE6-9 */
}
.container-middle {
height: 300px;
background: white;
}
Give a min-height to body
body {
min-height: 400px;
}
move the rules in body selector to html selector and add height:100%; rule to html selector.
html{
background: rgb(249,252,247); /* Old browsers */
background: -moz-linear-gradient(top, rgba(249,252,247,1) 0%, rgba(245,249,240,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(249,252,247,1)), color-stop(100%,rgba(245,249,240,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(249,252,247,1) 0%,rgba(245,249,240,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(249,252,247,1) 0%,rgba(245,249,240,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(249,252,247,1) 0%,rgba(245,249,240,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(249,252,247,1) 0%,rgba(245,249,240,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9fcf7', endColorstr='#f5f9f0',GradientType=0 ); /* IE6-9 */
height: 100%;
}
.container-middle {
height: 300px;
background: white;
}
It works on Firefox, Chrome and IE9
Related
So I'm trying to get my gradient working on my HTML tag so it shows in the background but I noticed certain colors show off as more blocky than others. I want the whole background to be a gradient and after researching (here and other sites) I got this far but it looks like multiple blocks instead of a gradient like other colors seem to have. How can I fix this so the whole background doesn't move when scrolling and doesn't show blocks? I've only ever used gradients in scripts before so I don't like using it.
I found this as a close solution but I'm trying to avoid scripts at all costs as mentioned above.
html
{
min-height: 100%; /*needed for no repeat color. adding normal "height" messes it up*/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background: #FFA5A5; /* Older browsers */
background: linear-gradient(#FFA5A5, #FFFFFF);
background: -moz-linear-gradient(top, #FFA5A5 0%,#FFFFFF 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFA5A5), color-stop(100%,#FFFFFF)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #FFA5A5 0%,#FFFFFF 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #FFA5A5 0%,#FFFFFF 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #FFA5A5 0%,#FFFFFF 100%); /* IE10+ */
background: linear-gradient(top, #FFA5A5 0%,#FFFFFF 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFA5A5', endColorstr='#FFFFFF',GradientType=0); /* IE6-9 */
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>t</title>
<meta name="description" content="c">
<meta name="author" content="a">
<link rel="stylesheet" type="text/css" href="GBG.css">
</head>
</html>
I designed a very basic looking box in Photoshop that I would like to use to show product information inside of. It basically consists of a Header, Body and Button (each a separate image) that look like the image below.
How can I use CSS/HTML to piece these together? I just need to show header text in the top box and bullet points in the body area, but not sure how to actually build this from the image files.
I know the HTML will look as such, I am just confused as to how to actually build the box, such as stacking the images and overlaying the button in that position over the body.
<div id="product_box">
<div id="header">Title Here</div>
<div id="body">
<ul>
<li>Point here</li>
<li>Point here</li>
<li>Point here</li>
</ul>
</div>
<div id="button></div>
</div>
Well Have a look at:
http://jsfiddle.net/2A2Fn/4/
You don't have to change your html markup just use css:
Here is relevant CSS:
#product_box{
border:2px solid #bbc;
border-radius:15px;
display:block;
width:50%;
height:100%;
position:relative;
box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
padding:0px; !important
background: #b5bdc8; /* Old browsers */
/* Gradient */
background: -moz-linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* IE10+ */
background: linear-gradient(to bottom, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */
}
#header{
background:#aaf;
width:100%;
height:50px;
border:0px;
border-bottom:1px solid #99b;
padding-top:15px;
padding-bottom:15px;
border-radius:5px;
background: #b5bdc8; /* Old browsers */
/* gradient */
background: -moz-linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* IE10+ */
background: linear-gradient(to bottom, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */
}
#body{
padding-bottom:15px;
}
#button{
background:#756;
border:1px solid #645;
display:block;
width:150px;
height:50px;
border-radius:5px;
position:absolute;
bottom:-25px;
right:33%;
color:#fff;
box-shadow:5px 5px 5px rgba(0,0,0,0.4);
text-align:center;
font-weight:bolder;
font-size:15px;
background: #b5bdc8; /* Old browsers */
/* Gradient */
background: -moz-linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* IE10+ */
background: linear-gradient(to bottom, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */
}
div{
text-align:center;
color:#fff;
font-weight:bold;
}
And Here is output of that:
EDIT
According to your comment here is updated code:
http://jsfiddle.net/2A2Fn/5/
and its output:
Hope it helps.
It can be done using only HTML/CSS.
Use CSS gradient for it.
Here is the DEMO
Seeing your CSS code would help. This is how I would achieve what you want:
Set a div element to the desired height of the box. Apply a border and border-radius property as desired, probably 2 px border and a radius of 10-15 px.
Take the header image, and crop it down to 1 pixel wide (for memory conservation). Then set a div element and use this 1pixel wide image as the background, repeat x, but not y. Set the height of the header to the height of the gradient image.
Then, make another div inside the container div. Take your second gradient image and again reduce it to a 1 pixel width. Set it as the background for this div with repeat-x. You'll have to set the height of the header div to the difference of the height of the header and the height of the container.
Your button can then be placed as a link, probably in another div element.
All this can be coded something like as follows:
CSS:
div.container
{
height: 400px;
width: 300px;
border: 2px solid #000;
border-radius: 12px;
}
div.header
{
background-image: url("header-grad.ext");
background-repeat: repeat-x;
height: 40px;
width: 100%;
}
div.content
{
background-image: url("content-grad.ext");
background-repeat: repeat-x;
height: 360px;
width: 100%;
}
And the HTML:
<div class="container">
<div class="header">text here</div>
<div class="content"><\div>
<div class="button></div>
</div>
This should do what you want. You'll need to specify the button CSS as well which I didn't do as I'm on mobile right now.
Hope this helps you!
I am using bootstrap and am using a container-fluid with 2 full width divs and I'm trying to find out why I can see a box shadow on one, but not the other. Here's what I have and I'm hoping someone can explain. What happens right now is the 1st div has no box shadow and the 2nd div shows up with no issue.
.header-logo-bg {
background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2MzZTRmMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+");
background: -moz-linear-gradient(left, rgba(195,228,243,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(195,228,243,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(195,228,243,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(195,228,243,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(195,228,243,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(195,228,243,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3e4f3', endColorstr='#00ffffff',GradientType=1 ); /* IE6-8 */
box-shadow: 0 4px 4px #aaa;
}
.header-bg { background: url('../img/diagonal-overlay.png') repeat #ebe0b1; padding: 30px; box-shadow: 0 8px 4px #aaa;}
HTML:
<div class="container-fluid">
<div class="header-logo-bg">
<div class="inner">
<!-- Logo here and some other stuff -->
</div>
</div>
<div class="header-bg">
<div class="container">
<h1>
<asp:ContentPlaceHolder ID="cphTitle" runat="server"></asp:ContentPlaceHolder>
</h1>
</div>
</div>
</div>
Fiddle
The bottom <div> has a non-transparent background, and a higher z-index, so is just hovering over the other shadow and obscuring it. Try using a bottom margin on the top div to add some space.
I'am wondering If It's possible to have two different colors in the background, expanding 100% with bootstrap, en each side.
Here is a screenshot of what i mean,
Red on the left side, dark on the right side, expanding 100% for bigger screens. Any easy solutions for this?
There are a couple ways to do this. The best way uses pseudo-elements. You'd apply one color to the <body>, and the second color to a created :after element.
HTML:
<body>
<main>
<p>This is my first paragraph.</p>
<p>This is my second paragraph.</p>
Page continues...
CSS:
body {
background-color:rgb(155,155,155);
}
body:after {
top:0;
left:0;
width:40%;
height:100%;
position:absolute;
z-index:-1;
background-color:rgb(239,0,0);
content:"";
}
main {
width:80%;
margin:0 auto;
background-color:white;
min-height:400px;
padding:20px;
}
http://jsfiddle.net/Q66Xn/3/
This answer produces the cleanest code. Disadvantages: Limited IE8 support, no IE7 support. If you need to use those two browsers, then see the next option:
Give the <body> the same background color of one side, then instead of using :after to create a pseudo-element, we just create a real element.
HTML:
<body>
<div id="bgleft"></div>
<main>
<p>This is my first paragraph.</p>
<p>This is my second paragraph.</p>
Page continues...
CSS:
body {
background-color:rgb(155,155,155);
}
#bgleft {
top:0;
left:0;
width:40%;
height:100%;
position:absolute;
z-index:-1;
background-color:rgb(239,0,0);
}
main {
width:80%;
margin:0 auto;
background-color:white;
min-height:400px;
padding:20px;
}
http://jsfiddle.net/Q66Xn/4/
The produces exactly the same as the first method. The advantage is higher browser compatibility, with a disadvantage of a little bit more code.
Finally, you could use a gradient attached to the body. This will give both colors on the single body element, saving extra HTML, but it'll by a nasty set of CSS to support all browsers:
body {
background: rgb(239,0,0); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VmMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ0JSIgc3RvcC1jb2xvcj0iI2VmMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ0JSIgc3RvcC1jb2xvcj0iIzliOWI5YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5YjliOWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, rgb(239,0,0) 0%, rgb(239,0,0) 44%, rgb(155,155,155) 44%, rgb(155,155,155) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgb(239,0,0)), color-stop(44%,rgb(239,0,0)), color-stop(44%,rgb(155,155,155)), color-stop(100%,rgb(155,155,155))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgb(239,0,0) 0%,rgb(239,0,0) 44%,rgb(155,155,155) 44%,rgb(155,155,155) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgb(239,0,0) 0%,rgb(239,0,0) 44%,rgb(155,155,155) 44%,rgb(155,155,155) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgb(239,0,0) 0%,rgb(239,0,0) 44%,rgb(155,155,155) 44%,rgb(155,155,155) 100%); /* IE10+ */
background: linear-gradient(to right, rgb(239,0,0) 0%,rgb(239,0,0) 44%,rgb(155,155,155) 44%,rgb(155,155,155) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ef0000', endColorstr='#9b9b9b',GradientType=1 ); /* IE6-8 */
}
http://jsfiddle.net/Q66Xn/
Disadvantages: Complex CSS which is difficult to easily edit later on.
You're issue isn't related to bootstrap specific, as Ollie stated.
Some of your options are, using a gradient, or a sliver (a 1px width/height image, which you repeat on which ever axis).
I find using a gradient generator works quite well for most of my new projects I need to startup. I've attached an example for you to try.
Example
http://jsfiddle.net/wLw4r/4/
Markup
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 style="color: white">Something</h2>
</div>
</div>
<div class="row ">
<div class="jumbotron">
<h2>YOLO</h2>
<div class="row">
<div class="col-md-4">Something</div>
<div class="col-md-3">Something</div>
<div class="col-md-3">Something</div>
<div class="col-md-2">Something</div>
</div>
</div>
</div>
</div>
</body>
CSS
body {
background: rgb(169,3,41); /* Old browsers */
background: -moz-linear-gradient(left, rgb(169,3,41) 0%, rgb(143,2,34) 26%, rgb(143,2,34) 26%, rgb(0,0,0) 26%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgb(169,3,41)), color-stop(26%,rgb(143,2,34)), color-stop(26%,rgb(143,2,34)), color-stop(26%,rgb(0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgb(169,3,41) 0%,rgb(143,2,34) 26%,rgb(143,2,34) 26%,rgb(0,0,0) 26%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgb(169,3,41) 0%,rgb(143,2,34) 26%,rgb(143,2,34) 26%,rgb(0,0,0) 26%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgb(169,3,41) 0%,rgb(143,2,34) 26%,rgb(143,2,34) 26%,rgb(0,0,0) 26%); /* IE10+ */
background: linear-gradient(to right, rgb(169,3,41) 0%,rgb(143,2,34) 26%,rgb(143,2,34) 26%,rgb(0,0,0) 26%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
}
You will struggle to do this using only bootstrap.
You could achieve the result you are after using linear gradients: http://codepen.io/ollieRogers/pen/snjkw this would need a fallback for browsers that do not support gradient bgs.
body{
background: #49191a; /* Old browsers */
background: -moz-linear-gradient(left, #49191a 0%, #49191a 30%, #53cbf1 30%, #53cbf1 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#49191a), color-stop(30%,#49191a), color-stop(30%,#53cbf1), color-stop(100%,#53cbf1)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #49191a 0%,#49191a 30%,#53cbf1 30%,#53cbf1 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #49191a 0%,#49191a 30%,#53cbf1 30%,#53cbf1 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #49191a 0%,#49191a 30%,#53cbf1 30%,#53cbf1 100%); /* IE10+ */
background: linear-gradient(to right, #49191a 0%,#49191a 30%,#53cbf1 30%,#53cbf1 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#49191a', endColorstr='#53cbf1',GradientType=1 ); /* IE6-9 */
}
so i've been having a really tough time after a month away from HTML, not much whatsoever, however I seem to have lost the knack with something, and that's getting my div/any html element to not be a few pixels from top of a page and even with a fixed div, it is still around 8 pixels away from the top and left of my page and I have no idea what is going on. There's no padding, no margin, nothing like this and I am utterly perplexed at why this is happening.
<html>
<head>
<title>
CrystalBallStories
</title>
<link rel=stylesheet link="stylesheet" href="style.css" media="screen">
</head>
<body>
<div id="main">
<nav id="nav">
<div class="nav_opt">
Home
</div>
</nav>
</div>
</body>
</html>
Is the HTML and the CSS is:
html
{
font-family:Corbel, 'Lucida Grande', Helvetica, sans-serif;
background: rgb(69,72,77); /* Old browsers */
background: -moz-linear-gradient(top, rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
#main
{
background-color:#000000;
position:fixed;
height:98%;
width:80%;
color:#DDDDDD;
overflow-y:scroll;
text-wrap:break-word;
margin-left:10%;
margin-right:10%;
border-top-left-radius:30px;
border-top-right-radius:10px;
}
#nav
{
background-color:rgba(69,72,77,0.8);
height:8%;
}
This used to all work for me before but it is, for some reason, a little away from the top and left as I said before, as can be seen on the site: http://www.crystallballstories.com
Any help is appreciated as this is driving me insane!
html,body{margin:0}
Problem solved.