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.
Related
I am having trouble centering my footer () in the center of my page. I was able to get it to stay on the bottom of the page, but not center it.
I added left: 50% to the #footer, but the aligned it too far to the right. Also the <hr> tag is only running the span of the text beneath it. When I took it out of the div it was floating in the middle of the page. Any ideas on how I can center this (preferably using %, since I will be embedding it in another page which has different alignment settings).
Here is a link: http://jsbin.com/fajosekosu/2/edit
Your input is much apprecatied.
<!DOCTYPE html>
<html>
<head>
<style>
body {
width: 100%;
height: 100%;
text-align:center;
margin: 0 auto;
}
#footer {
text-align:center;
margin: 0 auto;
position:fixed;
bottom:0;
left: 50%;
}
a {
text-decoration: none;
color: black;
padding-right: 20px;
padding: 15px;
list-style: none;
display: inline-block;
}
a:hover {
color: white;
}
</style>
<meta charset="utf-8">
<title>Footer</title>
<link type="text/css" rel="stylesheet" href="/LESSON5/5_Signup_CSS.css">
</head>
<body>
<div id="footer">
<hr>
<footer>
Login
Create Account
Homepage
Logout
</footer>
</div>
</body>
</html>
add to footer css
width: 100%;
In #footer add:
left:0;
right:0;
Just add
width: 100%;
to your #footer rule:
http://jsbin.com/guxovaloci/2/edit?html,css,output
Alternatively, if you want a specified width other than 100%, use
left: 0;
right: 0;
You can use margin-left to bring it back from 50% left. Just add this to your footer:
margin-left: -190px;
left: 50%;
190 being half the width of your footer.
Really though, a better way to go about this process though is to fix your footer container and wrap the elements inside it in a div. Make that div an inline-block and center that. Also, your footer element should be the wrapper element.
HTML:
<footer>
<div class="footer-contents">
<hr>
Login
Create Account
Homepage
Logout
</div>
</footer>
CSS:
footer {
width: 100%;
position:fixed;
bottom:0;
}
.footer-contents{
display: inline-block;
}
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;
}
I have a header at the top that holds the following css rule:
position: fixed;
I also have some images that hold (and need to hold) the following css rule:
position: relative;
The problem is that my header always sits at the top of the page as the user scrolls, but when they get to the image (with position:relative) this sits on top of my header. But the header should always be on top. Is there another css rule I can apply to allow this to happen?
That problem might be with z-index. Give your header z-index:999999999 and your problem will be solved.
There is no need to set position as relative or absolute. You can use the following code:
<html>
<head>
<title>Document Edit</title>
</head>
<style type="text/css">
body {
padding: 0px;
margin: 0px;
}
.wrap {
width: 100%;
height: 1500px;
background-color: #DDD;
}
.header {
width: 100%;
height: 60px;
background-color: #004080;
position: fixed;
}
.imgdiv {
width: 400px;
height: 400px;
float: left;
background-color: green;
}
</style>
<body>
<div class="wrap">
<div class="header"></div>
<div class="imgdiv"><img src="error1.png" width="400" height="400"></div>
</div>
</body>
</html>
In your header CSS add z-index property:
with:
z-index:10 // can be any number but should be greater than the z-index of image
in image CSS add:
z-index:5; //should be less than the z-index of header
Just set in CSS z-index: 9999 to the header div.
I want to create a header bar at the top of the web-page, give it a background color and then add a logo on it.
So the problem is:
The width of the bar should be the width of the page. Its height
should be the size of the logo (plus some padding added around the
logo image).
Or is there a way to make the bar as big as its
content plus the padding added to the content?
I actually searched SO and found this, I tried to reproduce it into my code but it does not seem to help me.
I have also seen this and this.
My code is as follows:
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.div {
position: absolute;
height: auto; //**** When changed to a percent value, it displays
width: 100%;
top: 0px;
left: 0px;
float: left;
background: #000029;
}
.logo {
position: fixed;
top: 5px;
left: 12px;
bottom: 4px;
}
</style>
</head>
<body>
<div class="div">
<img src="http://********Header.svg" alt="Logo" class="logo" >
</div>
</body>
</html>
It just does not display the background color at all, and when I change the value of height to some value in percent, it displays.
So what I want is that the height of the bar should fit to its content i.e. the logo image.
EDIT:-
Remove virtually all of your CSS rules and just use something as basic as:
.div {
background: #000029;
}
.logo {
vertical-align:top;
}
jsFiddle example
change you css code like below:
.div {
position: fixed;
width: 100%;
top: 0px;
left: 0px;
background: #000029;
padding:5px;
}
.logo {
}
see the demo here ---->http://jsfiddle.net/4A7Q9/1/
The style can be something along these lines:
<style>
.div {
width: 100%;
background: #000029;
padding-left:10px;
padding-right:10px;
padding-top:10px;
padding-bottom:10px;
}
.logo {
}
</style>
I am trying to make an overlapping a DIV onto other visually . I am trying
{
position:absolute;
top:-10px;
}
in css, but I found that this top attribute is not working properly in firefox. Dear fellas, how to do that? Please help me with some codes or examples.
thx in advance
Here's an easy way
CSS
.top {
position: relative;
}
.topabs {
position: absolute;
}
HTML
<div class='top'>
<div class='topabs'>
I'm the top div
</div>
</div>
<div>No styles, just frowns :(</div>
The relative positioned div collapses as there are no contents, causing the coordinates 0,0 coordinates of the absolute positioned div to be that of the div underneath.
Fiddle
http://jsfiddle.net/y5SzW/
Try this, I like to use relative position for this kind of thing.
<html>
<head>
<style type="text/css">
body{
background-color: #000;
padding:0;
margin:0;
}
#bottom {
width: 200px;
height: 200px;
border: 5px #fff solid;
background-color:#f00;
margin: 0 auto;
}
.top {
width: 200px;
height:200px;
top: 10px;
left: -100px;
z-index: 10;
background-color: #00f;
color: #333;
border: 5px solid #fff;
position: relative;
}
</style>
</head>
<body>
<div id="bottom">
<div class="top"></div>
</div>
</body>
</head>
I would of course seperate the CSS into it's own file later.
Just use position: relative instead of absolute, or add a negative margin-top: -10px instead.