I have a quick question, can anyone help me out with making my menu look like the the on this website:
https://forums.digitalpoint.com/threads/please-help-with-css-navigation-overhang.2102229/
I have tried several things now and just can't seem to get it...
My current code is:
HTML:
<div class="navbar">
<ul>
<li>HOME</li>
<li>TREATMENTS</li>
<li>CONTACT</li>
<li>OTHER</li>
</ul>
</div>
CSS:
/*Content for Navigation Bar*/
.navbar {
width: 760px;
padding-left: 200px;
height: 50px;
background-color: #534b49;
text-align: center;
float: left;
font-size: 20px;
padding-top: 0px;
padding-bottom: 0px;
}
.navbar ul {
}
.navbar ul li {
list-style: none;
text-align: left;
}
.navbar li {
float: left;
padding-right: 15px;
}
.navbar li a {
color: #fff;
text-decoration: none;
}
.navbar li a:hover {
color: #00a6bd;
text-decoration: none;
}
.navbar li a#active {
color: #00a6bd;
text-decoration:none;
}
Thanks in advance!
Jock
Here is the latest code :
Html
<div>
<div class="navbar">
<div class="cornerl"></div>
<ul>
<li>HOME</li>
<li>TREATMENTS</li>
<li>CONTACT</li>
<li>OTHER</li>
</ul>
<div class="cornerr"></div>
</div>
<div class="strip" style="clear:both"> </div>
</div>
css
.navbar {
position: relative;
width: 760px;
padding-left: 200px;
height: 50px;
background-color: #004080;
text-align: center;
float: left;
font-size: 16px;
padding-top: 0px;
padding-bottom: 0px;
}
.navbar ul {
}
.navbar ul li {
list-style: none;
text-align: left;
}
.navbar li {
float: left;
}
.navbar li a {
padding:12px;
padding-bottom:15px;
color: #fff;
text-decoration: none;
}
.navbar li a:hover {
color: #00a6bd;
border-radius:3px;
text-decoration: none;
background:#ff7000;
color:#534b49;
}
.navbar li a#active {
color: #00a6bd;
text-decoration:none;
}
.strip{
background-color: #ff7000;
height: 3px;
width: 948px;
margin-left: 7px;
}
.cornerl{
border-color: transparent #FF7000 transparent transparent;
left: -10px;
}
.cornerl,.cornerr{
position: absolute;
bottom: -10px;
z-index: -1;
border-style: solid;
border-width: 10px;
}
.cornerr{
float:right;
right:-10px;
border-color: transparent transparent transparent #FF7000;
}
here is the live example
Related
I am very new to programming and am working on a website as a project for a class. I am attempting to create a drop down menu, but I continually run into an issue where my links in the drop down sub-menu are not taking up the full width I would like. See the pic below.
https://i.stack.imgur.com/u6koe.png
I would like the link and thus the hovered white background to extend the full width of the sub-menu but I cannot figure out how to make it work.
Here is my HTML:
<header id="mainheader">
<nav>
<ul id="menu">
<li>About Me</li>
<li>Creativity
<ul class="submenu">
<li>Skiing</li>
<li>Island</li>
<li>Cooking</li>
</ul>
</li>
<li>Revisions</li>
</ul>
</nav>
</header>
Here is my CSS:
body {
margin-top: 0px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin-left: auto;
margin-right: auto;
background-color: aquamarine;
}
#mainheader {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #818181;
text-align: center;
}
#menu {
padding: 0;
margin: 0;
}
#menu li {
display: inline-block;
list-style: none;
padding-top: 10px;
padding-bottom: 10px;
position: relative;
}
#menu li a {
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px 30px;
}
#menu li a:hover {
background-color: white;
color: black;
}
#menu li ul.submenu {
height: auto;
width: 133px;
background: #818181;
position: absolute;
display: none;
padding: 0;
margin-top: 10px;
}
#menu li:hover ul.submenu {
display: block;
}
#menu li ul.submenu li {
width: 133px;
}
#menu li ul.submenu li a {
text-decoration: none;
padding: 10px 0px;
}
Any assistance is appreciated.
Add display: inline-block; and width: 100%; to your #menu li ul.submenu li a css rule.
body {
margin-top: 0px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin-left: auto;
margin-right: auto;
background-color: aquamarine;
}
#mainheader {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #818181;
text-align: center;
}
#menu {
padding: 0;
margin: 0;
}
#menu li {
display: inline-block;
list-style: none;
padding-top: 10px;
padding-bottom: 10px;
position: relative;
}
#menu li a {
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px 30px;
}
#menu li a:hover {
background-color: white;
color: black;
}
#menu li ul.submenu {
height: auto;
width: 133px;
background: #818181;
position: absolute;
display: none;
padding: 0;
margin-top: 10px;
}
#menu li:hover ul.submenu {
display: block;
}
#menu li ul.submenu li {
width: 133px;
}
#menu li ul.submenu li a {
text-decoration: none;
padding: 10px 0px;
display: inline-block;
width: 100%;
}
<header id="mainheader">
<nav>
<ul id="menu">
<li>About Me</li>
<li>Creativity
<ul class="submenu">
<li>Skiing</li>
<li>Island</li>
<li>Cooking</li>
</ul>
</li>
<li>Revisions</li>
</ul>
</nav>
</header>
This is how page looks:
First problem, that
If you look closer at this, it's a bit transparent, we can see div main behind this ul inside ul.
Second if we zoom the browser up... this happens
I would like this text no nowrap, just 3 and 4 li element won't fit in this zoomed screen and we won't see this.
And for last
I would like main to fit the rest of the screen we got (at least the rest, until there is no content that goes in width or height more)
To look like this:
Just main to at Minimum fill rest of the free space on website, and I don't want to do it by whole body background color declaration.
Whole code:
html:
<body>
<div id="header">
<ul>
<li>Nazwa Strony</li>
<li>0 Komentarze do moderacji</li>
<li>Dodaj nowy
<ul>
<li>Post</li>
<li>Stronę</li>
<li>Media</li>
</ul>
</li>
<li>Usuń cały cache</li>
</ul>
</div>
<div class="clear"></div>
<div id="aside">
<ul>
<li>Deszbord</li>
<li>Posty</li>
<li>Strony</li>
<li>Media</li>
<li>Wygląd</li>
<li>Użytkownicy</li>
<li>Ustawienia</li>
</ul>
</div>
<div class="clear"></div>
<div id="main">
asdasdasd
</div>
</body>
#header {
position: fixed;
top: 0;
height: 20px;
width: 100%;
background-color: #23282d;
padding: 10px 0px;
z-index: 100;
}
#header a {
color: #ccc;
text-decoration: none;
}
#header ul, #header ul li ul{
list-style: none;
margin: 0px;
}
#header ul li {
float: left;
margin-right: 70px;
}
#header ul li ul {
padding: 0px;
text-align: center;
display: none;
border: 1px solid #FFF;
background-color: #EEE;
border-radius: 2px;
margin-top: 5px;
}
#header ul li ul a {
color: #000;
}
#header ul > li:hover > ul {
display: block;
}
#header ul li ul li {
float: none;
margin: 0px;
margin-top: 15px;
margin-bottom: 15px;
}
#aside {
left: 0;
position: fixed;
width: 170px;
height: 100%;
top: 40px;
background-color: #323435;
border-top: 2px dotted #333;
}
#aside ul {
list-style: none;
padding-left: 10px;
}
#aside ul li {
margin-bottom: 15px;
}
#aside ul li a {
color: #ccc;
text-decoration: none;
}
#header a:hover, #aside a:hover{
color: #2295cc;
}
#main {
background-color: #f1f1f1;
width: 100%;
height: 100%;
position: relative;
top: 40px;
left: 170px;
}
.clear {
clear: both;
}
#header {
position: fixed;
top: 0;
height: 20px;
width: 100%;
background-color: #23282d;
padding: 10px 0px;
z-index: 100;
}
#header a {
color: #ccc;
text-decoration: none;
}
#header ul, #header ul li ul{
list-style: none;
margin: 0px;
}
#header ul li {
float: left;
margin-right: 70px;
}
#header ul li ul {
padding: 0px;
text-align: center;
display: none;
border: 1px solid #FFF;
background-color: #EEE;
border-radius: 2px;
margin-top: 5px;
}
#header ul li ul a {
color: #000;
}
#header ul > li:hover > ul {
display: block;
}
#header ul li ul li {
float: none;
margin: 0px;
margin-top: 15px;
margin-bottom: 15px;
}
#aside {
left: 0;
position: fixed;
width: 170px;
height: 100%;
top: 40px;
background-color: #323435;
border-top: 2px dotted #333;
}
#aside ul {
list-style: none;
padding-left: 10px;
}
#aside ul li {
margin-bottom: 15px;
}
#aside ul li a {
color: #ccc;
text-decoration: none;
}
#header a:hover, #aside a:hover{
color: #2295cc;
}
#main {
background-color: #f1f1f1;
width: 100%;
height: 100%;
position: relative;
top: 40px;
left: 170px;
}
.clear {
clear: both;
}
<body>
<div id="header">
<ul>
<li>Nazwa Strony</li>
<li>0 Komentarze do moderacji</li>
<li>Dodaj nowy
<ul>
<li>Post</li>
<li>Stronę</li>
<li>Media</li>
</ul>
</li>
<li>Usuń cały cache</li>
</ul>
</div>
<div class="clear"></div>
<div id="aside">
<ul>
<li>Deszbord</li>
<li>Posty</li>
<li>Strony</li>
<li>Media</li>
<li>Wygląd</li>
<li>Użytkownicy</li>
<li>Ustawienia</li>
</ul>
</div>
<div class="clear"></div>
<div id="main">
asdasdasd
</div>
</body>
body {
margin: auto;
max-width: 98%;
overflow-y: scroll;
}
div {
border-radius: 5px;
}
span {
font-weight:bold;
}
#header {
position: absolute;
z-index: 1;
background-color: orange;
height: 70px;
width: 98%;
margin-top: -10px;
margin-bottom: 10px;
}
#name {
float:left;
margin-left: 400px;
margin-top: 10px;
padding-top: 1px;
font-size: 20px;
font-family: Verdana, sans-serif;
color: brown;
}
#contact {
position: absolute;
margin-left: 250px;
margin-top: 30px;
padding-top: -1px;
font-family: Verdana, sans-serif;
color: brown;
}
#email {
position: absolute;
margin-left: 360px;
margin-top: 45px;
padding-top: 1px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: brown;
}
a:hover {
font-weight: bold;
}
a,visited {
color: black;
}
#nav {
position: relative;
background-color: brown;
float: left;
width: 11%;
height: 820px;
margin-top: 70px;
margin-bottom: 10px;
}
#nav_wrapper {
width: 900px;
margin: 0px auto;
text-align: left;
}
#nav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
position: relative;
}
#nav ul li {
display: block;
}
#nav ul li:hover {
background-color: #333;
width: 219px;
}
#nav ul a,visited {
color: #ccc;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul a:hover {
color: #099;
text-decoration: none;
padding: auto;
}
#nav ul li:hover ul {
display: block;
width: 219px;
}
#nav ul ul {
display: none;
position: absolute;
}
#nav ul ul li {
display: block;
padding: 25.5px;
background-color: #222;
}
#nav ul ul li:hover {
color: #099;
width: 168px;
}
#nav ul ul li,visited {
color: #ccc;
}
ul .sub_navi {
display: none;
}
li:hover .sub_navi {
background: #999;
border: #fff solid;
border-width: 1px;
display: block;
position: absolute;
left: 220px;
top: 4px;
}
.right {
position: static;
background-color: linen;
float: right;
width: 88%;
height: 820px;
margin-top: 70px;
margin-bottom: 10px;
padding: 5px;
}
h4 {
margin-left: 5px;
margin-bottom: 15px;
font-family: Verdana, sans-serif;
text-decoration: underline;
}
.right p {
margin-left: 5px;
margin-right: 5px;
margin-top: -10px;
font-family: Garamond, serif;
color: #000000;
}
#company {
font-family: Garamond, serif;
}
#position {
font-style: italic
}
li {
list-style-type: square;
}
#footer {
height: 40px;
width: 100%;
background-color: orange;
position: relative;
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<title></title>
</head>
<body>
<div id=header>
<p id="name">Henry jones</p>
</div>
<div id="nav">
<div id="nav_wrapper">
<ul>
<li>Home</li>
<li>About Me
<ul>
<li>Board Games
<ul class="sub_navi">
<li>Cosmic Encounter</li>
<li>Agricola</li>
<li>Trajan</li>
</ul>
</li>
<li>League of Legends</li>
<li>Sports</li>
</ul>
</li>
<li>Travels
<ul>
<li>Paris</li>
<li>Turks and Caicos</li>
<li>Puerto Rico</li>
<li>Chicago</li>
</ul>
</li>
</li>
<li>Resume</li>
<li>Contact
<ul>
<li>Phone</li>
<li>Email</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="right">
<h4>Welcome</h4>
<p><img src="https://pbs.twimg.com/media/CAY3PIpXEAAkO75.png"></a>
</p>
I have created the drop down menu but I am having some trouble. Please help me with this html. The problem is when I hover my cursor next to the navi bar I, the navigation bar keeps "blinking". I would like some assistant on how to code this more efficiently. Also, where do i put display:none to make the board game sub navi disappear when highlight something else. Thank you.
Try to use width: 100%; for #nav_wrapper. This will solve the problem.
I finally fixed it!
nav ul li {display: block;}
changed to
nav ul li {Visibility: hidden;}
and
nav ul li:hover ul {display: block;width: 219px;}
changed to
nav ul li:hover > ul {Visibility: visible;width: 219px;}
This is my nav bar with a drop down menu below some. Book goes below Departments, I have a lot more but this is an example. When I hover over more options, it loses focus on the nav bar and shows the on hover discription for an image. how do i stop this?
<div class="NavBar">
<div align="center">
<ul>
<li>Home</li>
<li>Departments
<ul class="MiniNavBar">
<li>Books</li>
<li>Books</li>
<li>Books</li>
<li>Books</li>
</ul></li>
<li>Top Brands</li>
<li>Gallery</li>
<li>About Us</li>
</ul>
</div>
</div>
My CSS
.NavBar{
background-color: #C10000;
height: auto;
width: 430px;
border: thin solid #000000;
border-radius: 5px;
margin-top: 8px;
}
.MiniNavBar{
width: 97px;
}
.NavBar ul ul {
display: none;
}
.NavBar ul li:hover > ul {
display: block;
font-family: Calibri;
font-size: 10px;
}
.NavBar ul {
padding: 2px;
list-style: none;
position: relative;
display: inline-block;
font-family: Calibri;
font-size: 15px;
}
.NavBar ul li {
float: left;
}
.NavBar ul li:hover {
background-color: #C10000;
color: #FFDD00;
}
.NavBar ul li:hover a {
background-color: #000000;
color: #FFDD00;
}
.NavBar ul li a {
display: block;
padding: 10px 10px;
background-color: #C10000;
color: #FFDD00;
text-decoration: none;
}
.NavBar ul ul {
position: absolute;
}
.NavBar ul ul li {
float: none;
margin-top: 0px;
position: relative;
}
.NavBar ul ul li a {
padding: 15px 40px;
background-color: #C10000;
color: #FFFFFF;
}
.NavBar ul ul li a:hover {
background-color: #C10000;
color: #FFFFFF;
}
.NavBar ul ul ul {
position: absolute;
left: 100%;
top:0;
}
I got a major problem, that I don't seem to solve. I'm trying to get a logo (text) and a navbar (text) to align horizontally, but when that's completed, it seems like it doesn't align so, that the navbar stays at the same line as the logo.
Can anyone help me?
#navbar {
width: 100%;
margin: 0px auto;
}
#logo {
width: 40%;
float: left;
margin: 0px;
padding: 0px;
}
#navbar-links {
width: 40%;
float: right;
margin: 0px;
padding: 0px;
list-style: none;
}
#navbar-links ul {
width: 40%;
padding: 8px 0px;
margin: 0px;
float: right;
}
#navbar-links li {
display: inline;
padding: 0px;
}
#navbar-links li a:link {
color: #000000;
text-decoration: none;
}
#navbar-links li a:visited {
color: #000000;
text-decoration: none;
}
#navbar-links li a:hover {
color: #c3c3c3;
text-decoration: none;
}
#navbar-links li a:active {
color: #c3c3c3;
text-decoration: none;
}
<div id="navbar">
<div id="Logo">
<h1>NUMBERS</h1>
</div>
<div id="navbar-links">
<ul>
<li>Home
</li>
<li>Two
</li>
<li>Three
</li>
</ul>
</div>
</div>
Reposition the #navbar-links before #Logo:
#navbar {
width: 100%;
margin: 0px auto;
}
#logo {
width: 40%;
float: left;
margin: 0px;
padding: 0px;
}
#navbar-links {
width: 40%;
float: right;
margin: 0px;
padding: 0px;
list-style: none;
}
#navbar-links ul {
width: 40%;
padding: 8px 0px;
margin: 0px;
float: right;
}
#navbar-links li {
display: inline;
padding: 0px;
}
#navbar-links li a:link {
color: #000000;
text-decoration: none;
}
#navbar-links li a:visited {
color: #000000;
text-decoration: none;
}
#navbar-links li a:hover {
color: #c3c3c3;
text-decoration: none;
}
#navbar-links li a:active {
color: #c3c3c3;
text-decoration: none;
}
<div id="navbar">
<div id="navbar-links">
<ul>
<li>Home
</li>
<li>Two
</li>
<li>Three
</li>
</ul>
</div>
<div id="Logo">
<h1>NUMBERS</h1>
</div>
</div>
Don't use float for the layout, then you can simply use the vertical-align property.
#logo,
#navbar-links {
display: inline-block;
margin-right: -.25em // If you are not compressing html
vertical-align: middle;
width: 50%; //adjust to taste.
}
#navbar-links {
text-align: right;
}
The issue you are facing is very simple one ...
you had id in the HTML as "Logo" and in css it is "logo".
So because of the case sensitivity, browser is not connecting the CSS to HTML.
#Logo { //Its case sensitive so not "logo"
width: 40%;
float: left;
margin: 0px;
padding: 0px;
}
You can refer this link for the code correction