I have this HTML code:
<div id="navbar">
<ul>
<li>Home</li>
<li>Forum</li>
<li>Contact Us</li>
</ul>
</div>
CSS:
#navbar { position: relative; margin: 3px; }
#navbar ul { padding: 0; margin: auto; background: #f0f0f0 url(../images/1px.png) repeat-x 0 -441px; padding: 4px 0 4px 0; }
#navbar li { display: inline; margin-right: 80px; }
#navbar li a { font-family: EqualSansDemo; font-size: 1.6em; color: #555555; text-shadow: 1px 1px 0px #fff; }
#navbar li a:hover { color: #0071e4; }
And it's will be like that:
All I need to do is:
I really tried many of things and waste three hours without any success... I think it's easy but I'm not good with CSS. Any idea please?
What you want is a Suckerfish Dropdown what you'll have to do is this:
<ul>
<li>Home</li>
<li>Forum
<ul class="children">
<li>Some link</li>
<li>Another link</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
By default of course the children shouldn't be shown so add in your CSS:
.children{display:none;}
And when the forum element is hovered you should show them, so:
li:hover .children{display:block;}
Of course you'll need to add some position styling so they're nicely below the forum element and don't break your design. So make sure you take the children class out of the flow with position:absolute;
You can read more about suckerfish dropdowns here: http://alistapart.com/article/dropdowns
Related
I am trying to add a different styling to the second unordered list under the navBar2 section. I've tried using a class like ul.navBar2 to apply it on the second div section but I can't get it work.
ul {
list-style-type: none;
color: white;
margin: 0;
}
li {
display: inline;
float: right;
}
li a{
text-decoration: none;
color: white;
padding-top: 30px;
padding-bottom: 30px;
padding-left: 20px;
padding-right: 20px;
}
li a:hover {
background: white;
padding-top: 30px;
padding-bottom: 30px;
padding-left: 20px;
padding-right: 20px;
color: #171717;
}
<div id="navBar1">
<nav>
<ul>
<li>About Us</li>
<li>Downloads</li>
<li>Sign Up</li>
</ul>
</nav>
<div id="navBar2">
<ul color: black; font-size: 20px;>
<li>home</li>
<li>services</li>
<li>gallery</li>
</ul>
</div>
I'm confused why adding a class to the ul hasn't been suggested.
<nav>
<ul class="ul_class1">
<li>About Us</li>
<li>Downloads</li>
<li>Sign Up</li>
</ul>
</nav>
<div id="navBar2">
<ul class="ul_class2">
<li>home</li>
<li>services</li>
<li>gallery</li>
</ul>
</div>
css:
.ul_class1 li {
//My CSS
}
.ul_class2 li {
//My CSS 2
}
For future reference inline styles are written <ul style="color: black; font-size: 20px;">
<ul color: black; font-size: 20px;> is invalid HTML and won't work. You can use a style attribute instead: <ul style='color: black; font-size: 20px;'>
A second detail: You wrote: "I've tried using a class like ul.navBar2". First of all, your element is <div id="navBar2">, so that's an ID, not a class, which would address as ul#navBar2 instead of ul.navBar2. And second, if you want to change the style of the lielements inside the ul indise that div, you'd have to use the selector #navBar2 li { ... }.
What about something like this? You can keep the nav tag if you want, but they'd purely be for content separation / personal styling:
CSS Section:
<style>
#navBar2 ul {
list-style: none;
}
#navBar2 ul li {
font-weight:bold;
}
</style>
HTML section:
<div id="navBar1">
<ul>
<li>About Us</li>
<li>Downloads</li>
<li>Sign Up</li>
</ul>
</div>
<div id="navBar2">
<ul style="color: black; font-size: 20px;">
<li>home</li>
<li>services</li>
<li>gallery</li>
</ul>
</div>
Hope this helps - any more questions about styling, etc just ask!
PS - unsure if it was a copypasta error, but the closing div for #navBar1 wasn't there :)
I'm having troubles adding a little space in my navigation bar. This is for my activity in school please help
here is a picture navbarpic
my html and css so far is
.nav .container ul li{
display: inline-block;
margin: 10px 18px;
position: relative;
}
.nav li{
border-right: 1px solid black;
}
<body>
<div>
<div class="nav">
<div class="container">
<ul>
<li >HOME</li>
<li>ABOUT US</li>
<li>OUR SERVICES</li></li>
</ul>
</div>
</div>
This is my code so far. I would appreciate any help for this . Thanks in advance :)
You can add few padding on the right side of the li element for the navigation items:
.nav .container ul li{
display: inline-block;
margin: 10px 18px;
position: relative;
}
.nav li{
border-right: 1px solid black;
padding-right: 5%;
}
<div>
<div class="nav">
<div class="container">
<ul>
<li >HOME</li>
<li>ABOUT US</li>
<li>OUR SERVICES</li>
</ul>
</div>
</div>
You can use "pseudo" element to make right border with position: absolute style. it will never break your layout and you can move any white from li.
Hope this will help you :)
.nav .container ul li{
display: inline-block;
margin: 10px 18px;
position: relative;
}
.nav li:after{
content: "";
position: absolute;
height: 100%;
right: -15px;
top: 0;
border-right: 1px solid black;
}
<div>
<div class="nav">
<div class="container">
<ul>
<li >HOME</li>
<li>ABOUT US</li>
<li>OUR SERVICES</li>
</ul>
</div>
</div>
I have looked a few questions so far that are very similar to this one, but still can't find the answer to my question. (Please note that I am new to HTML and that this is my first post).
I want to have a navigation bar that spans the width of the page no matter the width of the screen that it is being viewed on. I tried making the 's width 100%, but it still did not do anything.
The code for the navigations bar is here:
<!DOCTYPE html>
<html>
<head>
<style>
nav {
width: 100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a {
display: block;
width: 60px;
background-color: #dddddd;
border-color: #ffffff;
text-align: center;
text-decoration: none;
padding: 10px;
margin: 3px;
border-radius: 4px;
}
a:hover {
font-weight: bold;
background-color: #9b9b9b;
}
a:active {
color: #ff0000;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
</body>
</html>
Can you please help me to find a way to make the navigation bar span the width of the page?
Thanks!
If you want to expand the li to be the same size and fill the width of the ul, flexbox can do that.
Modern Browsers - Flexbox
nav {
width: 100%;
background: #333;
margin-bottom: 1em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display: flex;
}
li {
flex:1 0 auto;
}
a {
display: block;
/*width: 60px;*/
background-color: #dddddd;
border-color: #ffffff;
text-align: center;
text-decoration: none;
padding:10px 0;
margin: 3px;
border-radius: 4px;
}
a:hover {
font-weight: bold;
background-color: #9b9b9b;
}
a:active {
color: #ff0000;
}
<nav>
<ul>
<li>Home
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
</nav>
<nav>
<ul>
<li>Home
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
<li>Home
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
</nav>
Alternative Solution: Old Browsers - CSS Tables
nav {
width: 100%;
background: #333;
margin-bottom: 1em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display: table;
width: 100%;
table-layout: fixed;
}
li {
display: table-cell;
}
a {
display: block;
/*width: 60px;*/
background-color: #dddddd;
border-color: #ffffff;
text-align: center;
text-decoration: none;
padding: 10px;
margin: 3px;
border-radius: 4px;
}
a:hover {
font-weight: bold;
background-color: #9b9b9b;
}
a:active {
color: #ff0000;
}
<nav>
<ul>
<li>Home
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
</nav>
<nav>
<ul>
<li>Home
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
<li>Home
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
</nav>
You have already given your nav a width of 100%. Now try adding a width to your LI element in your CSS to evenly distribute them across the 100% width of the nav.
li {
float: left;
width:25%;
}
nav is already 100% width,with this css configuration.Give it some background you will be able to see it.
So right how, the navigation bar is spanning the width of the page, however the objects inside aren't large enough to fill the gap. This can be seen if you add a background color to the navigation bar. What you might consider is center-aligning the objects within the nav bar or expanding the width of each object to near 25%
Are you trying to make the nav tag expand from window edge to window edge?
If so you will want to remove the margin on your body:
body {
margin: 0;
}
I am trying to learn HTML/CSS and during the course I thought of creating a CSS based Drop Down Menu Navigation bar. I read almost all of the tutorials I could find and finally built it, but the problem is it doesn't work as expected, I got the Main menu working but, the lists are not showing up. Here's the structure of my HTML:
<div id="Header"/>
<div id="Navigation" >
<ul id="Menu-H">
<li id="HOME">HOME</li>
<li id="ITEMS">ITEMS</li>
<ul >
<li>New Item</li>
<li>Search Item</li>
</ul>
<li id="Category">CATALOG</li>
<li id="Inventory">INVENTORY</li>
</ul>
<a class="LogOutButton" href="#">LOG OUT</a>
And here is the CSS I built:
#Menu-H {
padding: 0;
margin: 0;
list-style-type: none;
margin-left: 50px;
}
#Menu-H li {
float:left;
}
#Menu-H li:hover {
background: #f4f4f4;
border-radius: 5px 5px 0px 0px;
}
#Menu-H li a {
//border-left: 2px solid blue;
//border-right: 2px solid blue;
//background-color: white;
display:block;
padding: 5px 15px 5px 15px;
text-decoration: none;
text-shadow: 1px 1px 1px #FFFFFF
}
#Menu-H li:hover a {
color: #161616;
text-shadow: 1px 1px 1px#FFFFFF;
}
/* Drop Down Menu.........*/
#Menu-H ul {
background: #161616;
background:rgba(255,255,255,0);
list-style: none;
display: none;
}
Menu-H ul li {
padding-top: 1px;;
float: none;
}
Menu-H li:hover ul {
display:block;
}
#Menu-H li:hover a {
background: #6b0c36;
}
#Menu-H li:hover ul li a:hover {
background: #333;
}
I can not find the reason.
Your HTML is't right, You need to place the secondary <ul> inside the parent <li>
<ul id="Menu-H">
<li id="HOME">HOME</li>
<li id="ITEMS">ITEMS
<ul>
<li>New Item</li>
<li>Search Item</li>
</ul>
</li>
<li id="Category">CATALOG</li>
<li id="Inventory">INVENTORY</li>
</ul>
Also you forgot to add the # in the CSS for two id-s. Here's a fiddle I made where you can see I made some changes that I was talking about and it works:
http://jsfiddle.net/SJQ9B/
I want to design a Horizontal menu and onMouseover I want a vertical submenu to appear.
I surfed a lot and found out some codes ,but when I execute, in almost all the codes I get the Horizontal menu properly but the submenus dont get displayed at all.
i am programming using ActivePerl 5.12 on Windows.
I am using IE7 for display, is that the reason why am not getting the proper result?
Please do help me find the solution. Thank you.
Here's the piece of code which i was trying to execute..
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: "Trebuchet MS", Helvetica, Sans-Serif;
font-size: 14px;
}
a {
text-decoration: none;
color: #838383;
}
a:hover {
color: black;
}
menu {
position: relative;
margin-left: 30px;
}
menu a {
display: block;
width: 140px;
}
menu ul {
list-style-type: none;
padding-top: 5px;
}
menu li {
float: left;
position: relative;
padding: 3px 0;
text-align: center;
}
menu ul.sub-menu {
display: none;
position: absolute;
top: 20px;
left: -10px;
padding: 10px;
z-index: 90;
}
menu ul.sub-menu li {
text-align: left;
}
menu li:hover ul.sub-menu {
display: block;
border: 1px solid #ececec;
}
</style>
HTML Part
<div id="menu">
<ul>
<li>
Home
<ul class="sub-menu">
<li>Pages</li>
<li>Archives</li>
<li>New Posts</li>
<li>Recent Comments</li>
</ul>
</li>
<li>
<a href="#" >About</a>
<ul class="sub-menu">
<li>Get to know us</li>
<li>Find out what we do</li>
</ul>
</li>
<li>
Contact
<ul class="sub-menu">
<li>E-mail Us</li>
<li>Use Our Contact Form</li>
</ul>
</li>
</ul>
</div>
Firstly, if you have a choice, upgrade to IE8. IE7 really has no reason to be in use. :-) That said, IE7 should do what you want... just be aware that it has significant missing functionality, so it might make your life harder.
Secondly, your question says you've found some 'codes' (tutorials?), but you're not getting the results you want; it would help if you told us which tutorials you've used, or at least showed us some of the code that doesn't work, and tell us what problems you've had with it.
I will try to provide an answer, though...
Your question implies that you want to write a menu that is controlled only by CSS.
With that in mind, it doesn't really matter what language you use to generate the HTML, because your HTML should only need to consist of nested <ul> and <li> tags, with a few IDs or classes to tell your CSS where to apply its styles.
From that perspective, the Perl code (or any other language) shouldn't be particularly complex. The CSS may be complex, but that would be separate from your Perl code.
In CSS, the :hover style will allow you to build mouse-over drop-down functionality. No Perl (or Javascript) required. I'd suggest looking at the A List Apart site; it's a good site for CSS tutorials and has some very good examples of CSS-driven menus.
<html xmlns="http://www.w3.org/1999/xhtml">
CSS code
div {
width: 550px;
margin: 0px auto;
}
div ul li a:link, div ul li a:visited {
display: block;
background-color: #98bf21;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 14px;
color: Red;
text-align: center;
text-decoration: none;
padding: 4px;
border-bottom: 1px solid #fff;
width: 170px;
}
div ul li a:hover{
background-color: #030;
}
li ul li a:link, li ul li a:visited {
display: block;
background-color: #98bf21;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 12px;
color: Blue;
text-align: center;
text-decoration: none;
padding: 4px;
border-bottom: 1px solid #fff;
width: 170px;
}
li ul li a:hover {
background-color: #050;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
div ul li {
float: left;
margin-left: 5px;
}
ul li ul li {
float: none;
margin-left: 0px;
}
li ul {
display: none;
}
li:hover ul{
display: block;
}
HTML
<div>
<ul>
<li>Menu 1</li>
<li>Menu 1
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
</ul>
</li>
<li>Menu 3
<ul>
<li>Sub 4</li>
<li>Sub 5</li>
<li>Sub 6</li>
</ul>
</li>
</ul>
</div>
Making menu is all about css and javascript
I will recommend some jquery plugin coz its clean and easy to use.
see tutorial
http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/
demo link
http://www.sohtanaka.com/web-design/examples/mega-dropdowns/
You can use online HTML CSS horizontal and vertical menu layout generator to create any HTML menu with up to three submenu levels using CSS only.