After creating my Header, I would like to put a Section with a paragraph but the problem is that I don't see my paragraph in my page.
Here is an example:
<section>
<p>test</p>
</section>
Why my Section is hidden? I forgot a step? I can solve my problem with the property: margin-top but I think it is not recommended.
Thank you for your help, I am a beginner.
Here is my code below
body{
margin: 0px;
padding: 0px;
}
header{
font-size: 11px;
font-weight: 700;
color: #777;
line-height: 20px;
}
.banner {
height: 550px;
width: 1366px;
position: absolute;
}
.transparent{
position: relative;
background-color: black;
opacity: 0.5;
height: 100px;
width: 1366px;
padding-top: 8px;
}
.page-left{
top: 1px;
color:white;
position: absolute;
display: inline-block;
left: 430px;
}
.page-left-languages{
top: 1px;
color:white;
position: absolute;
display: inline-block;
left: 515px;
}
.page-right{
top: 1px;
color:white;
position: absolute;
display: inline-block;
float: right;
right: 134px;
}
.page-right-login{
top: 1px;
color:white;
position: absolute;
display: inline-block;
float: right;
right: 80px;
}
nav{
position: absolute;
top: 44px;
float: right;
right: 92px;
}
nav ul{
list-style: none;
}
nav ul li{
display: inline-block;
font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
line-height: 27px;
}
nav ul li a{
padding: 8px 16px;
text-decoration: none;
color: #FFF;
text-decoration: center;
border-radius: 3px
}
nav ul li a:hover{
background-color: #FFF;
color: black;
}
.active{
background-color: #cd2122;
color: #FFF;
padding: 8px 16px;
border-radius: 3px;
}
.background-color-one{
position: absolute;
color: #fff;
font-size: 28px;
line-height: 1.3;
border-left: 5px solid #fff;
background-color: #000;
left: 20px;
bottom: 290px;
padding: 0px 15px 0px 15px;
}
.background-color-two{
position: absolute;
color: #fff;
font-size: 30px;
line-height: 1.3;
background-color: #000;
left: 20px;
bottom: 215px;
padding: 10px 10px 10px 10px;
}
.background-color-three{
position: absolute;
color: #fff;
font-size: 16px;
line-height: 1.3;
background-color: black;
opacity: 0.5;
left: 20px;
bottom: 180px;
}
<body>
<header>
<img class="banner" src="https://zupimages.net/up/20/13/5or2.jpg"/>
<div class="transparent"> </div>
<div class="page-left">Portfolio</div>
<div class="page-left-languages">Languages</div>
<div class="page-right">Support</div>
<div class="page-right-login">Login</div>
<nav>
<ul>
<li><a class="active"><href="#">Home</a></li>
<li> Plan</li>
<li>Commission</li>
<li>About us</li>
<li>Features</li>
<li>Register</li>
<li>Pages</li>
<li>Contact us</li>
</ul>
</nav>
<div class="background-color-one">7.6%-18% daily for 16 days</div>
<div class="background-color-two">Min deposit $10-Max deposit $50,000</div>
<div class="background-color-three">We accept Perfectmoney,Payeer and Bitcoin</div>
</header>
<section>
<p>test</p>
</section>
</body>
Simpler to give your body a background-image. Use flex-box for your navigation. It makes things simple.
html {
height: 100%;
}
body {
margin: 0px;
padding: 0px;
min-height: 100%;
background: #000 url('https://zupimages.net/up/20/13/5or2.jpg') no-repeat center center scroll;
background-size: cover;
}
header {
font-size: 11px;
font-weight: 700;
color: #777;
padding: 1rem;
margin: 0 0 2rem;
background-color: rgba(0, 0, 0, 0.5);
}
#nav-secondary {
display: flex;
justify-content: space-between;
}
nav ul {
list-style: none;
margin: 0.5rem;
padding: 0;
}
nav ul li {
display: inline-block;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
}
nav ul li a {
padding: 8px 16px;
text-decoration: none;
color: #FFF;
text-decoration: center;
border-radius: 3px;
display: inline-block;
}
nav ul li a:hover {
background-color: #FFF;
color: black;
}
.active {
background-color: #cd2122;
color: #FFF;
padding: 8px 16px;
border-radius: 3px;
}
main {
padding: 1rem;
}
.background-color-one {
color: #fff;
font-size: 28px;
line-height: 1.3;
border-left: 5px solid #fff;
background-color: #000;
padding: 0px 15px 0px 15px;
margin-bottom: 30px;
}
.background-color-two {
color: #fff;
font-size: 30px;
line-height: 1.3;
background-color: #000;
padding: 10px 10px 10px 10px;
margin-bottom: 30px;
}
.background-color-three {
color: #fff;
font-size: 16px;
line-height: 1.3;
background-color: #000;
padding: 10px 10px 10px 10px;
opacity: 0.5;
}
<body>
<header>
<nav id="nav-secondary">
<ul class="nav-secondary-left-list">
<li><a class="active" href="#">Portfolio</a></li>
<li>Languages</li>
</ul>
<ul class="nav-secondary-right-list">
<li>Support</li>
<li>Login</li>
</ul>
</nav>
<nav id="nav-primary">
<ul>
<li><a class="active" href="#">Home</a></li>
<li> Plan</li>
<li>Commission</li>
<li>About us</li>
<li>Features</li>
<li>Register</li>
<li>Pages</li>
<li>Contact us</li>
</ul>
</nav>
</header>
<main>
<section>
<div class="background-color-one">7.6%-18% daily for 16 days</div>
<div class="background-color-two">Min deposit $10-Max deposit $50,000</div>
<div class="background-color-three">We accept Perfectmoney,Payeer and Bitcoin</div>
</section>
<section>
<p>test</p>
</section>
</main>
</body>
Your image is positioned absolutely and "in front of" your section. There are more elegant ways to use an image as a background, like using a CSS-background-image on your body.
But using your code, it would be a quick fix to give your image a negative z-index, so that it steps behind your section:
body{
margin: 0px;
padding: 0px;
}
header{
font-size: 11px;
font-weight: 700;
color: #777;
line-height: 20px;
}
.banner {
height: 550px;
width: 1366px;
position: absolute;
z-index: -1; /* added */
}
.transparent{
position: relative;
background-color: black;
opacity: 0.5;
height: 100px;
width: 1366px;
padding-top: 8px;
}
.page-left{
top: 1px;
color:white;
position: absolute;
display: inline-block;
left: 430px;
}
.page-left-languages{
top: 1px;
color:white;
position: absolute;
display: inline-block;
left: 515px;
}
.page-right{
top: 1px;
color:white;
position: absolute;
display: inline-block;
float: right;
right: 134px;
}
.page-right-login{
top: 1px;
color:white;
position: absolute;
display: inline-block;
float: right;
right: 80px;
}
nav{
position: absolute;
top: 44px;
float: right;
right: 92px;
}
nav ul{
list-style: none;
}
nav ul li{
display: inline-block;
font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
line-height: 27px;
}
nav ul li a{
padding: 8px 16px;
text-decoration: none;
color: #FFF;
text-decoration: center;
border-radius: 3px
}
nav ul li a:hover{
background-color: #FFF;
color: black;
}
.active{
background-color: #cd2122;
color: #FFF;
padding: 8px 16px;
border-radius: 3px;
}
.background-color-one{
position: absolute;
color: #fff;
font-size: 28px;
line-height: 1.3;
border-left: 5px solid #fff;
background-color: #000;
left: 20px;
bottom: 290px;
padding: 0px 15px 0px 15px;
}
.background-color-two{
position: absolute;
color: #fff;
font-size: 30px;
line-height: 1.3;
background-color: #000;
left: 20px;
bottom: 215px;
padding: 10px 10px 10px 10px;
}
.background-color-three{
position: absolute;
color: #fff;
font-size: 16px;
line-height: 1.3;
background-color: black;
opacity: 0.5;
left: 20px;
bottom: 180px;
}
<body>
<header>
<img class="banner" src="https://zupimages.net/up/20/13/5or2.jpg"/>
<div class="transparent"> </div>
<div class="page-left">Portfolio</div>
<div class="page-left-languages">Languages</div>
<div class="page-right">Support</div>
<div class="page-right-login">Login</div>
<nav>
<ul>
<li><a class="active"><href="#">Home</a></li>
<li> Plan</li>
<li>Commission</li>
<li>About us</li>
<li>Features</li>
<li>Register</li>
<li>Pages</li>
<li>Contact us</li>
</ul>
</nav>
<div class="background-color-one">7.6%-18% daily for 16 days</div>
<div class="background-color-two">Min deposit $10-Max deposit $50,000</div>
<div class="background-color-three">We accept Perfectmoney,Payeer and Bitcoin</div>
</header>
<section>
<p>test</p>
</section>
</body>
Related
I would like to put a button on 3 images. I made this:
I think my code is very long in my CSS? I often use the property left for each button, is it correct?
I think that I can delete .button_red_02 and .button_red_03?
In my HTML code I have ths:
<section id="contents">
<div class="background_red">Want to be updated with our offers and news?</div>
<div class="background_grey">
Read more +
<img src="https://zupimages.net/up/19/51/vn88.jpg" alt="" /></a>
Read more +
<img src="https://zupimages.net/up/19/51/9fik.jpg" alt="" /></a>
Read more +
<img src="https://zupimages.net/up/19/51/dwq9.jpg" alt="" /></a>
</div>
</section>
Then, in my CSS code I have this
.button_red_01{
background-color: #cd2122;
border: none;
color: white;
padding: 4px 15px 4px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
position: absolute;
left: -10px;
top: 150px;
z-index: 1;
font-size: 12px;
font-family: Open Sans;
}
.button_red_02{
background-color: #cd2122;
border: none;
color: white;
padding: 4px 15px 4px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
position: absolute;
left: 370px;
top: 150px;
z-index: 1;
font-size: 12px;
font-family: Open Sans;
}
.button_red_03{
background-color: #cd2122;
border: none;
color: white;
padding: 4px 15px 4px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
position: absolute;
right: 334px;
top: 150px;
z-index: 1;
font-size: 12px;
font-family: Open Sans;
}
#contents{
position:absolute;
display: block;
background-color: #CD2122;
top: 538px;
width: 100%;
height: 70px;
}
.background_red{
font-family: Open Sans, sans-serif;
font-size: 22px;
color: #fff;
margin: 17px 0px 17px 100px;
}
.background_grey{
display: block;
position: absolute;
top: 60px;
height: 80%;
margin-top: 48px;
left: 115px;
}
.background_grey img {
width: 30%;
border: 3px solid #BDB9B9;
margin:10px 16px 10px 0;
}
.button_red_01{
background-color: #cd2122;
border: none;
color: white;
padding: 4px 15px 4px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
position: absolute;
left: -10px;
top: 150px;
z-index: 1;
font-size: 12px;
font-family: Open Sans;
}
.button_red_02{
background-color: #cd2122;
border: none;
color: white;
padding: 4px 15px 4px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
position: absolute;
left: 370px;
top: 150px;
z-index: 1;
font-size: 12px;
font-family: Open Sans;
}
.button_red_03{
background-color: #cd2122;
border: none;
color: white;
padding: 4px 15px 4px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
position: absolute;
right: 334px;
top: 150px;
z-index: 1;
font-size: 12px;
font-family: Open Sans;
}
<section id="contents">
<div class="background_red">Want to be updated with our offers and news?</div>
<div class="background_grey">
Read more +
<img src="https://zupimages.net/up/19/51/vn88.jpg" alt="" /></a>
Read more +
<img src="https://zupimages.net/up/19/51/9fik.jpg" alt="" /></a>
Read more +
<img src="https://zupimages.net/up/19/51/dwq9.jpg" alt="" /></a>
</div>
</section>
As soon as you have the same CSS specifications for multiple objects, you can use classes and assign these to all of the objects required. In your example you do not need to have the same CSS for each button since all of them have mainly the same properties.
For the positioning I suggest to add unique IDs to each button to handle the positioning individually.
Note that each ID should only be used once (unique identifiers!) within your html template.
To select classed objects, use .classname, to select ID linked objects use #IDname.
Also since your browser reads your CSS file from top to bottom, you can change single properties for each button within its ID selector, for example
#button_red_01 {
background-color: blue;
}
For further insights on classes and IDs I highly recommend the MDN resource https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute/class.
#contents{
position:absolute;
display: block;
background-color: #CD2122;
top: 538px;
width: 100%;
height: 70px;
}
.background_red{
font-family: Open Sans, sans-serif;
font-size: 22px;
color: #fff;
margin: 17px 0px 17px 100px;
}
.background_grey{
display: block;
position: absolute;
top: 60px;
height: 80%;
margin-top: 48px;
left: 115px;
}
.background_grey img {
width: 30%;
border: 3px solid #BDB9B9;
margin:10px 16px 10px 0;
}
.button {
background-color: #cd2122;
border: none;
color: white;
padding: 4px 15px 4px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
position: absolute;
z-index: 1;
font-size: 12px;
font-family: Open Sans;
}
#button_red_01 {
left: -10px;
top: 150px;
color: #2B28D8;
}
#button_red_02 {
left: 370px;
top: 150px;
}
#button_red_03 {
right: 334px;
top: 150px;
}
<section id="contents">
<div class="background_red">Want to be updated with our offers and news?</div>
<div class="background_grey">
Read more +
<img src="https://zupimages.net/up/19/51/vn88.jpg" alt="" /></a>
Read more +
<img src="https://zupimages.net/up/19/51/9fik.jpg" alt="" /></a>
Read more +
<img src="https://zupimages.net/up/19/51/dwq9.jpg" alt="" /></a>
</div>
</section>
My drop-down content on the navbar overlaps my button and doesnt go under the button like Id wish. The drop-down content opens at the top of my button and I want it to open at the botton of the button on the navbar. Im pretty sure the problem lies with the CSS of the navbar but I haven't figured it out yet. Any help? thank you.
<ul class="nav-links">
<li><button class="btn About"><b>About</b></button>
</li>
<li><button class="btn Our Team"><b>Staff</b>
</button></li>
<li><button class="btn Apps & Games"><b>Games</b>
</button></li>
<li><button class="btn Contact"><b>Contact</b>
</button></li>
<div class="dropdown">
<li><button class="btn link" id="dropbtn"><a href="#"><b>Links</b>
</a>
<i class="fa fa-caret-down" aria-hidden="true"></i></li>
</button>
<div class="dropdown-content">
<a ref="#">Link 1</a>
<a ref="#">Link 2</a>
<a ref="#">Link 3</a>
<a ref="#">Link 4</a>
</div>
</div>
</ul>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
li {
float: left;
font-size: 0;
}
body {
margin: 0;
padding: 0;
background-image: url(.jpg);
background-size: cover;
}
p, p {
padding: 50px;
}
h1 {
-webkit-text-stroke: 3px black;
font-size: 50px;
}
nav {
height: 10vh;
background: red;
background-image: linear-gradient(to left, #e60000, #e60000, #e60000,
#e60000, black);
border-radius: 5px;
border-style: ridge;
overflow: hidden;
}
.btn {
border-radius: -10px;
background-color: inherit;
font-family: Arial, Helvetica, sans-serif;
color: white;
padding: 23px 33px;
cursor: pointer;
transition: 0.5s;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
display: block;
}
.btn:hover {
background: black;
}
.nav-links {
display: flex;
list-style: none;
width: 50%;
height: 100%;
align-items: center;
margin-left: auto;
}
.nav-links li a {
color:white;
text-decoration: none;
font-size: 20px;
}
.landing {
height: 90vh;
display: flex;
justify-content: center;
align-items: center;
}
.landing h1 {
margin: 100px;
font-size: 50px;
color: white;
}
.dropdown {
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
float: right;
}
.dropdown-content {
display: none;
list-style: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
I can't get the submenu to be displayed.
Here's my code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title><?php echo $title; ?></title>
<style type="text/css">
body
{
font-family: lucida grande ,tahoma,verdana,arial,sans-serif;
background-color: #e9e9e9;
}
body p
{
font-size: 0.8em;
line-height: 1.28;
}
#wrapper
{
width: 1080px;
background-color: white;
margin: 0 auto;
padding: 10px;
border: 5px solid #dedede;
}
#banner
{
background-repeat: no-repeat;
background-size: cover;
border: 5px solid #dedede;
height: 200px;
}
#content_area
{
float: left;
width: 750px;
margin: 20px 0 20px 0;
padding: 10px;
}
#sidebar
{
float: right;
width: 250px;
height: 400px;
margin: 20px 10px;
padding: 10px;
border: 2px solid #E3E3E3;
}
footer
{
clear: both;
width: auto;
height: 40px;
padding: 10px;
border: 3px solid #E3E3E3;
text-align: center;
color: #fff;
text-shadow: 0.1em 0.1em #333;
background-image: url(../Images/bar_background.png);
}
#navigation
{
height: 60px;
border: 3px solid #E3E3E3;
margin-top: 20px;
text-shadow: 0.1em 0.1em #333;
background-image: url(../Images/bar_background.png);
}
#nav
{
list-style: none;
}
#nav ul
{
margin: 0;
padding: 0;
width: auto;
display: none;
}
#nav li
{
font-size: 24px;
float: left;
position: relative;
width: 180px;
height: 50px;
}
#nav a:link, nav a:active, nav a:visited
{
display: block;
color: #fff;
text-decoration: none;
}
#nav a:hover
{
color: lightblue;
}
#subnav
{
list-style:none;
}
#subnav ul
{
margin: 0;
padding: 0;
width: auto;
display:none;
}
#subnav li
{
font-size: 24px;
float:inside;
position: relative;
width: 180px;
height: 50px;
}
#subnav a:link, nav a:active, nav a:visited
{
display: block;
color: #fff;
text-decoration: none;
}
#subnav a:hover
{
color: lightblue;
}
.imgLeft
{
float: left;
width: 240px;
height: 150px;
margin: 0px 10px 10px 0;
padding: 10px;
}
.imgRight
{
float: right;
width: 200px;
height: 250px;
margin: 0px 0 10px 10px;
padding: 10px;
}
</style>
</head>
/*Master page code */
/*the submenu 'subproducts' is not displayed when i ran my code */
<body>
<div id="wrapper">
<div id="banner">
</div>
<nav id="navigation">
<ul id="nav">
<li>Home</li>
<li>Products
<ul id="subnav">
<li>SubProducts</li>
</ul>
</li>
<li>Shop</li>
<li>About</li>
</ul>
</nav>
<div id="content_area">
<?php echo $content; ?>
</div>
<div id="sidebar">
</div>
<footer>
<p>All rights reserved</p>
</footer>
</div>
</body>
</html>
I added this:
#nav li:hover ul {
display: block;
}
body {
font-family: lucida grande, tahoma, verdana, arial, sans-serif;
background-color: #e9e9e9;
}
body p {
font-size: 0.8em;
line-height: 1.28;
}
#wrapper {
width: 1080px;
background-color: white;
margin: 0 auto;
padding: 10px;
border: 5px solid #dedede;
}
#banner {
background-repeat: no-repeat;
background-size: cover;
border: 5px solid #dedede;
height: 200px;
}
#content_area {
float: left;
width: 750px;
margin: 20px 0 20px 0;
padding: 10px;
}
#sidebar {
float: right;
width: 250px;
height: 400px;
margin: 20px 10px;
padding: 10px;
border: 2px solid #E3E3E3;
}
footer {
clear: both;
width: auto;
height: 40px;
padding: 10px;
border: 3px solid #E3E3E3;
text-align: center;
color: #fff;
text-shadow: 0.1em 0.1em #333;
background-image: url(../Images/bar_background.png);
}
#navigation {
height: 60px;
border: 3px solid #E3E3E3;
margin-top: 20px;
text-shadow: 0.1em 0.1em #333;
background-image: url(../Images/bar_background.png);
}
#nav {
list-style: none;
}
#nav ul {
margin: 0;
padding: 0;
width: auto;
display: none;
}
#nav li {
font-size: 24px;
float: left;
position: relative;
width: 180px;
height: 50px;
}
#nav li:hover ul {
display: block;
}
#nav a:link,
nav a:active,
nav a:visited {
display: block;
color: #fff;
text-decoration: none;
}
#nav a:hover {
color: lightblue;
}
#subnav {
list-style: none;
}
#subnav ul {
margin: 0;
padding: 0;
width: auto;
display: none;
}
#subnav li {
font-size: 24px;
float: inside;
position: relative;
width: 180px;
height: 50px;
}
#subnav a:link,
nav a:active,
nav a:visited {
display: block;
color: #fff;
text-decoration: none;
}
#subnav a:hover {
color: lightblue;
}
<div id="wrapper">
<div id="banner">
</div>
<nav id="navigation">
<ul id="nav">
<li>Home</li>
<li>Products
<ul id="subnav">
<li>SubProducts</li>
</ul>
</li>
<li>Shop</li>
<li>About</li>
</ul>
</nav>
<div id="content_area">
<!--<?php echo $content; ?>-->
</div>
<div id="sidebar">
</div>
<footer>
<p>All rights reserved</p>
</footer>
</div>
For some reason I cannot get the right menu to float right this is a horizontal div menu. the image and the left links are perfect.. the right just doesn't work, the are both in a single div.
I would like it to look like
logo--- link---link--link--link-----------------------------Date & Time
#menu {
height: 37px;
background-color: #000;
border-bottom: 1px solid #1a1a1a;
font-family: 'Lato', sans-serif;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
}
#left ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#left li {
float: left;
}
#left li a {
display: block;
color: #777777;
text-align: center;
padding: 9px 14px;
text-decoration: none;
}
#right ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#right li {
float: right;
}
#right li span {
display: block;
color: #777777;
text-align: center;
padding: 8px 14px;
text-decoration: none;
}
#menu img{
margin-top: 6px;
margin-right: 10px;
margin-left: 10px;
display: inline-block;
float: left;
height: 24px
}
<div id="menu">
<img src="logo.svg">
<div id="left">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
</ul>
</div>
<div id="right">
<ul>
<li>Date & Time</li>
</ul>
</div>
</div>
You need to float your block level elements, otherwise they will still take up 100% width. So float #left and #right.
#menu {
height: 37px;
background-color: #000;
border-bottom: 1px solid #1a1a1a;
font-family: 'Lato', sans-serif;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
}
#left ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#left li {
}
#left li a {
display: block;
color: #777777;
text-align: center;
padding: 9px 14px;
text-decoration: none;
}
#right ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#right li {
padding-top: 9px;
}
#right li span {
display: block;
color: #777777;
text-align: center;
padding: 8px 14px;
text-decoration: none;
}
#menu img{
margin-top: 6px;
margin-right: 10px;
margin-left: 10px;
display: inline-block;
float: left;
height: 24px
}
#left {
float: left;
}
#right {
float: right;
}
#menu li {
display: inline-block;
}
<div id="menu">
<img src="logo.svg">
<div id="left">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
</ul>
</div>
<div id="right">
<ul>
<li>Date & Time</li>
</ul>
</div>
</div>
I would suggest you check out flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You can get a real good understanding from https://css-tricks.com/all-about-floats/. Give it a read .. :D
/* align all direct child of menu, in same horizontal .... */
#menu > * {
display: inline-block;
color: #fff;
}
/* float the right component to right, and add a margin to top to bring all to same level */
#right {
margin-top: 10px;
overflow: hidden;
float: right;
}
#menu {
height: 37px;
background-color: #000;
border-bottom: 1px solid #1a1a1a;
font-family: 'Lato', sans-serif;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
margin-top: 50px;
}
#menu > * {
display: inline-block;
color: #fff;
}
#left ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#left li {
float: left;
}
#left li a {
display: block;
color: #777777;
text-align: center;
padding: 9px 14px;
text-decoration: none;
}
#right {
margin-top: 10px;
overflow: hidden;
float: right;
}
#right ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#right li span {
display: block;
color: #777777;
text-align: center;
padding: 8px 14px;
text-decoration: none;
}
#menu img{
margin-top: 6px;
margin-right: 10px;
margin-left: 10px;
display: inline-block;
float: left;
height: 24px
}
<div id="menu">
<a href="">
<img src="logo.svg">
</a>
<div id="left">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
</ul>
</div>
<div id="right">
<ul>
<li>Date & Time</li>
</ul>
</div>
</div>
Working Fiddle
Here is a simple hack. What I have done is added your right div inside left div, and it has done the trick.
<div id="menu">
<img src="logo.svg">
<div id="left">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
<div id="right">
<ul>
<li style="color:white">Date & Time</li>
</ul>
</div>
</ul>
</div>
</div>
CSS
#menu {
height: 37px;
background-color: #000;
border-bottom: 1px solid #1a1a1a;
font-family: 'Lato', sans-serif;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
}
#left ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#left li {
float: left;
}
#left li a {
display: block;
color: #777777;
text-align: center;
padding: 9px 14px;
text-decoration: none;
}
#right ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#right li {
float: right;
margin-top:10px;
}
#right li span {
display: block;
color: #777777;
text-align: center;
padding: 8px 14px;
text-decoration: none;
}
#menu img{
margin-top: 6px;
margin-right: 10px;
margin-left: 10px;
display: inline-block;
float: left;
height: 24px
}
<div id="navbar">
<ul>
<li id="nav">
Home
</li>
<li id="nav">
HTML/CSS
</li>
<li id="nav">
PHP/MySQL
</li>
<li id="nav">
Contact
</li>
</ul>
</div>
This is all the html i'm currently using for my navigation bar. The CSS is:
#bar {
height: 3px;
width: auto;
background: rgb(100,100,100);
margin-left: -10px;
margin-right: -10px;
}
#navbar {
background: rgba(125,125,125,0.5);
width: auto;
height: 20px;
padding: 10px;
padding-left: 80px;
margin: -10px;
}
li#nav:hover{
background: blue;
cursor: pointer;
box-shadow: 0px 0px 10px #FFFFFF;
}
ul {
list-style-type: none;
display: block;
}
li#nav {
width: 100px;
height: 20px;
background: black;
color: white;
text-align: center;
float: left;
padding: 10px;
margin-top: -26px;
}
I can not get the buttons to stay in the center. I've tried display: block inline and block-inline and none of those work like when other people use them. It currently looks like this:
http://i.gyazo.com/ad8ca7626594348dc1141bcbea8079d2.png
I'd like a little bit of space between the buttons but that should be easy with some margins.
Try this:
<style>
html, body{
padding: 0;
margin: 0;
}
#navbar {
background: rgba(125, 125, 125, 0.5);
width: auto;
height: 40px;
text-align: center;
}
li#nav:hover {
background: blue;
cursor: pointer;
box-shadow: 0px 0px 10px #FFFFFF;
}
ul {
list-style-type: none;
display: block;
padding: 0;
margin: 0;
}
li#nav {
width: 100px;
height: 20px;
background: black;
color: white;
text-align: center;
display: inline-block;
padding: 10px;
}
</style>
<div id="navbar">
<ul>
<li id="nav">Home</li>
<li id="nav">HTML/CSS</li>
<li id="nav">PHP/MySQL</li>
<li id="nav">Contact</li>
</ul>
</div>
Check it out here: jsFiddle
Try the following css:
#bar {
height: 3px;
width: auto;
background: rgb(100,100,100);
margin-left: -10px;
margin-right: -10px;
}
#navbar {
background: rgba(125,125,125,0.5);
width: auto;
height: 20px;
padding: 10px;
padding-left: 80px;
margin: -10px;
}
li#nav:hover{
background: blue;
cursor: pointer;
box-shadow: 0px 0px 10px #FFFFFF;
}
ul {
margin: 0 auto;
}
li#nav {
width: 100px;
height: 20px;
background: black;
color: white;
text-align: center;
float: left;
padding: 10px;
margin-top:-10px;
}
Here is the example.