I'm attempting to create a navbar with two dropdown menus and after lots of fiddling with the dropdown menu I've got it sorta working. But it's made the rest of the items out of order.
https://jsfiddle.net/o5pcs1y7/
body {
font-family: Arial;
background-color: #FAFAFA;
}
.container {
width: 960px;
position: relative;
margin-left: auto;
margin-right: auto;
background-color: #FAFAFA;
padding: 10px 10px 10px;
}
.header h1 {
border-bottom: solid 2px #2c3840;
text-transform: uppercase;
color: #2c3840;
}
.header img {
float: right;
position: relative;
width: 90px;
margin-top: -60px;
}
.nav {
background-color: #2c3840;
position: relative;
width: 100%;
float: left;
height: 41px;
margin-top: -22px;
}
.nav a {
font-family: Arial;
float: left;
display: inline-block;
color: #FAFAFA;
text-align: center;
padding: 10px 14px;
text-decoration: none;
font-size: 18px;
}
.nav a:hover {
background-color: #6d4b4f;
}
.projects {
position: relative;
display: inline-block;
}
.projects-content {
display: none;
position: absolute;
background-color: #FAFAFA;
min-width: 160px;
padding: 10px 14px;
z-index: 1;
text-decoration: none;
}
.projects:hover .projects-content {
display: block;
}
.services {
position: relative;
display: inline-block;
}
.services-content {
display: none;
position: absolute;
background-color: #FAFAFA;
min-width: 160px;
padding: 12px 16px;
z-index: 1;
text-decoration: none;
}
.services:hover .services-content {
display: block;
}
<!doctype html>
<title>Werribee Roadworthy Centre</title>
<link rel="shortcut icon" type="image/png" href="favicon.png" />
<body>
<div class="container">
<div class="header">
<h1>Werribee Roadworthy Centre</h1>
<img src="car.png">
</div>
<div class="nav">
Home
<div class="services">
Services
<div class="services-content">
1
2
3
</div>
</div>
<div class="projects">
Projects
<div class="projects-content">
1
2
3
</div>
</div>
Photo Gallery
Contact Us
</div>
<div class="section">
</div>
<div class="aside">
</div>
</div>
</body>
This is the code. The ordering of the navbar is correct in the HTML just not in the finished product. Also don't mind the broken dropdown.
Since the parent .nav could have a child of div or either a, you didn't float the div to left like you float a and that what was making the mess:
you just have to add:
.nav > div {
float: left;
}
body {
font-family: Arial;
background-color: #FAFAFA;
}
.container {
width: 960px;
position: relative;
margin-left: auto;
margin-right: auto;
background-color: #FAFAFA;
padding: 10px 10px 10px;
}
.header h1 {
border-bottom: solid 2px #2c3840;
text-transform: uppercase;
color: #2c3840;
}
.header img {
float: right;
position: relative;
width: 90px;
margin-top: -60px;
}
.nav {
background-color: #2c3840;
position: relative;
width: 100%;
float: left;
height: 41px;
margin-top: -22px;
}
.nav a {
font-family: Arial;
float: left;
display: inline-block;
color: #FAFAFA;
text-align: center;
padding: 10px 14px;
text-decoration: none;
font-size: 18px;
}
.nav > div {
float: left;
}
.nav a:hover {
background-color: #6d4b4f;
}
.projects {
position: relative;
display: inline-block;
}
.projects-content {
display: none;
position: absolute;
background-color: #FAFAFA;
min-width: 160px;
padding: 10px 14px;
z-index: 1;
text-decoration: none;
}
.projects:hover .projects-content {
display: block;
}
.services {
position: relative;
display: inline-block;
}
.services-content {
display: none;
position: absolute;
background-color: #FAFAFA;
min-width: 160px;
padding: 12px 16px;
z-index: 1;
text-decoration: none;
}
.services:hover .services-content {
display: block;
}
<!doctype html>
<title>Werribee Roadworthy Centre</title>
<link rel="shortcut icon" type="image/png" href="favicon.png" />
<body>
<div class="container">
<div class="header">
<h1>Werribee Roadworthy Centre</h1>
<img src="car.png">
</div>
<div class="nav">
Home
<div class="services">
Services
<div class="services-content">
1
2
3
</div>
</div>
<div class="projects">
Projects
<div class="projects-content">
1
2
3
</div>
</div>
Photo Gallery
Contact Us
</div>
<div class="section">
</div>
<div class="aside">
</div>
</div>
</body>
Hope this helps :)
Related
I am pretty new to coding and I am doing this for my online college class. For some reason, my footer is not going to the bottom. Neglect the navigation bar above.
I also need more words to post this so I'm going to keep adding word until it says I am fine. So yeah I keep talking and talking and talking well actually I'm typing and not talking so I'm typing typing typing until this post says I have enough words because this code is pretty big.
Here is my code:
body {
background-color: #e1b382;
color: #e1b382;
font-family: Verdana, Arial, sans-serif;
}
header {
background-color: #2d545e;
background-image: url(lilyheader.jpg);
background-position: right;
background-repeat: no-repeat;
height: 150px;
display: block;
text-align: center;
}
h1 {
padding-top: 50px;
}
nav {
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
width: 100%;
overflow: auto;
}
main nav {
display: inline-block;
float: left;
width: 198px;
float: left;
margin-left: 75px;
border: 1px solid #2d545e;
}
main nav a {
float: left;
text-decoration: none;
margin: -20px;
}
nav a {
text-decoration: none;
text-align: center;
padding: 2%;
padding: 2%;
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
color: #2d545e;
}
nav a:hover {
color: #e1b382;
background-color: #2d545e;
}
.search {
text-decoration: none;
text-align: center;
font-weight: bold;
;
padding-left: calc(2%);
padding-right: calc(18%);
padding-top: 5px;
padding-bottom: 5px;
color: #2d545e;
}
.search:hover {
color: #e1b382;
background-color: #2d545e;
}
footer {
background-color: #2d545e;
font-size: .60em;
text-align: center;
font-style: italic;
padding: 1em;
display: block;
bottom: 0;
}
#wrapper {
width: 80%;
margin-right: auto;
margin-left: auto;
background-color: white;
min-height: 1000px;
min-width: 900px;
max-width: 1200px;
}
main {
display: block;
color: #2d545e;
padding-top: 10px;
}
.floatright {
float: right;
margin-left: 400px;
}
ul {
list-style-type: none;
}
main li {
display: inline-block;
width: 200px;
padding-bottom: 10px;
margin: 10px;
text-align: center;
font-family: Arial, Georgia;
}
.column {
float: left;
width: 50%;
padding-bottom: 3px;
}
.row::after {
content: "";
clear: both;
display: table;
}
h2 {
padding-left: 2em;
}
.borderdiv {
float: left;
width: calc(50% - 2px);
padding-bottom: 3px;
border: 1px solid #e1b382;
}
main div div div img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border: 1px outset #e1b382
}
main div div div img:hover {
border: 1px inset #2d545e
}
main a {
color: #2d545e;
}
section {
display: block;
margin-left: 300px;
}
.bar {
display: inline-block;
margin-top: -29px;
height: 30px;
padding-left: 10px;
padding-right: 300px;
border: 1px solid gray;
}
.pic {
width: 30%;
float: left;
}
.item {
width: 70%;
float: right;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ONSHOP Online Store and Shipping :: Items</title>
<link rel="stylesheet" href="research.css">
<!--Reed Wilson-->
</head>
<body>
<div id="wrapper">
<header>
<h1>ONSHOP</h1>
</header>
<nav>
Home
Items
<a>Ordered</a>
<a>Sale</a>
<a>Saved</a>
<a>Login</a>
<a>Watchlist</a>
<a>Help</a>
<a class="search">Search</a>
</nav>
<main>
<h2 style="margin-left:25px">Items</h2>
<nav>
<ul>
<li><a>Clothes</a></li>
<li><a>Food</a></li>
<li><a>Home</a></li>
<li><a>Toys</a></li>
<li><a>Sports</a></li>
<li><a>Animal Care</a></li>
<li><a>Electronics</a></li>
<li><a>Kitchen</a></li>
<li><a>Office</a></li>
<li><a>Music</a></li>
<li><a>Toiletries</a></li>
<li><a>Filter</a></li>
</ul>
</nav>
<section>
<div>
<p class="bar">Search</p>
</div>
<div class="borderdiv">
<div class="row">
<div class="pic">
<img src="shopping-6.jpg" alt="Home">
</div>
<div class="item">
<h6>Lysol Hand Sanitizer 4 Pack</h6>
</div>
</div>
<div class="row">
<div class="pic">
<img src="shopping-3.jpg" alt="Home">
</div>
<div class="item">
<h6>Clorox Disinfecting Wipes</h6>
</div>
</div>
</div>
</section>
</main>
<footer>
<p>Copyright © 2020 Design of a Major Website<br>
reed#wilson.com</p>
</footer>
</div>
</body>
</html>
What you should do is to provide height to the main class, provide how much height you need.
main{
height:800px; //just an example height.
}
Please find the code:
body {
background-color: #e1b382;
color: #e1b382;
font-family: Verdana, Arial, sans-serif;
}
header {
background-color: #2d545e;
background-image: url(lilyheader.jpg);
background-position: right;
background-repeat: no-repeat;
height: 150px;
display: block;
text-align: center;
}
h1 {
padding-top: 50px;
}
nav {
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
width: 100%;
overflow: auto;
}
main{
height:800px;
}
main nav {
display: inline-block;
float: left;
width: 198px;
float: left;
margin-left: 75px;
border: 1px solid #2d545e;
}
main nav a {
float: left;
text-decoration: none;
margin: -20px;
}
nav a {
text-decoration: none;
text-align: center;
padding: 2%;
padding: 2%;
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
color: #2d545e;
}
nav a:hover {
color: #e1b382;
background-color: #2d545e;
}
.search {
text-decoration: none;
text-align: center;
font-weight: bold;
;
padding-left: calc(2%);
padding-right: calc(18%);
padding-top: 5px;
padding-bottom: 5px;
color: #2d545e;
}
.search:hover {
color: #e1b382;
background-color: #2d545e;
}
footer {
background-color: #2d545e;
font-size: .60em;
text-align: center;
font-style: italic;
padding: 1em;
display: block;
bottom: 0;
}
#wrapper {
width: 80%;
margin-right: auto;
margin-left: auto;
background-color: white;
min-height: 1000px;
min-width: 900px;
max-width: 1200px;
}
main {
display: block;
color: #2d545e;
padding-top: 10px;
}
.floatright {
float: right;
margin-left: 400px;
}
ul {
list-style-type: none;
}
main li {
display: inline-block;
width: 200px;
padding-bottom: 10px;
margin: 10px;
text-align: center;
font-family: Arial, Georgia;
}
.column {
float: left;
width: 50%;
padding-bottom: 3px;
}
.row::after {
content: "";
clear: both;
display: table;
}
h2 {
padding-left: 2em;
}
.borderdiv {
float: left;
width: calc(50% - 2px);
padding-bottom: 3px;
border: 1px solid #e1b382;
}
main div div div img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border: 1px outset #e1b382
}
main div div div img:hover {
border: 1px inset #2d545e
}
main a {
color: #2d545e;
}
section {
display: block;
margin-left: 300px;
}
.bar {
display: inline-block;
margin-top: -29px;
height: 30px;
padding-left: 10px;
padding-right: 300px;
border: 1px solid gray;
}
.pic {
width: 30%;
float: left;
}
.item {
width: 70%;
float: right;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ONSHOP Online Store and Shipping :: Items</title>
<link rel="stylesheet" href="research.css">
<!--Reed Wilson-->
</head>
<body>
<div id="wrapper">
<header>
<h1>ONSHOP</h1>
</header>
<nav>
Home
Items
<a>Ordered</a>
<a>Sale</a>
<a>Saved</a>
<a>Login</a>
<a>Watchlist</a>
<a>Help</a>
<a class="search">Search</a>
</nav>
<main>
<h2 style="margin-left:25px">Items</h2>
<nav>
<ul>
<li><a>Clothes</a></li>
<li><a>Food</a></li>
<li><a>Home</a></li>
<li><a>Toys</a></li>
<li><a>Sports</a></li>
<li><a>Animal Care</a></li>
<li><a>Electronics</a></li>
<li><a>Kitchen</a></li>
<li><a>Office</a></li>
<li><a>Music</a></li>
<li><a>Toiletries</a></li>
<li><a>Filter</a></li>
</ul>
</nav>
<section>
<div>
<p class="bar">Search</p>
</div>
<div class="borderdiv">
<div class="row">
<div class="pic">
<img src="shopping-6.jpg" alt="Home">
</div>
<div class="item">
<h6>Lysol Hand Sanitizer 4 Pack</h6>
</div>
</div>
<div class="row">
<div class="pic">
<img src="shopping-3.jpg" alt="Home">
</div>
<div class="item">
<h6>Clorox Disinfecting Wipes</h6>
</div>
</div>
</div>
</section>
</main>
<footer>
<p>Copyright © 2020 Design of a Major Website<br>
reed#wilson.com</p>
</footer>
</div>
</body>
You are using float:left in for left nav. That's why the height of that container is not being calculated and your footer showing in the middle.
Remove float:left, use display: inline-block for left nav and section with vertical-align:top. Avoid using fixed height in not necessary.
Below is the corrected code snippet.
body {
background-color: #e1b382;
color: #e1b382;
font-family: Verdana, Arial, sans-serif;
}
header {
background-color: #2d545e;
background-image: url(lilyheader.jpg);
background-position: right;
background-repeat: no-repeat;
height: 150px;
display: block;
text-align: center;
}
h1 {
padding-top: 50px;
}
nav {
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
width: 100%;
overflow: auto;
}
main nav {
display: inline-block;
vertical-align:top;
width: 198px;
margin-left: 75px;
border: 1px solid #2d545e;
}
main nav a {
float: left;
text-decoration: none;
margin: -20px;
}
nav a {
text-decoration: none;
text-align: center;
padding: 2%;
padding: 2%;
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
color: #2d545e;
}
nav a:hover {
color: #e1b382;
background-color: #2d545e;
}
.search {
text-decoration: none;
text-align: center;
font-weight: bold;
;
padding-left: calc(2%);
padding-right: calc(18%);
padding-top: 5px;
padding-bottom: 5px;
color: #2d545e;
}
.search:hover {
color: #e1b382;
background-color: #2d545e;
}
footer {
background-color: #2d545e;
font-size: .60em;
text-align: center;
font-style: italic;
padding: 1em;
display: block;
bottom: 0;
}
#wrapper {
width: 80%;
margin-right: auto;
margin-left: auto;
background-color: white;
min-height: 1000px;
min-width: 900px;
max-width: 1200px;
}
main {
display: block;
color: #2d545e;
padding-top: 10px;
}
.floatright {
float: right;
margin-left: 400px;
}
ul {
list-style-type: none;
}
main li {
display: inline-block;
width: 200px;
padding-bottom: 10px;
margin: 10px;
text-align: center;
font-family: Arial, Georgia;
}
.column {
float: left;
width: 50%;
padding-bottom: 3px;
}
.row::after {
content: "";
clear: both;
display: table;
}
h2 {
padding-left: 2em;
}
.borderdiv {
float: left;
width: calc(50% - 2px);
padding-bottom: 3px;
border: 1px solid #e1b382;
}
main div div div img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border: 1px outset #e1b382
}
main div div div img:hover {
border: 1px inset #2d545e
}
main a {
color: #2d545e;
}
section {
display: inline-block;
vertical-align:top;
}
.bar {
display: inline-block;
margin-top: -29px;
height: 30px;
padding-left: 10px;
padding-right: 300px;
border: 1px solid gray;
}
.pic {
width: 30%;
float: left;
}
.item {
width: 70%;
float: right;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ONSHOP Online Store and Shipping :: Items</title>
<link rel="stylesheet" href="research.css">
<!--Reed Wilson-->
</head>
<body>
<div id="wrapper">
<header>
<h1>ONSHOP</h1>
</header>
<nav>
Home
Items
<a>Ordered</a>
<a>Sale</a>
<a>Saved</a>
<a>Login</a>
<a>Watchlist</a>
<a>Help</a>
<a class="search">Search</a>
</nav>
<main>
<h2 style="margin-left:25px">Items</h2>
<nav>
<ul>
<li><a>Clothes</a></li>
<li><a>Food</a></li>
<li><a>Home</a></li>
<li><a>Toys</a></li>
<li><a>Sports</a></li>
<li><a>Animal Care</a></li>
<li><a>Electronics</a></li>
<li><a>Kitchen</a></li>
<li><a>Office</a></li>
<li><a>Music</a></li>
<li><a>Toiletries</a></li>
<li><a>Filter</a></li>
</ul>
</nav>
<section>
<div>
<p class="bar">Search</p>
</div>
<div class="borderdiv">
<div class="row">
<div class="pic">
<img src="shopping-6.jpg" alt="Home">
</div>
<div class="item">
<h6>Lysol Hand Sanitizer 4 Pack</h6>
</div>
</div>
<div class="row">
<div class="pic">
<img src="shopping-3.jpg" alt="Home">
</div>
<div class="item">
<h6>Clorox Disinfecting Wipes</h6>
</div>
</div>
</div>
</section>
</main>
<footer>
<p>Copyright © 2020 Design of a Major Website<br>
reed#wilson.com</p>
</footer>
</div>
</body>
</html>
I have made an edit to your code and it works. the problem was tha you have used float for your elements and you did not make a "clearfix" element for them.
body {
background-color: #e1b382;
color: #e1b382;
font-family: Verdana, Arial, sans-serif;
}
header {
background-color: #2d545e;
background-image: url(lilyheader.jpg);
background-position: right;
background-repeat: no-repeat;
height: 150px;
display: block;
text-align: center;
}
h1 {
padding-top: 50px;
}
nav {
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
width: 100%;
overflow: auto;
}
main nav {
display: inline-block;
width: 198px;
float: left;
margin-left: 75px;
border: 1px solid #2d545e;
}
main nav a {
float: left;
text-decoration: none;
margin: -20px;
}
nav a {
text-decoration: none;
text-align: center;
padding: 2%;
padding: 2%;
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
color: #2d545e;
}
nav a:hover {
color: #e1b382;
background-color: #2d545e;
}
.search {
text-decoration: none;
text-align: center;
font-weight: bold;
padding-left: calc(2%);
padding-right: calc(18%);
padding-top: 5px;
padding-bottom: 5px;
color: #2d545e;
}
.search:hover {
color: #e1b382;
background-color: #2d545e;
}
footer {
background-color: #2d545e;
font-size: .60em;
text-align: center;
font-style: italic;
padding: 1em;
display: block;
bottom: 0;
margin-top: 20px;
}
#wrapper {
width: 80%;
margin-right: auto;
margin-left: auto;
background-color: white;
min-height: 1000px;
min-width: 900px;
max-width: 1200px;
}
main {
display: block;
color: #2d545e;
padding-top: 10px;
}
.floatright {
float: right;
margin-left: 400px;
}
ul {
list-style-type: none;
}
main li {
display: inline-block;
width: 200px;
padding-bottom: 10px;
margin: 10px;
text-align: center;
font-family: Arial, Georgia;
}
.column {
float: left;
width: 50%;
padding-bottom: 3px;
}
.row::after {
content: "";
clear: both;
display: table;
}
h2 {
padding-left: 2em;
}
.borderdiv {
float: left;
width: calc(50% - 2px);
padding-bottom: 3px;
border: 1px solid #e1b382;
}
main div div div img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border: 1px outset #e1b382
}
main div div div img:hover {
border: 1px inset #2d545e
}
main a {
color: #2d545e;
}
section {
display: block;
margin-left: 300px;
}
.bar {
display: inline-block;
margin-top: -29px;
height: 30px;
padding-left: 10px;
padding-right: 300px;
border: 1px solid gray;
}
.pic {
width: 30%;
float: left;
}
.item {
width: 70%;
float: right;
}
.clearfix {
clear: both;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ONSHOP Online Store and Shipping :: Items</title>
<link rel="stylesheet" href="research.css">
<!--Reed Wilson-->
</head>
<body>
<div id="wrapper">
<header>
<h1>ONSHOP</h1>
</header>
<nav>
Home
Items
<a>Ordered</a>
<a>Sale</a>
<a>Saved</a>
<a>Login</a>
<a>Watchlist</a>
<a>Help</a>
<a class="search">Search</a>
</nav>
<main>
<h2 style="margin-left:25px">Items</h2>
<nav>
<ul>
<li><a>Clothes</a></li>
<li><a>Food</a></li>
<li><a>Home</a></li>
<li><a>Toys</a></li>
<li><a>Sports</a></li>
<li><a>Animal Care</a></li>
<li><a>Electronics</a></li>
<li><a>Kitchen</a></li>
<li><a>Office</a></li>
<li><a>Music</a></li>
<li><a>Toiletries</a></li>
<li><a>Filter</a></li>
</ul>
</nav>
<section>
<div>
<p class="bar">Search</p>
</div>
<div class="borderdiv">
<div class="row">
<div class="pic">
<img src="shopping-6.jpg" alt="Home">
</div>
<div class="item">
<h6>Lysol Hand Sanitizer 4 Pack</h6>
</div>
</div>
<div class="row">
<div class="pic">
<img src="shopping-3.jpg" alt="Home">
</div>
<div class="item">
<h6>Clorox Disinfecting Wipes</h6>
</div>
</div>
</div>
</section>
<div class="clearfix"></div>
</main>
<footer>
<p>Copyright © 2020 Design of a Major Website<br>
reed#wilson.com</p>
</footer>
</div>
</body>
</html>
I try to put 2 divs next to eachother but somehow it places them under eachother.
I have looked it up on this forum and copied the css code for it but it still wont work, i think it has something to do with my php code i use in it.
<html>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<nav>
<p><img src="img/handboeklogo.png"></p>
<ul>
<li>Home</li>
<li>Checklist
<ul>
<li>Desktops</li>
<li>Laptops</li>
<li>Monitoren</li>
</ul>
</li>
<li>Handboek
<ul>
<li>Desktops</li>
<li>Laptops</li>
<li>Monitoren</li>
<li>Printers</li>
<li>Mobiele Telefoons</li>
</ul>
</li>
<li>Classificatielijst<ul>
<li>Desktops</li>
<li>Laptops</li>
<li>Monitoren</li>
<li>Printers</li>
<li>Mobiele Telefoons</li>
</ul>
</li>
<form class='logout' method='POST' action=''>
<button type='submit' name='logoutSubmit'>Logout</button>
</form>
</nav>
</header>
<br><br>
<div id='maindiv'><div id='first'>
<form method='POST' action=''>
<input type='hidden' name='uid' value='1'>
<input type='hidden' name='date' value='2019-07-02'>
<textarea name='message'></textarea><br>
<button type='submit' name='commentSubmit'> Comment </button>
</form></div>
<div id='second'>
<form method='POST' action=''>
<input type='hidden' name='uid' value='1'>
<input type='hidden' name='date' value='2019-07-02'>
<textarea name='message'></textarea><br>
<button type='submit' name='Generalcommentsubmit'> Comment </button>
</form></div></div>
</body>
</html>
CSS code:
body {
background-color: #edf0f2;
}
textarea {
display: inline-block;
width: 630px;
height: 120px;
background-color: #fff;
border-color: #5bb112;
margin-top: 10px;
margin-left: 15px;
position: relative;
resize: none;
}
.Changelog {
margin-left: 15px;
width: 800px;
}
.logout {
display: inline-block;
float: right;
position: absolute;
margin-top: 27px;
margin-right: 20px;
margin-left: 680px;
}
.login {
display: inline-block;
float: right;
position: absolute;
margin-top: 27px;
margin-right: 20px;
margin-left: 330px;
}
/*
button {
width: 100px;
height: 30px;
background-color: #5bb112;
border: none;
color: #e2e2e2;
font-family: arial;
font-weight: 400;
cursor: pointer;
margin-bottom: 19px;
margin-left: 15px;
margin-top: 3px;
}
.comment-box {
width: 630px;
padding-top: 5px;
margin-bottom: 4px;
background-color: #fff;
border-radius: 1px;
position: absolute;
border: 1px solid #5bb112;
margin-top: 8px;
align-content: left;
}
.comment-box p {
font-family: arial;
font-size: 14px;
line-height: 16px;
color: #282828;
font-weight: 100;
margin-bottom: 10px;
margin-left: 5px;
}
.edit-form {
position: absolute;
top: 3px;
right: 3px;
}
.edit-form button {
width: 40px;
height: 20px;
color: #282828;
background-color: #fff;
opacity: 0.7;
}
.edit-form button:hover {
opacity: 1;
}
.delete-form {
position: absolute;
top: 3px;
right: 58px;
}
.delete-form button {
width: 40px;
height: 20px;
color: #282828;
background-color: #fff;
opacity: 0.7;
}
.delete-form button:hover {
opacity: 1;
}*/
* {
margin: 0;
padding: 0;
}
header nav {
width: 100%;
height: 80px;
background-color: #343131;
}
header nav p {
font-family: arial;
color: #b3b3b3;
font-size: 24px;
line-height: 55px;
float: left;
padding: 10px 20px;
}
header nav ul {
float: left;
z-index: 2;
}
header nav ul li {
float: left;
list-style: none;
position: relative;
margin-top: 15px;
margin-right: auto;
margin-left: 30px;
}
header nav ul li a {
display: block;
font-family: arial;
color: #b3b3b3;
font-size: 20px;
padding: 21px 14px;
text-decoration: none;
}
header nav ul li ul {
display: none;
position: absolute;
background-color: #343131;
border-radius: 0px 0px 4px 4px;
padding: 8px;
}
header nav ul li:hover ul {
display: block;
}
header nav ul li ul li {
width: 180px;
border-radius: 4px;
}
header nav ul li ul li a {
padding: 9px 14px;
}
header nav ul li ul li a:hover {
background-color: #343131;
}
header nav p img {
width: 210px;
height: 55px;
margin-top: 5px;
margin-bottom: 5px;
}
header nav ul li a:hover {opacity: 1}
header nav ul li a {
background-color: #343131;
border: none;
color: white;
opacity: 0.6;
transition: 0.3s;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
i {
border: solid white;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
margin-left: 10px;
margin-bottom: 3px;
}
/*-------Changelog---------*/
#maindiv {
display: flex;
width: auto;
border: 1px solid black;
overflow: hidden;
}
#first {
width: auto;
float:left;
}
#second {
float: left;
}
I would like to place the divs next to eachother so i get 2 comment sections next to eachother.
To place 2 divs near eachother wrap them in another div and set display to 'flex'
<div id="maindiv'>
<div id='first'>
//content here
</div>
<div id='second'>
//content here
</div>
</div>
in css
#maindiv {
display: flex;
width: 500px;
border: 1px solid black;
overflow: hidden;
}
#first {
width: 300px;
}
#second {
}
From your current code I could just guess that problem is with display, try this
#maindiv {
display: inline-block;
width: 500px;
border: 1px solid black;
overflow: hidden;
}
You can use display:inline-block as div element display is set to block by default
.parent {
background: red;
height: 50px;
width: 50px;
margin: 10px;
display: inline-block
}
<div class="parent">
</div>
<div class="parent">
</div>
<div class="parent">
</div>
<div class="parent">
</div>
<div class="parent">
</div>
<div class="parent">
</div>
<div class="parent">
</div>
<div class="parent">
</div>
#first, #second, #maindiv{
display: inline-block;
}
#maindiv {
width: 500px;
}
#first {
width: 300px;
}
<div id='maindiv'>
<div id='first'>first</div>
<div id='second'>second</div>
</div>
Despite having position fixed and no transform properties, my "hero" div always moves with the page. I want it to stay put
.hero{
position: fixed;
width: 1500px;
margin-left: 0px;
margin-top: 60px;
}
Full css:
*
{
margin: 0;
padding: 0;
}
header
{
background-image: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url(img/snow.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.main-nav
{
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li{
display: inline-block;
}
.main-nav li a{
color:white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", "sans-serif";
}
.main-nav li.active a{
border: 1px solid white;
}
.main-nav li a:hover{
border: 1px solid white;
}
.logo img
{
width: 150px;
height: auto;
float: left;
}
body
{
font-family: monospace;
}
.row
{
max-width: 1200px;
margin: auto;
}
.hero{
position: fixed;
width: 1500px;
margin-left: 0px;
margin-top: 60px;
}
h1{
color: white;
text-transform: uppercase;
font-size: 60px;
text-align: center;
/* margin-top: 275px; */
margin-top: 220;
}
.button
{
margin-top: 30px;
margin-left: 440px;
position: sticky;
}
.btn{
border: 1px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 5px;
font-size: 13px;
text-transform: uppercase;
position: sticky;
}
.btn-one{
background-color: darkorange;
font-family: "Roboto", sans-serif;
position: sticky;
}
.btn-two{
font-family: "Roboto", sans-serif;
position: sticky;
}
.btn-two:hover{
background-color: darkorange;
transition: all 0.5s ease-in;
}
html,body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-y: auto;
overflow-x: hidden;
}
#page_2{
height: 1000px;
background-color: red;
}
Full HTML:
<html>
<head>
<title>Summer Website</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div id="page_1">
<div id="particles-js">
<div class="row">
<!-- <div class ="logo">
<img src="https://i.imgur.com/0PyA8HR.png" alt="">
</div> -->
<ul class="main-nav">
<li class ="active"> HOME </li>
<li> ABOUT </li>
<li> PORTFOLIO </li>
</ul>
</div>
<div class="hero">
<h1>HI I'M KACIE AND I LOVE SOLVING PROBLEMS.</h1>
<div class="button">
LINKEDIN
RESUME
</div>
<div class ="bro">
</div>
</div>
</div>
</header>
<!--particles js file -->
<!-- <h1> TEST </h1> -->
<script type="text/javascript" src="js/particles.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</div>
<div id=page_2>
</div>
</body>
</html>
There just seems to be problem with your closing tags incorrectly nested. There needs to another closing div before the closing header tag. The snippet shows the hero in a fixed position:
.hero {
position: fixed;
width: 1500px;
margin-left: 0px;
margin-top: 60px;
}
Full css: * {
margin: 0;
padding: 0;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(img/snow.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.main-nav {
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", "sans-serif";
}
.main-nav li.active a {
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img {
width: 150px;
height: auto;
float: left;
}
body {
font-family: monospace;
}
.row {
max-width: 1200px;
margin: auto;
}
.hero {
position: fixed;
width: 1500px;
margin-left: 0px;
margin-top: 60px;
}
h1 {
color: white;
text-transform: uppercase;
font-size: 60px;
text-align: center;
/* margin-top: 275px; */
margin-top: 220;
}
.button {
margin-top: 30px;
margin-left: 440px;
position: sticky;
}
.btn {
border: 1px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 5px;
font-size: 13px;
text-transform: uppercase;
position: sticky;
}
.btn-one {
background-color: darkorange;
font-family: "Roboto", sans-serif;
position: sticky;
}
.btn-two {
font-family: "Roboto", sans-serif;
position: sticky;
}
.btn-two:hover {
background-color: darkorange;
transition: all 0.5s ease-in;
}
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-y: auto;
overflow-x: hidden;
}
#page_2 {
height: 1000px;
background-color: red;
}
<header>
<div id="page_1">
<div id="particles-js">
<div class="row">
<!-- <div class ="logo">
<img src="https://i.imgur.com/0PyA8HR.png" alt="">
</div> -->
<ul class="main-nav">
<li class="active"> HOME </li>
<li> ABOUT </li>
<li> PORTFOLIO </li>
</ul>
</div>
<div class="hero">
<h1>HI I'M KACIE AND I LOVE SOLVING PROBLEMS.</h1>
<div class="button">
LINKEDIN
RESUME
</div>
<div class="bro">
</div>
</div>
</div>
</div>
</header>
<div id=page_2>
</div>
Use position:inherit
You are using fixed and I think that is causing your issue.
Inherit won’t move, absolute stacks, fixed scrolls with page, static is default.
I want to make the links clickable only on text. The problem is that the links can be clicked on anywhere on the right to the text as well. How do I make it such that the link can be clicked on text only? I have included a part of my website where the problem lies in the links at the bottom of the navigation bar. Thanks for the advice!
<head>
<style>
.topnav {
background-color: #F2C369;
overflow: hidden;
max-width: 70%;
margin-left: auto;
margin-right: auto;
}
.topnav a {
float: left;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
font-weight: bold;
}
.topnav a:hover {
background-color: red;
color: white;
}
.topnav a.active {
background-color: #e3ef34;
color: black;
}
.sidebar {
background-color: #FCEFDC;
width: 20%;
display: inline-block;
box-sizing: border-box;
float: left;
position: absolute;
left:0px;
}
.links-box {
background-color: none;
width: 100%;
border: 1px solid black;
display: inline-block;
box-sizing: border-box;
float: left;
padding: 10px;
}
.links-box a {
display: block;
}
</style>
</head>
<body>
<div class="topnav">
Main
All
About
Gallery
Contact
</div>
<div class="content-container">
<div class="sidebar">
<div class="links-box">
<div class="link-header">Header</div>
Link 1
Link 2
</div>
</div>
</div>
</body>
Update your .links-box a with:
.links-box a {
display: block;
float: left;
clear: both;
}
Wrap your link(<a href="">) in the div and removed .links-box a { display: block;} from css
<head>
<style>
.topnav {
background-color: #F2C369;
overflow: hidden;
max-width: 70%;
margin-left: auto;
margin-right: auto;
}
.topnav a {
float: left;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
font-weight: bold;
}
.topnav a:hover {
background-color: red;
color: white;
}
.topnav a.active {
background-color: #e3ef34;
color: black;
}
.sidebar {
background-color: #FCEFDC;
width: 50%;
display: inline-block;
box-sizing: border-box;
float: left;
position: absolute;
left:0px;
}
.links-box {
background-color: none;
width: 100%;
border: 1px solid black;
display: inline-block;
box-sizing: border-box;
float: left;
padding: 10px;
}
</style>
</head>
<body>
<div class="topnav">
Main
All
About
Gallery
Contact
</div>
<div class="content-container">
<div class="sidebar">
<div class="links-box">
<div class="link-header">Header</div>
<div>Link 1</div>
<div>Link 2</div>
</div>
</div>
</div>
</body>
Change this part of your css:
.topnav {
padding: 14px 16px;
}
a {
float: left;
color: black;
text-align: center;
margin: 10px;
text-decoration: none;
font-size: 17px;
font-weight: bold;
}
replace anchor tags which includes "Link 1" and "Link 2" with the following un-ordered list.
<ul>
<li>
Link 1
</li>
<li>
Link 2
</li>
</ul>
and then add following CSS as well.
ul li{
list-style: none;
}
ul{
margin:0px;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 0px;
}
finally remove the following css block
.links-box a {
display: block;
}
This should done your work.
I am recreating the Google homepage for an assignment on TheOdinProject. I am almost finished, but the problem I am having is that I can't seem to get the hyperlink to be visible within the footer container. I tried changing the text color, and I checked the properties within the list item selector and I should be able to see the hyperlink "About Google" but I can't. What am I doing wrong?
body {
font-family: Arial;
}
#logo {
display: block;
width: 350px;
margin : 0 auto;
margin-top: 100px;
position: relative;
text-align: center;
}
input {
margin-top: -50;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
position: relative;
line-height: 2;
display: block;
width: 500px;
}
#logo img {
max-width: 100%;
}
.search_button {
margin-left: 800px;
margin-top: 5px;
display: inline;
float: left;
}
.feeling_lucky_button {
margin-right: 800px;
margin-top: 5px;
float: right;
display: inline;
}
#navbar {
background-color: #2d2d2d;
width: 100%;
height: 30px;
position: fixed;
left: 0;
top: 0;
}
#navbar ul {
margin-top: 5px;
padding-left: 8px;
}
li {
font-size: 13px;
padding: 5px 8px 5px 8px;
display: inline;
list-style-type: none;
}
#navbar ul li a {
font-weight: bold;
color: #BBBBBB;
text-decoration: none;
}
#navbar ul li a:hover {
color: white;
text-decoration: none;
}
#footer {
width: 100%;
height: 30px;
position: fixed;
border-top: 1px solid rgba(0, 0, 0, 0.1);
bottom: 0;
left: 0;
}
#footer li {
margin-bottom: 5px;
padding-left: 8px;
}
#footer ul li a {
font-weight: bold;
color: red;
text-decoration: none;
}
#footer ul li a:hover {
color: red;
font-weight: bold;
text-decoration: none;
}
#footer ul li a:link {
color: red;
}
#footer ul li a:visited{
color: red;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Google Homepage Project</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div id="navbar">
<ul>
<li>Home</li>
</div>
<div id="logo">
<img src="http://fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png">
</div>
<div id="searchbar">
<form action="#" method="POST">
<input type="text" name="searchbar">
</div>
<button class="search_button">Google Search</button>
<button class="feeling_lucky_button">I'm feeling lucky</button>
<div id="footer">
<ul>
<li><a href="http://www.google.com>About Google</a></li>
</ul>
</div>
</body>
</html>
Try this in footer. You missed double quote.
<li>About Google</li>
Fiddle:https://jsfiddle.net/ywu325mw/1/
In your footer:
<a href="http://www.google.com>About Google</a>
should be:
About Google
You forgot to close " the href attr