The same html/css is returning very different results... What's going on here?
I have included all of the relevant CSS and the entire HTML markup for the page so you can see the structure. You can find the html for the search bar down near the bottom of the included code where "search1.png" is.
I've already been having a problem with the drop-down menus rendering at slightly different sizes/positions between the two browsers and I suspect it is because they render the text in side the main navigation items in slightly different ways.
Any insight would be greatly appreciated!!
FIREFOX:
CHROME:
nav ul{
text-align:right;
font-size:0;
list-style-type: none;
}
nav ul li{
display:inline-block;
height:54px;
padding:0 20 0 20;
background:white;
color:black;
text-align: center;
vertical-align: middle;
line-height: 54px;
font-size:15;
}
nav ul li:hover{
background:#222;
color:white;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul ul {
position: absolute;
padding-top:15px;
padding-bottom:15px;
padding-left:0px;
background:#222;
z-index:100;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
overflow:hidden;
}
/* SEARCH */
li.red:nth-child(7) > ul:nth-child(1){
width: 328px;
margin-left: -277px;
text-align: center;
margin-top: 54px;
vertical-align: middle;
padding-top:15px;
padding-bottom:15px;
position:relative;
}
HTML:
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>SENECA AV</title>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<div id="top" class="bars"><img src="senecalogo1.png" alt="SENECA">
<nav>
<ul>
<li> PRODUCTS
<ul>
<li></li>
</ul>
</li>
<li> CATALOG
<ul class="left">
<li>STUFF</li>
<li>THINGS</li>
</ul>
</li>
<li> SHOP
</li>
<li class="red"> COMPANY
</li>
<li class="red"> HELP
<ul>
<li> Ask a question </li>
<li> Register your product </li>
<li> Returns/Exchanges </li>
<li> Warranty </li>
<li> FAQ </li>
</ul>
</li>
<li class="red"> TRADE
<ul>
<li> Open an account </li>
<li> Online Retailers </li>
<li> Retail Stores </li>
<li> Contract </li>
</ul>
</li>
<li class="red" style="padding:0 8 0 8;background-image:url('search1.png');width:43px;background-repeat:no-repeat;background-position:center;">
<ul>
<input type="text" value="item, number, SKU">
<input type="submit" value="search">
</ul>
</li>
<li class="red" style="padding:0 15 0 0;">
</li>
</ul>
</nav>
</div>
<div id="bottom" class="bars"></div>
</body>
</html>
After a bunch of fooling around I found the issue. It was slightly complicated which is probably why I couldn't see a solution sooner.
I was missing a DOCTYPE declaration at the top of the page.
Adding this instantly broke the page and made the entire navigation disappear because I wasn't properly declaring CSS size values. A quick look at the console explained which properties were at issue allowing me to fix them all one by one.
for example:
padding:0 20 0 20;
needs to be
padding:0px 20px 0px 20px;
Once all relevant properties had 'px' appended to their values the menu items reappeared.
Also,
nav ul ul {
line-height:15px;
}
needed to be added to get rid of the riduculous over-padding apparent in the Chrome example above which also appeared in Firefox once the DOCTYPE was added because...
line-height:54px;
was being inherited from the parent li (nav ul li)
Related
Host Folder
If you click the link then click "all.html", you should see a page with an unfinished navbar. The lis in the list are stacking for some unknown reason. Could someone tell me why "Member Resources" and on are in a row below and how to fix that? I tried playing with the text-align, float, width, and margins of the containing div, the ul, and the lis but haven't gotten anywhere. Thank you (Note: Using Bootstrap v3.3.6)!
HTML:
<div class="row" id="topnav">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
Sponsor
<li>
All the rest of the li's are like the ones above, I've ommitted them to save space
</li>
</ul>
</div>
CSS:
#topnav{
display: inline;
}
#topnav *{
display:inherit;
}
#topnav ul{
list-style-type: none;
margin: 0;
margin-left: auto;
background-color: rgb(0,93,164);
padding: 1.5%;
display:inline-block;
}
#topnav li{
margin:0;
padding: 0 2.5%;
}
#topnav a{
text-decoration: none;
color:white;
margin: 0;
padding: 0;
font-weight:600;
}
SIDENOTE: Does anyone know why there is a scrollbar at the bottom of the page? There's no extra content to the right and I'm pretty sure there are no margins that'd be pushing it out that far. I see it on Chrome, anyone else see it and know why it's occuring?
You should set width of #topnav ul to 100% for setting it to full width.
#topnav ul{
list-style-type: none;
margin: 0;
margin-left: auto;
background-color: rgb(0,93,164);
padding: 1.5%;
display:inline-block;
width: 100%;
}
Second way to see a full width navbar is to do as the bootstrap guide say
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="row" id="topnav">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
Sponsor
<li>
All the rest of the li's are like the ones above, I've ommitted them to save space
</li>
</ul>
</div>
</div>
</nav>
Look carefully to notice that the navbar is full width and of different color(left intentionally for you to notice). You can remove the background color from your ul and put it on your navbar class instead instead
Try this:
HTML
<div id="topnav">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
Sponsor
<li>
All the rest of the li's are like the ones above, I've ommitted them to save space
</li>
</ul>
</div>
CSS
#topnav{
display: inline;
}
#topnav *{
display:inherit;
}
#topnav ul{
list-style-type: none;
margin: 0;
margin-left: auto;
background-color: rgb(0,93,164);
padding: 1.5%;
display:inline-block;
width: 100%;
}
#topnav li{
margin:0;
padding: 0 2.5%;
}
#topnav a{
text-decoration: none;
color:white;
margin: 0;
padding: 0;
font-weight:600;
}
I'm just barely learning how to code. I know there is more than one way to skin a cat, but what is the most efficient way to create a typical menu with lists, search fields, etc.?
I've been able to create all of the elements. I am having a very hard time getting the CSS correct to look the way I want.
Here is what my current project looks like.
This is what I am trying to achieve.
Thanks for the help! Any tips for a beginner would also be appreciated. Thank you!
Here is my HTML
<!DOCTYPE html>
<html lan="en">
<head>
<meta charset ="UTF-8">
<link href = "racemonster.css" rel="stylesheet" type="text/css">
<title>Home</title>
</head>
<body>
<div class="headerLeft">
<h1>Name</h1>
</div>
<div class="headerRight">
<ul>
<li>Cart</li>
<li>Help</li>
<li>Sign In</li>
<li>Sign Up</li>
</ul>
</div>
<div class="menu">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
Here is the css
.headerLeft{color:#C4D82D;font-family:sans-serif;background-color:#323232;width:100%;margin:0;padding:20px;top:0;left:0;}
.headerRight{color:#B1B3B5;font-family:sans-serif;background-color: #323232;width:100%;margin:0;padding:20px;top:0;left:0;}
.headerRight ul {list-style-type: none;}
.headerRight ul li{display: inline;margin-right: 20px}
.headerRight ul li a{text-decoration: none;font-family: sans-serif;color: #898B8E;background-color:#323232;}
.headerRight ul li a:hover{color:#B1B3B5;}
.menu ul {list-style-type: none;width:100%; margin:0; padding-top:40px; padding-bottom:40px; background-color: #C4D82D}
.menu ul li {display:inline;margin-right: 20px;}
.menu ul li a {text-decoration: none;font-family: sans-serif;color:#323232;background-color: #C4D82D;}
.menu ul li a:hover {color:#999B9D;}
Updated Answer
Here is a solution... first check out my code (http://jsfiddle.net/ProgrammerKid/s01yuzm1/)
HTML
<div class="headers">
<div class="headerLeft">
<h1>Name</h1>
</div>
<div class="headerRight">
<ul>
<li>Cart
</li>
<li>Help
</li>
<li>Sign In
</li>
<li>Sign Up
</li>
</ul>
</div>
<div class="header-padding"> </div>
</div>
<div class="menu">
<ul>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div>
CSS
.headers {
width: 100%;
position: static;
}
.headerLeft {
width: 50%;
float: left;
box-sizing: border-box;
height: 120px;
}
.headerRight {
width: 50%;
box-sizing: border-box;
float: right;
height: 120px;
}
.header-padding {
height: 120px;
}
What I like to do is group the two headers into one big <div> so that they both share a common parent (disregarding the <body>)... Then I added a CSS float property, and set their width to 50%. This will align them...
The <div class="header-padding">[...]</div> element is to provide the links sections with enough padding... Since we float the two div's (.headerRight, and .headerLeft) the links sections would appear underneath the headers... therefore by placing the header padding element, we are providing the links section with enough space.
Old Answer
There is no "correct" way to make a header
That being said, it would be really helpful to the people answering your question if you included the HTML/CSS/JS code...
For now I will use a very abstract method of conveying my tips to you...
If we said the element with the word "NAME" inside it was a <div id="1"></div> and the element in which your menu items are in would be <div id="2"></div>, and the links were <div id="3"></div>
Then here is what your CSS should look like:
#1 {
width: 40%;
float: left;
}
#2 {
width: 50%;
float: left;
}
the above will align both the elements together
and below we will reduce the padding to around 10px;
#3 {
padding: 10px;
}
and that's all I can help you with for now until you upload your code
I have created css as you required it is very straightforward and easy to understand.
enter link description here
.container {
background-color:#323232;
}
.title {
color:#C4D82D;
margin-left:40px;
}
.headerLeft {
width:50%;
float:left;
height:100px;
display:inline-block;
}
.headerRight {
width:50%;
height:100px;
display:inline-block;
}
.headerRight ul li {
display:inline;
color:#B1B3B5;
}
.headerRight ul li a {
color:#b1b3b5;
}
.headerRight ul li a:hover {
color:#B1B3B5;
}
.menu {
background-color:#C4D82D;
height:50%;
position:relative;
padding-top:20px;
margin:(auto, auto, 0, 0);
}
.menu ul li {
display:inline;
}
.menu ul li a {
color:#323232;
}
.menu ul li a:hover {
color:#999B9D;
}
<body>
<div class="container">
<div class="headerLeft">
<h1 class="title">Name</h1>
</div>
<div class="headerRight">
<ul>
<li>Cart |
</li>
<li>Help |
</li>
<li>Sign In |
</li>
<li>Sign Up |
</li>
</ul>
</div>
<div class="menu">
<ul>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div>
</div>
</body>
I'm building a css dropdown menu and have been unable to get the submenus to appear below their respective parent li elements. I've tried a bunch of the solutions suggested in response to similar questions but have been unable to get them to work.
Here's a sample of the menu I'm building:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Menu Test</title>
<link rel="stylesheet" href="menustyle.css" type="text/css">
</head>
<body>
<div id="menudiv">
<ul class="menu">
<li class="menuitem">Aluminum</li>
<ul class="submenu">
<li class="subitem">Round</li>
<li class="subitem">Sheet</li>
<li class="subitem">Plate</li>
</ul>
</li>
<li class="menuitem">Copper</li>
<ul class="submenu">
<li class="subitem">Round</li>
<li class="subitem">Sheet</li>
</ul>
<li class="menuitem">Steel</li>
</ul>
</div>
</body>
</html>
And here's the css:
#menudiv {
text-align:center;
}
ul.menu {
list-style-type:none;
}
li.menuitem {
position:relative;
display:inline-block;
}
ul.submenu {
display:none;
position:absolute;
}
.menuitem:hover+ul.submenu {
display:block;
}
I can move the submenus around by adding things like right:50px; to ul.submenu, but that moves all the submenus to the same location.
What am I missing here? Thanks!!
Here's a Fiddle.
First of all, the following markup structure :
<li class="menuitem">Aluminum</li>
<ul class="submenu">
<li class="subitem">Round</li>
<li class="subitem">Sheet</li>
<li class="subitem">Plate</li>
</ul>
is incorrect. It should be :
<li class="menuitem">Aluminum
<ul class="submenu">
<li class="subitem">Round</li>
<li class="subitem">Sheet</li>
<li class="subitem">Plate</li>
</ul>
</li>
Secondly, you could use a CSS reset for ul,li elements. For the sake of simplicity I've used :
* {
margin: 0;
padding: 0;
}
Now, coming to your question. the following classes needs to be changed :
.menuitem:hover+ul.submenu {
display:block;
}
to
.menuitem:hover > ul.submenu {
display:block;
}
and
ul.submenu {
display:none;
position:absolute;
top:0px;
right:50px;
}
to
ul.submenu {
display:none;
position:absolute;
}
You can then modify the following class (so that the child ul elements "fits-in" to the parent li):
li.menuitem {
position:relative;
display:inline-block;
}
to
li.menuitem {
position:relative;
display:inline-block;
padding: 5px 10px;
margin: 0 10px;
}
In summary, I guess this is what you are looking for :
* {
margin: 0;
padding: 0;
}
#menudiv {
text-align:center;
}
ul.menu {
display: inline-block;
list-style-type:none;
}
li.menuitem {
position:relative;
display:inline-block;
padding: 5px 10px;
margin: 0 10px;
}
ul.submenu {
display:none;
position:absolute;
}
.menuitem:hover > ul.submenu {
display:block;
}
<body>
<div id="menudiv">
<ul class="menu">
<li class="menuitem">Aluminum
<ul class="submenu">
<li class="subitem">Round</li>
<li class="subitem">Sheet</li>
<li class="subitem">Plate</li>
</ul>
</li>
<li class="menuitem">Copper
<ul class="submenu">
<li class="subitem">Round 2</li>
<li class="subitem">Sheet 2</li>
</ul>
<li class="menuitem">Steel</li>
</ul>
</div>
</body>
Hope this helps!!!
Try placing the <ul class="submenu"> inside the <li class="menuitem">. Then set the <li> to position:relative; and set the <ul> to position:absolute;left:0;. This will position the <ul> relative to its parent element, the <li>.
Here's a codepen example: http://codepen.io/anon/pen/WQdMjX
Your markup is incorrect for nesting a sub-list.
You're doing this:
<ul>
<li>text</li><!-- incorrect, don't close li here -->
<ul>
<li>sub</li>
</ul>
</li><!-- correct, though li is already closed -->
<li>text</li><!-- incorrect, don't close li here -->
<ul>
<li>sub</li>
</ul>
<!-- needs closing li here -->
<li>text</li>
</ul>
Instead do this:
<ul>
<li>text
<ul>
<li>sub</li>
</ul>
</li>
</ul>
Then update your CSS selector from .menuitem:hover + ul.submenu to .menuitem:hover > ul.submenu as you're no longer selecting a sibling element (+) but a child element (>).
You'll need to fine tune the positioning of your sub-menus from here but this should get you where you need to be.
Remember, when you are developing menus you need to make sure the link content is inside anchor tags, including the links at the top level navigation that launch the subnav. That way these links are natively focusable. You want to be able to reach these menu elements with a keyboard only since many with arthritis, Parkinson's disease, etc. may be unable to use a mouse (and you won't want to use tabindex to mimic this behaviour since screen-readers will look for anchor tags.)
There was a similar StackOverflow question yesterday: Absolutely positioned child's top edge pinned to the bottom edge of its parent that has unknown height?
You can also Bootstrap Dropdown CSS in a normal case too.
I'm a newbie to html and trying to figure it out through online tutorials. I have a menubar that goes horizontally across the top of the page. Right now I have the menubar in a div tag, and within the contents, I have
<nav>
<li>
<a id="l1" href="whatever.com/about/">About</a>
<a id="l2" href="whatever.com/content/">Content</a>
<a id="l3" href="whatever.com/history/">History</a>
<a id="l4" href="whatever.com/Team/">Team</a>
</li>
</nav>
I want to position the links and change the font, and I was under the impression that I would do so using a format along the lines of:
<style>
.l1
{
position:relative;
top:5px;
right:30px;
}
</style>
However, that does not seem to be working, and I can't find any helpful tutorials. Can anyone give me advice on how to appropriately format & style my links?
The dot notation you've used in CSS is for classes, not IDs, this should work:
<nav>
<ul>
<li><a class="l1" href="whatever.com/about/">About</a></li>
<li><a class="l2" href="whatever.com/content/">Content</a></li>
<li><a class="l3" href="whatever.com/history/">History</a></li>
<li><a class="l4" href="yabidu.com/Team/">Team</a></li>
</ul>
</nav>
ID's id="foo" on an element are accessed in CSS with #foo, also they supposed to be completely unique, therefore no element IDs on a page should be the same. Classes on the other hand class="bar" are allowed to be used multiple times and are access in CSS using .bar.
You've also used invalid syntax, <li> (list items) are always supposed to be directly inside either <ul> (unordered list) or <ol> (ordered list), I have fixed your markup for you as well.
Your HTML5 systax is wrong..
<nav>
<ul>
<li><a href="#">LINK<a></li>
.....
</ul>
</nav>
and to aceess the li element, use
nav ul li a {
font-size:20px;
font-weight:bold;
position:relative;
top:XX;
left:XX;
}
Solution 1:
HTML:
<nav>
About
Content
History
Team
</nav>
CSS:
nav a {
float: left;
padding: 0 20px;
}
DEMO 1
Solution 2:
HTML:
<nav>
<ul>
<li>
About
</li>
<li>
Content
</li>
<li>
History
</li>
<li>
Team
</li>
</ul>
</nav>
CSS:
nav ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
nav ul li {
float: left;
padding: 0 20px;
list-style: none;
}
DEMO 2
Element li not allowed as child of element nav in this context.
Contexts in which element li may be used:
inside ol elements.
inside ul elements.
inside menu elements
HTML:
<nav>
<ul>
<li>About</li>
<li>Content</li>
<li>History</li>
<li>Team</li>
</ul>
</nav>
Don't use id's for styling elements (Use only where it is necessary).
Use css selectors:
nav ul li a { ... }
or if you interested to style only childs a in li element:
nav li > a { ... }
For display li elements inline you must add next style
nav li {
display: inline-block;
*display: inline; // fix for ie7
}
or float:left instead display:inline-block;
I am trying to design a dropdown menu that covers the entire width of the main container of the website. Part of the styling that I have applied to the outtermost category links of the menu is "display:inline" for a horizontal menu.
Since, this style is applied to the parent element, natrually, all children elements (sub-menu items, in this case the dropdown menu) inherit this kind of display as well. I am trying to find a way to prevent the children li items from having an inline display. I want their display to be vertical (standard list style).
I have been trying to solve this problem for a quite a while now with no success.
My CSS
body{font-family:helvetica; color:white;}
a{color:white; text-decoration:none;}
a:hover{background-color:darkred;}
input{background-color:#000; color:#777; border:none; padding:5px;}
#menu{background-color:#222; padding:10px 0px 10px 0px; }
#menu li{display:inline;}
.menu-category-link{font-size:15px; font-weight:bold; padding:15px 12px 15px 12px;}
.submenu{display:none; position:absolute; margin:0px; padding:0px; margin-top:8px;}
.dropdown{width:900px; border-top:3px solid darkred; position:absolute; height:200px; background-color:#111;}
.dropdown ul li {display:block;}
My Markup
<div id="main-container" style="width:900px; height:1000px; background-color:#000; margin:0px auto 0px auto;">
<ul id="menu">
<li><a class="menu-category-link" href="#">MEN</a>
<ul class="submenu">
<li>
<div class="dropdown">
<ul>
<li>T-shirts</li>
<li>Pants</li>
<li>Clothes</li>
<li>Hats</li>
</ul>
</div>
</li>
</ul>
</li>
<li><a class="menu-category-link" href="#">WOMEN </a>
<ul class="submenu">
<li>
<div class="dropdown">
<ul>
<li>Dresses</li>
<li>Skirts</li>
<li>Tops</li>
<li>Denim</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
</div>
My JQuery
$(document).ready(function(){
$("#searchfield").Watermark("Search");
$("#menu li").hover(function(){
$(".submenu").hide();
$(this).children(".submenu").show();
});
$('.dropdown').css('display', '');
});
You need to make your drop-down more specific than your #menu li declaration:
#menu .dropdown ul li {display:block;}