I am having problems with my code only filling up half the screen. It will fill the left half but not the right. I tried setting html height and width to 100% but it did not fix the problem. I also could not click on my href's to other pages after doing this. Any help would be great.
html {
margin: 0;
height: 100%;
width: 100%;
}
body {
background: #B2906F;
font-family: arial;
margin: 0;
height: 100%;
}
.picture{
display: inline;
margin: 0;
padding: 0;
position: fixed;
z-index: -1;
background-size: 100%
}
.button{
padding: 10px 15px;
text-decoration: none;
border-radius: 5px;
background-color: #05280c
}
.button-primary:hover {
background-color: #05370c
}
h1 {
display: inline;
margin: 0;
background-color: #2c421f;
padding: 5px;
position: absolute;
}
ul{
margin: 0;
display: inline;
padding: 0px 0px 0px 250px;
}
ul li {
display: inline-block;
list-style-type: none;
padding: 15px 10px;
color: #050c0c;
margin: 0;
}
ul li a {
color: black;
}
footer{
clear: both;
}
nav {
color:
height: 40px;
margin: 0;
background-color: #2c421f;
}
<!doctype html>
<html>
<head>
<title>NWWolfPack</title>
<link href="main.css" rel="stylesheet" />
</head>
<body>
<h1>NW Wolf Pack</h1>
<div class="picture"><img src="camo.jpg" width="1000" height="150">
<header>
<nav>
<ul>
<li class="button"><strong>Home</strong></li>
<li><strong>Records</strong></li>
<li><strong>Membership</strong></li>
<li><strong>Contact Us</strong></li>
</ul>
</nav>
</header>
</body>
<footer>2017 Dillan Hall</footer>
</html>
Add your code in a main div and add a width width margin: 0 auto
.mainContainer{
width:990px;
margin: 0 auto;
}
Related
I hope you guys can help me with the next thing. I've made the top of a website. When you hover the navigation, a dropdown menu will show. unfortunately this dropdown is positioned under a hr. How can i fix it to get this positioned on top of an hr? The hr is required element, so I can't remove it. Here is the example of the problem
Html code:
#import url('https://fonts.googleapis.com/css?family=Lato:300i,400,400i,700,900');
html {
box-sizing: border-box;
}
body {
font: 15px 'Lato', sans-serif;
margin: 0;
padding: 0;
}
.container {
margin: auto;
max-width: 1024px;
width: 100%;
overflow: hidden;
}
hr {
border-color: #b9b9b9;
position: absolute;
width: 100%;
margin-top: -55.5%;
}
header {
width: 80%;
margin-left: 10%;
}
header img {
width: 15%;
height: auto;
}
img {
width: 100%;
height: auto;
margin: -1% 0 0.5% 0;
}
h1 {
display: none;
}
nav {
float: right;
padding: 2% 0 5% 0;
}
li {
display: inline-block;
position: relative;
padding: 10px 0px 0px 0px;
margin-left: 10px;
}
header a {
text-decoration: none;
text-transform: uppercase;
font-size: 12px;
color: black;
font-weight: 400;
}
ul ul {
position: absolute;
left: 0;
top: 100%;
display: none;
padding: 1% 0;
}
li:hover ul {
display: block;
background-color: gainsboro;
}
ul ul a {
color: white;
}
.selected {
border-bottom: 2px solid #49997b;
padding-bottom: 0.5%;
}
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vakantie op de Dominicaanse Republiek</title>
<link rel="stylesheet" href="CSS/vakantie.css" type="text/css">
<link rel="stylesheet" href="CSS/normalize.css" type="text/css">
</head>
<body>
<div class="container">
<header>
<h1>Vakantie op de Dominicaanse republiek</h1>
<nav>
<ul>
<li class="selected">Home</li>
<li>Bezienswaardigheden</li>
<li>Over de Dominicaanse
<ul>
<li>Reisdocumenten</li>
<li>Inentingen</li>
<li>Feestdagen</li>
<li>Geld en koers</li>
</ul>
</li>
<li>Recreatie</li>
<li>Contact</li>
</ul>
</nav>
</header>
<img src="Afbeeldingen/Dominicaanse_header.jpg" alt="dominicaanse">
<hr>
</div>
</body>
</html>
You can set the menu's z-index higher than the hr and it should appear on top instead of behind it. I can't see the image to tell if this works or not but it should.
hr {
border-color: #b9b9b9;
position: absolute;
width: 100%;
margin-top: -55.5%;
z-index: 1;
}
.container {
margin: auto;
max-width: 1024px;
width: 100%;
overflow: hidden;
z-index: 2;
}
I am just getting back to working with websites, and cannot for the life of me center this navigation bar. I have floated the header over to the left, and feel like I have tried every possibly property, but it just will not center. Any help would be very appreciated.
Not centered NavBar:
.container {
margin: 0 auto;
background-color: #fff;
}
.header-heading {
float: left;
padding-top: 8px;
padding-left: 5px;
color: #ddd;
font-size: 30px;
}
.nav-bar {
background: #000;
padding: 0;
width: 100%;
}
.nav {
margin: auto;
padding: 0;
list-style: none;
text-align: center;
width: 100%;
}
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Web Report Demo</title>
<styles></styles>
<link rel="stylesheet" href="ed.css">
</head>
<body>
<div class="container">
<h1 class="header-heading">Web Reporting Demo</h1>
<div class="nav-bar">
<ul class="nav">
<li>Daily Master</li>
<li>Route Progress</li>
<li>UL Move Query</li>
<li>Stock Query</li>
</ul>
</div>
</div>
</body>
This should work
.container {
margin: 0 auto;
background-color: #000;
position:relative;
width: 100%;
height: 40px;
}
.header-heading {
position: absolute;
top:-20px;
left:5px;
color: #ddd;
font-size: 30px;
}
.nav-bar {
padding-top: 5px;
}
.nav {
margin: auto;
padding: 5px;
list-style: none;
text-align: center;
width: 100%;
}
.nav li {
display: inline;
padding: 5px;
}
.nav li a {
text-decoration: none;
color: #fff;
}
You will need to do some changes as you work in your responsive design.
Try giving the .container text-align: center.
I have this html below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="event.css">
</head>
<body>
<header class="header-container">
<div class="navigation">
<div class="navigation-content">
<h1 class="heading">
Test
</h1>
<ul class="heading-list">
<li>Sell<img src="money.png"></li>
<li>Buy<span><img src="tickets.png"></li>
<li>Sign in<span><img src="locked.png"></li>
</ul>
</div>
</div>
</header>
</body>
</html>
And this css below:
body {
font-family: "Helvetica Neue",Helvetica,Roboto,Arial,"Lucida Grande",sans-serif;
margin: 0;
padding: 0;
font-size: 14px;
background-color: #F6F8F9;
}
.header-container {
background-color: #260354;
width: 100%;
position: relative;
}
.navigation {
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
.navigation-content {
padding: 15px 30px;
border-bottom: none;
}
.heading {
color: white;
margin: 0;
padding: 0;
display: inline-block;
}
.heading-list {
float: right;
list-style: none;
overflow: hidden;
}
.heading-list li {
color: white;
float: left;
padding-right: 30px;
}
.heading-list li img {
color: white;
width: 24px;
height: 24px;
margin-left: 10px;
text-align: center;
}
In the navigation list on the top right (ul) I want to center those images with the li text in my css. I tried putting text-align: center; on the .heading-list li img but it is not centering the image. Is there something else I have to do?
You can use flexbox, as I used in this example
body {
font-family: "Helvetica Neue",Helvetica,Roboto,Arial,"Lucida Grande",sans-serif;
margin: 0;
padding: 0;
font-size: 14px;
background-color: #F6F8F9;
}
.header-container {
background-color: #260354;
width: 100%;
position: relative;
}
.navigation {
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
.navigation-content {
padding: 15px 30px;
border-bottom: none;
}
.heading {
color: white;
margin: 0;
padding: 0;
display: inline-block;
}
.heading-list {
float: right;
list-style: none;
overflow: hidden;
}
.heading-list li {
color: white;
float: left;
padding-right: 30px;
display: flex;
align-items: center;
}
.heading-list li img {
color: white;
width: 24px;
height: 24px;
margin-left: 10px;
text-align: center;
}
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="event.css">
</head>
<body>
<header class="header-container">
<div class="navigation">
<div class="navigation-content">
<h1 class="heading">
Test
</h1>
<ul class="heading-list">
<li>
<span>Sell</span>
<img src="https://pbs.twimg.com/profile_images/3038657495/3d2f325c92060a35e7ac8c697c57d8d4.jpeg">
</li>
<li>
<span>Buy</span>
<img src="https://pbs.twimg.com/profile_images/630664501776527361/nIK2xTUE.jpg">
</li>
<li>
<span>Sign in</span>
<img src="http://www.dailyworldfacts.com/wp-content/uploads/2011/06/facts-about-cat-fallen-cat.jpg">
</li>
</ul>
</div>
</div>
</header>
</body>
</html>
So an image by default has a display type of inline-block. To enable it to be centered, include the following in your images css.
display: block;
margin-left: auto;
margin-right: auto
My title basically says it all. For some reason I cannot get it to stretch the entire page. I am new to this so any help would be great.
My page
This is my html for the code. I have been told that the width and margin needed to be changed from a friend and I tried doing that but got the same results.
.maincontainer{
width: 990px;
margin: 0 auto;
}
body {
background: #B2906F;
font-family: arial;
margin: 0;
height: 100%;
}
.picture{
display: inline;
margin: 0;
padding: 0;
position: fixed;
z-index: -1;
background-size: 100%
}
.button{
padding: 10px 15px;
text-decoration: none;
border-radius: 5px;
background-color: #05280c
}
.button-primary:hover {
background-color: #05370c
}
h1 {
display: inline;
margin: 0;
background-color: #2c421f;
padding: 5px;
position: absolute;
}
ul{
margin: 0;
display: inline;
padding: 0px 0px 0px 250px;
}
ul li {
display: inline-block;
list-style-type: none;
padding: 15px 10px;
color: #050c0c;
margin: 0;
border-radius: 5px;
}
ul li a {
color: black;
}
footer{
clear: both;
}
nav {
color:
height: 40px;
margin: 0;
background-color: #2c421f;
}
<!doctype html>
<div class="maincontainer">
<html>
<head>
<title>NWWolfPack</title>
<link href="main.css" rel="stylesheet" />
</head>
<body>
<h1>NW Wolf Pack</h1>
<div class="picture"><img src="camo.jpg" width="1000" height="150">
<header>
<nav>
<ul>
<li class="button"><strong>Home</strong></li>
<li><strong>Records</strong></li>
<li><strong>Membership</strong></li>
<li><strong>Contact Us</strong></li>
</ul>
</nav>
</header>
</body>
<footer>2017 Dillan Hall</footer>
</html>
Arrange the html in well structured order and make the container div of with 100% then it will take the whole width: demo below
html,
body{
height: 100%;
}
body {
background: #B2906F;
font-family: arial;
margin: 0;
}
.maincontainer{
width: 100%;
margin: 0 auto;
}
.picture{
display: inline;
margin: 0;
padding: 0;
position: fixed;
z-index: -1;
background-size: 100%;
width: 100%;
}
.button{
padding: 10px 15px;
text-decoration: none;
border-radius: 5px;
background-color: #05280c
}
.button-primary:hover {
background-color: #05370c
}
h1 {
display: inline;
margin: 0;
background-color: #2c421f;
padding: 5px;
position: absolute;
}
ul{
margin: 0;
display: inline;
padding: 0px 0px 0px 250px;
}
ul li {
display: inline-block;
list-style-type: none;
padding: 15px 10px;
color: #050c0c;
margin: 0;
border-radius: 5px;
}
ul li a {
color: black;
}
footer{
clear: both;
}
nav {
color:
height: 40px;
margin: 0;
background-color: #2c421f;
}
<!DOCTYPE html>
<html>
<head>
<title>NWWolfPack</title>
<link href="main.css" rel="stylesheet" />
</head>
<body>
<div class="maincontainer">
<h1>NW Wolf Pack</h1>
<div class="picture"><img src="camo.jpg" width="1000" height="150">
<header>
<nav>
<ul>
<li class="button"><strong>Home</strong></li>
<li><strong>Records</strong></li>
<li><strong>Membership</strong></li>
<li><strong>Contact Us</strong></li>
</ul>
</nav>
</header>
</div>
<footer>2017 Dillan Hall</footer>
</body>
</html>
Your HTML code structure is not correct, I have corrected the HTML structure below:
<!doctype html>
<html>
<head>
<title>NWWolfPack</title>
<link href="main.css" rel="stylesheet" />
</head>
<body>
<div class="maincontainer">
<div class="picture"><img src="camo.jpg" height="150" style="width: 100%" />
<header>
<nav>
<ul>
<li class="button"><strong>Home</strong></li>
<li><strong>Records</strong></li>
<li><strong>Membership</strong></li>
<li><strong>Contact Us</strong></li>
</ul>
</nav>
</header>
</div>
</div>
</body>
<footer>2017 Dillan Hall</footer>
</html>
And to make the screen full size you need to modify your CSS code .maincontainer and it will solve your issue.
.maincontainer{
width: 100%;
margin: 0 auto;
}
I'm just getting back into Web Development and so I'm working on stretching those muscles again. What I wanted to achieve was a Header on top of my vertical menu with the Initials in the background and the full name in the middle of those initials. I was able to do that with the code in codepen, however it quickly becomes broken when resizing the window. I know that is due in part to the position absolute. Is there another way to achieve this effect and have it be scalable, but stay within the lines of the nav?
http://codepen.io/anon/pen/OPPKmq
<html>
<head>
<title>Scottish Arts</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="body">
<aside>
</aside>
<nav>
<h1 id="navSA">SA<h1>
<h1 id="sa">Socttish Arts</h1>
<ul>
<li><h3></h3></li>
<li>Home</li>
<li>Scottish Arts</li>
<li>Bagpipes</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</body>
</html>
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
h1,h2,h3 {
padding: 0;
margin: 0;
}
#body {
display: flex;
height: 100%;
}
aside {
width: 25px;
height: 100%;
background: url("img/nhtar.gif");
background-repeat: repeat;
border-right: 2px #000 solid;
}
nav {
height: 100%;
width: 15%;
background-color: #7E717A;
border-right: 4px #A2969E solid;
overflow: hidden;
}
nav #navSA {
font-weight: bolder;
text-align: center;
padding: 0;
margin: 0;
font-size: 8em;
color: #A2969E;
}
nav #sa {
padding: 0;
margin: 0;
position: absolute;
top: 60px;
left: 40px;
font-size: 2em;
text-shadow: 2px 2px #7E717A;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
text-align: right;
}
nav ul li a {
display: block;
padding: 5px;
background-color: #A2969E;
text-decoration: none;
font-size: 1.5em;
font-family: "Verdana";
font-weight: bold;
color: #fff;
border-bottom: 4px #7E717A solid;
}
nav ul li a:hover {
background-color: #372E34;
}
Giving absolute Position to a child that does not have relative parent , will set it's position relating to BODY .
add position:relative; to nav in css , and everything will be OK ;)
http://codepen.io/anon/pen/LEEwOd