In the below two screenshots, you can see the weird behavior of div.header ( parent ) and ul, li( child ) .
Due to this weird behavior, newer content(span,) in placed in the mid of the page. It's like the menu bar is not inside of header as it is supposed to be.
screenshots are below HTML and CSS codes:-
HTML:-
<body>
<div class="container">
<div class="header">
<div class="header-image"><img src="images/logo.png" alt="logo"></div>
<nav>
<ul class="left-menu">
<li> Services</li>
<li>Portfolio</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
<ul class="right-menu">
<li>+91 964941****</li>
<li>Get a Quote</li>
</ul>
</nav>
</div>
<div class="content-a">
<span>DEMO SESSIONS</span>
<h1>Get Demo Class Now</h1>
</div>
</div>
</body>
CSS:-
body{
background-color:#191C26;
color:white;
}
.header{
margin-top:20px;
}
.header-image{
width:10%;
display: inline-block;
position:relative;
top:36px;
}
.header-image img{
width:100%;
}
.left-menu, .right-menu{
list-style: none;
font-size: 200%;
}
.left-menu a, .right-menu a{
text-decoration: none;
display: inline-block;
color:white;
}
.left-menu{
float:left;
margin:0px;
margin-left:12%;
}
.left-menu li{
float:left;
}
.left-menu a{
margin-right:20px;
}
.right-menu{
float:right;
margin:0;
}
.right-menu li{
float:left;
margin-left:10px;
}
.right-menu a{
margin-left:20px;
}
2nd image:-
There are too many CSS frameworks like bootstrap, tailwind etc that can solve your problem and reduce lines of code. But if you want to create your own CSS then you can do this with flexbox and CSS grid system.
In your code adding display: inline-block; width: 100%; to your header class will fix your issue. Also use float only to main ul not li. I've made a little tweak to your code as below.
body{
background-color:#191C26;
color:white;
}
.header{
margin-top:20px;
border: 2px solid;
display: inline-block;
width: 100%;
}
.header-image{
width:10%;
display: inline-block;
position:relative;
top:36px;
}
.header-image img{
width:100%;
}
.left-menu, .right-menu{
list-style: none;
font-size: 200%;
}
.left-menu a, .right-menu a{
text-decoration: none;
display: inline-block;
color:white;
}
.left-menu{
float:left;
margin:0px;
margin-left:12%;
}
.left-menu li{
float:left;
}
.left-menu a{
margin-right:20px;
}
.right-menu{
float:right;
margin:0;
}
.right-menu li{
float:left;
margin-left:10px;
}
.right-menu a{
margin-left:20px;
}
<div class="container">
<div class="header">
<div class="header-image"><img src="images/logo.png" alt="logo"></div>
<nav>
<ul class="left-menu">
<li> Services</li>
<li>Portfolio</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
<ul class="right-menu">
<li>+91 964941****</li>
<li>Get a Quote</li>
</ul>
</nav>
</div>
<div class="content-a">
<span>DEMO SESSIONS</span>
<h1>Get Demo Class Now</h1>
</div>
<div class="content-a">
<span>DEMO SESSIONS</span>
<h1>Get Demo Class Now</h1>
</div>
</div>
I do not sure your request, but i make this, try this maybe will work for you
* {
margin: 0;
box-sizing: border-box;
}
body {
background-color: #191c26;
color: white;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
height: 10vh;
}
nav {
display: flex;
justify-content: center;
align-items: center;
margin-right: 1rem;
}
nav ul {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.8rem;
}
nav ul li {
margin: 0 0.7rem;
list-style: none;
}
nav ul li a {
color: white;
text-decoration: none;
}
.content-a {
margin-top: 2rem;
}
<div class="header">
<div class="header-image"><img src="images/logo.png" alt="logo" /></div>
<nav>
<ul class="left-menu">
<li>Services</li>
<li>Portfolio</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
<ul class="right-menu">
<li>+91 964941****</li>
<li>Get a Quote</li>
</ul>
</nav>
</div>
<div class="content-a">
<span>DEMO SESSIONS</span>
<h1>Get Demo Class Now</h1>
</div>
Related
I am try to put the div nav2 on the same line as nav 1 but it just not going up what is the problem i even try float but it not working also
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
}
#navbar {
position: fixed;
width: 100%;
display:
}
#navbar ul {
list-style: none;
}
#navbar ul li {
display: inline-block;
padding: 10px 5px 0px 20px;
}
#nav2 {
float: right;
}
<div id="main">
<div id="navbar">
<div id="nav1">
<ul>
<li>How it works</li>
<li>Why Company?</li>
<li>Pricing</li>
<li>About us</li>
<li>Resource center</li>
</ul>
</div>
<div id="nav2">
<ul>
<li>Get stated</li>
<li>Log in</li>
</ul>
</div>
</div>
<div id="head">
<div>
<h3>Company</h3>
</div>
<div>
<h1>Invert Like a idiot</h1>
</div>
<div>
<p>because money is lame</p>
</div>
</div>
</div>
I expect that Both "nav1" and "nav2" on the name line just like normal navbar but i want "nav2" on the right side that why i make it div "nav2"
This is probably what you want to do :
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body, html {
width: 100%;
height: 100vh;
}
#navbar {
position: fixed;
width: 100%;
display: grid;
grid-template-columns: auto auto;
height: 50px;
}
#nav1 ul, #nav2 ul {
display: grid;
grid-gap: 20px;
grid-auto-columns: minmax(min-contant, max-content);
grid-auto-flow: column;
height: 100%;
align-items: center;
list-style: none;
}
#nav1 ul {
padding-left: 20px;
justify-content: left;
}
#nav2 ul {
padding-right: 20px;
justify-content: right;
}
#head {
padding: 50px 20px 0 20px;
}
<html>
<head></head>
<body>
<div id="main">
<div id="navbar">
<div id="nav1">
<ul>
<li>How it works</li>
<li>Why Company?</li>
<li>Pricing</li>
<li>About us</li>
<li>Resource center</li>
</ul>
</div>
<div id="nav2">
<ul>
<li>Get stated</li>
<li>Log in</li>
</ul>
</div>
</div>
</div>
</body>
</html>
I need to align logo to left and navigation to right and the text in logo and navigation must be aligned bottom of the logo-nav div.
Note: Without flex box
.logo {
float: left;
}
.navigation {
float: right;
}
.clear {
clear: both;
}
<div class="logo-nav">
<div class="logo">Partners</div>
<div class="navigation">
<ul class="nav-ul">
<li class="nav-li">OUR SPIRIT</li>
<li class="nav-li">OUR OFFER</li>
<li class="nav-li">OUR VISIONARY</li>
<li class="nav-li">CONTACT</li>
</ul>
</div>
<div class="clear"></div>
</div>
You can use Flexbox for this. You just need to set margin-left: auto on navigation and align-items: flex-end for vertical-align.
.logo img {
vertical-align: top;
}
.logo-nav, .nav-ul {
display: flex;
align-items: flex-end;
list-style: none;
margin: 0;
}
.navigation {
margin-left: auto;
}
<div class="logo-nav">
<div class="logo"><img src="http://placehold.it/100x50"></div>
<div class="navigation">
<ul class="nav-ul">
<li class="nav-li">OUR SPIRIT</li>
<li class="nav-li">OUR OFFER</li>
<li class="nav-li">OUR VISIONARY</li>
<li class="nav-li">CONTACT</li>
</ul>
</div>
<div class="clear"></div>
</div>
You can also use CSS tables.
.logo img {
vertical-align: top;
}
.logo-nav {
display: table;
width: 100%;
border-bottom: 1px solid black;
}
ul {
margin: 0;
}
.logo,
.navigation {
display: table-cell;
vertical-align: bottom;
}
.navigation {
text-align: right;
}
li {
display: inline-block;
}
<div class="logo-nav">
<div class="logo">
<img src="http://placehold.it/100x50">
</div>
<div class="navigation">
<ul class="nav-ul">
<li class="nav-li">OUR SPIRIT</li>
<li class="nav-li">OUR OFFER</li>
<li class="nav-li">OUR VISIONARY</li>
<li class="nav-li">CONTACT</li>
</ul>
</div>
<div class="clear"></div>
</div>
.logo-nav{
height:40px;
border-bottom:1px solid black;
width:100%;
margin:0;
padding:0;
}
.navigation{
float:right;
margin:0;
padding:0;
height:100%;
}
.navigation ul{
margin:0;
padding:0;
height:100%;
}
.navigation ul li{
margin:0;
padding:0;
float:left;
margin:0 5px;
list-style-type:none;
display:flex;
align-items:flex-end;
height:100%;
}
.logo{
float:left;
margin:0;
padding:0;
height:100%;
display:flex;
align-items:flex-end;
}
<div class="logo-nav">
<div class="logo">+CoPartners</div>
<div class="navigation">
<ul class="nav-ul">
<li class="nav-li">OUR SPIRIT</li>
<li class="nav-li">OUR OFFER</li>
<li class="nav-li">OUR VISIONARY</li>
<li class="nav-li">CONTACT</li>
</ul>
</div>
<div class="clear"></div>
</div>
Add the following css
.nav-ul li{float:left; list-style:none;padding:0 5px;}
.nav-ul{padding:0;margin:0;}
Since this is not possible with floats, you can use display: inline-block instead. It works like a poor man's flex.
.logo-nav {
text-align: justify;
}
.logo-nav::after {
/* you can omit this by using `text-align-last` */
content: '';
width: 100%;
display: inline-block;
}
.logo {
display: inline-block;
vertical-align: middle;
text-align: left;
width: 50%;
}
.navigation {
display: inline-block;
vertical-align: bottom;
text-align: right;
width: 50%;
}
.clear {
/* this element is obsolete now */
}
Note: there must be no space between .logoand .navigation in your markup.
Are you allowed to use position absolute?
li{
float: left;
padding: 0 5px;
}
ul{
list-style: none;
position: absolute;
right: 0;
margin: 0;
bottom: 0;
}
img{
display: block;
}
.logo{
float: left;
}
.logo-nav{
background: lightblue;
position: relative;
}
.logo-nav:after{
display: block;
clear: both;
content: "";
}
<div class="logo-nav">
<div class="logo"><img src="http://placehold.it/100x50"></div>
<div class="navigation">
<ul class="nav-ul">
<li class="nav-li">OUR SPIRIT</li>
<li class="nav-li">OUR OFFER</li>
<li class="nav-li">OUR VISIONARY</li>
<li class="nav-li">CONTACT</li>
</ul>
</div>
<div class="clear"></div>
</div>
i was wondering if any of you could help me out, i have started to create a drop down menu for my blog it was going well in my perspective until i realized that the dropdown menu would disapear once i hovered over it with my cursor, the link is fine, but when i hover my cursor over the dropdown menu it disappears.
Source Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Yeti™</title>
<link rel="stylesheet" href="main.css" />
<style type="text/css">
body
{
background-image:url(img.jpg);
background-repeat:no-repeat;
}
a:link{color:yellow;
text-decoration:none;}
a:visited{color:yellow;}
a:hover{background-color:none;
color:green;
text-decoration:bold;
text-decoration:underline;
font-weight:bold;}
#footer {position: absolute;
width: 1500px;
height: 80px;
bottom: 1px;
left: 0px;}
#main {position: absolute;
width: 600px;
height: 200px;
top: 160px;
left: 0px;}
</style>
</head>
<ul id="nav">
<div id="Title">
<p> Yeti Corporation™ </p>
--------------------------------------------------> ( This is the drop down menu )--------
<div id="wrapper">
<div id="navMenu">
<ul>
<li>top
<ul>
<li>Recipes</li>
<li>Recipes</li>
<li>Recipes</li>
</ul>
</li>
</ul>
<ul>
<li>top
<ul>
<li>Recipes</li>
<li>Recipes</li>
<li>Recipes</li>
</ul>
</li>
</ul>
<ul>
<li>top
<ul>
<li>Recipes</li>
<li>Recipes</li>
<li>Recipes</li>
</ul>
</li>
</ul>
<ul>
<li>top
<ul>
<li>Recipes</li>
<li>Recipes</li>
<li>Recipes</li>
</ul>
</li>
</ul>
<ul>
<li>top
<ul>
<li>Recipes</li>
<li>Recipes</li>
<li>Recipes</li>
</ul>
</li>
</ul>
<ul>
<li>top
<ul>
<li>Recipes</li>
<li>Recipes</li>
<li>Recipes</li>
</ul>
</li>
</ul>
--------------------------------------------------> ( This is the drop down menu )--------
</div>
<body>
<div id="video">
<video src="csgo.mp4" width="540" height="380" poster="csgo.jpg" controls></video>
</div>
<div id="main">
<div id="yeti">
<p> <div id="play">
</div></P>
</div>
<p>There is never enough to what you can do with programming</p>
<p> a Small Indie Development company Consisting of 4 people that works on Video games and Websites, as well as many other project we hope to get to in the future. Originally we where two separate companies, but when we realised the potential we had together we decided to merge to create Yeti Corp™.
If you are interested in Hiring a web developer go to the web development page. If you want to check up on the newest games and software updates, go to the game development page. a Small Indie Development company Consisting of 4 people that works on Video games and Websites, as well as many other project we hope to get to in the future. Originally we where two separate companies, but when we realised the potential we had together we decided to merge to create Yeti Corp™.
If you are interested in Hiring a web developer go to the web development page. If you want to check up on the newest games and software updates, go to the game development page. </p>
</div>
</div>
<div id="footer">
<a href="#" />Contact Us|</a>
<a href="#" />Web Dev|</a>
<a href="#" />Game Dev|</a>
<a href="#" />Graphic Designer|</a>
<a href="#" />Twitter Page|</a>
<a href="#" />FaceBook Page|</a>
<a href="#" />Gmail Page</a>
<p> All Rights Reserver Yeti LTD. 2014 Created by Head Web Developer, Hamza Issa</P>
</div>
</body>
</html>
CSS:
#body{
background: white;
}
#wrapper{
font:20px Tahoma;
}
--------------------------------------------------> ( This is the drop down menu )--------
#navMenu{
margin:0;
padding:30;
}
#navMenu ul {
margin:0;
padding:0;
line-height:30px;
}
#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#999;
}
#navMenu li ul a {
text-align:center;
text-decoration:none;
font:20px Tahoma;
height:30px;
width:130px;
display:block;
color: blue;
border:1px solid black;
}
#navMenu ul ul {
position:absolute;
visibility:hidden;
top:30px;
}
#navMenu ul li:hover ul {
display: block;
visibility:visible;
display: block;
}
--------------------------------------------------> ( This is the drop down menu )--------
#Title{
font: 30px Candara;
-webkit-box-shadow:rgba(110,110,110,.4) 10px 10px 10px;
padding-top: 5px;
padding-left: 100px;
color: orange;
}
#Search{
margin-left: 200px;
padding-bottom: 10px;
}
#Links{
padding-left: 400px;
font: bold 20px Tahoma;
padding-bottom: 30px;
}
#Links a:hover{
color: green;
}
#sign{
color: white;
font:20px Tahoma ;
padding-right: 100px;
padding-top: px;
}
#Sign_up{
padding-left: 400px;
padding-bottom: 200px;
}
#main{
font: 14px Courier ;
color: white;
width: 650px;
padding-left: 100px;
}
#yeti{
font: 45px Candara ;
}
#footer{
background: #E6EAEE;
color: black;
font: 20px impact;
text-align: center;
padding-bottom: 20px;
padding-right: 60px;
width: 1300px;
}
#video{
padding-left: 850px;
padding-top: 50px;
}
So I made a simplified version of your code (In the future you should do this first) and was able to narrow down the problem. The positioning of your #main section is messing with the drop downs and it appears on top of them. So the simple thing I did was add z-index to the drop downs
#navMenu ul li ul {
position:absolute;
visibility:hidden;
top:30px;
z-index: 1;
}
#navMenu ul li:hover ul {
// display: block;
visibility:visible;
// display: block;
}
a:link {
color:yellow;
text-decoration:none;
padding: 10px;
}
a:visited {
color:yellow;
}
a:hover {
background-color:none;
color:green;
text-decoration:bold;
text-decoration:underline;
font-weight:bold;
}
#Title {
font: 30px Candara;
-webkit-box-shadow:rgba(110, 110, 110, .4) 10px 10px 10px;
padding-top: 5px;
padding-left: 100px;
color: orange;
}
#wrapper {
font:20px Tahoma;
}
#navMenu {
margin:0;
padding:30;
}
#navMenu ul {
margin:0;
padding:0;
line-height:30px;
}
#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#999;
}
#navMenu li ul a {
text-align:center;
text-decoration:none;
font:20px Tahoma;
height:30px;
width:130px;
display:block;
color: blue;
border:1px solid black;
}
#navMenu ul li ul {
position:absolute;
visibility:hidden;
top:30px;
z-index: 1;
}
#navMenu ul li:hover ul {
visibility:visible;
}
#main {
font: 14px Courier;
color: red;
padding-left: 100px;
position: absolute;
width: 600px;
height: 200px;
top: 160px;
left: 0px;
}
<div id="Title">
<p>Yeti Corporation™</p>
<div id="wrapper">
<div id="navMenu">
<ul>
<li>top
<ul>
<li>Recipes</li>
<li>Recipes</li>
<li>Recipes</li>
</ul>
</li>
</ul>
<ul>
<li>top
<ul>
<li>Recipes</li>
<li>Recipes</li>
<li>Recipes</li>
</ul>
</li>
</ul>
</div>
<div id="main">
<p>There is never enough to what you can do with programming</p>
</div>
</div>
</div>
i created a navigation bar, and while hovering i made the font larger.
but when i hover the other menu items seem to move from its position , how do i lock them in their position. Also, just started html and css, if anyone would help me, thank you :)
html:
<div class="header">
<div class="container">
<div class="header-left">
<a href="index.php">
<img src="images/hawa.png" style="width:200px;height:60px;">
</a></div>
<div class="header-right">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact Us</li>
<li>Sign Up</li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
CSS:
.header{
background-color: #003399;
width: 100%;
height: 83px;
position: fixed;
}
.container{
width:1200px;
background-color:#003399;
margin:auto;
height:83px;
}
.header-left{
float:left;
padding: 10px;
}
.header-right{
float:right;
width:900px;
height:83px;
}
.header-right ul{
margin: 0;
padding: 0;
}
.header-right li{
list-style: none;
}
.header-right li a{
text-decoration: none;
float:left;
display: block;
padding: 35px;
color:#FFFFFF;
text-transform: uppercase;
font-size: 18px;
font-family: sans-serif;
}
.header-right li a:hover{
font-size: 20px;
display: block;
}
You can add a class on your list items and set the width for these items. For example:
html:
<ul>
<li class="nav-cells">Home</li>
<li class="nav-cells">About</li>
<li class="nav-cells">Services</li>
<li class="nav-cells">Contact Us</li>
<li class="nav-cells">Sign Up</li>
</ul>
css:
.nav-cells {
width: 100px;
display: inline;
}
Screenshot of the header that's needing this work:
As you can see, the menu is below the logo. I was wanting the menu beside it, to the right of the logo. I don't know if it's possible, but if it is, I could use some help, please.
Here's the code for everything, separated for your convenience.
The menu and logo in their divs:
<div id="wrapper">
<div id="body-wrapper">
<div class="head">
<div class="head-wrapper">
<div class="logo">
<img src="http://i.imgur.com/sDnntOE.png">
<ul>
<li>Home</li>
<li>About Us
<ul>
<li>The Team</li>
<li>History</li>
</ul>
</li>
<li>Products
<ul>
<li>Chaotix Browser</li>
<li>Useful Beta 1.7.5</li>
<li>Chaotix Cleaner 1.4</li>
<li>Forum</li>
<li>CDev</li>
<li>Infinite-PVP</li>
<li>Ulta-Craft</li>
</ul>
</li>
<li>Contact Us
<ul>
<li>E-Mail</li>
<li>News Letter</li>
<li>Social Mediar</li>
</ul>
</li>
<li>Divisions
<ul>
<li>Gaming</li>
<li>Films</li>
</ul>
</li>
<li>Chaotix! Forum</li>
<li>Partnerships
<ul>
<li>GameFanShop</li>
<li>Forumotion</li>
</ul>
</li>
</ul>
The CSS:
<style>
*{
background-image:url('http://i.imgur.com/0u7sBsT.png');
background-color:#999999;
font-family:Tahoma;color:white;
}
div.head{
text-align:Center;
padding-top:10px;
}
div.body{
padding-top:100px;
padding-left:300px;
padding-right:300px;
text-align:center;
}
div.logo{
float:left;
}
a{
color:white;
}
a:hover{
color:gray;
}
/* Main menu
------------------------------------------*/
ul{
font-family: Lato,Tahoma,Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
padding-left:25px;
}
ul li{
display: block;
position: relative;
float: left;
}
li ul{
display: none;
}
ul li a{
display: block;
text-decoration: none;
color: #FFFFFF;
border-top: 1px solid #000000;
padding: 5px 15px 5px 15px;
background: #000000;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover{
background: #999999;
}
li:hover ul{
display: block;
position: absolute;
}
li:hover li{
float: none;
font-size: 11px;
}
li:hover a{
background: #000000;
}
li:hover li a:hover{
background: #999999;
}
</style>
Add your css
.logo img
{
float:left;
}
.logo ul
{
float:left;
}
It working ok. Hope this help!