I'm trying to create a gradient background, and then a solid color box in the center and then type text in it. My code is below, works great but the solid color box (body) isn't flush with the top of the browser, there is a little space between. How do you get rid of this?
html {
text-align: center;
background-color: #FFF;
background-image: url(../../Public/Documents/Business/Running%20Companies/Enlightenment%20Project/Website/images/bg.jpg);
background-repeat: repeat-x;
margin: 0px;
}
body {
background-color: #FFFFFF;
height: 768px;
width: 1024px;
margin: auto;
}
**Update
Working Code Below:
html {
font-family: sans-serif; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-ms-text-size-adjust: 100%; /* 2 */
background-color: #FFF;
background-image: url(images/bg.jpg);
background-repeat: repeat-x;
}
/*
* Removes default margin.
*/
body {
margin: auto;
background-color: #FFF;
height: 768px;
width: 1024px;
padding-top: 1px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 25px;
}
As #loktar commented, try a margin: 0 for the body (sorry #loktar, new here)
I suggest using normalize.css within all your projects to get rid of these little issues.
Related
I am creating a website with a login and sign in feature, and want to place the buttons over a solid dark blue background above the gradient but below the buttons. When I try to create a shape, the buttons move down on the website to accommodate room for it, but I want the shape to be on a layer below the buttons but still visible. Is there any way of doing this in CSS?
If so, how? Thanks :)
Here is my CSS and HTML so far:
HTML:
html {
height: 100%;
background-size: cover;
background: #a5fcff;
background-repeat:no-repeat;
background: linear-gradient(#00033a, #a5fcff);
}
.signinbutton {
background-color: #458af9;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
display: block;
font-size: 75px;
margin: 4px 2px;
cursor: pointer;
transition-duration: 0.5s;
margin-left: auto;
margin-right: auto;
margin-top: 225px;
}
.signinbutton:hover {
background-color: #a7acb7;
}
.createaccbutton {
background-color: #458af9;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
display: block;
font-size: 75px;
margin: 4px 2px;
cursor: pointer;
transition-duration: 0.5s;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
}
.createaccbutton:hover {
background-color: #a7acb7;
}
<html>
<head>
<title>Debate Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class = "square"></div>
<button class = "signinbutton">SIGN IN</button>
<button class = "createaccbutton">SIGN UP</button>
</body>
</html>
UPDATE:
Sorry, I want the website screen to look like this:
Login Screen mock-up
But it currently looks like this:
Actual login screen so far
Use position: absolute; as mentioned above. If you end up with something on top of another (covering up the thing underneath) then you can use z-index: [number]; to specify what is on top of what.
You can position the element absolute relative to the html or another container.
example style:
.square {
position: absolute;
top: 0;
margin-left: auto;
height: 200px;
width: 200px;
background: #f00;
margin-right: auto;
left: 0;
right: 0;
}
Working example
1) First, edit your html, body style.
html {
height:100%
}
body {
background: #a5fcff;
background: linear-gradient(#00033a, #a5fcff); /* background first, followed by the other options */
background-size: cover;
background-repeat:no-repeat;
background-attachment: fixed /* for repeating gradient */
}
2) Customize .square element if you want.
.square {
position: absolute;
top:0; /* above the gradient */
left:0;margin-left:auto;right:0;margin-right:auto; /* center position:absolute element */
height: 200px;
width: 200px;
background: #0000ff
}
4) Add one margin line for buttons and remove others.
.signinbutton {
margin: 225px auto 0 auto; /* 225px for top, auto for right&left, 0px for bottom */
}
.createaccbutton {
margin: 100px auto 0 auto; /* 100px for top, auto for right&left, 0px for bottom */
}
The background image is covered by white area when you scroll all the way to the bottom. Cannot seem to figure out what it is. Played with each of the selectors and HTML. Would appreciate help. Please click link go to the CodePen where the code is visible.
https://codepen.io/siamazing/pen/QaGdWq
html, body{
height: 100%;
}
#body {
background-image: url(https://images.pexels.com/photos/267278/pexels-photo-267278.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb) ;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #999;
height: 100%;
font-size: 15px;}
.container-fluid {
padding-top: 20px;
padding-left: 40px;
padding-right: 40px;
height: 100%;}
h2 {
padding-left: 20px;
font-family: 'pacifico';
font-size: 22px;
color: #72777f;
}
header {
text-align: center;
font-family: 'pacifico';
}
article {
font-family: 'raleway';
background-color:rgba(255,255,255,.4);
color: #303338;
padding: 10px;
margin-top: 20px;
margin-left: 30px;}
Remove height:100% from #body
https://codepen.io/mirohristov/pen/MrbmWj
See Miro's answer, but here's some troubleshooting advice.
I added * { outline: 1px dashed red; } and saw this:
That made it easier to find the culprit element - #body and remove the height:100%; rule.
I have tried a lot.
I do not get to 100% height without scrollbars:
/* =================== Global =================== */
*{
padding: 0px;
margin:0px;
}
html, body{
height: 100%;
background-color: #7a7a78;
font-size: 11px;
font-family: Verdana, sans-serif;
}
a{
color: #000;
text-decoration:none;
}
header{
max-width: 1000px;
margin: auto;
height: 75px;
background-color: #d0ccc9;
}
nav{
background-color: #964951;
height: 30px;
}
#nav{
max-width: 940px;
height: 30px;
margin: auto;
padding-left: 30px;
padding-right: 30px;
}
section{
margin: auto;
max-width: 970px;
background-color: #d0ccc9;
padding-left: 15px;
padding-right: 15px;
height: 30px;
}
main{
margin-left:auto;
margin-right:auto;
max-width: 970px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
background-color: #d0ccc9;
min-height: 150px;
height: 100%;
}
footer{
padding-left: 15px;
padding-right: 15px;
background-color: #964951;
height: 75px;
color: #fff;
display: flex;
align-items: center; /* Vertikale Zentrierung */
justify-content: center; /* Horizontale Zentrierung */
}
footer a{
color: #fff;
text-decoration:none;
}
enter image description here
enter image description here
can someone tell me what I did wrong?
thank you
edit: sorry, I get the css code not inserted. always the same error although everything is correct
Without seeing the HTML code it's hard to judge, but your main element has height: 100%;. So if there are other elements outside the main element (which is very likely from your CSS), they will add to the height, which will make the overall height more than 100%, which again causes the scrollbars.
Addition after added link to picture of HTML code in comments:
It's as I wrote above: Above main there are header , nav and section, below it, there is the footer. According to the CSS you posted all this adds up to 100% PLUS 210px (210px is the sum of all other heights according to your CSS): There's the overflow that causes the scrollbar.
The solution: Apply height: calc( 100% - 210px) to the CSS rule for main (instead of the 100% height there)
I'm designing a page for my blog, and I discovered that when I have my div.page-content within the body, it's glitching out and resizing the whole body to the top of the div... I need the body to fill the viewport no matter what.
Relevant HTML
<body>
<div class="page-content"> <!-- THIS IS MY .page-content DIV -->
asdasd
</div>
</body>
Relevant CSS
body, html {
height: 100%; width: 100%; /* Shouldn't this make the page guaranteed to fill the viewport? */
margin: 0; padding: 0;
background-color: #fdfdfd;
font-family: Roboto, Arial;
color: #424242;
background-repeat: no-repeat;
background-size: cover; /* I'm gonna have a blurred background image */
}
.page-content {
min-height: 300px; width: 600px;
margin: 60px auto 30px auto;
background-color: blue;
}
JSFiddle: http://jsfiddle.net/deansheather/5et5kgsn/
I have not an idea if there is a javascript way to fix this, but I'd prefer CSS and HTML only answers please.
I'm sorry about the really weird explanation, it's what came into my head.
You have to set the .page-content class height to auto. Think your problem solved.try this:
body, html {
margin: 0; padding: 0;
background-color: #fdfdfd;
font-family: Roboto, Arial;
color: #424242;
background-repeat: no-repeat;
background-size: cover; /* I'm gonna have a blurred background image */
}
.page-content {
min-height: 300px; width: 600px; height: auto;
margin: 60px auto 30px auto;
background-color: blue;
}
I have this image on my website, but when I zoom with the scroll, the image becomes blurred. So, what I need it is not resize when I zoom.
This is my CSS code:
body
{
margin: 0;
color: #bbb;
font-size: 0.9em;
background-color: #202121;
background-image: url("img/wild_oliva.png");
background-size: initial;
}
The image must be repeated on the screen.
body
{
margin: 0;
color: #bbb;
font-size: 0.9em;
background-color: #202121;
background-image: url("img/wild_oliva.png");
background-size: initial;
}
img{
max-width: 100%;
height: auto;
}
You might want to try something like this and see if it works.