So I have the following html code
header {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.logo {
max-width: 60px;
padding: 5px;
}
.navigation {
align-self: flex-end;
}
header {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: #c5f3f7;
}
.banner {
margin-top: 30px;
}
<!doctype html>
<html>
<head>
<title>HTML Layout</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="logo">
<img src="logo.png">
</div>
<nav class="navigation">
<ul>
<li>Home</li>
<li>Products</li>
<li>About</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div class="banner">
<img src="pagebanner.png" alt="page banner">
</div>
</body>
</html>
However the banner image does not take up the full width of the page. Instead, it is very small. I have tried doing width = 100% but this does not fix it. What can I do to make the banner image full width?
I just added width: 100%; at the img, everything is fine for me.
header {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.logo {
max-width: 60px;
padding: 5px;
}
body > header > div > img {
width: 7rem;
}
.navigation {
align-self: flex-end;
}
header {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: #c5f3f7;
}
body > div > img {
width: 100%;
}
.banner {
margin-top: 30px;
}
<header>
<div class="logo">
<img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png">
</div>
<nav class="navigation">
<ul>
<li>Home</li>
<li>Products</li>
<li>About</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div class="banner">
<img src="https://www.sci-techdaresbury.com/wp-content/uploads/2019/09/back_doitbetter-1200x300.jpg" alt="page banner">
</div>
This is an easy fix. All you need is a little CSS in the img link itself.
<!doctype html>
<html>
<head>
<title>HTML Layout</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="logo">
<img src="logo.png">
</div>
<nav class="navigation">
<ul>
<li>Home</li>
<li>Products</li>
<li>About</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div class="banner">
<img src="pagebanner.png" alt="page banner" style="width:100%;">
</div>
</body>
</html>
And if you want it to fit the entire page and not just left and right, paste this to where the img link is
<img src="pagebanner.png" alt="page banner.png" alt="page banner" style="width:100%;hight:100%;">
Remove the banner style from the css code and you should be good to go
One solution would be to make the image your background-image with the following styles associated. I inserted a dummy-image to reflect how your image would display.
header {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.logo {
max-width: 60px;
padding: 5px;
}
.navigation {
align-self: flex-end;
}
header {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: #c5f3f7;'
height: 20vh;
}
.banner {
background-image: url('https://dummyimage.com/600x400/000/fff&text=pagebanner');
background-size: cover;
background-position: center;
height: 80vh;
}
body {
margin: 0;
}
<!doctype html>
<html>
<head>
<title>HTML Layout</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="logo">
<img src="logo.png">
</div>
<nav class="navigation">
<ul>
<li>Home</li>
<li>Products</li>
<li>About</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div class="banner">
</div>
</body>
</html>
Related
https://codepen.io/zaidzac95/pen/qBKWKep
I want to have navigation links and image in the same line.
This is what HTML of header looks like:
<div class="container">
<div class="header">
<nav class="sub-header">
<ul>
<li> Home </li>
<li> AboutUs </li>
<li> Products </li>
<li> Services </li>
<li> Contact Us </li>
</ul>
</nav>
<img src="ethereum-eth-logo.png" class="logo">
</div>
</div>
You need to add the image like this(inside the nav tags):
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">
<img src="image.jpg" alt="Logo" style="width:40px;">
</a>
...
</nav>
Use display:inline-block on your .sub-header. If your image is still not aligned, it's because of the padding you set. consider removing it or use other units of measure.
.sub-header {
display: inline-block;
/* padding-left: 450px; */
}
li {
display: inline-block;
}
<nav class="sub-header">
<ul>
<li>Home</li>
<li>AboutUs</li>
<li>Products</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</nav>
<img src="https://via.placeholder.com/50x50" class="logo">
you have many typos in your code, and you should fix your HTML structure because it's very important. here is a rework for your code. you can check how things work in this code and then read more about them. good luck
* {
margin: 0;
padding: 0;
overflow-y: hidden;
text-decoration: none;
}
.header {
width: 100vw;
height: 200px;
background: lightslategray;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.logo-container {
background: lightcoral;
width: 20%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.logo {
height: 100px;
}
.nav-container {
background: lightblue;
width: 80%;
height: 100px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.nav-list {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.nav-list :nth-child(n) {
/* nav children */
color: black;
padding: 10px;
}
.nav-list :nth-child(n):hover {
/* nav children */
color: white;
background: lightslategray;
}
<div class="container">
<div class="header">
<div class="logo-container">
<img class="logo" src="ethereum-eth-logo.png">
</div>
<nav class="nav-container">
<ul class="nav-list">
<li><a href="">Home</a</li>
<li><a href="">AboutUs</a</li>
<li>Products</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</nav>
First clean-up your HTML!
HTML :
<nav class="sub-header">
<img src="../avatar_114.jpg" alt="ACME logo" class="logo">
<ul>
<li>Home</li>
<li>AboutUs</li>
<li>Products</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</nav>
If You're not sure about the syntax, check it on https://validator.w3.org/nu/#textarea
Hey I want to make a navbar with flexbox.
How to make all 3 li's spread across entire ul with even space between li's? Here is my code and its not working :( I tried justify content: space-around and it doesnt work. The li's are still close to each other
/** global element styling **/
#import 'https://fonts.googleapis.com/css?family=Lato:400,700';
body {
background-color: #eee;
font-family: 'Lato', sans-serif;
}
.logo {
flex-basis:40%;
border: 1px solid red;
}
.logo img {
width:100%;
max-width: 300px;
}
header {
display: flex;
}
header nav {
border: 1px solid black;
width: 60%;
display: flex;
flex-direction: row;
justify-content: space-around;
}
header nav ul {
}
#nav-bar ul li {
display: inline-flex;
justify-content: space-between;
flex: 1;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Product Landing Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="page-wrapper">
<!--Header-->
<header id="header">
<!-- Logo -->
<div class="logo">
<img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="original trombones logo" />
</div>
<!-- Nav bar -->
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#how-it-works">How It Works</a></li>
<li><a class="nav-link" href="#pricng">Pricing</a></li>
</ul>
</nav>
</header>
</div>
</body>
</html>
I want Feaures, How it works and pricing to all have 33% of ul
the "flex" and justify-content goes in the parent element (ul).
like this:
/** global element styling **/
#import 'https://fonts.googleapis.com/css?family=Lato:400,700';
body {
background-color: #eee;
font-family: 'Lato', sans-serif;
}
.logo {
flex-basis:40%;
border: 1px solid red;
}
.logo img {
width:100%;
max-width: 300px;
}
header {
display: flex;
}
header nav {
border: 1px solid black;
width: 60%;
display: flex;
flex-direction: row;
justify-content: space-around;
}
header nav ul {
display: inline-flex;
justify-content: space-between;
flex: 1;
}
#nav-bar ul li {
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Product Landing Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="page-wrapper">
<!--Header-->
<header id="header">
<!-- Logo -->
<div class="logo">
<img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="original trombones logo" />
</div>
<!-- Nav bar -->
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#how-it-works">How It Works</a></li>
<li><a class="nav-link" href="#pricng">Pricing</a></li>
</ul>
</nav>
</header>
</div>
</body>
</html>
So I'm re-creating a template I've come across and need some help...
I want the nav bar at the top to cover the screen in width, however the way I currently have the code it's putting it inside the container. Any suggestions how I can do this without affecting the rest of the flow?
body {
margin:0;
}
.container {
margin:auto;
width:80%;
}
nav {
background-color:black;
color:white;
font-size:25px;
height:50px;
opacity:0.5;
}
nav ul {
margin-top:0;
}
nav ul li {
display:inline;
}
nav ul li a {
padding:30px;
text-decoration:none;
}
nav p {
margin-top:0;
}
.showcase,header {
background-image:url("space.jpg");
background-size:cover;
height:500px;
}
#media (max-width: 1800px) {
h1 {
text-align:left;
}
nav ul {
display:none;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Space Prospection</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<div class="showcase">
<nav>
Space Prospection
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
<div class="main_content">
<h1>Soyuz TMA-M <span>Spacecraft</span></h1>
<button>Read More</button>
</div>
<div class="secondary_content">
<h1>Featured Projects</h1>
</div>
</div>
</div>
</div>
</body>
</html>
Thanks in advance
.container should be inside <nav> content, or any contents inside website so here's your code:
HTML:
<div class="showcase">
<nav>
<div class="container">
Space Prospection
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="container">
<div class="main_content">
<h1>Soyuz TMA-M <span>Spacecraft</span></h1>
<button>Read More</button>
</div>
<div class="secondary_content">
<h1>Featured Projects</h1>
</div>
</div>
</div>
.container works to save all website content on the same width but not all backgrounds
Well, you just have to put your menu outside of your div.container. If you want a max-width for your headers content, you could have another wrapper inside.
body {
margin: 0;
background-image:url("https://picsum.photos/1600/900");
background-size: cover;
min-height: 100vh;
}
.container {
margin: auto;
max-width: 800px;
}
nav {
background-color: black;
color: #FFF;
font-size: 25px;
opacity: 0.5;
}
nav .container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
}
nav ul {
margin:0;
}
nav ul li {
display: inline-block;
}
nav ul li a {
text-decoration:none;
display: block;
color: #FFF;
}
nav p {
margin-top: 0;
}
.showcase, header {
background-image:url("https://picsum.photos/1600/900");
background-size:cover;
height:500px;
}
#media (max-width: 1800px) {
h1 {
text-align:left;
}
nav ul {
display:none;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Space Prospection</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<nav>
<div class="container">
Space Prospection
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="container">
<main class="main_content">
<h1>Soyuz TMA-M <span>Spacecraft</span></h1>
<button>Read More</button>
</main>
<aside class="secondary_content">
<h1>Featured Projects</h1>
</aside>
</div>
</body>
</html>
No matter what i tried or changed it didnt work. My CSS file is in the same folder as my HTML. Here's the code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Photos'r'us</title>
<div="header">
<img id="banner" src="https://i.imgur.com/iTt5U3E.jpg" alt:"pic">
<ul id="navigation">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</head>
<body>
</body>
</html>
and this is the CSS:
#charset "UTF-8";
#header {
height: 230px;
background-image: url(https://i.imgur.com/iTt5U3E.jpg);
background-repeat: no-repeat;
font-family: 'Ariel', sans-serif;
}
#banner {
float: left;
width: 100px;
height: 400px;
margin: 20px;
}
#navigation {
display: inline;
}
please help.
Put your all the elements into the body tag not in the head and correct this line <div="header"> to <div id="header">.
For more help on html read this: The global structure of an HTML document
#charset "UTF-8";
#header {
height: 230px;
background-image: url(https://i.imgur.com/iTt5U3E.jpg);
background-repeat: no-repeat;
font-family: 'Ariel', sans-serif;
}
#banner {
float: left;
width: 100px;
height: 400px;
margin: 20px;
}
#navigation {
display: inline;
}
<!DOCTYPE html>
<html>
<head>
<title>Photos'r'us</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<img id="banner" src="https://i.imgur.com/iTt5U3E.jpg" alt="pic">
<ul id="navigation">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
You are using wrong attribute syntax
#charset "UTF-8";
#header {
height: 230px;
background-image: url(https://i.imgur.com/iTt5U3E.jpg);
background-repeat: no-repeat;
font-family: 'Ariel', sans-serif;
}
#banner {
float: left;
width: 100px;
height: 80px;
margin: 20px;
}
#navigation {
display: inline;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Photos'r'us</title>
</head>
<body>
<div id="header">
<img id="banner" src="https://i.imgur.com/iTt5U3E.jpg" alt="pic">
<ul id="navigation">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
id was missing here <div id="header">
alt="pic" was set wrongly
I changed width:80px; to better display, And its working .
So I have this html & css code that im trying to get on the same line.
I'm pretty sure they are blockline thats why they are not on the same line.
How do i correctly make them stay on the same line on the website?
Sorry for not using jsFiddle, I really tried.
My first attempt:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title>Product Showcase</title>
</head>
<body>
<p id="Logo">VARGA NET</p>
<ul id="navigation">
<li>SPECIFICATIONS</li>
<li>LOOK AT IT</li>
<li>FEATURES</li>
<li>FREE</li>
<li>TESTIMONIALS</li>
<li>HOME</li>
</ul>
</body>
</html>
CSS
body {
background-image: url(Images/background.png);
background-repeat: no-repeat;
background-attachment: fixed;
}
#Logo{
color: White;
font-size: 20px;
font-weight: bold;
font-family: sans-serif;
padding-left: 60px;
padding-top: 20px;
}
li{
color: white;
float: right;
padding: 8px;
display: inline;
list-style: none;
}
As you can see they are not on the same line so what I did was I tried putting them in a div and this is what I came u with. They are on the same line but I feel like I did it in a bad way.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title>Product Showcase</title>
</head>
<body>
<div inline-block class="headerLogoAndMenu">
<p id="Logo">VARGA NET</p>
<ul id="navigation">
<li>SPECIFICATIONS</li>
<li>BUY NOW</li>
<li>FEATURES</li>
<li>PRICE</li>
<li>TESTIMONIALS</li>
<li>HOME</li>
</ul>
</div>
</body>
</html>
CSS
.headerLogoAndMenu li{
font-family: sans-serif;
transition:0.5s;
color: white;
float: right;
padding-right: 8px;
padding-left: 8px;
padding-top: 16px;
display: inline;
list-style: none;
}
.headerLogoAndMenu #Logo{
font-family: sans-serif;
transition:0.5s;
color: white;
float: right;
display: inline;
list-style: none;
}
A way to do this...
.headerLogoAndMenu {
display: table;
}
.headerLogoAndMenu p {
display: table-cell;
}
.headerLogoAndMenu ul {
display: table-cell;
}
.headerLogoAndMenu ul li {
display: table-cell;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title>Product Showcase</title>
</head>
<body>
<div class="headerLogoAndMenu">
<p id="Logo">VARGA NET</p>
<ul id="navigation">
<li>SPECIFICATIONS</li>
<li>BUY NOW</li>
<li>FEATURES</li>
<li>PRICE</li>
<li>TESTIMONIALS</li>
<li>HOME</li>
</ul>
</div>
</body>
</html>
Another way to do this
.headerLogoAndMenu {
display: flex;
}
.headerLogoAndMenu ul {
display: flex;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title>Product Showcase</title>
</head>
<body>
<div class="headerLogoAndMenu">
<p id="Logo">VARGA NET</p>
<ul id="navigation">
<li>SPECIFICATIONS</li>
<li>BUY NOW</li>
<li>FEATURES</li>
<li>PRICE</li>
<li>TESTIMONIALS</li>
<li>HOME</li>
</ul>
</div>
</body>
</html>
I used flexboxes for the layout of the logo and menu. Vertical alignment has been arranged in the center.
.headerLogoAndMenu {
display: flex;
justify-content: space-between;
align-items: center;
}
#navigation {
display: flex;
justify-content: flex-end;
align-items: center;
flex-wrap: nowrap;
}
.headerLogoAndMenu li {
font-family: sans-serif;
font-size: 10px;
padding-right: 4px;
padding-left: 4px;
list-style: none;
}
#Logo {
font-family: sans-serif;
}
<div class="headerLogoAndMenu">
<p id="Logo">VARGA NET</p>
<ul id="navigation">
<li>SPECIFICATIONS</li>
<li>BUY NOW</li>
<li>FEATURES</li>
<li>PRICE</li>
<li>TESTIMONIALS</li>
<li>HOME</li>
</ul>
</div>