Moving header down in CSS - html

I'm attempting to learn HTML and CSS, but have run into a tiny stumbling block.
I have the following code:
<!DOCTYPE html>
<html>
<head>
<title>Testing My HTML and CSS</title>
<style>
* {
padding: 0;
margin: 0;
}
.header {
background-color: black;
height: 100px;
width: 100%;
}
.header h1 {
margin-top: 0;
text-align: center;
color: white;
height: 100px;
width: 100%;
}
.sidebar {
background-color: #ebebeb;
position: absolute;
width: 200px;
height: 100%;
}
</style>
</head>
<body>
<div class="header">
<h1>Hello, World!</h1>
<div class="sidebar">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</body>
</html>
which can be ran here.
I want to have the <h1>Hello, World!</h1> in the center of the .header. I've tried playing with the margin-top in .header h1, but it moves the entire .header.
Sorry for such a simple question -- I'm a complete newbie.

If your're not planning to add more elements to the header, you can just add line-height: 100px; to the .header h1 ruleset. That's it...
Vertical align can be tricky, if you don't want to mess around with a lot of code, this is the shortest way to accomplish it. As a general rule, to center text vertically into an element, just make its line-height equals to the element's height (unless you have some padding or margin changing stuff).

Use line-height instead as following:
.header {
background-color: black;
height: 100px;
width: 100%;
line-height:2;
}

Please try this demo
or you can try this using
.header{
line-height:3;
}

Related

Html div not being positioned

I am working on a small project just for my own fun. I have made a navbar at the top of the html page and I used some css to make it look nicer.
Here is the html
<html>
<head>
<title> Website </title>
<style type="text/css">
body {
margin: 0;
background: #F2F2F2;
}
.navbar {
margin: 0;
padding: 0;
width: 100%;
height: 45px;
background: #12B0CD;
position:fixed;
}
#navbar-logo {
font-family:'Lato', Arial;
font-size: 35px;
color: white;
border: none;
background: #12B0CD;
}
.content {
top: 50px;
margin: none;
width: 100%;
height: 50%;
z-index: -1;
}
</style>
</head>
<body>
<div class="navbar">
<div id="navbar-logo">
<button id="navbar-logo">Fancy Name </button>
</div>
</div>
<div class="content">
<div id="content-box">
</div>
</div>
</body>
</html>
If you pop this into notepad and open it in a browser you will see that the class content does not show and I don't know why. I need help. In the normal code I use stylsheets I don't know if that would change anything.
Since your content box is empty, and you are using percentages, the box needs it's parent (body) to have a height. If you set, width:100%;height:100%; on your body you should see the box.

HTML/Body does not encapsulate entire height

This is a quick mock-up to create a full-size webpage, however whenever I test this, a small margin of space is present at the top of the screen.
How can I get rid of this small space at the top?
HTML
<body>
<div id="container">
<header id="header">
<div class="header_container">
<h1 class="header_logo">Blog</h1>
<nav class="menu_nav">
</nav>
</div>
</header>
</div>
</body>
CSS
body,html {
margin: 0;
height: 100%;
}
#container{
height: 100%;
width: 100%;
background-color: orange;
}
#header {
width: 100%;
height: 80px;
background-color: green;
}
.header_container{
margin-left: 50px;
margin-right: 50px;
}
This is being caused by the margin on the top of the h1.
To fix this, either give the header a property of overflow:hidden to make the header taller, or remove the margin of the h1 using margin-top:0.
JSFiddle: http://jsfiddle.net/jdwire/8QV4f/

CSS and HTML centering an <h1> next to an <img>

