Here is the HTML. It looks correct in full screen. When resizing the browser, specifically making it smaller, the nav bar elements overlap each other. I can't figure out how to fix it. I've also included the CSS. I'm guessing it has to do with the positioning? I tried adding relative position to the nav element, but it didn't fix the problem. Any input is appreciated. Thank you.
#mainNav {
margin-left: 20px;
margin-top: 40px;
}
.dropButton {
background-color: #F4D35E;
color: #083D77;
font-weight: bold;
font-family: Futura, sans-serif;
text-decoration: none;
padding: 16px;
font-size: 28px;
border: none;
cursor: pointer;
}
.dropButton a {
text-decoration: none;
}
.dropDown a:hover {
color: #ED2E07;
}
.dropDown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #F4D35E;
color: #083D77;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
margin-top: 15px;
}
.dropdown-content a {
padding: 12px 16px;
text-align: center;
text-decoration: none;
display: block;
color: #083D77;
}
.featRecipe {
display: flex;
flex-wrap: nowrap;
margin-left: 75px;
}
.drink1,
.drink2 {
margin-right: 110px;
}
.featRecipe li {
max-width: 300px;
}
.drinkOfTheDay {
display: flex;
flex-wrap: nowrap;
margin-left: 75px;
}
.imgOTD,
.image,
.ingr {
margin-right: 75px;
}
#libNav li {
display: inline;
padding-right: 10px;
}
.library {
margin-left: 20px;
margin-top: 40px;
}
.drink {
display: flex;
flex-wrap: nowrap;
}
.top {
text-align: center;
margin-bottom: 40px;
}
html {
background: #EBEBD3;
}
#siteTitle {
font-family: "Brush Script MT", sans-serif;
text-align: center;
font-weight: bold;
font-size: 70px;
color: #ED2E07;
margin-bottom: 0;
margin-top: 20px;
}
#pageTitle {
margin-top: 40px;
margin-bottom: 50px;
text-align: center;
font-size: 40px;
font-family: Andale Mono, monospace;
color: #ED2E07;
}
.body {
color: #083D77;
text-align: center;
}
main {
color: #083D77;
font-family: Andale Mono, monospace;
}
main h2,h3,h4 {
color: #F95738;
}
.featRecipe h3 {
text-align: center;
color: #083D77;
font-family: Andale Mono, monospace;
}
.dir li {
max-width: 500px;
}
#libNav a {
font-size: 20px;
color: #083D77;
}
.library h3 {
font-size: 24px;
font-weight: bold;
}
.dropdown-content a:hover {
background-color: #EBEBD3;
}
.dropDown:hover .dropdown-content {
display: block;
}
.dropDown:hover .dropButton {
background-color: #EE964B;
}
img {
border: solid 5px #F95738;
}
#libNav a:visited {
color: #083D77;
}
.top a, a:visited {
color: #083D77;
font-size: 16px;
}
.dropButton a:visited {
color: #083D77;
}
.dropdown-content a:hover {
color: #ED2E07;
}
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta name="author" content="Roman Kudryashov" />
<meta name="description" content="Drinkmastery.com provides a library of cocktails for drink enthusiasts, connoisseurs, and restaurant professionals." />
<meta name="keywords" content="coktails, drinks, bar, bartending, mixology, vodka, rum, gin, tequila, whiskey, mixed drinks, recipes, liquor, liquer" />
<title>Drink Mastery</title>
<link rel="stylesheet" href="../styles/layout.css">
<link rel="stylesheet" href="../styles/format.css">
<link rel="stylesheet" href="../styles/effects.css">
<script>
function con() {
var ans = window.confirm("Are you 21+ years old?\n\nPress \"OK\" if Yes, \"Cancel\" if NO");
if (ans == false) {
window.location = "http://www.google.com";
}
}
window.setTimeout("con()", 2000);
</script>
</head>
<body>
<h1 id="siteTitle">Drink Mastery</h1>
<nav id="mainNav">
<div class="dropDown">
Home
</div>
<div class="dropDown">
Featured Cocktails
</div>
<div class="dropDown">
Seasonal Cocktails
<div class="dropdown-content">
Christmas Drinks
Spring Favorites
Summer Drinks
Fall Specials
</div>
</div>
<div class="dropDown">
Drink Library
<div class="dropdown-content">
Vodka
Rum
Gin
Tequila
Whiskey
Miscellaneous
</div>
</div>
<div class="dropDown">
Resources
<div class="dropdown-content">
Bartending Tips & Tricks
Educational Articles
</div>
</div>
<div class="dropDown">
About Us
</div>
</nav>
<h2 id="pageTitle">Welcome to Drink Mastery!</h2>
<p class="body">We strive to provide you with a complete library of various cocktail recipes! Happy mixing!</p>
<main>
<h3 id="dotd" style="font-size: 24px; font-weight: bold; color: #EE964B">Drink of the Day</h3>
<div class="drinkOfTheDay">
<img src="../images/mojito.jpg" alt="Mojito" height="300" class="imgOTD">
<div class="ingr">
<h4>Ingredients</h4>
<ul>
<li>10 fresh mint leaves</li>
<li>1/2 lime, cut into 4 wedges</li>
<li>2 ablespoons of white sugar</li>
<li>1.5 oz white rum</li>
<li>1/2 cup club soda</li>
</ul>
</div>
<div>
<h4>Directions</h4>
<ol class="dir">
<li>Place mint leaves and 1 lime wedge into a sturdy glass. Use a muddler to crush the mint and lime to release the mint oils and lime juice.</li>
<li>Add 2 more lime wedges and the sugar, and muddle again to release the lime juice.</li>
<li>Fill the glass almost to the top with ice.</li>
<li>Pour the rum over the ice, and fill the glass with carbonated water.</li>
<li>Stir, taste, and add more sugar if desired. Garnish with the remaining lime wedge.</li>
</ol>
</div>
</div>
</main>
<footer>
<p>© Created by Roman Kudryashov</p>
</footer>
</body>
</html>
Change your CSS for dropDown to
.dropDown {
position: relative;
display: inline-flex;
}
Then add some padding or margin to that so they're not touching.
Related
Here is my code:
https://codepen.io/malyikaj/pen/QWKNVzN
#import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
/* * { border: 1px solid black; } */
html {}
* {
box-sizing: border-box;
}
.slutty-title {
text-align: font-size: 40px;
font-family: 'Dancing Script', cursive;
color: #d98695;
font-size: 40px;
font-weight: bold;
padding-left: 120px;
}
.brownie-title {
font-size: 30px;
font-weight: bold;
color: #76341e;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 440px;
font-family: arial;
margin-left: 50px;
}
.italic {
font-style: italic;
font-weight: bolder;
}
.bold {
font-weight: bold;
color: #76341e;
letter-spacing: 1.5px;
}
p {
line-height: 1.4;
padding: 0px 20px;
}
.price {
font-size: 28px;
text-align: center;
color: #d98695;
}
.card button {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #d98695;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
.card button:hover {
opacity: 0.7;
}
body {
font-family: 'Montserrat', sans-serif;
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
nav {
background: #d98695;
height: 80px;
width: 100vw;
}
label.logo {
color: white;
font-size: 65px;
line-height: 80px;
padding: 0 100px;
font-weight: bold;
font-family: 'Dancing Script', cursive;
letter-spacing: 3px;
}
label.logo-2 {
margin: -100px;
line-height: 80px;
color: white;
font-size: 25px;
padding: 0px;
font-family: 'Dancing Script', cursive;
letter-spacing: 1px;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 40%;
}
.card:hover {
box-shadow: 0 16px 24px 0 rgba(0, 0, 0, 0.2);
}
.container {
padding: 2px 16px;
}
nav ul {
float: right;
margin-right: 20px;
}
nav ul li {
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a {
color: white;
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
text-decoration: none;
}
a:hover {
transition: .3s;
text-transform: none;
background: #df99a6;
}
.checkbtn {
font-size: 30px;
color: #df99a6;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check {
display: none;
}
#page-container {
position: relative;
min-height: 100vh;
}
footer {
box-sizing: border-box;
place-items: center;
font-family: 'Poppins', sans-serif;
text-align: right;
background-color: #d98695;
color: white;
padding: 0px;
position: absolute;
bottom: 0;
height: 60px;
width: 100vw;
/* position: fixed;
z-index: 1; */
}
#media (max-width: 952px) {
label.logo {
font-size: 30px;
padding-left: 50px;
}
nav ul li a {
font-size: 16px;
}
}
#media (max-width: 858px) {
.checkbtn {
display: block;
}
ul {
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li {
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a {
font-size: 20px;
}
a:hover,
a.active {
background: none;
color: #e18e96;
}
#check:checked~ul {
left: 0;
}
}
section {
background: url(bg1.jpg) no-repeat;
background-size: cover;
height: calc(100vh - 80px);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Sweet T's Vegan Bakery</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Montserrat:wght#100;400&family=Nerko+One&display=swap" rel="stylesheet">
</head>
<body>
<div>
<header>
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<label class="logo">Sweet T's </label>
<label class="logo-2">Vegan Bakery</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Order</li>
<li>About</li>
<li>FAQ's</li>
<li>Contact </li>
</ul>
</nav>
</header>
<main>
<h2></h2>
<div class="card">
<img src="http://placeimg.com/440/280/any">
<alt="Denim Jeans" style="width:100%">
<div class=fonts>
<span class="slutty-title">Slutty</span>
<span class="brownie-title">Brownie</span>
<p>One layer of chocolate chip cookie, Oreo cookie center, topped with a dense layer of brownie.
<br>
<br> You may not be its <span class="italic">first</span>, but this is the first ever product by Sweet T’s. Heart shaped because it's made with love.
<br>
<br>
<span class="bold">Gluten free. Nut free. Vegan.</span>
<p class="price">$5.00</p>
</p>
<p><button>Add to Cart</button></p>
</div>
<!--
background-color: #434a52;
Slutty Brownie
Bite into a base layer of chocolate chip cookie, middle layer of Oreo Cookie, and decadent a top layer of brownie. Gluten free. Nut Free. Vegan.
You may not be its first…but this is THE first ever product from Sweet T’s. Heart shaped, because it was made with love!
Slutty Blondie
Vegan white Chocolate Blondie with vanilla Oreo style in the middle and cookie on the bottom. Blondes have more fun.Decadent.
Slutty Pumpkin Cheesecake
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Caramel Apple Pie Cookie
Sugar cookie dough baked with apple pie filling. Topped with sugar cookie lattice pie top. These are the newest homemade sweets that makes an utterly divine dessert. A great desert when you’re craving apple pie—but not the ENTIRE apple pie.
Pumpkin Cheesecake Muffin
Came for the fall and stayed a favorite. *Seasonal* #NomNom
S’Mores Cookies
Chocolate chip cookie with melted vegan marshmallow in the middle. Outrageously good.
Chocolate Chip Cookies
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Birthday? Anniversary? Work Event? Customizable orders available, just contact us.
Find us:
Uber Eats
GrubHub
Bougie Brews: 52 Main St, Yonkers, NY 10701
VeganDale Food Fest
Baked a cake for Wikipedia
Cupcake cutie boutique: 8 S 6th Ave, Mt Vernon, NY 10550 (Enjoy two dollar Tuesdays)
Vegan Grille 1201 1201 Castle Hill Ave, The Bronx, NY 10462
Pizza Gusta Super Foodtown of Throggs Neck : 2945-65 Bruckner Blvd, The Bronx, NY 10465
Plantega
Stay sweet my friends.
Instagram : sweet_teees
Phone: 914-297-9439
Email Us: sweettvegan#gmail.com
Sweet simple vegan included my sweets in their 2020 holiday gift guide.
made with all natural and wholesome ingredients.
</main>
Email Code
Email Us
Email sign up
<input type="text" placeholder="Enter email">
<input type="submit" value="Signup">
-->
<div id="page-container">
<div id="content-wrap">
<!-- all other page content -->
</div>
<footer id="footer">
<p class=c opyright>©2021 Sweet T's Vegan Bakery</p>
</footer>
</div>
</body>
</html>
My footer is also not expanding to the full length of the viewport. And my product card is going all the way to the bottom of the page. Any ideas?
The footer tag was inside the #card div and the #card div had a margin on the left side. This is why it was not using the entire screen width.
You would need to move it to inside the <body> tag and just after the #card div. But after doing it the footer would go on a crazy position because it had a position: absolute, just remove the position property and it will work. I'll just put in the snippet.
And your card heigh problem was that you were using height 100vh in the #page-container this was making the div expand beyond necessary. Changing it to height: 100% would work. And I also would suggest setting margin and padding in the bottom of the #page-container.
Like this:
#import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
/* * { border: 1px solid black; } */
html {
}
* {
box-sizing: border-box;
}
.slutty-title {
text-align: font-size: 40px;
font-family: 'Dancing Script', cursive;
color: #d98695;
font-size: 40px;
font-weight: bold;
padding-left: 120px;
}
.brownie-title {
font-size: 30px;
font-weight: bold;
color: #76341e;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 440px;
font-family: arial;
margin-left: 50px;
}
.italic {
font-style: italic;
font-weight: bolder;
}
.bold {
font-weight: bold;
color: #76341e;
letter-spacing: 1.5px;
}
p {
line-height: 1.4;
padding: 0px 20px;
}
.price {
font-size: 28px;
text-align: center;
color: #d98695;
}
.card button {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #d98695;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
.card button:hover {
opacity: 0.7;
}
body{
font-family: 'Montserrat', sans-serif;
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
nav{
background: #d98695;
height: 80px;
width: 100vw;
}
label.logo {
color: white;
font-size: 65px;
line-height: 80px;
padding: 0 100px;
font-weight: bold;
font-family: 'Dancing Script', cursive;
letter-spacing: 3px;
}
label.logo-2 {
margin: -100px;
line-height: 80px;
color: white;
font-size: 25px;
padding: 0px;
font-family: 'Dancing Script', cursive;
letter-spacing: 1px;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 40%;
}
.card:hover {
box-shadow: 0 16px 24px 0 rgba(0,0,0,0.2);
}
.container {
padding: 2px 16px;
}
nav ul{
float: right;
margin-right: 20px;
}
nav ul li{
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a{
color: white;
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
text-decoration: none;
}
a:hover{
transition: .3s;
text-transform: none;
background: #df99a6;
}
.checkbtn{
font-size: 30px;
color: #df99a6;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
<!-- changed -->
#page-container {
position: relative;
min-height: 100%;
padding-bottom: 15px;
margin-bottom: 15px;
}
<!-- changed -->
footer {
box-sizing: border-box;
place-items: center;
font-family: 'Poppins', sans-serif;
text-align: right;
background-color: #d98695;
color: white;
padding: 0px;
bottom: 0;
height: 60px;
width: 100vw;
z-index: 1; */
}
#media (max-width: 952px){
label.logo{
font-size: 30px;
padding-left: 50px;
}
nav ul li a{
font-size: 16px;
}
}
#media (max-width: 858px){
.checkbtn{
display: block;
}
ul{
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li{
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a{
font-size: 20px;
}
a:hover,a.active{
background: none;
color: #e18e96;
}
#check:checked ~ ul{
left: 0;
}
}
section{
background: url(bg1.jpg) no-repeat;
background-size: cover;
height: calc(100vh - 80px);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Sweet T's Vegan Bakery</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Montserrat:wght#100;400&family=Nerko+One&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<label class="logo">Sweet T's </label>
<label class="logo-2">Vegan Bakery</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Order</li>
<li>About</li>
<li>FAQ's</li>
<li>Contact </li>
</ul>
</nav>
</header>
<main>
<h2></h2>
<div class="card">
<img src="http://placeimg.com/440/280/any"><alt="Denim Jeans" style="width:100%">
<div class =fonts>
<span class ="slutty-title">Slutty</span>
<span class ="brownie-title">Brownie</span>
<p>One layer of chocolate chip cookie, Oreo cookie center, topped with a dense layer of brownie.
<br>
<br>
You may not be its <span class="italic">first</span>, but this is the first ever product by Sweet T’s. Heart shaped because it's made with love.
<br>
<br>
<span class="bold">Gluten free. Nut free. Vegan.</span>
<p class="price">$5.00</p>
</p>
<p><button>Add to Cart</button></p>
</div>
<div id="page-container">
</div>
<div id="content-wrap">
<!-- all other page content -->
</div>
</div>
<!-- changed location -->
<footer id="footer">
<p class= copyright>©2021 Sweet T's Vegan Bakery</p>
</footer>
</body>
</html>
For more tips how to improve your code I would suggest:
CSS Units and How to debug your front-end
You just forgot to close your <div> tag. Once you fix that, your problem goes away.
<div class="card">
<img src="http://placeimg.com/440/280/any">
<alt="Denim Jeans" style="width:100%">
<div class=fonts>
<span class="slutty-title">Slutty</span>
<span class="brownie-title">Brownie</span>
<p>One layer of chocolate chip cookie, Oreo cookie center, topped with a dense layer of brownie.
<br>
<br> You may not be its <span class="italic">first</span>, but this is the first ever product by Sweet T’s. Heart shaped because it's made with love.
<br>
<br>
<span class="bold">Gluten free. Nut free. Vegan.</span>
<p class="price">$5.00</p>
</p>
<p><button>Add to Cart</button></p>
</div>
</div>
I've added </div> at the end.
When I run my code in the browser, I have this little line of white space at the bottom of the page. I’ve been trying different solutions but can’t seem to find one that works. Below is the home.html page. Maybe someone here can shed some light into the problem.
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="cooper, scooper, dog, pop, pick, up>
<meta name="author" content="primarysnail">
<meta name="viewport" content="width=device-width">
<meta name="description" content="connecting clients in need of dog pick pick up srvice with scoopers who will come to the client and scoop the poop">
<title>CoopersScoopers || Home</title>
<link rel="stylesheet" type="text/css" href="../CSS/style.css">
</head>
<body>
<header> <!-- company name top left; nav bar top right -->
<div class="container">
<div class="branding">
<h1><span>cooper</span>Scoopers</h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Contact Us</li>
<li>Find a Scooper</li>
</ul>
</nav>
</div>
</header>
<section class="showcase"> <!-- showcase section; button to find scooper (./find.html) -->
<div class="container">
<h1>Leave the</h1>
<br>
<h1>Poo to the</h1>
<br>
<h1>Professionals.</h1>
<button type="button">Connect With a Scooper Today</button>
</div>
</section>
<section class="info-bar"> <!-- info bar; shows scooper process in 3 sections -->
<div class="container">
<div class="box">
<img src="../images/poop.jpg">
<h3>Connect With a Local Scooper</h3>
</div>
<div class="box">
<img src="../images/location.jpg">
<h3>Mark Your Poo</h3>
</div>
<div class="box">
<img src="../images/calendar.jpg">
<h3>Schedule Future Scoops</h3>
</div>
</div>
</section>
<section class="testimonials">
<div class="container">
<h1>Come Experience the Joy of a Poop-Free Life.</h1>
</section>
</body>
<footer>
<p>Copyright © primarySnail//</p>
</footer>
</html>
Here is the linked style.css file:
body {
font-family: Tahoma, Verdana, Segoe;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #ffffff;
}
/* global */
.container {
margin: auto;
width: 80%;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
button {
height: 50px;
background-color: #ffff00;
opacity: 0.8;
border: none;
padding-right: 30px;
padding-left: 30px;
float: left;
margin-top: -20px;
float: right;
}
button a {
text-decoration: none;
color: #4b0082;
font-weight: bold;
font-size: 25px;
}
/* header */
header {
padding-top: 30px;
min-height: 70px;
border-bottom: 4px solid #f0e68c;
background-color: #ffffff;
color: #8a2be2;
font-size: 10px;
}
header a {
text-decoration: none;
}
nav a {
color: #8a2be2;
text-decoration: none;
text-transform: uppercase;
font-size: 10px;
}
header span {
font-size: 15px;
}
header li {
float: left;
display: inline;
padding: 0px 10px 0px 10px;
}
.branding {
float: left;
}
.branding h1 {
margin: 0;
padding: 0px 10px 0px 10px;
border: 4px solid #8a2be2;
}
header nav {
float: right;
margin-top: 10px;
}
header .current {
border: 1px solid #999;
background-color: #8a2be2;
border-collapse: collapse;
}
header .current a {
color: #ffffff;
font-weight: bold;
}
/* showcase */
.showcase {
background-color: #8a2be2;
color: #ffffff;
text-align: left;
min-height: 200px;
border-bottom: 4px solid #f0e68c;
}
.showcase h1 {
font-size: 55px;
margin-top: 0;
margin-bottom: 0;
padding: 0px;
display: inline-block;
}
/* info bar*/
.info-bar {
margin-top: 20px;
border-bottom: 4px solid #f0e68c;
}
.info-bar .box {
float: left;
width: 30%;
padding: 10px;
text-align: center;
}
.info-bar .box img {
width: 90px;
height: 90px;
}
/* testimonials */
.testimonials {
background-color: #8a2be2;
color: #ffffff;
}
.testimonials h1 {
text-align: center;
}
/* footer */
footer {
background-color: #f0e68c;
margin-top: 0px;
padding: 5px;
text-align: center;
color: black;
opacity: 0.6;
}
I cannot for the life of me figure out why that little line of white space is in there at the very bottom. screenshot
Yes, I have observed white space showing in the bottom. It is because the elements inside body tag is not occupying the full available body size.
elemets heights are as
body- 722
header- 104
.showcase- 251enter code here
.info-bar- 201
.testimonials- ~71
footer- ~62
the white space in the botom is remaining area of viewport. If you make the browser smaller the white space will go away.
To fix this proble you can use below css to the body.
body {
font-family: Tahoma, Verdana, Segoe;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #ffffff;
/* Add below lines*/
display: flex;
flex-direction: column;
align-items: stretch;
}
Problem: The code in the css stylesheet under .row is suppose to center the navigation menu (nav) so it has the same space from left side as the title. However, it doesn't work.
I tried to use the same css properties on the nav section and that works (that part is commented out). I'm also using the .row class for the features section further down so need to get it to work, but I haven't found any solutions to it. Thanks in advance for any help.
Underneath is my code:
/*
Orange color: #e67e22
*/
/* ---------------------------------------------- */
/* Basic setup */
/* ---------------------------------------------- */
* {
margin: 0%;
padding: 0%;
box-sizing: border-box;
/* border: 1px solid;*/
}
html,
body {
background-color: #fff;
color: #555;
font-family: "Lato", "Arial", "sans-serif";
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
}
}
/* ---------------------------------------------- */
/* REUSABLE COMPONENTS */
/* ---------------------------------------------- */
.row { /* SITE DOESNT ADDJUST TO ROW; WORKS WITH NAV */
max-width: 1140px;
margin: 0 auto;
}
nav{
width: 100%;
max-width: 1140px;
margin: 0 auto;
}
section {
padding: 80px 0;
}
.box {
padding: 1%;
}
/* ---------HEADINGS-------- */
h1,
h2,
h3 {
font-weight: 300;
text-transform: uppercase;
}
h1 { /* H1 doesnt adjust according to relative font-size, nor margins */
font-size: 240%;
margin-top: 0;
margin-bottom: 30px;
color: #fff;
word-spacing: 4px;
letter-spacing: 1px;
}
h2 {
font-size: 180%;
word-spacing: 2px;
text-align: center;
margin-bottom: 30px;
letter-spacing: 1px;
}
h2:after {
display: block;
height: 2px;
background-color: #e67e22;
content: " ";
width: 100px;
margin: 0 auto;
margin-top: 30px;
}
h3 {
font-size: 110%;
margin-bottom: 15px;
}
/* ---------PARAGRAPHS-------- */
.long-copy {
line-height: 145%;
width: 70%;
margin-left: 15%;
}
.box p {
font-size: 90%;
line-height: 145%;
}
/* ---------ICONS-------- */
.icon-big {
font-size: 350%;
display: block;
color: #e67e22;
margin-bottom: 10px;
}
/* ---------BUTTONS-------- */
.btn:link,
.btn:visited {
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 200px;
transition: background-color 0.2s;
}
.btn-full:link,
.btn-full:visited {
background-color: #e67e22;
border: 1px solid #e67e22;
color: #fff;
margin-right: 15px;
}
.btn-ghost:link,
.btn-ghost:visited {
border: 1px solid #e67e22;
color: #e67e22;
}
.btn:hover,
.btn:active {
background-color: #cf6d17;
}
.btn-full:hover,
.btn-full:active {
border: 1px solid #cf6d17;
color: #fff;
}
.btn-ghost:hover,
.btn-ghost:active {
border: 1px solid #cf6d17;
color: #fff;
}
/* ---------------------------------------------- */
/* HEADER */
/* ---------------------------------------------- */
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.70), rgba(0, 0, 0, 0.70)), url(img/hero.jpg);
background-size: cover;
background-position: center;
height: 100vh;
}
.hero-textbox{
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.logo {
height: 100px;
width: auto;
float: left;
margin-top: 20px;
}
.main-nav {
float: right;
list-style: none;
margin-top: 60px;
}
.main-nav li {
display: inline-block;
margin-left: 40px;
}
.main-nav li a:link,
.main-nav li a:visited {
padding-bottom: 8px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
border-bottom: 2px solid transparent;
transition: border-bottom 0,2;
}
.main-nav li a:hover,
.main-nav li a:active {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
border-bottom: 2px solid #e67e22;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400&display=swap" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.css">
<title>Omnifood</title>
</head>
<body>
<header>
<nav>
<div class="row">
<img src="resources/img/logo-white.png" alt="Omnifood logo"class="logo">
<ul class="main-nav">
<li>Food delivery</li>
<li>How it works</li>
<li>Our cities</li>
<li>Sign up</li>
</ul>
</div>
</nav>
<div class="hero-textbox">
<h1>Goodbye junk food. <br> Hello super healthy meals.</h1>
<a class="btn btn-full" href="#">I’m hungry</a>
<a class="btn btn-ghost" href="#">Show me more</a>
</div>
</header>
<section class="section-features">
<div class="row">
<h2>Get food fast — not fast food</h2>
<p class="long-copy">
Hello, we’re Omnifood, your new premium food delivery service. We know you’re always busy. No time for cooking. So let us take care of that, we’re really good at it, we promise!
</p>
</div>
<div class="row">
<div class="col span-1-of-4 box">
<i class="ion-ios-infinite-outline icon-big"></i>
<h3>Up to 365 days/year</h3>
<p>
Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.
</p>
</div>
<div class="col span-2-of-4 box">
<i class="ion-ios-stopwatch-outline icon-big"></i>
<h3>Ready in 20 minutes</h3>
<p>
You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.
</p>
</div>
<div class="col span-3-of-4 box">
<i class="ion-ios-nutrition-outline icon-big"></i>
<h3>100% organic</h3>
<p>
All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!
</p>
</div>
<div class="col span-4-of-4 box">
<i class="ion-ios-cart-outline icon-big"></i>
<h3>Order anything</h3>
<p>
We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!
</p>
</div>
</div>
</section>
</body>
</html>
The answer is - extra }, closing html,body
/*
Orange color: #e67e22
*/
/* ---------------------------------------------- */
/* Basic setup */
/* ---------------------------------------------- */
* {
margin: 0%;
padding: 0%;
box-sizing: border-box;
/* border: 1px solid;*/
}
html,
body {
background-color: #fff;
color: #555;
font-family: "Lato", "Arial", "sans-serif";
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
}
/* ---------------------------------------------- */
/* REUSABLE COMPONENTS */
/* ---------------------------------------------- */
.row { /* SITE DOESNT ADDJUST TO ROW; WORKS WITH NAV */
max-width: 1140px;
margin: 0 auto;
}
nav{
width: 100%;
max-width: 1140px;
margin: 0 auto;
}
section {
padding: 80px 0;
}
.box {
padding: 1%;
}
/* ---------HEADINGS-------- */
h1,
h2,
h3 {
font-weight: 300;
text-transform: uppercase;
}
h1 { /* H1 doesnt adjust according to relative font-size, nor margins */
font-size: 240%;
margin-top: 0;
margin-bottom: 30px;
color: #fff;
word-spacing: 4px;
letter-spacing: 1px;
}
h2 {
font-size: 180%;
word-spacing: 2px;
text-align: center;
margin-bottom: 30px;
letter-spacing: 1px;
}
h2:after {
display: block;
height: 2px;
background-color: #e67e22;
content: " ";
width: 100px;
margin: 0 auto;
margin-top: 30px;
}
h3 {
font-size: 110%;
margin-bottom: 15px;
}
/* ---------PARAGRAPHS-------- */
.long-copy {
line-height: 145%;
width: 70%;
margin-left: 15%;
}
.box p {
font-size: 90%;
line-height: 145%;
}
/* ---------ICONS-------- */
.icon-big {
font-size: 350%;
display: block;
color: #e67e22;
margin-bottom: 10px;
}
/* ---------BUTTONS-------- */
.btn:link,
.btn:visited {
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 200px;
transition: background-color 0.2s;
}
.btn-full:link,
.btn-full:visited {
background-color: #e67e22;
border: 1px solid #e67e22;
color: #fff;
margin-right: 15px;
}
.btn-ghost:link,
.btn-ghost:visited {
border: 1px solid #e67e22;
color: #e67e22;
}
.btn:hover,
.btn:active {
background-color: #cf6d17;
}
.btn-full:hover,
.btn-full:active {
border: 1px solid #cf6d17;
color: #fff;
}
.btn-ghost:hover,
.btn-ghost:active {
border: 1px solid #cf6d17;
color: #fff;
}
/* ---------------------------------------------- */
/* HEADER */
/* ---------------------------------------------- */
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.70), rgba(0, 0, 0, 0.70)), url(img/hero.jpg);
background-size: cover;
background-position: center;
height: 100vh;
}
.hero-textbox{
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.logo {
height: 100px;
width: auto;
float: left;
margin-top: 20px;
}
.main-nav {
float: right;
list-style: none;
margin-top: 60px;
}
.main-nav li {
display: inline-block;
margin-left: 40px;
}
.main-nav li a:link,
.main-nav li a:visited {
padding-bottom: 8px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
border-bottom: 2px solid transparent;
transition: border-bottom 0,2;
}
.main-nav li a:hover,
.main-nav li a:active {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
border-bottom: 2px solid #e67e22;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400&display=swap" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.css">
<title>Omnifood</title>
</head>
<body>
<header>
<nav>
<div class="row">
<img src="resources/img/logo-white.png" alt="Omnifood logo"class="logo">
<ul class="main-nav">
<li>Food delivery</li>
<li>How it works</li>
<li>Our cities</li>
<li>Sign up</li>
</ul>
</div>
</nav>
<div class="hero-textbox">
<h1>Goodbye junk food. <br> Hello super healthy meals.</h1>
<a class="btn btn-full" href="#">I’m hungry</a>
<a class="btn btn-ghost" href="#">Show me more</a>
</div>
</header>
<section class="section-features">
<div class="row">
<h2>Get food fast — not fast food</h2>
<p class="long-copy">
Hello, we’re Omnifood, your new premium food delivery service. We know you’re always busy. No time for cooking. So let us take care of that, we’re really good at it, we promise!
</p>
</div>
<div class="row">
<div class="col span-1-of-4 box">
<i class="ion-ios-infinite-outline icon-big"></i>
<h3>Up to 365 days/year</h3>
<p>
Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.
</p>
</div>
<div class="col span-2-of-4 box">
<i class="ion-ios-stopwatch-outline icon-big"></i>
<h3>Ready in 20 minutes</h3>
<p>
You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.
</p>
</div>
<div class="col span-3-of-4 box">
<i class="ion-ios-nutrition-outline icon-big"></i>
<h3>100% organic</h3>
<p>
All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!
</p>
</div>
<div class="col span-4-of-4 box">
<i class="ion-ios-cart-outline icon-big"></i>
<h3>Order anything</h3>
<p>
We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!
</p>
</div>
</div>
</section>
</body>
</html>
hi there just change the style of .row like this :
.row {
width: 100%;
position: absolute;
text-align: center;
display: inline-grid;
margin-top: -147px;
right: 70px;
}
So I was wondering how I can change the color, size and font of the ordered list numbers. I am aware of how to make the color different but I am wondering how to make the color different. Here is the code I have so far
/* Color scheme: #6FC2F0 (Blue) #74E2AE(Green) and #ff00ff (Fuchsia or purple) #FC913A (Orange)*/
/* Fonts: Alegreya Sans, Kalam and Actor */
.topnav {
background-color: #6FC2F0;
overflow: hidden;
font-size: 20px;
font: 'Alegreya Sans', sans-serif;
}
.topnav a {
float: left;
color: #ffffff;
text-decoration: none;
padding: 20px;
}
.topnav a:hover {
background-color: #74E2AE;
color: #ffffff;
}
.topnav input[type=text] {
float: right;
padding: 6px;
border: none;
margin-top: 10px;
margin-right: 16px;
font-size: 20px;
border-radius: 25px;
}
.rectitle {
font-size: 50px;
font: 'Actor', cursive;
margin-left: 5px;
margin-top: 15px;
}
.byx {
font-size: 20px;
float: left;
display: block;
color: #8C8C8C;
margin-left: 5px;
}
.byx a {
color: #FC913A;
}
.ingred {
float: left;
font-size: 18px;
color: #000000;
display: block;
margin-left: 5px;
margin-top: 20px;
font: 'Actor', sans-serif;
}
.ingredients {
font-size: 18px;
display: block;
margin-left: 5px;
margin-top: 20px;
}
.serv {
font-size: 20px;
font: 'Alegreya Sans', sans-serif;
margin-left: 5px;
margin-top: -20px;
}
.instructions {
display: inline-block;
font-size: 18px;
}
.ol li {
color: #ff00ff;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Actor|Alegreya+Sans|Kalam" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="recipe.css">
</head>
<body>
<div class="topnav">
Home
Contact Us
About Us
Wheel
<input type="text" placeholder="Search..">
</div>
<div class="rectitle">
Easy 3 Step Honey-Sriracha Salmon
</div>
<div class="byx">
By: Varun J -- Read more
Here
</div>
<div class="ingredients">
<h1>Ingredients:</h1>
</div>
<div class="serv">
Serves 1 person
</div>
<div style="clear:both"></div>
<div class="ingred">
<p>Salmon:</p>
<p>1 Medium sized Salmon</p>
<p>Salt and Pepper (to taste)</p>
<p>Sauce:</p>
<p>1 tablespoon Sriracha</p>
<p>1 tablespoon Honey</p>
<p>1/2 tablespoon Lime Juice</p>
</div>
<div style="clear:both"></div>
<div class="instructions">
<h1>Preperation:</h1>
</div>
<div class="prep">
<ol>
<li class="listi"><span style="color: black">test</span></li>
</ol>
</div>
</body>
</html>
JSFiddle: https://jsfiddle.net/JSSSSS/y3mcp2t8/1/
Please bear with me as I am not exactly the best HTML/CSS coder.
Same technique, using nested spans to keep auto numbering, and allow to style numbers and text:
.preplist {
color: blue;
font-size: 16px;
}
.preplist2 {
color: red;
font-size: 24px;
}
.listobject {
color: green;
font-size: 10px;
}
<div>
<ol>
<span class="preplist"><li><span class="listobject">test</span></li></span>
<span class="preplist2"><li><span class="listobject">test2</span></li></span>
</ol>
</div>
This is what you can do.
In the css file:
ol li {
list-style: none;
}
.number {
color: red;
}
In html:
<ol>
<li><span class="number">1. </span>item</li>
</ol>
As you can see, you'll have to write the numbers. That is, they won't be autogenerated any longer. But there may be more complicated solutions to that problem. See here: How to colour the list-style-type auto-generated numbers?
[Code above also here: https://jsfiddle.net/asifmeh/5dmr8zfL/3/]
I'm very much in need of some help since I have some problems with my navigationbar. One of my buttons is a dropdown, but my dropdown content is stuck inside of the nav and I want it to drop right below it.
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {
myIndex = 1
}
x[myIndex - 1].style.display = "block";
setTimeout(carousel, 4000); // Change image every 2 seconds
}
.topnav {
background-color: #ffffff;
overflow: hidden;
position: fixed;
margin-top: -10%;
margin-left: -1%;
margin-bottom: 10%;
width: 110%;
padding-bottom: -3%;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 10;
}
.topnav a {
float: left;
display: block;
color: #000000;
text-align: center;
padding: 50px 50px;
text-decoration: none;
font-size: 20px;
font-family: Impact, Charcoal, sans-serif;
}
.topnav a:hover {
font-family: Impact, Charcoal, sans-serif;
color: #ff3385;
text-decoration: underline #ff3385;
font-size: 30px;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
#media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
li a,
.dropbtn {
display: list-item;
margin text-align: center;
text-decoration: none;
border: none;
outline: none;
color: white;
background-color: inherit;
position: fixed:
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: white;
}
li.dropdown {
display: inline-block;
float: left;
}
.dropdown-content {
display: none;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 100;
margin-top: 25%;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
float: left;
}
.logo {
margin-top: 10%;
margin-bottom: -0.75%;
margin-left: 10%;
padding-top: 25px;
position: relative;
}
.mySlides {
display: none;
position: absolute;
margin-left: -9.5%;
margin-top: -27.1%;
margin-right: 10%;
}
.h1 {
font-size: 300%;
letter-spacing: -1px;
text-align: center;
padding-top: 1.5%;
font-family: Impact, Charcoal, sans-serif;
}
h2 {
font-family: Impact, Charcoal, sans-serif;
font-size: 300%;
letter-spacing: 0px;
line-height: 150%;
text-align: center;
text-decoration: underline #ff3385;
color: #ff3385;
}
p {
font-size: 150%;
letter-spacing: 0px;
line-height: 150%;
text-align: left;
text-decoration: none;
color: black;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
margin-left: 10%;
margin-right: 10%;
}
.møbler {
padding: 1%;
margin-left: 4%;
margin-bottom: 10%;
float: left;
}
footer {
color: black;
background-color: #f1f1f1;
clear: left;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 15px;
line-height: 200%;
margin-left: 2%;
}
<html>
<head>
<title>Herningmøbelengros.dk</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Mastercss.css" />
<script src="newjavascript.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body bgcolor="#f5f5f0">
<header>
<nav>
<div class="topnav" id="myTopnav">
Hjem
☰
<li class="dropdown">
Møbler
<div class="dropdown-content">
Borde
Stole
Skabe
</div>
</li>
Om os
</div>
</nav>
</header>
<div class="logo">
<img src="LOGO.PNG" alt="Herning Bolig engros møbler" align="center" style="width:30%" />
</div>
<section>
<div class="w3-content w3-section" style="max-width:100px">
<img class="mySlides" src="førsøgsbillede.jpg" style="width:53.3%" />
<img class="mySlides" src="førsøgsbillede 2.jpg" style="width:53.3%" />
<img class="mySlides" src="førsøgsbillede 3.jpg" style="width:53.3%" />
</div>
</section>
<h1 class="h1">Køb stort - betal småt</h1>
<hr>
<footer>
<div style='float:left; width:30%'>
<strong>Kontakt</strong> <br>Telf: +45 21 42 28 99<br> Email:Jydskm#gmail.com
</div>
<div style='float:left; width:30%; margin-left:30px'>
<strong>Lokation</strong> <br>Find os på Industrivej Syd 1B<br> 7400 Herning
</div>
<div style='float:left; width:30%; margin-left:30px'>
<strong>Åbningstider</strong> <br>Ons-fre 10.00-17.00<br> Lør-søn 10.00-16.00
</div>
</footer>
</body>
</html>
You have a <li> elements without a preceding <ul> element. That's the first thing I really notice about your nav menu. You also have a bunch of inline styles, but you also have an external CSS document? It looks like you need to do some research on the basic syntax of HTML and CSS. You link to a W3 Schools stylesheet, so I assume you are familiar with that site. Use Google and search for how to create a proper dropdown menu with HTML and CSS. I guarantee it will be one of the first two or three results. Stack Overflow should really be used for when you've already done a bit of research and can't get the answer for exactly what you're trying to do.