I am making a website and I am trying something new, except when I try to create a background for my H1 element I have no way of making sure the background color borders fit to the top of the screen, left and right.
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" type="text/css" href="site.css"
<body>
<title>Test Tab</title>
<div class="main">
<h1>Website Heading</h1>
</div>
</body>
</html>
.main {
font-family: Arial, Verdana, sans-serif;
text-align: center;
font-size: 20px;
background-color: #00ff00;
background-position: 10px;
}
You need to change your CSS to this:
html,body {
margin:0;
padding:0;
}
.main {
font-family: Arial, Verdana, sans-serif;
text-align: center;
font-size: 20px;
background-color: #00ff00;
background-position: 10px;
}
.main h1 {
margin:0;
}
JSFiddle
You need to make sure you set your body to have no padding or margins and also make sure your h1 doesn't have any margin either. That way it will happily sit at the top of your page.
Related
I've created an utterly simple page with only a few elements. I have a white border around my 'content div' and can't figure out what is causing it. It is appearing only top and left of my content. I've tried removing it with .body { border: 0; }, but that did not help. Also a few other things with regard to my CSS, but solved it.
Here is my HTML code:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8' />
<title>Olivera Miletic graphic desig</title>
<link rel='stylesheet' href='style.css' />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="mainText">
<p> OLI<span class="secondColor">APPARENTLY </p>
<p class="stayTuned"> SOON. STAY TUNED. </p>
</div>
<div>
<p class="meanWhile"> meanwhile WORK / BE / TW / <a href="mailto:miletic.olivera#gmail.com" > MAIL </a>
</p>
</div>
</div>
</body>
</html>
Here is my CSS:
.container {
position: absolute;
width: 100%;
height: 100%;
overflow:hidden;
background-color: #6600cc;
padding: 20px 0px 0px 50px;
display: box;
}
.body {
margin: 0;
}
.mainText {
font-family: 'Open Sans', sans-serif;
font-size: 64px;
color: #FF0066;
font-weight: bolder;
line-height: 0%;
margin-bottom: 70px;
}
.secondColor {
color: #00ccff;
}
.stayTuned {
font-family: 'Open Sans', sans-serif;
font-size: 25px;
color: #ffffff;
font-weight: bolder;
}
.meanWhile {
font-family: 'Open Sans', sans-serif;
color: #ffffff;
font-weight: lighter;
}
a {
color: #ffffff;
text-decoration: none;
}
Here is the JSFiddle https://jsfiddle.net/1yL1ta5x/ and the code:
Also, would appreciate advice how to optimize it for, at least, mobile and desktop views of the webpage and/or any other optimization to my code is welcome. I am an absolute beginner, so bear with me. Thanks.
Regards,
Some browsers/frameworks/environments add default margin, padding values to either the body or the html.
You have to override the margins/padding to the html or body for the white space to disappear.
Just add the following:
html, body {
margin: 0;
padding: 0;
}
EDIT
To answer your second question as to why there is scroll on your container div, this happens because the div occupies 100% width and height of its parent and also occupies the 20px padding-top and 50px padding-left.
Hence the container div overflows its parent thus producing a scroll.
A general fix would be to apply box-sizing: border-box to container so that the padding is included in the width and height.
.container {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #6600cc;
padding: 20px 0px 0px 50px;
box-sizing: border-box;
}
Check updated fiddle: https://jsfiddle.net/1yL1ta5x/1/
I would suggest you to read more about box-sizing, and the css box model as a whole.
Remove the .body and replace it to body.
.body is applied to the class named body, while you want to select the tag, which would be just body.
Alternatively, add class="body" to your body tag.
I am trying to place a div underneath other div's. Instead of being placed underneath each other they overlay.
An overview of how the page looks:
I am using bootstrap to style it. I am using a fixed navbar with the brand logo in the middle. Underneath the navigation bar I placed an image.
The div for the navbar and for the image stack nicely but when I try to add another div underneath the image it instead overlays with the image and goes underneath the navbar not underneath the image.
Ideally I would like to place the navbar and image divs inside container but I have had no success in trying to do so.
Index.html
<!DOCTYPE html>
<html>
<head>
<title>welcome</title>
<!-- Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- AnjularJs -->
<script src="js/angular.min.js"></script>
<!-- css files -->
<link rel="stylesheet" href="navBar.css">
</head>
<body>
<!-- Navigation Bar -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<a class="navbar-brand">Name</a>
</div>
</div>
<!-- End of Navigation Bar -->
<div class="arrow"></div>
<!--Image-->
<div class=bkgimage><h1>Slogan</h1></div>
<!--End of image -->
<!-- Want to add another div here -->
</body>
</html>
navBar.css
body {
padding:0px;
margin:0px;
}
.navbar-brand {
display:inline-block;
float:none;
color:white;
font-family: Arial, Helvetica, sans-serif;
font-style:italic;
font-size: 50px;
font-weight: bold;
font-variant: small-caps;
}
.navbar {
position:relative;
margin: 0px;
padding:10px;
text-align:center;
background-color: #00b3b3;
border:none;
}
.arrow {
position:absolute;
left:50%;
margin-left: -20px;
width:0;
height:0;
border-left:20px solid transparent;
border-right:20px solid transparent;
border-top: 20px solid #00b3b3;
z-index:2;
}
.navbar-default .navbar-brand {
color:white;
}
.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover {
color:white;
}
.bkgimage {
position: absolute;
background-image: url('test.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width:100%;
height:75%;
}
.bkgimage h1 {
color: white;
font-family: Arial, Helvetica, sans-serif;
font-style:italic;
font-size: 40px;
font-weight: bold;
font-variant: small-caps;
text-align: center;
margin-top: 150px;
}
Because your .bkgimage div has position: absolute the next div doesn't know the .bkimage divs position and naturally goes to the bottom of the next block level element which is positioned relatively e.g. your .navbar-fixed-top div.
One quick fix here looking at your css would be to use relative positioning and viewport height measurement for the size of container the following for your .bkimage div:
.bkimage{
position: relative;
background-image: url('http://placehold.it/300x250');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width:100%;
height:75vh;
}
and for your .bkgimage h1 Set margin-top to -20px (to push under the arrow) and instead use padding-top: 150px which fixes your box model layout for this container (your margin pushes down from the previous div, your padding pushes down the internal content of a div e.g.
.bkgimage h1 {
color: white;
font-family: Arial, Helvetica, sans-serif;
font-style:italic;
font-size: 40px;
font-weight: bold;
font-variant: small-caps;
text-align: center;
padding-top: 150px;
margin-top: -20px;
}
Also as Koschtik mentions, you need to address the structure of your HTML for Bootstrap to work properly. The above fix works with your current HTML, but you will run into problems quite rapidly with markup structured like that
It might be better to use float CSS rather than the position attribute.
Firstly add height 100% to the body and html:
html, body {
height:100%;
}
Change .bkgimage to float instead of position:
.bkgimage {
float:left;
}
Working Example
Alright, so I've tried a lot of different things here but I just can't seem to get my menu bar to stretch all the way across the page. There's a small gap on the left side. Am I just missing something here?
Also so far this is the only way I've been able to get my footer somewhat centered at the bottom of the page. Every time I set the left and right margins to auto it puts the footer in line with the menu bar. Is there a better way to do this as well?
Thank You.
<!DOCTYPE html>
<html>
<head>
<title>Connor Lepert: Homepage</title>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<link rel="icon" href="logo.png">
<style>
#font-face {
font-family: Vanadine;
src: url(vanadine.ttf);
}
body {
background-image: url(bckgrnd.jpg);
background-size: 100%;
background-repeat: no-repeat;
font-family: sans-serif;
color: white;
}
a {
color: white;
font-family: Vanadine;
text-decoration: none;
}
a:hover {
color: yellow;
}
p {
color: white;
font-family: Vanadine;
}
footer {
position: fixed;
display: block;
margin-left: 45%;
margin-right: 45%;
text-align: center;
margin-top: 320px;
}
#siteid {
margin-left: auto;
margin-top: auto
}
#menubar {
background-color: #ABADB0;
width: 100%;
height: 20px;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: auto;
text-align: center;
word-spacing: 20px;
position: fixed;
}
#header {
display: block;
margin-left:auto;
margin-right: auto;
text-align: center;
margin-top: 330px;
}
</style>
</head>
<body>
<div id="siteid"><img src="logowhite.png" width="50px" alt="Personal logo"/></div>
<div id="header"><img src="header.png" width="400" alt="Lepert"/></div>
<div id="menubar">
Home
About
<a href=mailto:clepert13#gmail.com>Contact</a>
Portfolio
ScrapYard
</div>
<footer>©<a href=> 2015 by Connor Lepert </a> <br> <p></p> </footer>
</body>
</html>
You must just add a margin:0 to your body
I create a wrapper class and wrap the code that needs to be centered within it. Here's an example:
.wrapper {
margin: 0 auto;
width: 960px;
}
<html>
<div class="navbar">
<div class="wrapper">
<p>Content goes here</p>
</div><!--wrapper-->
</div><!--navbar-->
</html>
You just need to make sure that you place the wrapper class before the content, but after the background that needs to repeat. That is shown in my example. Otherwise, you'll have everything centered like it needs to be, but your background will cut off because it's being contained in a 960px area.
Like Artefact already said, adding margin:0 to your body will remove the gap beneath your menubar.
Just a little explaining:
This gap is caused by your browser, in fact every browser has some presets for some elements (i.e. the size of a h1 and how links are displayed) and those presets differ from browser to browser.
For this reason most people will use css resets to have a clean starting point for their own css.
There are several resources for resets out there like the one from meyerweb that you can use or you can simply write your own.
I'm trying to get my header and image to line up exactly on the same line but am having difficulties. Can anyone see why/suggest a fix?
<!DOCTYPE html>
<html>
<head>
<style>
#header img {
position: relative;
width: 75px;
height: 75px;
}
#header h1 {
color: white;
float: left;
background-color:#006890;
font: 75px arial, sans-serif;
}
</style>
</head>
<body>
<div id="header">
<h1>Header</h1>
<img src="2000px-Smiley.svg.png" alt="Smiley Face" >
</div>
</body>
</html>
it's because of the h1 default margin, you see? elements comes with default styling and you need to custom it to your needs, generally for what you want you need to remove the margin-top from h1 but you can also set it to margin: 0; if you dont need the margin-bottom.
#header h1
{
color: white;
float: left;
background-color:#006890;
font: 75px arial, sans-serif;
margin: 0;
}
example: http://jsfiddle.net/L2e1rL6L/
In addition to #header h1 css you should do
#header h1 {
margin:0;
}
thats it.
Wouldn't you need to have the image inside the <h1><img > </h1> tags?
Here's a shrunken version of a webpage. The black is the background color for a header div I made. My question is how do I eliminate the blue area above and to the sides of it? I would like it to look more like the second image. I tried margin: 0px; for top, left, and right, but nothing changed. Any suggestions?
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title>Calendar</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="calendar.css">
</head>
<body>
<div id="header">
</div>
</body>
</html>
Here is the CSS:
body {
background-color: #00FFFF;
font-family: Verdana, Tahoma, sans-serif;
}
#header {
background-color: black;
height: 40px;
width: 100%;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
add margin:0 to the body tag
body {
background-color: #00FFFF;
font-family: Verdana, Tahoma, sans-serif;
margin:0;
}
The problem is not that your DIV has a margin, but rather that the BODY has a margin. Most browsers add this by default, but you can eliminate it with
body{ margin: 0; }
in your CSS. Some people like to get rid of these things that browsers add with something called a cssreset. This would give you more of a blank slate to begin with.