Right now I have...
<header id="background-color">
<img src="header_image.gif" alt="header">
<h1>Header</h1>
</header>
and the relevant CSS is...
header {
background: #0072bc;
width: 70%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#background-color {
background: #0066CC;
width: 100%;
}
This puts the image above the h1 obviously. What I'd like to do is left-justify the image and have the h1 centered relative to the whole page (not just the remaining space).
And when I say left-justify, I mean relative to the body and header which are set to be 70% with auto margins. I've got no idea how to do this, I'm totally new to web design.
Thanks.
You can add margin-right: -100%; to image, so header text will not touch the right edge of image. and will align center in header. check this fiddle
header {
background-color: #0072bc;
width: 70%;
text-align: left;
padding: 10px;
}
Look at the jsfiddle
http://jsfiddle.net/EScBs/
A quick Answer.. May need to fine tune...
Add wrapping div...
<header id="background-color">
<div id="container">
<img src="Beach_Party.jpg" alt="header">
<h1>Header</h1>
</div>
</header>
Try to use relative positioning and absolute positioning of the child elements
<style>
header {
background: #0072bc;
width: 70%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#background-color {
background: #0066CC;
width: 100%;
}
img {
float:left;
text-align:left;
position: absolute;
top:0;
left:0;
}
h1 {
z-index:10;
}
#container {
position: relative;
}
</style>
It worked for me.. Adjust it to suit your case.. Hope it helps!

How to center a fixed element?

I'm a total novice in HTML/CSS, but I'm having trouble with centering a fixed h1 element. It refuses to center itself and sticks to the left side of the page. I've tried setting the margin to auto, but it doesn't do a thing. Here's the code:
h1 {
color: #580101;
font-family: RobotoRegular;
position: fixed;
text-align: center;
}
* {
background-color: #ecebe9;
}
#navbar {
color: #000653;
background-color: #00001a;
height: 40px;
border-radius: 3px;
}
.sidebar {
background-color: black;
width: 90px;
height: 500px;
float: left;
margin: 30px 0px 0px 0px;
}
And the HTML:
<!DOCTYPE html>
<html>
<head>
<link href="Fonts/stylesheet.css" rel="stylesheet" type="text/css">
<title>Webpage</title>
</head>
<body>
<div id="navbar"></div>
<div class="sidebar"></div>
<h1>Hello World!</h1>
</body>
</html>
So, what should I do?
if you want to use fixed position then add width: 100%; css rule for h1 css style.
other just remove position that will work.
DEMO
Change <h1> position:fixed to position:relative
the reason its sticking to the side of the page is because hence the name its fixed for example. you cannot tell it to freely float in the center if you have 'basically' demanded the element to be fixed, if that makes sense
you could do this
<style>
.test{
position:fixed;
right:0;
left:0;
text-align:center;
background:#EEEEEE;
</style>
<h1 class="test">test</h1>
When using position, specify it's position...left, top, or right, bottom.

Golden Ratio Webpage template?

I'm trying to create a template webpage that uses the golden ratio for proportion. However, it appears I'm not doing it correctly.
I would like some advice on the proper use of:
div tags for laying out panels on a page
CSS and the position attribute
Any other tags or tips that will help me achieve an attractive page
HTML:
<html>
<head>
<title>Golden Ratio</title>
<link rel="StyleSheet" title="Default" href="gr.css" type="text/css">
</head>
<body>
<div id="header">
</div>
<div>
</div>
<div id="bodyleft">
</div>
<div id="bodyright">
</div>
<div id="footer">
</div>
</body>
</html>
CSS:
body {
background-color: white;
}
#header {
width: 960px;
height: 100px;
background-color: red;
}
#bodyleft {
position: absolute;
top: 100px;
width: 592px;
height: 700px;
background-color: blue;
}
#bodyright {
position: absolute;
top: 110px;
left: 610px;
width: 368px;
height: 700px;
background-color: green;
}
#footer {
position: absolute;
top: 800px;
width: 960px;
height: 100px;
background-color: black;
}
I did some rather extensive golden ratio work in this post Is there a CSS way to position an HTML element vertically following the golden ratio? that may be helpful to you.
here is a link, http://jsfiddle.net/etienne_carre/WYStC/
I like to use the float left to align all my div and put a clear after it to finish the row.
Maybe this can help?
https://github.com/gbutiri/phi-grid
It's an extension that can be used with bootstrap and uses flexbox.