My website has a vertical navigation bar to the left, so when I center text it is centered but not centered in the green section.
.sidebar {
position: fixed;
height:100%;
left: 0;
top: 0px;
width: 300px;
background:#6495ED;
}
h1 {
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 300px;
background-color: #6495ED;
}
li a {
display: block;
color: #000000;
padding: 8px 0 8px 16px;
text-decoration: none;
font-size: 50px;
font-family: "Verdana", Geneva, sans-serif;
}
li a:hover {
background-color:#27C0FD;
color: #000000;
}
<html>
<link rel="stylesheet" type="text/css" href="css.css">
<body bgcolor="#81F781">
<head>
<h1> Informational Tech Site</h1>
</head>
<body>
<div class="sidebar">
<ul>
<li>Home </li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</body>
Code is here. http://pastebin.com/xgvt4P0a
Here is the image the text is centered, but not centered in the green section. https://imgur.com/kkDlnik
Thanks!
You are using wrong HTML, So i will not go any forward.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body bgcolor="#81F781">
<div id="sidebar">
<ul>
<li>Home </li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div id="content">
<h1> Informational Tech Site</h1>
<div>
</body>
</html>
You have specified an absolute width to your sidebar, which in general is fine. But your <h1> is declared outside of your sidebar container (which, as already said, has a fixed width). To put your <h1> into the center, just specify a padding-left: 300px; (as already mentioned a few times by others in here) to your <h1> or, and that's more responsive for future purposes, wrap your sidebar and <h1> inside a parental container, so your sidebar and <h1> will automatically fit into that parent container. While doing so, using text-align: center; on your <h1> should work without a padding.
As per you code add margin-left:300px; to h1 will make your h1 in proper center.
Because your sidebar is fixed and having width:300px.
And why your have h1 in head section.
.sidebar {
position: fixed;
height: 100%;
left: 0;
top: 0px;
width: 300px;
background: #6495ED;
}
h1 {
text-align: center;
margin-left: 300px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 300px;
background-color: #6495ED;
}
li a {
display: block;
color: #000000;
padding: 8px 0 8px 16px;
text-decoration: none;
font-size: 50px;
font-family: "Verdana", Geneva, sans-serif;
}
li a:hover {
background-color: #27C0FD;
color: #000000;
}
<html>
<link rel="stylesheet" type="text/css" href="css.css">
<body bgcolor="#81F781">
<head>
<h1> Informational Tech Site</h1>
</head>
<body>
<div class="sidebar">
<ul>
<li>Home </li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</body>
Fiddle
Add padding-left:300px to body
This is something to do with layouts.
Anyhow, as your side bar width is 300px and fixed positioned, you could just add padding-left:300px to body, so any content added will be aligned into the green place.
Here you go:
.sidebar {
position: fixed;
height:100%;
left: 0;
top: 0px;
width: 25%;
background:#6495ED;
}
#Content {
width: 75%;
float: right;
}
jsFiddle
You need another div to put h1 to it then use percentage for width of both divs, mean new div called content and sidebar. your issue is h1 got full width of your page because your sidebar has fixed position and you need to use percentage width to keep them equal. just a float: right for content and width: 75%; and 25% width for sidebar will solve your problem.
First, your elements isn't sorting well, you have to write the <h1> inside the <body> tag not in <head>
To center the h1 you have to add 300px padding in left, because your 'fixed' positioning sidebar isn't take physical place in body canvas, so, if you're using 'fixed' or 'absolute' positioning it's not taking effect in positioning of other elements.
Use following css for .sldebar rule:
.sidebar {
position: fixed;
height: 100%;
left: 50%;
top: 0px;
width: 300px;
background: #6495ED;
transform: translateX(-50%);
}
Related
I'm trying to figure out how to get the div topnav background color to fit the page width from side to side with no gaps. I hope you understand what I mean. if you need any more info just let me know.
Page showing gap:
HTML and CSS code:
body {background-color: burlywood;}
#heading1{position: relative; text-align: center; top: 50px;}
#topnav{background-color: chocolate;
font-size: 30px;
text-align: center;
overflow: hidden;
position: relative;
word-spacing: 70px;
width: 100%; height: 100%;
bottom: 80px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
<title></title>
</head>
<body>
<h1 id="heading1">Hello World</h1>
<div id="topnav">
<nav>
About
sales
cart
home
</ul>
</nav>
</div>
</body>
</html>
put body { padding:0; margin:0; } in style
The problem is of not removing default margin of body which is causing space in left and right direction.
body { padding: 0; margin: 0;}
#heading1 {
position: relative;
text-align: center;
top: 50px;
}
#topnav {
background-color: chocolate;
font-size: 30px;
text-align: center;
overflow: hidden;
position: relative;
word-spacing: 70px;
width: 100%;
height: 100%;
bottom: 80px;
}
#topnav ul { margin: 0;}
#topnav li { display: inline-block; list-style-type: none;}
<h1 id="heading1">Hello World</h1>
<div id="topnav">
<nav>
<ul>
<li> About </li>
<li> sales</li>
<li> cart</li>
<li> home</li>
</ul>
</nav>
</div>
There is also some syntax problem in the HTML part. Check the above solution which includes both removing of default space and HTML correction with styling.
If you want to mantain automatic margin and padding of body you can add this to #topnav
width: 100vw;
margin-left: -8px;
You also set to 0 margin and padding of body:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
<title></title>
<style>
body{padding: 0; margin: 0;}
#heading1{position: relative; text-align: center; top: 50px;}
#topnav{background-color: chocolate;
font-size: 30px;
text-align: center;
overflow: hidden;
position: relative;
word-spacing: 70px;
width: 100%; height: 100%;
bottom: 80px;}
</style>
</head>
<body>
<h1 id="heading1">Hello World</h1>
<div id="topnav">
<nav>
About
sales
cart
home
</ul>
</nav>
</div>
</body>
</html>
Okay i know the tittle is bit confusing but here is a description. I have a header tag inside html and a full screen background in css. On top of the screen is menu
which is suposed to stay there (not to stick to the top of the screen while scrolling). Also i never had this problem before when i set height to auto and i set padding for an 'a' element height does not follow the padding of the a element and then there is a gap between background and top of the screen. So in order to fix that i wrote margin-top: -20px; but then it looks like this.
picture 1
And if i remove margin-top it looks like this:
picture 2
Again i never had this problem before and here is code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Smart Hosting | Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="./css/main.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300"
rel="stylesheet">
</head>
<body>
<header>
<div class="menu">
<ul>
<li class="current">Home</li>
<li>Shop</li>
<li>About</li>
<li>Log In</li>
<li>Sign Up</li>
</ul>
</div>
</header>
</body>
</html>
CSS
body {
margin: 0px;
padding: 0px;
font-family: Roboto;
}
body, html {
width: 100%;
height: 100%;
}
header {
background: url(./img/server.jpg) 50% 50%;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
}
.menu {
background: #1C2F51;
width: 100%;
height: 70px;
}
.menu ul {
list-style: none;
}
.menu li {
display: inline;
background: #25CFB0;
padding: 30px;
}
.menu a {
color: white;
text-decoration: none;
font-size: 20px;
}
Use display: inline-block instead of inline for your li elements. Margins doesn't always do what you expect on inline elements.
.menu ul {
list-style: none;
margin-top: 0px; //to remove the blank space at the top
}
.menu li {
display: inline-block;
background: #25CFB0;
padding: 30px;
}
https://codepen.io/anon/pen/oQgBpV
I have a header section holding my nav bar and an image. It's a black header on a white background.
<header id="header">
<img id="header-img" src="https://ruwix.com/rubiks-cube-image.php?n=4&fl=xpxyowrrbygywygowbgwyowrrxyorgybrrwyrwybwyowbgwb&bg=AABBBB&m=xy&f=png&size=200&b=40&d=5" height=100 width=100>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#home">Home</a></li>
<li><a class="nav-link" href="#about">About</a></li>
<li><a class="nav-link" href="#catalogue">Catalogue</a></li>
</ul>
</nav>
</header>
I want to have it fixed to the top of my screen to have it always in view.
So far my CSS is
.nav-list-link {
display: inline;
padding-left: 10px;
}
#header {
display: flex;
position: fixed;
width: 100%;
background-color: black;
}
The rest of the page rises up behind it. When I adjust the width to 100%, it expands to the entire row length but leaves some space on it's left. Also, there is space above it that I can't seem to shrink.
I want to have the header at the top of the page with no extra space at the top or sides.
I solved the problem and improved your code
body {margin:0;}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.main {
padding: 16px;
margin-top: 30px;
height: 1500px; /* Used in this example to enable scrolling */
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<header>
<div class="navbar">
<img id="header-img" src="https://ruwix.com/rubiks-cube-image.php?n=4&fl=xpxyowrrbygywygowbgwyowrrxyorgybrrwyrwybwyowbgwb&bg=AABBBB&m=xy&f=png&size=200&b=40&d=5" height=50 width=50 style="float: left">
Home
News
Contact
</div>
</header>
<div class="main">
<h1>Fixed Top Navbar</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>
</div>
</body>
</html>
I see you have a class in you css but it isn't in your ul tag where i think it should be. The space that remains on you left could be the padding-left:10px in you css, keep an eye on it.
On your header selector remove the width property and add the following properties:
#header {
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: black;
}
This will keep it fixed to the top of your browser window
i have searched about and can't seem to find the answer I am looking for.
I want to know how to move my div down below my fixed header.
#import url(http://fonts.googleapis.com/css?family=Oswald);
body {
width: 100%;
margin: auto;
}
.container {
width: 75%;
margin: 0 auto;
}
.header {
background: #6396bc;
width: 100%;
top: 0;
position: fixed;
}
.logo {
float: left;
font-family: "Oswald", sans-serif;
font-size: 15px;
margin-left: 15%
}
a {
text-decoration: none;
color: white;
}
li {
list-style: none;
float: left;
margin-left: 15px;
padding-top: 15px;
font-family: "Oswald", sans-serif
}
.nav {
float: right;
margin-right: 15%
}
<!DOCTYPE html>
<html>
<head>
<title>team Zeus | Home</title>
<link rel="stylesheet" href="../stylesheets/styles.css">
</head>
<body>
<div class="header">
<div class="container">
<div class="logo">
<h1>team Zeus</h1>
</div>
<div class="nav">
<ul>
<li>Home</li>
<li>Page</li>
<li>Another page</li>
<li>1 other page</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="content">
<p>I copied and pasted some article from Wikipedia in here, you could do that too (to test out the header at the top)</p>
</div>
</body>
</html>
I think it is something to do with the containers, because when I try and resize them with width, it just messes the full page around. I cannot figure it out
Thanks
You mean just move the content down below the header? If that's what you want just position the content div like this:
.div {
position:relative;
top: 100px;
}
i think this will definately help
I'm currently converting my portfolio mock up into html/css and I've come across something that has confused me.
http://www.mozazdesign.co.cc/
As you can see, the navigation text is positioned in the wrong place; I want it to be inline with the markers. I've looked through the code loads and looked at other websites but can't figure out why it's not working..
This is the exact code:
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<title>MozazDesign Portfolio</title>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
</div><!--end logo-->
<div id="nav">
<ul id="main_nav">
<li>home</li>
<li>about me</li>
<li>gallery</li>
<li>blog</li>
<li>contact</li>
</ul><!--end main nav-->
</div><!--end nav-->
</div><!--end header-->
</body>
body {
padding: 0px;
margin: 0px;
background:url('Images/background.png');
font-family: century gothic;
}
#nav a {
text-decoration: none;
color: white;
}
#container {
margin: 0 auto;
width: 960px;
}
#logo {
background:url('Images/Logo.png');
height: 340px;
width: 524px;
float: left;
margin-left: 0px; <!--check-->
}
#nav {
background:url('Images/Nav_Container.png');
width: 427px;
height: 33px;
float: right;
margin-top: 100px;
}
#main_nav li {
list-style-type: none;
display: inline;
font-family: century gothic;
font-size: 18px;
color: white;
margin-right: 17px;
}
Any ideas why it isn't positioned correctly?
Thanks in advance!
Add a new CSS class:
#main_nav
{
position: relative;
top: -10px;
}
Adjust the top value until it looks correct.
The relative position says 'position this element where it naturally occurs' and then you can use 'Top' and 'Left' values (positive values to move it down and right, negative to move it up or left) to modify it's position from it's relative position.