How can i center the float element that you can see in this photo? I want to bring it from the left of the web page to the middle, but keeping it at the top of the page?
Here is the code of the HTML:
<html>
<head>
<title>Batch File Generator | Home</title>
</head>
<link href="style.css" rel="stylesheet" >
<ul>
<li><a>Home</a></li>
<li><a>Download</a>
<ul>
<li>32-bit version</li>
<li>64-bit version</li>
</ul>
</li>
<li><a>Discussion</a>
<ul>
<li><a>Community forums</li></a>
<li><a>Ask the developers</li></a>
</ul>
</li>
<li><a>News</a></li>
</ul>
</html>
And here is the code of the CSS:
body{
background: url("background.jpg") no-repeat;
background-size: cover;
font-family: Arial;
color: white;
}
ul{
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
For HTML Code, use this:
<div class="wrapper">
<div class="middle-content">
<ul>
<li><a>Home</a></li>
<li><a>Download</a>
<ul>
<li>32-bit version</li>
<li>64-bit version</li>
</ul>
</li>
<li><a>Discussion</a>
<ul>
<li><a>Community forums</a></li>
<li><a>Ask the developers</a></li>
</ul>
</li>
<li><a>News</a></li>
</ul>
</div>
</div>
For css code:
html{
height: 100%;
}
body{
background: url("background.jpg") no-repeat;
background-size: cover;
font-family: Arial;
color: white;
height: 100%;
}
.wrapper{
display: table;
width: 100%;
height: 100%;
}
.middle-content{
display: table-cell;
vertical-align:middle;
width: 100%;
}
ul{
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
Solution with flexbox.
* {
box-sizing: border-box;
}
html,
body,
ul {
padding: 0;
margin: 0;
}
nav {
width: 100%;
background-color: darkgray;
}
li {
list-style: none;
padding: 15px;
border: thin solid lightgray;
position: relative;
background-color: white;
}
li>a {
display: inline-block;
text-decoration: none;
}
.main-menu {
display: flex;
justify-content: center;
}
.sub-menu {
display: none;
position: absolute;
left: 0px;
width: 100%;
margin-top: 15px;
}
.main-menu li:hover {
background-color: lightgreen;
}
.sub-menu li:hover {
background-color: lightblue;
}
.main-menu li:hover>.sub-menu {
display: block;
}
<nav>
<ul class="main-menu">
<li><a>Home</a></li>
<li><a>Download</a>
<ul class="sub-menu">
<li>32-bit version</li>
<li>64-bit version</li>
</ul>
</li>
<li><a>Discussion</a>
<ul class="sub-menu">
<li>Community forums</li>
<li>Ask the developers</li>
</ul>
</li>
<li><a>News</a></li>
</ul>
</nav>
Related
i'm new with css. i'm trying to make a navigation menu with sub items, but i think i'm missing something. the sub items are over lapping with the main items.
so the way i see it that the top list items are floated so are removed from the normal content flow. Which means i need to clear the float after so that the sub items display under the main items.
But its not working for me..Any ideas
https://jsfiddle.net/madubuko/szqk5be9/
<body>
<div id="container">
<nav>
<ul>
<li>Home</li>
<li>
News
<ul>
<li><a>Football News</a></li>
<li><a>Team News</a></li>
<li><a>Players News</a></li>
<li><a>Other News</a></li>
</ul>
</li>
<li>Contact</li>
<li>About us</li>
</ul>
</nav>
</div>
</body>
Please Replace this code with your old code :
* {
padding: 0px;
margin: 0px;
}
body {
background-image: url("../images/background.jpeg");
}
#container {
width: 100%;
}
nav {}
#container nav ul {
list-style: none;
}
#container nav ul li {
float: left;
width: 100px;
height: 40px;
color: white;
background-color: black;
text-align: center;
border-right: solid #fff 1px;
border-bottom: solid #fff 1px;
padding-top: 7px;
opacity: 0.8;
position: relative;
}
#container nav ul li a {
color: white;
text-decoration: none;
display: block;
}
#container nav ul li ul li {
clear: both;
}
#container nav ul li ul {
position: absolute;
top: 100%;
display: none;
}
#container nav ul li:hover ul{
display:block;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/corecss.css" type="text/css">
</head>
<body>
<div id="container">
<nav>
<ul>
<li>Home</li>
<li>
News
<ul>
<li><a>Football News</a></li>
<li><a>Team News</a></li>
<li><a>Players News</a></li>
<li><a>Other News</a></li>
</ul>
</li>
<li>Contact</li>
<li>About us</li>
</ul>
</nav>
</div>
</body>
</html>
Add Some CSS
#container nav ul li {
float: left;
width: 100px;
height: 40px;
color: white;
background-color: black;
text-align: center;
border-right: solid #fff 1px;
border-bottom: solid #fff 1px;
padding-top: 7px;
opacity: 0.8;
position: relative;/*Add This Property*/
}
#container nav ul li ul {
position: absolute;
top: 100%;
display: none;
}
#container nav ul li:hover ul{
display:block;
}
https://jsfiddle.net/szqk5be9/2/
You can set it using position, check updated snippet below
* {
padding: 0px;
margin: 0px;
}
body {
background-image: url("../images/background.jpeg");
}
#container {
width: 100%;
}
nav {}
#container nav ul {
list-style: none;
}
#container nav ul li {
float: left;
width: 100px;
color: white;
background-color: black;
text-align: center;
border-right: solid #fff 1px;
border-bottom: solid #fff 1px;
padding: 7px 5px;
opacity: 0.8;
position: relative;
}
#container nav ul li a {
color: white;
text-decoration: none;
display: block;
}
#container nav ul li ul li {
clear: both;
}
#container nav ul li ul {
position: absolute;
top: 100%;
display: none;
}
#container nav ul li:hover ul{
display:block;
}
<div id="container">
<nav>
<ul>
<li>Home</li>
<li>
News
<ul>
<li><a>Football News</a></li>
<li><a>Team News</a></li>
<li><a>Players News</a></li>
<li><a>Other News</a></li>
</ul>
</li>
<li>Contact</li>
<li>About us</li>
</ul>
</nav>
</div>
You can select only the first ul with direct children selector >, then it works.
#container nav > ul li {
float: left;
width: 100px;
height: 40px;
color: white;
background-color: black;
text-align: center;
border-right: solid #fff 1px;
border-bottom: solid #fff 1px;
line-height: 40px;
opacity: 0.8;
}
I'm trying to create a navbar that has my page links centered in the middle with a logo aligned to the left side and another link aligned to the right side. With my current setup, what would I have to do to create that?
#trans-nav {
list-style-type: none;
height: 40px;
padding: 0;
margin: 0;
}
#trans-nav {
list-style-type: none;
height: 40px;
padding: 0;
margin: 0;
}
#trans-nav li {
float: left;
position: relative;
padding: 0;
line-height: 40px;
background: #666 url(nav-bg.png) repeat-x 0 0;
}
#trans-nav li:hover {
background-position: 0 -40px;
}
#trans-nav li a {
display: block;
padding: 0 15px;
color: #fff;
text-decoration: none;
}
#trans-nav li a:hover {
color: #0F0
}
#trans-nav li ul {
opacity: 0;
position: absolute;
left: 0;
width: 8em;
background: #63867f;
list-style-type: none;
padding: 0;
margin: 0;
}
#trans-nav li:hover ul {
opacity: 1;
}
#trans-nav li ul li {
float: none;
position: static;
height: 0;
line-height: 0;
background: none;
}
#trans-nav li:hover ul li {
height: 30px;
line-height: 30px;
}
#trans-nav li ul li a {
background: #666
}
#trans-nav li ul li a:hover {
background: #666
}
#trans-nav {
background-color: #666;
}
<ul id="trans-nav">
<li>Home
</li>
<li>About
</li>
<li>Products
<ul>
<li>Widgets
</li>
<li>Thingamabobs
</li>
<li>Doohickies
</li>
</ul>
</li>
<li>Contact
</li>
<li>Info
</li>
</ul>
I created a simple example of what you're looking for. Maybe take some pointers from it.
HTML
<header>
<div class="logo">
<span>Logo</span>
</div>
<nav class="nav">
<ul>
<li>Link One</li>
<li>Link Two</li>
<li>Link Three</li>
</ul>
</nav>
<div class="other">
Link
</div>
</header>
CSS
header {}
a {
color: #FFF;
}
.logo,
.nav,
.other {
float: left;
min-height: 50px;
color: #FFF;
}
.logo {
width: 25%;
background: #333;
}
.logo span {
display: inline-block;
padding: 1em;
}
.nav {
width: 50%;
background: #666;
}
.nav ul {
margin: 0;
padding: 0;
}
.nav ul li {
display: inline-block;
padding: 1em;
}
.other {
width: 25%;
background: #999;
}
.other a {
display: inline-block;
padding: 1em;
}
#media (max-width: 640px) {
.logo, .nav, .other {
clear: both;
width: 100%;
}
.nav ul li {
display: block;
}
}
JSFiddle example
I am new in CSS and developing a dropdown menu. But when I add drop down list into main list it floats left. But I want float towards bottom Like thisCan anyone please help me that how to make list which drops Down
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body
{
margin: 0;}
#Header
{
position: fixed;
border: 1px solid black;
width: 100%;
height: 150px;
margin: 0%;
}
#logo
{
position: absolute;
border: 1px solid black;
width: 20%;
height: 150px;
margin: 0%;
}
#nav
{
position: absolute;
border: 1px solid black;
width: 79.5%;
height: 50px;
top: 65%;
margin-left: 20.2%;
background: transparent;
}
#nav ul
{
margin: 0;
padding: 0;
}
#nav ul li
{
list-style: none;
position:relative;
float: left;
margin:5px;
}
#nav ul li a{
text-decoration: none;
display: block;
padding: 10px 20px;
color: black;
font-size: 120%;
}
a:hover {
background: gray;
color:white;
height: 30px;
}
#subList
{
margin: 0;
padding: 0;
}
#subList li
{
list-style: none;
position:absolute;
margin:5px;
}
/* #nav ul li ul
{
display: block;
margin: 0px;
padding: 0px;
}
#nav ul li ul li
{
list-style: none;
position:relative;
float: bottom;
}
#nav ul li ul li a
{
position:absolute;
dispay:block;
color: black;
font-size: 120%;
}
/* #nav ul li:hover>ul
{
display: block;
}
*/
</style>
</head>
<body>
<div id="Header">
<div id="logo"></div>
<div id="nav">
<ul>
<li>Home</li>
<li>News
<ul id="subList">
<li>news1</li>
<li>news2</li>
<li>news3</li>
<li>news4</li>
</ul>
</li>
<li>About us</li>
<li>Sign in</li>
</ul>
</div>
</div>
</body>
</html>
You need to define specificity for direct child of nav. In your case this is setting all the ul li to float left.
try this.
#nav > ul > li
{
list-style: none;
position:relative;
float: left;
margin:5px;
}
Hope this help you!
This should get you started.
#nav {
border: 1px solid black;
width: 79.5%;
height: 50px;
top: 65%;
margin-left: 20.2%;
background: transparent;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav ul li {
list-style: none;
position: relative;
float: left;
margin: 5px;
}
#nav ul li a {
text-decoration: none;
display: block;
padding: 10px 20px;
color: black;
font-size: 120%;
}
a:hover {
background: gray;
color: white;
}
#subList {
margin: 0;
padding: 0;
position: absolute;
display: none;
background: #fff;
border: 1px solid #000;
}
#subList li {
list-style: none;
margin: 5px;
}
#nav ul li:hover > #subList {
display: block;
left: 0;
}
<div id="nav">
<ul>
<li>Home
</li>
<li>News
<ul id="subList">
<li>news1
</li>
<li>news2
</li>
<li>news3
</li>
<li>news4
</li>
</ul>
</li>
<li>About us
</li>
<li>Sign in
</li>
</ul>
</div>
I have a simple <nav> with an unordered list inside:
nav {
position: absolute;
right: 0px;
white-space: nowrap;
}
nav ul {
padding: 0;
margin: 0;
}
nav ul li {
clear: both;
white-space: nowrap;
color: white;
display: inline-block;
}
nav ul li a {
color: white;
background: black;
text-decoration: none;
text-align: center;
font-family: statellite;
padding-left: 25px;
padding-right: 25px;
height: 37px;
margin-left: -4px;
padding-top: 18px;
display: inline-block;
}
nav ul li a:hover {
background: #000;
}
nav li a:nth-child(1):hover {
background: red;
}
<nav>
<ul>
<li>HOME
</li>
<li>MUSIC
</li>
<li>LIVESTREAM
</li>
<li>LINKS
</li>
<li>ABOUT
</li>
</ul>
</nav>
I am trying to make a different color on hover for each child <a>
but instead it is selecting all of them (highlighting them red)
nav li a:nth-child(1):hover {
background: red;
}
What am I doing wrong?
All your A are the first element of their parent. You must apply the nth-child on the LI element, not on the A:
nav li:nth-child(1) a:hover {
background: red;
}
nav {
position: absolute;
right: 0px;
white-space: nowrap;
}
nav ul {
padding: 0;
margin: 0;
}
nav ul li {
clear: both;
white-space: nowrap;
color: white;
display: inline-block;
}
nav ul li a {
color: white;
background: black;
text-decoration: none;
text-align: center;
font-family: statellite;
padding-left: 25px;
padding-right: 25px;
height: 37px;
margin-left: -4px;
padding-top: 18px;
display: inline-block;
}
nav ul li a:hover {
background: #000;
}
nav li:nth-child(1) a:hover {
background: red;
}
nav li:nth-child(2) a:hover {
background: #555;
}
nav li:nth-child(3) a:hover {
background: green;
}
nav li:nth-child(4) a:hover {
background: blue;
}
<nav>
<ul>
<li>HOME
</li>
<li>MUSIC
</li>
<li>LIVESTREAM
</li>
<li>LINKS
</li>
<li>ABOUT
</li>
</ul>
</nav>
nav {
position: absolute;
right: 0px;
white-space: nowrap;
}
nav ul {
padding: 0;
margin: 0;
}
nav ul li {
clear: both;
white-space: nowrap;
color: white;
display: inline-block;
}
nav ul li a {
color: white;
background: black;
text-decoration: none;
text-align: center;
font-family: statellite;
padding-left: 25px;
padding-right: 25px;
height: 37px;
margin-left: -4px;
padding-top: 18px;
display: inline-block;
}
nav ul li a:hover {
background: #000;
}
nav li:nth-child(1) a:hover {
background: green;
}
nav li:nth-child(2) a:hover {
background: blue;
}
nav li:nth-child(3) a:hover {
background: pink;
}
<nav>
<ul>
<li>HOME
</li>
<li>MUSIC
</li>
<li>LIVESTREAM
</li>
<li>LINKS
</li>
<li>ABOUT
</li>
</ul>
</nav>
I'm having a bit of trouble turning my vertical sub menu into a horizontal one, everything I try seems to be incorrect or I end up changing the rest of the look of the main menu.
HTML
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li><a href='#'><span>WORK</span></a>
<ul>
<li class="services1">
PRINT
BRANDING
EDITORIAL
PHOTOGRAPHY
</ul>
</li>
<li>BLOG</li>
<li>INSPIRED</li>
<li>CONTACT</li>
</ul>
</nav>
Here is the CSS
nav {
height: 70px;
float: left;
font-size: 20px;
color: #00BCDC;
font-family: "geogtq md";
}
nav ul {
list-style-type: none;
color: #00BBE4;
font-family: "geogtq md";
float: left;
display:inline;
}
nav li {
float: left;
margin-right: 20px;
color: #00BBE4;
font-family: "geogtq md";
margin-left: auto;
display: inline;
}
a:link {
text-decoration: none;
color: #00C0EE;
font-family: "geogtq md";
}
a:visited {
text-decoration: none;
color: #00C0EE;
}
a:hover {
text-decoration: none;
color: #007889;
}
a:active {
text-decoration: none;
color: #00C0EE;
}
ul {
font-family: "geogtq md";
font-size: 20px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: inline;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
text-decoration: none;
margin-right:5px;
white-space: nowrap;
color:#066;
}
li:hover ul {
display: inline;
position: absolute;
}
li:hover li {
float: none;
font-size: 16px;
font-weight:bold;
margin-top:3px;
}
.services1 a {
color:#00C0EE;
float: left;
list-style-type: none;
display:inline;
}
http://jsfiddle.net/GMbCU/
Any help would be greatly appreciated as this has been going on for a while and would help with how things sit on my site, thanks
Just give the child UL enough width and place each link in its own LI. You already have them displaying inline.
http://jsfiddle.net/GMbCU/7
li ul {
width: 450px;
}
try this: http://jsfiddle.net/pzC2g/
<nav>
<ul class='root'>
<li>HOME</li>
<li>ABOUT</li>
<li><a href='#'><span>WORK</span></a>
<ul class='sub'>
<li>PRINT</li>
<li>BRANDING</li>
<li>EDITORIAL</li>
<li>PHOTOGRAPHY</li>
</ul>
</li>
<li>BLOG</li>
<li>INSPIRED</li>
<li>CONTACT</li>
</ul>
</nav>
and css
.root {
display: block;
}
.root li {
display: inline-block;
float: left;
margin-right: 20px;
}
.root li .sub {
display: none;
}
.root li:hover .sub {
display: block;
position: absolute;
}
.root li:hover .sub li {
display: inline-block;
float: left;
}
Updated the above with Styles, see link : http://jsfiddle.net/pzC2g/27/
Thanks Goldj for great support,
**
*, html{
margin: 0;
padding:0;
}
nav{
background-color: #222;
}
.wrapper{
margin: 0 auto;
padding: 0px;
max-width: 1150px;
min-height:100%;
}
.root {
display: block;
}
.root li {
padding:10px;
display: inline-block;
margin-right: 20px;
color: #fff;
}
.root li:hover{
background-color:#555;
}
.root li a{
display:block;
text-decoration:none;
color:inherit;
}
.root li a:hover{
display:block;
}
.root li .sub {
background-color: #fff;
border: 1px solid #222;
margin-top: 10px;
left:0;
width:99.9%;
display: none;
font-size:14px;
}
.root li:hover .sub {
display: block;
position: absolute;
}
.root li:hover .sub li {
color: #000;
display: inline-block;
float: left;
}
.root li .sub li:hover {
background-color: #222;
color: #fff;
}
<nav>
<div class="wrapper">
<ul class='root'>
<li>HOME</li>
<li>ABOUT</li>
<li><a href='#'><span>WORK</span></a>
<ul class='sub'>
<div class="wrapper">
<li>PRINT</li>
<li>BRANDING</li>
<li>EDITORIAL</li>
<li>PHOTOGRAPHY</li>
</div>
</ul>
</li>
<li>BLOG</li>
<li>INSPIRED</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
**