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;
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 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>
I am trying to create my own little Code Player. Similar to jsfiddle site. Right now I am having trouble with CSS.
I would like to center my menubar ( the buttons HTML, CSS, Javascript, result) in the topbar.
I just started learning HTML, CSS and Javascript. Do you have an idea how I can solve this problem?
#header {
width: 99%;
height: 50px;
background-color: steelblue;
margin-top: -10px;
margin-left: -10px;
}
#appname {
padding: 20px 0px 10px 20px;
float: left;
color: white;
font-size: 20;
font-style: italic;
}
#run {
float: right;
margin: 20px 20px 10px 0px;
}
#menu {
width: 500px;
margin: 0 auto;
padding-top: -1px;
}
#menu ul {
height: 30px;
}
#menu li {
list-style: none;
float: left;
height: 20px;
padding: 5px 10px;
border: 1px solid grey;
background-color: white;
}
#menu li:hover {
background-color: darkgrey;
}
.break {
clear: both;
}
<div id="header">
<div id="appname">
<b>Code Player</b>
</div>
<div id="run">
<button>RUN</button>
</div>
<div id="menu">
<ul>
<li id="buttonHTML">HTML</li>
<li id="buttonCSS">CSS</li>
<li id="buttonJS">Javascript</li>
<li id="buttonResult">Result</li>
</ul>
</div>
</div>
<div class="break"></div>
Use this styles for your menu:
#menu {
width: 500px;
margin: 0 auto;
padding-top: -1px;
display: flex;
justify-content: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
No need for the width and margin on #menu. Then you can use display: flex; justify-content: center; padding: 0; on #menu ul to center it's contents. I also removed the floats from #menu li because they're no longer necessary.
#header {
width: 99%;
height: 50px;
background-color: steelblue;
margin-top: -10px;
margin-left: -10px;
}
#appname {
padding: 20px 0px 10px 20px;
float: left;
color: white;
font-size: 20;
font-style: italic;
}
#run {
float: right;
margin: 20px 20px 10px 0px;
}
#menu {
padding-top: -1px;
}
#menu ul {
display: flex;
justify-content: center;
padding: 0;
}
#menu li {
list-style: none;
height: 20px;
padding: 5px 10px;
border: 1px solid grey;
background-color: white;
}
#menu li:hover {
background-color: darkgrey;
}
.break {
clear: both;
}
<div id="header">
<div id="appname">
<b>Code Player</b>
</div>
<div id="run">
<button>RUN</button>
</div>
<div id="menu">
<ul>
<li id="buttonHTML">HTML</li>
<li id="buttonCSS">CSS</li>
<li id="buttonJS">Javascript</li>
<li id="buttonResult">Result</li>
</ul>
</div>
</div>
<div class="break"></div>
If you apply text-align: center to your header and change the div containing the list to display:inline-block it should do the trick. I also removed the padding, margin, and width:
#header {
width: 99%;
height: 50px;
background-color: steelblue;
margin-top: -10px;
margin-left: -10px;
text-align:center;
}
#appname {
padding: 20px 0px 10px 20px;
float: left;
color: white;
font-size: 20;
font-style: italic;
}
#run {
float: right;
margin: 20px 20px 10px 0px;
}
#menu {
margin: 0 auto;
padding-top: -1px;
display:inline-block;
}
#menu ul {
height: 30px;
padding:0;
margin:0;
}
#menu li {
list-style: none;
float: left;
height: 20px;
padding: 5px 10px;
border: 1px solid grey;
background-color: white;
}
#menu li:hover {
background-color: darkgrey;
}
.break {
clear: both;
}
<div id="header">
<div id="appname">
<b>Code Player</b>
</div>
<div id="run">
<button>RUN</button>
</div>
<div id="menu">
<ul>
<li id="buttonHTML">HTML</li>
<li id="buttonCSS">CSS</li>
<li id="buttonJS">Javascript</li>
<li id="buttonResult">Result</li>
</ul>
</div>
</div>
<div class="break"></div>
Have done some researching on why it is doing this but, I can't seem too fix the problem. The header logo/text keeps overlapping. Anyone got an idea why it is doing this?
http://jsfiddle.net/uljima/bcm96v49/
resized:
http://i.stack.imgur.com/l2P3z.png
Tried many things but it keeps on overlapping the logo.
HTML:
<html>
<header>
<title>KeyStone Coffee</title>
<link rel="stylesheet" href="styles/styles.css">
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</style>
</head>
<div class="wrapper">
<body>
<body>
<header>
<div class= "Company_Logo">
<img src="http://i.imgur.com/Qu8f4K3.png" title="source: imgur.com" alt="Company Logo" height="200" width="200"/>
</div>
<center>
<div class= "Company_Text">
<h1>Keystone Coffee</h1>
</div>
</center>
<div class="HPFGAC">
<nav>
<ul>
<center>
<li>HOME</li>
<li>PRODUCTS</li>
<li>FLAVORED COFFEE</li>
<li>GUIDE TO THE PERFECT TASTE</li>
<li>ABOUT</li>
<li>CONTACT</li>
</center>
</ul>
</nav>
</div>
</html>
</header>
CSS:
#wrapper {
height: 850px;
width: 960px;
margin:0 auto;
background-repeat: no-repeat;
background-position: center center;
}
.row:after{
clear: both;
}
.col{
background: black;
border-radius: 5px;
color: white;
padding: .5px;
float: left;
margin: 1%;
width: 100%;
}
.row:after{
clear: both;
}
.col{
background: black;
border-radius: 5px;
color: white;
padding: .5px;
float: left;
margin: 1%;
width: 100%;
}
.WebContainer{
width: 100%;
height: auto;
}
.articles{
width:90%;
height: auto;
margin: auto;
}
.DIV
{
margin-left:0px;
margin-right:0px;
}
.box2 {
display: inline-block;
width: 100%;
height: 100px;
margin: 1em;
}
html{
overflow: scroll;
height: 100%;
margin: auto;
width:100%;
}
body {
height: 960px;
margin: 0;
padding:0;
width:100%;
text-align:center;
}
header {
background: white;
color: Black;
padding: 0px 15px 15px 15px;
float: center-side;
margin-left: auto;
margin-right: auto;
}
header h1 {
margin: 0px;
display: inline;
float: center-side;
margin-left: auto;
margin-right: auto;
}
nav ul{
margin: 0px;
padding : 0 0 15px 0;
display: inline;
float: center-side;
margin-left: auto;
margin-right: auto;
}
nav ul li{
background: wwhite;
color: #9D795B;
display: inline-block;
list-style-type: none;
padding: 5% 15px 20px 15px;
margin: 0;
float: center-side;
margin-left: auto;
margin-right: auto;
font-size: 1.875em;
white-space:nowrap;
}
nav ul li a {
color: #9D795B;
float: center-side;
margin-left: auto;
margin-right: auto;
}
.Company_Logo{
float:center-left
clear: both;
position: absolute;
top: 0%;
right: 70.5%;
z-index: 9999;
display: block;
white-space:nowrap;
padding: 2px 2px 2px 2px;
}
.Company_Logo{
width:100px;
}
.Company_Text{
clear: both;
color:#9D795B;
font-size:50.5px;
font-family: 'Lobster', cursive;
display: inline;
white-space:nowrap;
}
.Company_Text{
clear: both;
position: relative;
top: 35px;
right: -2.75%;
z-index: 9999;
}
.HPFGAC{
clear: both;
font-family: 'Anton', sans-serif;
white-space:nowrap;
}
.HPFGAC a:link {
text-decoration: none;
}
.HPFGAC a:visited {
text-decoration: none;
}
.HPFGAC a:hover {
text-decoration: underline;
}
.HPFGAC a:active {
text-decoration: underline;
}
nice try but i must say you need some real work on your codes, it is pretty messed up.
HTML
<title>KeyStone Coffee</title>
<link rel="stylesheet" href="styles/styles.css">
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</style>
</head>
<div class="wrapper">
<body>
<body>
<header>
<div class="Company_Logo"> <img src="http://i.imgur.com/Qu8f4K3.png" title="source: imgur.com" alt="Company Logo" height="200" width="200"/>
</div>
<center>
<div class="Company_Text">
<h1>Keystone Coffee</h1>
</div>
</center>
<div class="HPFGAC">
<nav>
<ul>
<center>
<li>HOME
</li>
<li>PRODUCTS
</li>
<li>FLAVORED COFFEE
</li>
<li>GUIDE TO THE PERFECT TASTE
</li>
<li>ABOUT
</li>
<li>CONTACT
</li>
</center>
</ul>
</nav>
</div>
CSS
#wrapper {
height: 850px;
width: 960px;
margin:0 auto;
background-repeat: no-repeat;
background-position: center center;
}
.row:after {
clear: both;
}
.col {
background: black;
border-radius: 5px;
color: white;
padding: .5px;
float: left;
margin: 1%;
width: 100%;
}
.row:after {
clear: both;
}
.col {
background: black;
border-radius: 5px;
color: white;
padding: .5px;
float: left;
margin: 1%;
width: 100%;
}
.WebContainer {
width: 100%;
height: auto;
}
.articles {
width:90%;
height: auto;
margin: auto;
}
.DIV {
margin-left:0px;
margin-right:0px;
}
.box2 {
display: inline-block;
width: 100%;
height: 100px;
margin: 1em;
}
html {
overflow: scroll;
height: 100%;
margin: auto;
width:100%;
}
body {
height: 960px;
margin: 0;
padding:0;
width:100%;
text-align:center;
}
header {
background: white;
color: Black;
padding: 0px 15px 15px 15px;
float: center-side;
margin-left: auto;
margin-right: auto;
}
header h1 {
margin: 0px;
display: inline;
float: center-side;
margin-left: auto;
margin-right: auto;
}
nav ul {
margin: 0px;
padding : 0 0 15px 0;
display: inline;
float: center-side;
margin-left: auto;
margin-right: auto;
}
nav ul li {
background: wwhite;
color: #9D795B;
display: inline-block;
list-style-type: none;
padding: 5% 15px 20px 15px;
margin: 0;
float: center-side;
margin-left: auto;
margin-right: auto;
font-size: 1.875em;
white-space:nowrap;
}
nav ul li a {
color: #9D795B;
float: center-side;
margin-left: auto;
margin-right: auto;
}
.Company_Logo {
float: left;
padding: 2px 2px 2px 2px;
}
header center{
overflow: hidden;
}
.Company_Text {
padding-top: 30px;
color:#9D795B;
text-align: left;
font-size:50.5px;
font-family:'Lobster', cursive;
white-space:nowrap;
}
.HPFGAC {
clear: both;
font-family:'Anton', sans-serif;
white-space:nowrap;
}
.HPFGAC a:link {
text-decoration: none;
}
.HPFGAC a:visited {
text-decoration: none;
}
.HPFGAC a:hover {
text-decoration: underline;
}
.HPFGAC a:active {
text-decoration: underline;
}
Link to Fiddle
i hope this helps, cheers.
.Company_Text {
clear: both;
color:#9D795B;
font-size:50.5px;
font-family:'Lobster', cursive;
display: inline;
position: relative;
white-space:nowrap;
}
.Company_Text {
clear: both;
position: relative;
top: 30px;
margin-left: 210px;
right: -2.75%;
z-index: 9999;
}
.HPFGAC {
clear: both;
font-family:'Anton', sans-serif;
white-space:nowrap;
margin-top: 60px;
}
Try this.
So I'm building a website in html and css. I have made a navigation bar with the links, but when I zoom out, the links go underneath one another instead of inline. If someone can give me some pointers, that'd be great. Thanks
<html>
<head>
<link rel="stylesheet" href="style/style.css" />
</head>
<body>
<div class="wrap">
<div class="logo"><img src="img/logo.png"></div>
<div class="nav">
<ul>
<li>HOME</li>
<li>PRODUCTS</li>
<li>SHOPS</li>
<li>FAQ</li>
<li>ABOUT US</li>
</ul>
</div>
<div class="main">
</div>
</div>
</body>
</html>
body {
padding: 0;
margin: 0;
background: #1b1b1b url('../img/bg.jpg') no-repeat fixed top center;
}
.logo {
margin-bottom: 10px;
margin: auto;
width: 524px;
}
.wrap {
width: 960px;
margin: auto;
}
.nav {
height: 37px;
background-color: rgba(26,26,26,0.8);
border: 1px solid black;
margin-bottom: 10px;
}
ul {
margin: 0;
padding: 0;
text-align: center;
line-height: 38px;
}
ul li {
display: inline;
color: #828282;
padding: 2px 40px;
background: #595959;
border:1px solid #828282;
margin: 0 10px;
}
ul li a {
text-decoration: none;
color: white;
font-family: arial;
}
ul li a:hover {
}
.main {
min-height: 300px;
height: auto;
background-color: rgba(26,26,26,0.8);
border: 1px solid black;
}
"the links go underneath one another instead of inline"
To fix this, you will want to add the float: left; property to your li like so:
ul li {
display: inline-block;
float: left;
color: #828282;
padding: 2px 40px;
background: #595959;
border:1px solid #828282;
margin: 0 10px;
}