I am trying to get the 'hamburger lines' which you get when you shrink a responsive website. But the lines which I am getting is not stacked like it should be and is instead side by side:
This is the picture of the lines:
Code:
*
{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body
{
background-image: url(background.jpg);
background-size: cover;
background-position : center;
font-family: sans-serif;
}
.menu-bar
{
background: #273044;
text-align: center;
}
.menu-bar ul
{
display: inline-flex;
list-style: none;
color: #fff;
}
.menu-bar ul li
{
width: 120px;
place-items:center;
display: grid;
padding: 0px;
}
.menu-bar ul li a
{
text-decoration: none;
color: white;
}
.active, .menu-bar ul li:hover
{
background-color: #0b56ab;
height:auto;
height:30px;
}
.toggle-button{
position: absolute;
top: 0.75rem;
right: 1rem;
display: flex;
flex-direction: none;
justify-content: space-between;
width: 31px;
height: 21px;
}
.toggle-button .bar{
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media(max-width: 400px){
.toggle-button{
display:flex;
}
}
/* body{margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; color:#919191; background-color:#232323;} */
<html>
<head>
<title> Title of page </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet1" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#6.1.1/css/fontawesome.min.css">
</head>
<!----header---->
<body>
<div class="menu-bar">
<a href = "#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<ul>
<li class="active">Home</li>
<li>About us</li>
<li>Services</li>
<li>Investors</li>
<li>Pricing</li>
<li>Training </li>
<li>Contact</li>
</ul>
</div>
<div class= "grid">
</div>
</body>
</html>
Could you please have a look at my code and advise what I have overlooked?
You didn't specify the flex-direction as column
+(I have modified your css code a bit)
*
{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body
{
background-image: url(background.jpg);
background-size: cover;
background-position : center;
font-family: sans-serif;
}
.menu-bar
{
background: #273044;
display: inline-flex;
text-align: center;
align-items:center;
}
.menu-bar ul
{
display: inline-flex;
align-items:center;
list-style: none;
color: #fff;
}
.menu-bar ul li
{
min-width: 120px;
align-self:center;
display: grid;
padding: 0px;
}
.menu-bar ul li a
{
text-decoration: none;
color: white;
}
.active, .menu-bar ul li:hover
{
background-color: #0b56ab;
height:auto;
height:30px;
}
.toggle-button{
position: absolute;
right: 1rem;
display: flex;
flex-direction: column;
justify-content: space-around;
width: 31px;
height: 21px;
}
.toggle-button .bar{
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media(max-width: 400px){
.toggle-button{
display:flex;
}
}
/* body{margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; color:#919191; background-color:#232323;} */
<html>
<head>
<title> Title of page </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet1" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#6.1.1/css/fontawesome.min.css">
</head>
<!----header---->
<body>
<div class="menu-bar">
<a href = "#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<ul>
<li class="active">Home</li>
<li>About us</li>
<li>Services</li>
<li>Investors</li>
<li>Pricing</li>
<li>Training </li>
<li>Contact</li>
</ul>
</div>
<div class= "grid">
</div>
</body>
</html>
You'll want to change to display block on the a tag and the spans
.toggle-button{
position: absolute;
top: 0.75rem;
right: 1rem;
display: block;
width: 31px;
height: 21px;
}
.toggle-button .bar{
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
display: block;
margin-bottom: 3px;
}
Its not a solution for your three lines, but you just could use a SVG:
.hamburger {
width: 12rem;
height: 12rem;
}
<svg xmlns="http://www.w3.org/2000/svg" class="hamburger" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
</svg>
Related
I have a working code for flex in css. Although the buttons are realigning but the blue bars is not moving. Due to this changing the screen size make it seem that all the buttons have disappeared.
*
{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body
{
background-image: url(background.jpg);
background-size: cover;
background-position : center;
font-family: sans-serif;
}
.menu-bar
{
background: #273044;
text-align: center;
height:30px;
}
.menu-bar ul
{
display: inline-flex;
list-style: none;
color: #fff;
}
.menu-bar ul li
{
width: 120px;
place-items:center;
display: grid;
padding: 5px;
}
.menu-bar ul li a
{
text-decoration: none;
color: white;
}
.active, .menu-bar ul li:hover
{
background-color: #0b56ab;
height:auto;
height:30px;
}
.toggle-button{
position: absolute;
top: 0.75rem;
right: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 31px;
height: 21px;
}
.toggle-button .bar{
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media(max-width: 700px){
.toggle-button{
display:flex;
}
.menu-bar-links{
/* display:none; */
width:100%;
}
.menu-bar{
flex-direction: column;
align-items: flexstart;
}
.menu-bar-links ul{
width:100%;
flex-direction: column;
}
.menu-bar-links li{
text-align: center;
}
}
/* body{margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; color:#919191; background-color:#232323;} */
This is my HTML Code:
<html>
<head>
<title> Title of page </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet1" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#6.1.1/css/fontawesome.min.css">
</head>
<!----header---->
<body>
<div class="menu-bar">
<a href = "#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="menu-bar-links">
<ul>
<li class="active">Home</li>
<li>About us</li>
<li>Services</li>
<li>Investors</li>
<li>Pricing</li>
<li>Training </li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- <div class= "grid">
</div> -->
</body>
</html>
This is how it looks when in full screen:
When i rearrange the screen it looks like this:
As you can see all the buttons seems to have disappeared except the one which is hovered over
It is also not centering even with
.menu-bar-links li{
text-align: center;
The problem you have is that you have a fixed height on your .menu-bar, namely height: 30px. You're better off removing that, adding some padding for presentation and making the .menu-bar element a flex container.
Link to CodePen:
https://codepen.io/thechewy/pen/QWQQMjg
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.menu-bar {
background: #273044;
text-align: center;
/* height: 30px; */
padding: 1rem;
display: flex;
justify-content: center;
align-items: center;
}
.menu-bar ul {
display: inline-flex;
list-style: none;
color: #fff;
}
.menu-bar ul li {
width: 120px;
place-items: center;
display: grid;
padding: 5px;
}
.menu-bar ul li a {
text-decoration: none;
color: white;
}
.active,
.menu-bar ul li:hover {
background-color: #0b56ab;
height: auto;
height: 30px;
}
.toggle-button {
position: absolute;
right: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 31px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media (max-width: 700px) {
.toggle-button {
display: flex;
}
.menu-bar-links {
/* display:none; */
width: 100%;
}
.menu-bar {
flex-direction: column;
align-items: flexstart;
}
.menu-bar-links ul {
width: 100%;
flex-direction: column;
}
.menu-bar-links li {
text-align: center;
}
}
<html>
<head>
<title> Title of page </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet1" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#6.1.1/css/fontawesome.min.css">
</head>
<body>
<div class="menu-bar">
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="menu-bar-links">
<ul>
<li class="active">Home</li>
<li>About us</li>
<li>Services</li>
<li>Investors</li>
<li>Pricing</li>
<li>Training </li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
lately I've started coding with some css and html and I decided to make my own first website, so I had some problems in changing the position of a div containing two buttons("s'inscrire" and "se connecter") ... Also when I hover on the header list, it starts moving upwards and downwards, I changed the padding, the margin... But nothing happens!
#import url('https://fonts.googleapis.com/css?family=Montserrat|Raleway');
*{
margin:0;
padding: 0;
font-family: Raleway;
}
body{
background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
url('1.jpg');
background-position: center;
background-size: cover;
height: 100vh;
}
.main ul{
float: right;
display: block;
list-style-type: none;
font-size: 15px;
margin-top: 20px;
position: sticky;
}
.main ul li{
display: inline-block;
width: 150px;
}
.main ul li i{
padding-right: 5px;
color: #eccc68;
opacity: 0.6;
}
.main ul li a{
text-decoration: none;
color: #fff;
padding: 5px 20px;
border: 1px solid transparent;
border-radius: 7px;
}
.main ul li a:hover{
position: relative;
display: block;
background-color: #fff;
color: #000;
transition: 0.6s ease;
}
.main ul li.active a{
background-color: #fff;
color: #000;
}
.main ul ul li{
list-style-type: none;
display: none;
}
.main ul li:hover ul li{
display: block;
}
.login ul{
float: right;
position: fixed;
list-style-type: none;
display: inline-block;
font-size: 12px;
}
.logo img{
float: left;
width: 150px;
height: auto;
margin-top: 15px;
margin-left: 0;
}
header{
background-color: rgba(202, 211, 200,0.6);
}
.main{
max-width: 1200px;
margin: auto;
}
.title img{
width: 40%;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%,-100%);
}
.title p{
width: 40%;
position: absolute;
top: 54%;
left: 50%;
font-size: 25px;
font-family: Montserrat;
font-weight: lighter;
transform: translate(-50%,-100%);
text-align: center;
color: #F8EFBA;
}
.button{
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%,-100%);
}
.button a i{
padding-right: 5px;
color: #eccc68;
opacity: 0.6;
}
.btn{
border: 1px solid #eccc68;
border-radius: 15px;
padding: 10px 30px;
color: #fff;
font-size: 20px;
text-decoration: none;
}
.btn:hover{
background-color: #fff;
color: #000;
transition: 0.6s ease;
}
.footer{
width: 100%;
position: fixed;
bottom: 0;
background-color: rgba(0,0,0,0.4);
height: 60px;
}
.footer ul{
transform: translateX(1800px);
margin-right: 0px;
list-style-type: none;
font-size: 15px;
margin-top: 20px;
}
.footer ul li a i{
font-size: 20px;
padding-right: 5px;
color: #eccc68;
}
.footer ul li{
display: inline-block;
}
.footer h5{
font-size: 11px;
color: #eccc68;
text-align: center;
opacity: 0.7;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Trip Buddy | Your free online travel guide</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" type="image/png" href="favicon.ico">
</head>
<body>
<header>
<div class="main">
<div class="logo">
<img src="2.png">
</div>
<ul>
<li class="active"><i class="fas fa-home"></i>Accueil</li>
<li><i class="fas fa-city"></i>Villes dispo
<ul>
<li>Marrakech</li>
<li>Rabat</li>
<li>Tanger</li>
<li>Essaouira</li>
</ul>
</li>
<li><i class="fas fa-hand-holding"></i>Services</li>
<li><i class="fas fa-user-alt"></i>Contact</li>
</ul>
</div>
<div class="login">
<ul>
<li>S'inscrire</li>
<li>Se connecter</li>
</ul>
</div>
<div class="title">
<img src="2.png">
<p>Trip Buddy est ton premier accompagnant guide en ligne. Rejoignez notre nombreuse communauté et télecharger l'application sur toutes les platformes GRATUITEMENT!</p>
</div>
<div class="button">
<i class="far fa-play-circle"></i>Regarder video
<i class="far fa-question-circle"></i>Aide
</div>
</header>
<footer>
<div class="footer">
<ul>
<li><i class="fab fa-facebook"></i></li>
<li><i class="fab fa-twitter-square"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-snapchat-square"></i></li>
</ul>
<h5>
©Khalil 2019
</h5>
</div>
</footer>
</body>
</html>
Please if you can fix this problem I'm gonna be so grateful for your help. Thanks.
I have Changed the following CSS code and menu now fixed.
.main ul li a{
text-decoration: none;
color: #fff;
padding: 5px 20px;
border: 1px solid transparent;
border-radius: 7px;
position: relative;
display: block;
transition:all 0.6s ease; /* this will be always at normal stage not at hover*/
}
.main ul li a:hover{
background-color: #fff;
color: #000;
}
Please have a look at this at codepen
#import url('https://fonts.googleapis.com/css?family=Montserrat|Raleway');
*{
margin:0;
padding: 0;
font-family: Raleway;
}
body{
background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
url('1.jpg');
background-position: center;
background-size: cover;
height: 100vh;
}
.main ul{
float: right;
display: block;
list-style-type: none;
font-size: 15px;
margin-top: 20px;
position: sticky;
}
.main ul li{
display: inline-block;
width: 150px;
}
.main ul li i{
padding-right: 5px;
color: #eccc68;
opacity: 0.6;
}
.main ul li a{
text-decoration: none;
color: #fff;
padding: 5px 20px;
border: 1px solid transparent;
border-radius: 7px;
position: relative;
display: block;
transition:all 0.6s ease; /* this will be always at normal stage not at hover*/
}
.main ul li a:hover{
background-color: #fff;
color: #000;
}
.main ul li.active a{
background-color: #fff;
color: #000;
}
.main ul ul li{
list-style-type: none;
display: none;
}
.main ul li:hover ul li{
display: block;
}
.login ul{
float: right;
position: fixed;
list-style-type: none;
display: inline-block;
font-size: 12px;
}
.logo img{
float: left;
width: 150px;
height: auto;
margin-top: 15px;
margin-left: 0;
}
header{
background-color: rgba(202, 211, 200,0.6);
}
.main{
max-width: 1200px;
margin: auto;
}
.title img{
width: 40%;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%,-100%);
}
.title p{
width: 40%;
position: absolute;
top: 54%;
left: 50%;
font-size: 25px;
font-family: Montserrat;
font-weight: lighter;
transform: translate(-50%,-100%);
text-align: center;
color: #F8EFBA;
}
.button{
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%,-100%);
}
.button a i{
padding-right: 5px;
color: #eccc68;
opacity: 0.6;
}
.btn{
border: 1px solid #eccc68;
border-radius: 15px;
padding: 10px 30px;
color: #fff;
font-size: 20px;
text-decoration: none;
}
.btn:hover{
background-color: #fff;
color: #000;
transition: 0.6s ease;
}
.footer{
width: 100%;
position: fixed;
bottom: 0;
background-color: rgba(0,0,0,0.4);
height: 60px;
}
.footer ul{
transform: translateX(1800px);
margin-right: 0px;
list-style-type: none;
font-size: 15px;
margin-top: 20px;
}
.footer ul li a i{
font-size: 20px;
padding-right: 5px;
color: #eccc68;
}
.footer ul li{
display: inline-block;
}
.footer h5{
font-size: 11px;
color: #eccc68;
text-align: center;
opacity: 0.7;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Trip Buddy | Your free online travel guide</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" type="image/png" href="favicon.ico">
</head>
<body>
<header>
<div class="main">
<div class="logo">
<img src="2.png">
</div>
<ul>
<li class="active"><i class="fas fa-home"></i>Accueil</li>
<li><i class="fas fa-city"></i>Villes dispo
<ul>
<li>Marrakech</li>
<li>Rabat</li>
<li>Tanger</li>
<li>Essaouira</li>
</ul>
</li>
<li><i class="fas fa-hand-holding"></i>Services</li>
<li><i class="fas fa-user-alt"></i>Contact</li>
</ul>
</div>
<div class="login">
<ul>
<li>S'inscrire</li>
<li>Se connecter</li>
</ul>
</div>
<div class="title">
<img src="2.png">
<p>Trip Buddy est ton premier accompagnant guide en ligne. Rejoignez notre nombreuse communauté et télecharger l'application sur toutes les platformes GRATUITEMENT!</p>
</div>
<div class="button">
<i class="far fa-play-circle"></i>Regarder video
<i class="far fa-question-circle"></i>Aide
</div>
</header>
<footer>
<div class="footer">
<ul>
<li><i class="fab fa-facebook"></i></li>
<li><i class="fab fa-twitter-square"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-snapchat-square"></i></li>
</ul>
<h5>
©Khalil 2019
</h5>
</div>
</footer>
</body>
</html>
I currently have a heading 1 and logo on the same line of the header, and now I want to have a background colour for the header. I would ideally want this to come down below the nav bar as well.
The issue I'm having is that the colour doesnt fill the top part of the page as I thought it would. It only covers the heading and it also covers the logo on the same line.
How would I stop the colour from going over the image and how would I make the colour spread from the top of the page to below the nav bar.
HTML:
.header img {
float: left;
background: #555;
}
.header h1 {
font-family: "Lucida Sans Typewriter",Georgia,Arial;
position: relative;
top: 18px;
left: 10px;
padding-left: 40%;
background-color:#D3D3D3;
}
.nav{
width: 95%;
margin: auto;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
}
.nav li {
font-family: "Lucida Sans Typewriter",Georgia,Arial;
font-size: 16px;
display: inline;
height: 40px;
width: 19.925%;
float: left;
}
.nav li a {
display: block;
color: white;
text-decoration: none;
}
.nav li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.nav li:last-child{
border-right: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>The Clay Oven Pizzeria</title>
</head>
<header>
<div class="header">
<img src="images/pizzalogo.jpg" alt="logo"/>
<h1> The Clay Oven Pizzeria</h1>
</div>
<br><br>
<div class="nav">
<ul>
<li><a class="active" href="#index"> Home </li>
<li><a href="#menu">Menu</li>
<li><a href="#about">About</li>
<li><a href="#about">Contact Us</li>
<li><a href="#signup">Sign Up</li>
</ul>
</div>
</header>
<body>
</body>
</html>
EDIT: This is what I mean about the background colour covering the logo:
I swapped the HTML header tag to be within the body. Your body tag is where it will house all your html minus the head tag that has your title. Not a big deal since it renders fine, just a best practice. I also changed the css for your header img to have a z-index which places the image on top of the h1 tag and your h1 tag to have a z-index of -100 to always fall to the back.
Hope this helps.
.header img {
float: left;
background: #555;
z-index: 100; /* added */
width: 100px; /* added */
}
.header h1 {
z-index: -1; /* added */
font-family: "Lucida Sans Typewriter",Georgia,Arial;
position: relative;
top: 18px;
left: 10px;
padding-left: 40%;
background-color:#D3D3D3;
}
.nav{
width: 95%;
margin: auto;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
}
.nav li {
font-family: "Lucida Sans Typewriter",Georgia,Arial;
font-size: 16px;
display: inline;
height: 40px;
width: 19.925%;
float: left;
}
.nav li a {
display: block;
color: white;
text-decoration: none;
}
.nav li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.nav li:last-child{
border-right: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>The Clay Oven Pizzeria</title>
</head>
<body>
<header>
<div class="header">
<img src="https://images.template.net/wp-content/uploads/2014/10/28083349/Pick-a-Pizza-Logo-of-your-Own.jpg"
alt="logo"/>
<h1> The Clay Oven Pizzeria</h1>
</div>
<br><br>
<div class="nav">
<ul>
<li><a class="active" href="#index"> Home </li>
<li><a href="#menu">Menu</li>
<li><a href="#about">About</li>
<li><a href="#about">Contact Us</li>
<li><a href="#signup">Sign Up</li>
</ul>
</div>
</header>
</body>
</html>
.header img {
float: left;
background: #555;
}
.header h1 {
font-family: "Lucida Sans Typewriter",Georgia,Arial;
position: relative;
top: 18px;
left: 10px;
padding-left: 40%;
}
.nav{
width: 95%;
margin: auto;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
}
.nav li {
font-family: "Lucida Sans Typewriter",Georgia,Arial;
font-size: 16px;
display: inline;
height: 40px;
width: 19.925%;
float: left;
}
.nav li a {
display: block;
color: white;
text-decoration: none;
}
.nav li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.nav li:last-child{
border-right: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>The Clay Oven Pizzeria</title>
</head>
<header style=" background-color:#D3D3D3;">
<div class="header" >
<img src="images/pizzalogo.jpg" alt="logo"/>
<h1> The Clay Oven Pizzeria</h1>
</div>
<br><br>
<div class="nav">
<ul>
<li><a class="active" href="#index"> Home </li>
<li><a href="#menu">Menu</li>
<li><a href="#about">About</li>
<li><a href="#about">Contact Us</li>
<li><a href="#signup">Sign Up</li>
</ul>
</div>
</header>
<body>
</body>
</html>
Is this what you are expecting ?
you are seeing gap between header and navbar -- this is beacause the h1 inside the header had default margin, remove that, give padding instead. Also remover brs after header.
Change your .header h1 css to
.header h1 {
font-family: "Lucida Sans Typewriter",Georgia,Arial;
padding: 20px 0 20px 40%;
background-color:#D3D3D3;
margin: 0;
}
What do you mean by stop the colour from going over the image ?
.header img {
float: left;
background: #555;
}
.header h1 {
font-family: "Lucida Sans Typewriter",Georgia,Arial;
padding: 20px 0 20px 40%;
background-color:#D3D3D3;
margin: 0;
}
.headerContainer {
background-color:#D3D3D3;
padding-bottom: 10px;
}
.nav{
width: 95%;
margin: auto;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
}
.nav li {
font-family: "Lucida Sans Typewriter",Georgia,Arial;
font-size: 16px;
display: inline;
height: 40px;
width: 19.925%;
float: left;
}
.nav li a {
display: block;
color: white;
text-decoration: none;
}
.nav li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.nav li:last-child{
border-right: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>The Clay Oven Pizzeria</title>
</head>
<header>
<div class="headerContainer">
<div class="header">
<img src="images/pizzalogo.jpg" alt="logo"/>
<h1> The Clay Oven Pizzeria</h1>
</div>
<div class="nav">
<ul>
<li><a class="active" href="#index"> Home </li>
<li><a href="#menu">Menu</li>
<li><a href="#about">About</li>
<li><a href="#about">Contact Us</li>
<li><a href="#signup">Sign Up</li>
</ul>
</div>
</div>
</header>
<body>
</body>
</html>
My website is working great on most browsers but for some reason Chrome is showing my navigation items outside of the header bar. I'm not sure which part of my CSS is at fault here and why it is being interpreted differently between browsers. Help would be appreciated. You need to look at it with screen size of 1100px or higher to see what I mean - lower than that and it turns into responsive navigation button.
Here's a link to show you: http://imgur.com/m5sVBww
body {
margin: 0;
line-height: 1.428;
background-color:#956396;
}
.wrap {
width: 90%;
max-width: 71.5em;
margin: 0 auto;
padding: 0.625em 0.625em;
}
#header {
background: #442869;
padding-top: 1em;
padding-bottom: 1em;
min-height: 6em;
}
#mobile-navigation-btn {
display: none;
float: right;
}
#navigation {
display: block;
float: right;
}
#navigation ul {
list-style: none;
}
#navigation li {
display: inline-block;
float: left;
padding-right: 2em;
padding-top: 1em;
padding-bottom: 1em;
}
#navigation li:last-child {
padding-right: 0em;
}
#navigation li a {
color: #ffffff;
text-decoration: none;
}
.show-menu {
text-decoration: none;
color: #ffffff;
background: #956396;
text-align: center;
padding: 20px 10px;
border: 1px black solid;
border-radius: 10px;
}
.show-menu:hover {
background: #9b729b;
}
#extra {
background: #ffffff;
padding-top: 1em;
padding-bottom: 1em;
min-height: 2em;
color: white;
}
#extra2 {
background: #956396;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #navigation{
display: block;
}
#hamburger {
display: inline-block;
position: relative;
top: 5px;
}
.icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
margin-bottom: 4px;
background-color: white;
}
#media only screen and (max-width : 920px) {
#mobile-navigation-btn {
display: block;
position: relative;
top: 20px;
}
#navigation {
display: none;
width: 100%;
margin: 0;
padding: 0;
background-color:#956396;
margin-top: 28px;
padding-left: 35px;
padding-right: 35px;
}
/*Create vertical spacing*/
#navigation li {
margin-bottom: 1px;
}
/*Make dropdown links vertical*/
#navigation ul li {
display: block;
float: none;
margin:0;
padding:0;
}
/*Make all menu links full width*/
#navigation ul li, li a {
width: 100%;
}
#extra {
clear: both;
}
}
<head>
<meta charset="utf-8">
<script>
// Picture element HTML5 shiv
document.createElement( "picture" );
</script>
<script src="picturefill.min.js" async></script>
<title></title>
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<div class="wrap">
<picture>
<source srcset="seiri-logo-regular.png" media="(min-width: 1100px)">
<img srcset="seiri-logo-small.png" alt="…">
</picture>
<div id="mobile-navigation-btn">
<label for="show-menu" class="show-menu">
<div id="hamburger">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div> Menu
</label>
</div>
<input type="checkbox" id="show-menu" role="button">
<div id="navigation">
<ul>
<li>Home</li>
<li>Customer Research</li>
<li>Business Improvement</li>
<li>Contact Us</li>
<li>Blog</li>
</ul>
</div>
</div>
</div>
<div id="content">
<div>
</body>
</html>
I'm trying to make my header banner stretch / fit to the website's dimensions, however, I am unsure how to make this happen on every browser.
HTML5:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Play - Learn - Grow</title>
<link rel="stylesheet" href="main.css">
</head>
<body class="body">
<span class="text_h">
Welcome to KUBE Toy Library!
</span>
<span class="banner_h">
<img src="Images\Top_Banner.jpg" alt="Banner" height="150" width ="1240"/>
</span>
<nav>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Become a Member</li>
<li>Borrow Toys</li>
<li>Our Policies</li>
<li>Site Map</li>
</ul>
</nav>
<span class="banner_l">
<img src="Images\Left_Banner.jpg" alt="Banner" />
</span>
<span class="banner_r">
<img src="Images\Left_Banner.jpg" alt="Banner" />
</span>
<h2 class="headers">Welcome to the Home Page!</h2>
<div class="container">
Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance
their cognitive, social, emotional and physical development in the important first six years of their lives.
<br><br><span class="Links">Be sure to check out our Wikispace site with more information here!</span>
</div>
<div id="content"></div>
<div id="footer">
Copyright © 2013
</div>
</body>
</html>
CSS:
/* Entire Document CSS */
html{
height: 100%;
}
/* Header CSS */
.headers{
color: #FFD89A;
text-align: center;
padding: 10px;
}
/* Body CSS */
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
}
.container{
margin: 0 auto 0 auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
height: 50%;
}
/* Navigation CSS */
.nav {
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0;
padding: 0;
min-width: 1000px;
width: 100%;
}
.nav li {
list-style-type: none;
width: 14.28%;
float: left;
}
.nav a {
display: inline-block;
padding: 10px 0;
width: 100%;
text-align: center;
}
/* Banner / Picture CSS / Text in Images */
.banner_l{
float: left;
}
.banner_r{
float: right;
}
.banner_h{
positon: relative;
width: 100%;
}
.text_h{
position: absolute;
color: white;
text-align: center;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link{
color: #FFFFFF;
text-decoration: none;
}
a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover{
background-color: #028482;
color: #FFFFFF;
text-decoration: underline;
}
a:active{
background-color: #FCDC3B;
color: #AA00FF;
text-decoration: overline;
}
.Links A:hover{
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
If your wondering why this is being created, this is for a school assessment task, and all content is fictious.
Try:
* {margin:0; padding: 0;}
.banner_h {display: block; width: 100%;}
.banner_h img {width:100%}
Check the result out in a fiddle.