I'm playing around with some HTML5 and CSS3 and trying to build a single static page for now.
Currently working on the navigation menu with one of the items being a drop down menu.
When I hover above the drop down item, the item is pushing the items on its left and right away.
Could someone explain to me why this is happening? I have very little HTML or CSS experience, I just started putting something together.
The CSS is based on many tutorials on the internet for making drop down navigation menu's. I've stripped most of the code down to the "very basic" to get this working.
Edit: Any tips to make the CSS cleaner are welcome as well.
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav role="navigation" class="nav-menu">
<ul>
<li>Home</li>
<li>News</li>
<li>Services
<ul>
<li>Design</li>
<li>Development</li>
<li>User Experience</li>
</ul>
</li>
<li>About Us</li>
</ul>
</nav>
</header>
<div id="content">
Content
</div>
<footer>
Footer
</footer>
</body>
CSS:
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-size: 1em !important;
color: #000 !important;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
body {
background-color: #646464;
}
header {
background-color: #444;
margin: 0px;
border: 0px;
height: 2.55556em;
width: 100%;
}
#content {
margin: 0px;
border: 0px;
padding: 0px;
height: 70%;
}
footer {
margin: 0px;
border: 0px;
padding: 0px;
height: 30%;
background-color: white;
}
nav {
margin:0;
padding:0;
text-align:center;
}
nav ul {
display: inline-block;
list-style: none;
}
nav ul li {
float: left;
margin: 0 20px;
}
nav ul li a {
display: block;
margin: 10px 20px;
background: #444;
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul ul li {
float: none;
}
nav ul ul li a {
padding: 10px 20px;
margin: 0 20px;
}
I think the issue is that your secondary menu UL is wider than your primary menu LI containing it. When the embedded UL switches from display:none to display:block it increases the width of the parent LI.
A couple possible solutions:
specify a width for your main menu LIs, e.g.:
nav ul li {
float: left;
margin: 0 20px;
width: 200px;
}
Use position: absolute to take the embedded UL out of the layout flow, e.g.:
nav ul ul {
display: none;
position: absolute;
}
Both of these options have some issues with your current layout, though, and would required you to rework things a bit. Hopefully this is helpful in terms of pointing you in the right direction.
Try by like bellow:
nav>ul { display: inline-block; list-style: none; }
Related
I've found some places where people asked questions like this, but none of the answers in those places have helped me. Hoping I'll have more luck asking my own question.
I'm trying to design a base/prototype website for the company I work for. On our Services page, I wanted s sidebar navigation menu for our different services on the left, while the content is on the right. It was working great until I began adding content to the page and the paragraph wrapped to a second line. Once that happened, the content div dropped below the sidebar navigation. I've tried displaying them as inline-blocks like someone in another question suggested, but that didn't work. I'm trying to practice with responsive content also, so I don't want to give a bunch of absolute widths or anything to make them stay beside each other. Can anybody help me figure this out?
See working example: https://jsfiddle.net/joshuahuff/qcckdqju/1/
* The content background was set to yellow just so it's visible while figuring out this issue. The background will be removed once the problem is solved.
My HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tab Title</title>
<meta name="description" content="Description of Site">
<meta name="author" content="Name of Author">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<script src="js/scripts.js"></script>
<header>
<h1>Atlas Land Office</h1>
<nav class="MainNavbar">
<div class="MainNavbarDropdown">
<ul>
<li>Home</li>
<li class="selected">Services</li>
<li>Highlight Projects</li>
<li>News</li>
<li id="contact-us" class="contact-us contact-us-selected">Contact Us</li>
</ul>
</div>
</nav>
</header>
<div class="PageContent">
<div class="PageContentNav">
<ul>
<li>ALTA/ACSM Land Title Survey</li>
<li>As-Built Survey</li>
<li>Boundary Survey</li>
<li>Construction Staking</li>
<li>Elevation Certificate</li>
<li>Legal Access Certificate</li>
<li>Lot Split Survey</li>
<li>Mortgage Inspection Report</li>
<li>Topographic Survey</li>
</ul>
</div>
<div class="Content">
<h2>Overview</h2>
<p class="PageContentP"><i>Atlas Land Office</i> is a full-service land surveying company which strives to provide nothing but top-notch service to our clients, both in-field <em>and</em> in-office. We do everything from ALTA/ACSM Land Title Surveys to Mortgage Inspection
Reports.</p>
<br />
<p><b>Our services include:</b>
<ul>
<li>ALTA/ACSM Land Title Survey</li>
<li>As-Built Survey</li>
<li>Boundary Survey</li>
<li>Construction Staking</li>
<li>Elevation Certificate</li>
<li>Legal Access Certificate</li>
<li>Lot Split Survey</li>
<li>Mortgage Inspection Report</li>
<li>Topographic Survey</li>
</ul>
</p>
</div>
</div>
</body>
</html>
My CSS:
/* General */
#import url('https://fonts.googleapis.com/css?family=Indie+Flower|Oswald:700|PT+Sans');
body {
padding: 0;
margin: 0;
font-size: 62.5%;
}
/* Smartphones */
#media screen and (max-width:320px) {
/* put your css here */
}
/* Tablets */
#media screen and (min-width:321px) {
/* put your css here */
}
/* Desktops */
#media screen and (min-width:800px) {
/* Main Navigation */
/* Styling the header */
header {
height: 60px;
width: 100%;
padding: 0;
margin: 0;
background: /*#ecf0f1*/
#222;
color: #E54D0B;
}
/* Styling the header h1 */
header h1 {
padding-left: 10%;
line-height: 60px;
font-size: 3em;
}
header h1 a {
text-decoration: none;
color: #E54D0B;
}
/* Applying same CSS to header h1 */
header h1 {
margin: 0;
font-family: Oswald, "Arial Black", Gadget, sans-serif;
}
/* Styling the nav container */
.MainNavbar {
height: 30px;
margin: 0;
line-height: 30px;
font-size: 1.4em;
box-shadow: 5px 0 3px #333;
}
.MainNavbar .MainNavbarDropdown {
background: #E54D0B;
}
.MainNavbar ul {
padding-left: 10%;
margin: 0;
list-style: none;
font-family: "PT Sans", sans-serif;
}
.MainNavbar ul li {
display: inline-block;
position: relative;
line-height: 30px;
text-align: center;
}
.MainNavbar ul li a {
padding: 0 30px;
display: block;
text-decoration: none;
color: #000;
}
.PageContentNav ul li a {
padding: 0 15px;
display: block;
text-decoration: none;
color: #000;
}
.MainNavbar ul li:hover a {
height: 30px;
background: #F56527;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-bottom: 2px solid #333;
transition: all 0.1s linear;
}
.selected {
height: 30px;
background: #FF7133;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-bottom: 2px solid #333;
}
.contact-us {
background: #222;
}
#contact-us a {
color: #FF7133;
}
.MainNavbar ul li.contact-us:hover a {
height: 30px;
background: #222;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-bottom: 2px solid #FF7133;
transition: all 0.1s linear;
}
/* Website Content */
.PageContent {
padding: 3% 15% 20px;
margin: 0;
color: #000;
font-family: Arial, sans-serif;
font-size: 1.4em;
}
.PageContentNav {
padding-top: 2%;
margin: 0;
float: left;
font-family: "PT Sans", sans-serif;
}
.PageContentNav ul {
padding: 0;
margin: 0;
list-style: none;
background: #E54D0B;
}
.PageContentNav ul li {
height: 50px;
padding: 0;
margin: 0;
line-height: 50px;
}
.PageContentNav ul li:hover a {
background: #FF7133;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
transition: all 0.3s linear;
}
.Content {
margin-left: 4%;
float: left;
background: yellow;
}
.Content h2 {
font-family: "Arial Black", Gadget, sans-serif;
}
.Content p {
font-family: "PT Sans", sans-serif;
}
}
You must have the elements adjacent, in a parent, or child of, the other element for CSS to properly find it and execute it the way you want (Such in the case, a drop-down menu). Otherwise you will need jQuery or javascript to "find" the other element that needs to appear/disappear and have that language change the CSS of the element. CSS cannot "detect" another "remote" element this way.
Most of the time you need to have something like...
<ul> //Links
<li>First Main Link
<ul> //This is the menu that appears and disappears
<li>Link to appear #1</li>
<li>Link to appear #2</li>
</ul>
</li>
<li>Second Main Link</li>
</ul>
Then have something similar to for CSS...
//CSS
ul{
width: 900px;
height: 20px;
background: rgba(0,0,0,0.2);
}
ul li{
padding: 10px;
}
ul li > ul{
display: none;
}
ul li:hover > ul{
display: block;
position: absolute; //makes the element appear wherever you want it, starting from where it is located in the parent element
z-index: 10; //this makes the menu hover over other things, similar to layers; higher the number, higher it is
}
This isn't perfect, but might help get the point across. When you hover over ul li, then ul li > ul changes from display: none; to display: block; and "appears" upon hover if the element ul is inside the element li.
Most of the time I personally use div's for the sub-menu that will drop down when you hover over the link, not ul elements, but the choice is yours. Execution is relatively the same. You'll need to add margins or something similar to ul li > ul to "move" the element where you need it to be on the page according to the menu and such.
Good luck!
I'm trying to position a website title (div) to the left of my navigation bar. I thought of creating another
<li><a>
element and put that as the website title, but I don't want it to have some of the propertise like font family and hover.
This is currently what I have:
and this is what I would like to achieve:
So in summary I would like to add a div to put my website title to the left of the navigation buttons.
#nav {
width: 100%;
height: 50px;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: #3D3D3D;
}
#nav ul {
list-style: none;
width: 1000px;
margin: 0 auto;
padding: 0;
}
#nav li {
float: left;
}
#nav li a {
display: block;
padding: 8px 15px;
height: 50px;
text-decoration: none;
font-family: 'Quicksand', sans-serif;
font-size: 20px;
color: #FFFFFF;
}
#nav li a:hover {
color: #FF4343;
background-color: #FFFFFF;
}
<div id="nav">
<ul>
<li>Prev 1
</li>
<li>Prev 1
</li>
<li>Prev 1
</li>
</ul>
</div>
I think you've got too much in your CSS. Just changing the ul to:
display:inline;
and then setting some line-height does the trick.
See this fiddle: https://jsfiddle.net/x20mkx1n/5/ where I've taken out much of your CSS.
I don't want space above the navigation div. Does it add space as default?
In design view, this is no space. But in preview, there is space. Please help. I tried this but didn't work.
My coding is:
<div id="container">
<div class="nav">
<ul>
<li>Home</li>
<li>Contact Us</li>
</ul>
CSS:
.nav ul li {
float: right;
list-style-type: none;
font-family: Helvetica, sans-serif;
font-size: 11px;
color: #000;
}
.nav ul li a {
color: #000;
text-decoration: none;
display: block;
text-align: center;
height: 36px;
width: 80px;
line-height: 36px;
background-color: #FFF;
}
.nav ul li a:hover {
color: #F00;
}
.nav {
margins: 0px;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-family: Helvetica, sans-serif;
}
#container {
background-color: #CCC;
width: 100%;
overflow: hidden;
}
I'm not sure what your current CSS looks like, but here is a basic example that illustrates what I think you are trying to do.
https://jsfiddle.net/tfb2L5vd/
.nav {
background:#eee;
}
body {
margin:0;
}
ul {
margin:0;
}
I've stripped margins from both the as well as the elements to remove spacing from the top of the page. Background color added for emphasis.
Looks like there is margins being added to some of your elements by browser specific default styles. Try explicitly defining zero margin on those elements. In particular that element (and the html & body just to be safe).
html, body{
margin:0;
}
.nav ul{
margin:0;
}
Fixed example:
http://codepen.io/anon/pen/QbWZoW
I am trying to make a basic site with HTML & CSS, with a navigation bar, but I have a problem with it [below]:
body
{
background-color: #666;
}
.font_title
{
font-family: "Segoe UI";
font-weight: bold;
font-size: 60px;
text-align: center;
}
#title
{
width: 800px;
}
#container
{
position: relative;
margin: auto;
width: 800px;
height: 995px;
background-color: #CCCCCC;
}
#navigation_holder
{
position: relative;
margin: auto;
width: 800px;
}
.navigation_button
{
font-family: "Segoe UI";
text-align: center;
font-size: 26px;
width: 200px;
height: 40px;
background-color: #09C;
}
.navigation_button:hover
{
background-color: #09F;
}
<div id="container"> <!-- The main container -->
<div class="font_title", id="title"> Our Site</div>
<div id="navigation_holder">
<div id="navigation_button_1", class="navigation_button"> Home </div>
<div id="navigation_button_2", class="navigation_button"> About </div>
<div id="navigation_button_3", class="navigation_button"> Services </div>
<div id="navigation_button_4", class="navigation_button"> Contact </div>
</div>
<!-- More DIVs in the container -->
</div>
The problem is - all my navigation buttons are stacked up ontop of each other, not on a row. What am I doing wrong?
Instead of making them divs, use anchor tags inside lists. Here's the image and the complete working code for you:
<html>
<head>
<style>
body
{
background-color: #666;
}
.font_title
{
font-family: "Segoe UI";
font-weight: bold;
font-size: 60px;
text-align: center;
}
#title
{
width: 800px;
}
#container
{
position: relative;
margin: auto;
width: 800px;
height: 995px;
background-color: #CCCCCC;
}
#navigation_holder
{
position: relative;
margin: auto;
width: 800px;
}
.navigation_button
{
font-family: "Segoe UI";
text-align: center;
font-size: 26px;
width: 200px;
height: 40px;
background-color: #09C;
}
.navigation_button:hover
{
background-color: #09F;
}
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:200px;
font-family: "Segoe UI";
text-align: center;
font-size: 26px;
width: 200px;
height: 40px;
background-color: #09C;
}
a:hover,a:active
{
background-color: #09F;
}
</style>
</head>
<body>
<div id="container"> <!-- The main container -->
<div class="font_title", id="title"> Our Site</div>
<div id="navigation_holder">
<ul>
<li id="navigation_button_1" > Home </li>
<li id="navigation_button_2" > About </li>
<li id="navigation_button_3" > Services </li>
<li id="navigation_button_4" > Contact </li>
</ul>
</div>
<!-- More DIVs in the container -->
</div>
</body>
</html>
The problem is that divs are block elements, thus they naturally position themselves on top of each other. You can use several methods to get them to behave. Applying a display: inline-block to your .navigation_button class is what I would prefer in most cases. In this case, however, a float: left will work just as well.
The two methods have their benefits and drawbacks, but floats can become problematic because they essentially become unrecognizable to non-floated elements (in the same way position: absolute does).
As an aside, if I were you, I'd pull the height off your container, change #navigation_holder to a <nav>, and perhaps even pull the ids (and possibly even the classes!) off of your individual navigation elements. Heck, you could even take out the inner divs entirely, and replace them with a ul whose li were display: inline (it would be more semantic).
You could then reference them like this:
.navigation_holder ul li {
display: inline;
padding-left: 40px; /* or whatever */
}
And if you need to target only the first or last:
.navigation_holder ul li:first-of-type {
// styles
}
.navigation_holder ul li:last-of-type {
// styles
}
To pop the default styles off the ul:
.navigation_holder ul {
list-style-type: none;
}
A reply to your question, and a question to your question...
What are you looking for?
Here are 3 examples:
1 Providing you wanted a normal left hand horizontal inline-list you would do:
HTML
<div id="navigation_holder">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
CSS
#navigation_left ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#navigation_left ul li { display: inline; }
#navigation_left ul li a
{
font-family:"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
text-decoration: none;
padding: .2em 1em;
color: #DDD;
background-color: #0099CF;
border-radius: 4px;
}
#navigation_left ul li a:hover
{
color: #FFF;
background-color: #00BEF9;
}
2 Providing you want to center your li elements.
HTML
<div id="navigation_center">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
CSS
#navigation_center ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navigation_center ul li { display: inline; }
#navigation_center ul li a
{
font-family:"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
text-decoration: none;
padding: .2em 1em;
color: #DDD;
background-color: #0099CF;
border-radius: 4px;
}
#navigation_center ul li a:hover
{
color: #FFF;
background-color: #00BEF9;
}
3 Providing you want to center your li elements with a solid background.
HTML
<div id="navigation_center_full">
<ul class="full">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
CSS
#navigation_center_full ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
padding: .2em 1em;
color: #DDD;
background-color: #0099CF;
}
#navigation_center_full ul li { display: inline; }
#navigation_center_full ul li a
{
font-family:"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
text-decoration: none;
padding: .2em 1em;
color: #DDD;
background-color: #0099CF;
border-radius: 4px;
}
#navigation_center_full ul li a:hover
{
color: #FFF;
background-color: #00BEF9;
}
Pretty sure this should help you.
Why you dont use <ul> and <li> tags? I think is better. Then in CSS you must use:
display: inline
One example in: http://www.w3schools.com/css/tryit.asp?filename=trycss_float5
I have a very plain navigation menu using an unordered list laid out horizontally using display:inline;. The previews in my HTML editor show the page coming together just fine. However, when it's viewed in Chrome and IE, there's a strange padding on top of the nav menu and only on the top. Using the process of elimination, I know this is a problem with my CSS for the <li> tag but I'm not sure what the problem is.
So far I've tried display:inline-block, lowering the font size, setting the <ul> tag in the nav menu to display:inline, and a myriad other things. None seems to be helping. Any advice for where the CSS went wrong? Here is the HTML in question...
<body>
<div id="wrapper">
<div id="header"></div>
<div id="navigation">
<ul>
<li>welcome</li>
<li>who we are</li>
<li>what we do</li>
<li>contact</li>
</ul>
</div>
<div id="content"> </div>
</div>
</body>
And here is the CSS...
body {
background-color: #000000;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, Sans-Serif;
text-align: center;
}
#header {
background-color: #ffffff;
height: 100px;
}
#wrapper {
width: 960px;
text-align: left;
}
#navigation {
height: 45px;
background-color: #C0C0C0;
font-size: 1.3em;
text-align: right;
}
#navigation a {
color: #00132a;
text-decoration: none;
}
#navigation a:hover {
color: #483D8B;
}
#navigation ul {
padding-top: 10px;
}
#navigation ul li {
display: inline;
list-style-type: none;
padding: 0 30px 0 30px;
}
#navigation-symbol {
font-size: 1em;
}
#content {
background-color: #ffffff;
text-align: left;
font-size: 14px;
}
And for interactive fun there's a jsFiddle as well which shows the exact same phenomenon I'm seeing. Thanks ahead for the advice!
Simply set margin to zero
#navigation ul {
margin: 0;
padding-top: 10px;
}