I am trying to float a row of 4 images. However, they are not floating. I will attach my code and a screenshot of the website as it is locally hosted. I have tried putting the float in other parts of the CSS such as in the #sidebar{float:left;}. I am not sure why it will not float. I have also tried .left{float:left} but that just makes the sidebar smaller. I am very confused about this.
/* ----- Fonts CSS ----- */
body {
font-family: 'Comfortaa', cursive, sans-serif;
margin: 0;
padding: 0;
}
/* ----- End Fonts CSS ----- */
.indexBody {
width: 100%;
background-image: url("city.jpg");
color: #fff;
}
#textLogo {
text-align: center;
font-size: 46px;
}
/*---- Index Page ----*/
.serviceTitle {
float: left;
width: 49%;
text-align: center;
margin-bottom: 0;
}
.serviceImage {
float: left;
margin-left: 4.5%;
margin-bottom: 9%;
margin-top: 3%;
width: 600px;
}
a .serviceImage:hover {
background-image: url("IMG_3134.jpg");
}
.clearfix {
clear: both;
}
footer {
color: #fff;
font-size: 24px;
text-align: center;
}
/*---- Photograohy Portfolio Index Page ----*/
nav ul {
width: 75%;
}
nav ul li {
list-style-type: none;
font-size: 34px;
color: #fff;
text-align: center;
padding: 15px;
border-bottom: 2px solid black;
}
nav ul li a {
text-decoration: none;
color: black;
}
nav ul li a:hover {
color: blue;
}
.col1 {
float: left;
width: 35%;
}
.photoBody {
margin: 0;
background-color: #fff;
}
#sidebar {
width: 20%;
}
.navigation {
background-color: #fff;
width: 100%;
height: 100%;
}
#photogLogo {
text-align: center;
font-size: 46px;
color: black;
margin-top: 0;
}
.main1 {
width: 70%;
clear: both;
}
.row1 {
float: left;
width: 20%;
padding: 3px;
margin: 1%;
border: 2px solid black;
}
/*Test*/
.right {
float: right;
}
<body class="photoBody">
<div class="left">
<div id="sidebar">
<div class="navigation">
<h1 id="photogLogo">Text Logo</h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="right">
<div class="main1">
<img class="row1" src="IMG_4085.jpg" alt="Coastline" />
<img class="row1" src="IMG_4085.jpg" alt="Coastline" />
<img class="row1" src="IMG_4085.jpg" alt="Coastline" />
<img class="row1" src="IMG_4085.jpg" alt="Coastline" />
</div>
</div>
</body>
If I understand what you want, this a way to do it :
.main1{
width: 35%;
clear: both;
}
.row1{
display:block;
left:0;
float:left;
width: 100%;
padding: 3px;
margin: 1%;
border: 2px solid black;
}
fiddle here
Is this what you need?
/* ----- Fonts CSS ----- */
body {
font-family: 'Comfortaa', cursive, sans-serif;
margin: 0;
padding: 0;
}
/* ----- End Fonts CSS ----- */
.indexBody {
width: 100%;
background-image: url("city.jpg");
color: #fff;
}
#textLogo {
text-align: center;
font-size: 46px;
}
/*---- Index Page ----*/
.serviceTitle {
float: left;
width: 49%;
text-align: center;
margin-bottom: 0;
}
.serviceImage {
float: left;
margin-left: 4.5%;
margin-bottom: 9%;
margin-top: 3%;
width: 600px;
}
a .serviceImage:hover {
background-image: url("IMG_3134.jpg");
}
.clearfix {
clear: both;
}
footer {
color: #fff;
font-size: 24px;
text-align: center;
}
/*---- Photograohy Portfolio Index Page ----*/
nav ul {
width: 75%;
}
nav ul li {
list-style-type: none;
font-size: 34px;
color: #fff;
text-align: center;
padding: 15px;
border-bottom: 2px solid black;
}
nav ul li a {
text-decoration: none;
color: black;
}
nav ul li a:hover {
color: blue;
}
.col1 {
float: left;
width: 35%;
}
.photoBody {
margin: 0;
background-color: #fff;
}
#sidebar {
width: 20%;
}
.navigation {
background-color: #fff;
width: 100%;
height: 100%;
}
#photogLogo {
text-align: center;
font-size: 46px;
color: black;
margin-top: 0;
}
.main1 {
width: 70%;
text-align: left;
}
.row1 {
float: left;
width: 20%;
padding: 3px;
margin: 1%;
border: 2px solid black;
}
/*Test*/
.right {
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sample Project</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<div class="photoBody">
<div id="sidebar">
<div class="navigation">
<h1 id="photogLogo">Text Logo</h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
<div class="main1">
<img class="row1" src="http://placehold.it/100" alt="Coastline" />
<img class="row1" src="http://placehold.it/100" alt="Coastline" />
<img class="row1" src="http://placehold.it/100" alt="Coastline" />
<img class="row1" src="http://placehold.it/100" alt="Coastline" />
</div>
</div>
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'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 :)
Is it possible to overlap images in the navigation bar, without getting the background color and some stuffs? The image or the logo itself shouldn't have any background-color (that is inherited) and should have overlapped the navigation bar. I'm looking for an output like this.
This is the CodePen link, try it out
HTML Codes:
<nav>
<ul>
<li>
<span class="logo">
<img src="https://static.wixstatic.com/media/c86d4e_46042d8a0d99473f82209f03ab4dd146~mv2.gif" alt="Star of Hope" title="Star of Hope" id="logo">
</span>
</li>
<li>Home</li>
<li>Our School</li>
<li>Academics</li>
<li>Lesson and Quizzes</li>
<li>Event & News</li>
<li>Grades</li>
</ul>
</nav>
CSS Codes:
* {
margin: 0px;
}
nav {
width: 100%;
height: 100%;
text-align: center;
font-weight: lighter;
font-size: 0.95em;
font-family: Century Gothic;
text-transform: uppercase;
list-style-type: none;
overflow: hidden;
background-color: #343F64;
}
ul {
margin: 0;
padding: 0;
width: 100%;
}
li {
display: inline;
float: left;
}
li a {
display: block;
padding: 14px 16px;
background-color: #343F64;
color: white;
text-decoration: none;
padding-top: 25px;
padding-bottom: 25px;
}
.active {
color: #E9DB89;
}
li img {
float: left;
}
img {
margin-left: 75px;
}
#logo {
float:left;
z-index: 1000;
}
I have made an edit to your code to get the results
* {
margin: 0px;
}
nav {
width: 100%;
height: 70px;
text-align: center;
font-weight: lighter;
font-size: 0.95em;
font-family: Century Gothic;
text-transform: uppercase;
list-style-type: none;
overflow: hidden;
background-color: #343F64;
position: relative;/*change here*/
}
ul {
margin: 0;
padding: 0;
width: 100%;
position: absolute;/*change here*/
right: -25%;/*change here*/
}
li {
display: inline;
float: left;
}
li a {
display: block;
padding: 14px 16px;
background-color: #343F64;
color: white;
text-decoration: none;
padding-top: 25px;
padding-bottom: 25px;
}
.active {
color: #E9DB89;
}
li img {
float: left;
}
img {
margin-left: 75px;
}
.line {
width: 100%;
height: 50px;
border-bottom: 1px solid #111;
}
#logo {
float:left;
z-index: 1000;
position: absolute;/*change here*/
}
<!--move logo outside nav-->
<span class="logo">
<img src="https://static.wixstatic.com/media/c86d4e_46042d8a0d99473f82209f03ab4dd146~mv2.gif" alt="Star of Hope" title="Star of Hope" id="logo">
</span>
<nav>
<ul>
<li>Home</li>
<li>Our School</li>
<li>Academics</li>
<li>Lesson and Quizzes</li>
<li>Event & News</li>
<li>Grades</li>
</ul>
</nav>
<div class="line"></div>
Here's another variation, not using absolute positioning:
HTML:
<div id="header_container">
<div id="header">
<div class="logo">
<img src="https://static.wixstatic.com/media/c86d4e_46042d8a0d99473f82209f03ab4dd146~mv2.gif" alt="Star of Hope" title="Star of Hope" id="logo">
</div>
<div class="nav">
<ul>
<li>Home</li>
<li>Our School</li>
<li>Academics</li>
<li>Lesson and Quizzes</li>
<li>Event & News</li>
<li>Grades</li>
</ul>
</div>
</div>
</div>
CSS:
* {
margin: 0px;
}
#header_container {
width: 100%;
height: 100px;
background-color: #343F64;
}
#header {
margin: 0 auto;
width: 1200px;
}
.nav {
float: left;
margin-top: -100px;
margin-left: 350px;
height: 100px;
text-align: center;
font-weight: lighter;
font-size: 0.95em;
font-family: Century Gothic;
text-transform: uppercase;
list-style-type: none;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
width: 100%;
}
li {
display: inline;
float: left;
}
li a {
display: block;
padding: 14px 16px;
background-color: #343F64;
color: white;
text-decoration: none;
padding-top: 25px;
padding-bottom: 25px;
}
.active {
color: #E9DB89;
}
li img {
float: left;
}
img {
margin-left: 75px;
}
.logo {
float:left;
z-index: 1000;
}
I want all the elements in my header to be in a horizontal line in line with each other. I also want them to be centered on the Grey header block. Here is what it looks like so far.enter image description here This is my first website so I'm just playing around at the moment so I would appreciate any help or advice.
*
====================================
HEADER
====================================
*/
header {
background-color: grey;
opacity: 50%;
width: 100%;
}
#logo {
float: left;
padding-top: 10px;
padding-left: 30px;
}
#logo img {
width: 15%;
height: 15%;
}
#navigation {
margin: auto;
clear: both;
text-align: center;
position: relative;
}
#navigation li {
display: inline-block;
padding: 5px 15px 5px 15px;
color: #fff;
}
#navigation li a {
color: #fff;
text-transform: uppercase;
}
nav a.selected, nav a:hover {
border-bottom: 1px solid #fff;
padding-bottom: 0.75px;
}
.social-media {
text-align: right;
padding: 0 1.5em 0 0;
}
.social-media ul li {
display: inline;
}
.social-media img {
width: 30px;
height: 30px;
margin: 0 4px;
}
<header>
<div id="logo">
<img src="img/logo.png">
</div>
<nav id="main-controls">
<ul id="navigation">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Services</li>
<li>Contact</li>
</ul>
<div class="social-media">
<img src="img/facebook.png" alt="Facebook">
<img src="img/twitter.png" alt="Twitter">
<img src="img/instagram.png" alt="Instagram">
<img src="img/google+.png" alt="Google Plus">
<img src="img/linkedin.png" alt="Linked In">
</div>
</nav>
</header>
An updated version of your CSS:
*
====================================
HEADER
====================================
*/
header {
background-color: grey;
opacity: 50%;
width: 100%;
}
#logo {
display: inline-block;
padding-top: 10px;
padding-left: 30px;
}
#logo img {
width: 15%;
height: 15%;
}
#navigation {
display: inline-block;
margin: auto;
clear: both;
text-align: center;
position: relative;
}
#navigation li {
display: inline-block;
padding: 5px 15px 5px 15px;
color: #fff;
}
#navigation li a {
color: #fff;
text-transform: uppercase;
}
nav a.selected, nav a:hover {
border-bottom: 1px solid #fff;
padding-bottom: 0.75px;
}
.social-media {
display: inline-block;
text-align: right;
padding: 0 1.5em 0 0;
}
.social-media ul li {
display: inline-block;
}
.social-media img {
width: 30px;
height: 30px;
margin: 0 4px;
}
This should take care of aligning all elements horizontally. I removed a float property declared, and used display: inline-block instead on all stacked elements.
I'm learning HTML and I've made a program I need help for. I have written all the code but I want the pictures BOB 1/2/3 to be next to each other. Futhermore I don't know why I can't see the "Home". Also want that the the information at the buttom of the page should be next to each other
Thanks in advance :)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My first website</title>
<meta name="viewport" content="width=divice-width, initial-scale=1.0">
<style>
body{
background: #00FF33;
font-family: Verdana, Tahama, Arial, sans-serif;
font-size: 18px;
overflow: auto;
}
h1, h2, h3 {
text-align: center;
padding-left: 5%;
color: #000066;
}
p {
padding: 2%
color: #000066;
}
img {
text-align: center;
max-width: 100%;
height: auto;
width: auto;
}
#wrapper {
margin: 0 auto;
max-width: 1020px;
width: 98%
background: #000000;
border: 1px solid #878E63;
border-radius: 2px;
box-shadow: 0 0 10px 0px rgba(12, 3 , 25, 0.8);
}
#callout {
width: 100%;
height: auto;
background: #000000;
overflow: hidden;
}
#callout p{
text-align: right;
font-size: 13px;
padding: 0.1% 5% 0 0;
color: #FFFF00;
}
#callout p a{
color: #CC0000;
text-decoration: none;
}
header {
width: 96%;
min-height: 125px;
padding: 5px;
text-align: center;
}
nav ul {
list-style: none;
margin: 0;
padding-left: 50px;
}
nav ul li {
float: left;
border: 1px solid #878E63;
width: 15%;
}
nav ul li a {
background: #F1F0D1;
display: black;
padding: 5% 12%
font-weight: bold;
font-size: 18px;
color: #878E63;
text-decoration:none;
text-align: center;
}
nav ul li:hover, nav ul li.active a {
background-color: #878E63;
color: #878E63;
}
.banner img {
width: 100%;
border-top: 1px solid: #878E63;
border-bottom: 1px solid: #878E63;
}
.clearfix {
clear: both;
}
.BobContainer{
width: 29%;
display: inline-block;
text-align: center;
margin: 0 1.666%;
}
.left-col {
width: 55%;
margin: -2% 1% 1%;
float: left;
}
.sidebar {
width: 40%;
float: right;
margin: 1%;
text-align: center;
}
.hallo{
float: left;
margin: 0 auto;
width: 100%;
height: auto;
padding: 1%;
}
.section{
width: 29%;
margin: 2% 2%;
display: inline-block;
text-align: center;
}
footer{
background: #878E63;
width: 100%;
overflow: hidden;
}
footer p, footer h3{
color: #F1F0D1;
}
footer p a{
color: #F1F0D1;
text-decoration: none;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
}
ul li img{
height: 50%;
}
.footerLogos{
width: 45%;
margin: 0 2.45%;
display: inline-block;
text-align: center;
}
/*---------MEDIA---------*/
#media screen and (max-width: 478px){
body{
font-size: 13px;
}
}
#media screen and (max-width: 740px){
nav{
width: 100%;
margin-bottom: 10px;
}
nav ul{
list-style: none;
margin: 0 auto;
padding-left: 0;
}
nav ul li{
text-align: center;
margin-left: 0 auto;
width: 100%;
border-top: 1px solid #878E63;
border-left: 0px solid #878E63;
border-bottom: 1px solid #878E63;
border-right: 0px solid #878E63;
}
nav ul li a{
padding: 8px 0;
font-size: 16px;
}
.left-col {
width: 100%;
}
.sidebar{
width: 100%;
}
.section{
float: left;
width: 100%;
margin: 0;
}
}
</style>
</head>
<body>
<div id="wrapper">
<div id="callout">
<p>Call us at <b>123456</b></p>
</div>
<header>
<img src="http://www.logodesignbuzz.com/creativelogos/wp-content/uploads/2010/07/alnabulsi-creative-logos.jpg"
</header>
<nav>
<ul>
<li class='active'>Home</li>
<li>Prices</li>
<li>Who are we?</li>
</ul>
</nav>
<div class="banner">
<img src="http://www.logodesignbuzz.com/creativelogos/wp-content/uploads/2010/07/alnabulsi-creative-logos.jpg"</a>
</div>
<section class="left-col">
<p style ="text-indent: 50px;">Restaurant websites are a great place to find inspiring designs and also to check out some nice ways of displaying photographs within a design. Since the main content of a restaurant is their food – or at least it should be – there is no better thing to do than show beautiful images of the food</p>
<p style ="text-indent: 50px;">HELLOZZ</p>
</section>
<aside class="sidebar">
<img src="http://www.logodesignbuzz.com/creativelogos/wp-content/uploads/2010/07/alnabulsi-creative-logos.jpg"</a>
<div class="hallo">
</div>
</aside>
<div class="BobContainer">
<h3>BOB1</h3>
<img src="http://www.logodesignbuzz.com/creativelogos/wp-content/uploads/2010/07/alnabulsi-creative-logos.jpg"</a>
<p>Du</p>
</div>
<div class="BobContainer">
<h3>BOB2</h3>
<img src="http://www.logodesignbuzz.com/creativelogos/wp-content/uploads/2010/07/alnabulsi-creative-logos.jpg"</a>
<p>Er</p>
</div>
<div class="BobContainer">
<h3>BOB3</h3>
<img src="http://www.logodesignbuzz.com/creativelogos/wp-content/uploads/2010/07/alnabulsi-creative-logos.jpg"</a>
<p>Dum</p>
</div>
<footer>
<div class="footerLogos"
<p>Call us at:</p>
<p><b>123456</b><br>
Or write to<br>
www#hotmail.com<br>
2670 Greve</p>
</div>
<div class="footerLogos"
<ul>
<li><img src="http://www.adweek.com/socialtimes/wp-content/uploads/sites/2/2013/04/2-150x150.png"</li>
<li><img src="http://virtualmarketingpro.com/blog/empreendeglobal/wp-content/uploads/sites/897/2015/01/logo-youtube-335x320.png"</li>
</ul>
<div class="footerLogos"
<img src="http://www.logodesignbuzz.com/creativelogos/wp-content/uploads/2010/07/alnabulsi-creative-logos.jpg"</a>
</div>
</footer>
</div>
<p style="text-align: center; padding:0px;">©Copyright - hala hala, 2015</p>
</body>
</html>
In CSS Code Try Adding To Section Styles : display: inline-block;
Also Delete : float : left;