Why doesn't HTML5 read my css?

Why doesn't HTML5 read my css? - 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 .

Related

Image not taking full width of page

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>

Nav bar not full width on screen?

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>

How do I correctly make my paragraph and list inline?

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>

How can I position my header in the middle of my nav?

How can I set up the positioning of my nav and header to look like this?
I have been trying search around on google and stack overflow, but couldn't find anything.
Here is my code, thanks.
body
{
background-image: url('bground.png');
text-align: center;
font-family: arial;
}
#wrap { margin: 0 auto; width: 700px; }
#header{
}
ul, li, a{
display: inline;
list-style: none;
font-family: arial;
color: #000000;
text-decoration: none;
font-size: 25px;
}
li, a:hover{
display: inline;
list-style: none;
font-family: arial;
font-size: 25px;
color: #ffdc99;
}
#content{
background: #ffffff;
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;
vertical-align: bottom;
}
/* Edits */
#header,
#content{ clear: both; }
#header,
#header h1,
#header #nav { float: left; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gullible</title>
<link rel="stylesheet" href="style.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div id="wrap">
<div id="logo">
<h1>Gullible</h1>
<ul id="nav">
<li>Home</li>
<li>Shop</li>
<li>Visit</li>
<li>Contact</li>
</ul>
</div>
<div id="content">
<h1></h1>
</div>
</div>
<footer>
<h2>Gullible</h2>
<ul>
<li>Home</li>
<li>Shop</li>
<li>Visit</li>
<li>Contact</li>
</ul>
</footer>
</body>
</html>

Try Flexbox and justify-content: space-around;
Flex items are evenly distributed so that the space between two adjacent items is the same. The empty space before the first and after the last items equals half of the space between two adjacent items.
ul {
display: flex;
list-style-type: none;
justify-content: space-around;
align-items: center;
border-bottom: 2px solid black;
padding: 0;
}
.logo {
font-size: 30px;
font-weight: bold;
padding: 10px 0;
}
a {
text-decoration: none;
color: black;
}
<ul>
<li>LINK</li>
<li>LINK</li>
<li class="logo">LOGO</li>
<li>LINK</li>
<li>LINK</li>
</ul>

Just place your <h1> inside of a new <li> in the center of the existing ones.
<ul id="nav">
<li>Home</li>
<li>Shop</li>
<li><h1>Gullible</h1></li>
<li>Visit</li>
<li>Contact</li>
</ul>

Here you will find an example of how you can achieve that https://jsfiddle.net/5czgjkyj/
<!DOCTYPE html>
<body>
<div id="wrap">
<div id="logo">
<ul id="nav">
<li>Home</li>
<li>Shop</li>
<li><h1>Gullible</h1></li>
<li>Visit</li>
<li>Contact</li>
</ul>
</div>
<div id="content">
<h1></h1>
</div>
</div>
<footer>
<ul>
<li>Home</li>
<li>Shop</li>
<li><h2>Gullible</h2></li>
<li>Visit</li>
<li>Contact</li>
</ul>
</footer>
</body>
css
ul {
text-align: center;
}
ul li {
display: inline-block;
}

How do I center navbar text?

This is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<title>Main Page</title>
<body>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav nav-pills-justified">
<li><a href "#">about</a></li>
<li><a href "#">blog</a></li>
<li><a href "#">portfolio</a></li>
<li><a href "#">contact</a></li>
</ul>
</div>
</div>
</div>
<script src="js/bootstrap.js">
</script>
</body>
</html>
I want the text in the navbar to be centered-fixed-top.

Here i've posted simple navigation bar with centered nav text. you can use this...
HTML
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav-pills-justified">
<li>about</li>
<li>blog</li>
<li>portfolio</li>
<li>contact</li>
</ul>
</div>
</div>
</div>
CSS
.nav-pills-justified
{
text-align: center;
width: 100%;
min-width:980px;
background: #EDEDED;
color: #000000;
height: 50px;
list-style-type: none;
}
.nav-pills-justified li
{
display: inline-block;
}
.nav-pills-justified li a
{
text-decoration: none;
padding: 15px 25px;
display: inline-block;
}
.nav-pills-justified li a:hover
{
background: red;
}
DEMO

.nav-pills-justified {
height:50px;
list-style-type:none;
}
.nav-pills-justified li {
display: inline-block;
margin-bottom:1000px;
margin-left:250px;
width:1px;
font-size: 20px;
}
.nav-pills-justified li a {
display: inline-block;
}

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

Why doesn't HTML5 read my css? - html

Related

Image not taking full width of page

Nav bar not full width on screen?

How do I correctly make my paragraph and list inline?

How can I position my header in the middle of my nav?

How do I center navbar text?

Categories

Resources