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.
Related
I am trying to center the navigation bar in the middle of the div body. I want the navigation bar to go from one side of the div to the other but have the list in the ul to be center in the middle of the div if that makes sense. I can't seem to figure it out even after trying online examples. Thanks
body {
margin: 0px;
padding: 0px;
background-color: #505050 ;
}
#body {
width: 75%;
margin: 0 auto;
position: center;
background-color: #C0C0C0;
height: 100%;
}
.nav {
}
.nav ul {
background-color: #CCCCCC;
width: 100%;
padding: 0;
text-align: center;
}
.nav li {
list-style: none;
font-family: Arial Black;
padding: 0px;
height:40px;
width: 120px;
line-height: 40px;
border: none;
float: left;
font-size: 1.3em;
background-color: #CCCCCC;
display:inline;
}
.nav a {
display: block;
color: black;
text-decoration: none;
width: 60px;
}
<div id="body">
<h2>Hello World!</h2>
<div class="nav">
<ul>
<li><a href="#">Home<a></li>
<li><a href="#">About<a></li>
<li><a href="#">News<a></li>
<li><a href="#">Contact<a></li>
</ul>
</div>
</div>
i attach fix here http://jsfiddle.net/o4716uo9/
use inline-block for li
background property should be setted in ul element, not li, in your case. Delete the float in nav li. Also, the a element it isn't closed correctly. Main changes:
.nav ul {
background-color: #cccccc;
text-align: center;
}
.nav ul li {
display: inline-block;
min-width: 120px;
[...]
}
I'll recommend you to take a look at the bootstrap framework. It could be interesting for you.
There are a couple things you can change to correct the issue:
1) Your <a> elements have a width of 60px. You can remove this.
2) You .nav li has a width of 120px. I would change this to 25% (If there are only going to be four navigational items).
http://jsfiddle.net/xLnz90ek/
Is that any closer to the desired effect.
Is this what you’re trying to do?
* { margin:0; padding:0 }
html {
background-color: #505050;
font-size: 4vw;
}
header {
width: 75%;
margin: 0 auto;
background-color: #C0C0C0;
}
nav {
background-color: #CCCCCC;
display: flex;
padding: 0.2rem 0;
}
nav a {
flex: 1 0 auto;
font-family: Arial Black;
font-size: 1rem;
background-color: #CCCCCC;
color: black;
text-decoration: none;
text-align: center;
margin: 0 0.3rem;
}
<header>
<h2>Hello World!</h2>
<nav>
Home
About
News
Contact
</nav>
</header>
I have come across a few examples while searching SO but to me - as a beginner - it is not very clear what the best practices are when it comes to implementing this.
I want to have the logo in the middle of my navigation bar with 2 links to centered left of the image and 2 centered right so that my 4 links so that the center of the logo aligns with the 4 links horizontaly.
For your reference:
http://jsfiddle.net/8fc0e632/
HTML:
<body>
<nav class="menubar">
<div id= "navmenu">
<ul>
<li>Over ons</Li>
<Li>Menukaart</Li>
<li><a class="logo" href="Info.html"><img src="http://i.imgur.com/WwCbbpG.jpg" alt="First8 Logo"></a></li>
<Li>Ontbijtmanden</Li>
<Li>Contacteer ons</Li>
</ul>
</div>
</nav>
CSS:
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800,800italic);
.body {
font-family: "Open Sans";
}
.menubar {
background: rgb(228, 6, 19);
box-shadow: 0 1px 3px #999;
font-family: inherit;
}
.menubar ul {
display: block;
text-align: center;
padding: 0;
margin: 0;
list-style: none;
}
.menubar ul li {
display: inline;
list-style: none;
}
.menubar ul li a {
text-decoration: none;
color: white;
padding: 0 15px 0 0;
font-family: "Open Sans"
}
.logo img {
margin: 10px auto 0px auto;
display: block;
width:220px;
}
If you want to do it like this, you will have to set the li width, because menu items are not the same length.
CSS:
.menubar ul li {
display: inline-block;
width: 220px;
list-style: none;
vertical-align: middle;
}
and here's your updated JSFiddle
But in my opinion the best what you can do is to use Bootstrap
//Oh and you should always use <li></li> not <Li></Li> and definitely not <li></Li>
Sometimes you can center img elements with by adding margin: 0 auto; to the property you want to center(in your case .logo img)
otherwise i would go with a margin-left:45%; or margin-left:auto with a margin-right:auto property on the .logo img elemsome solution in that ballpark.
/S
Just change your css applied to logo img. Hope this works.
.logo img {
width:220px;
vertical-align: middle;
}
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; }
I'm trying to code a drop down menu where the hovered over list item displays a list of links horizontally.
What is happening with my code right now is that all the links are right on top of each other, and I can't for the life of me figure out how to fix them.
I've tried adding height and width, and then adjusting the padding, margins, you name it. Somehow using display: inline; hasn't been enough to accomplish this.
If anyone could help me out with this, that would be much appreciated.
<header>
<nav>
<div class="container">
<div class="wrapper">
<h1><img alt="logo" src="logosmall.jpg" />
<strong>New Ideas</strong>Education
</h1>
<ul>
<li>about us</li>
<li>teachers
<ul>
<li>Literature</li>
<li>International</li>
<li>Staff</li>
</ul>
</li>
<li>lessons</li>
<li>reviews</li>
</ul>
</div>
</div>
</nav>
</header>
And the CSS:
ul {
list-style-type: none;
display: inline;
}
header nav {
}
header nav ul {
background: #fff;
padding: 2px 0 0 0;
list-style: none;
position: relative;
float: right;
display: inline;
}
header nav ul:after {
content: "";
clear: both;
display: block;
}
header nav ul ul:after {
content: "";
clear: both;
display: inline;
margin: 0 20px 0 0;
}
header nav ul li {
float: left;
padding: 10px 20px;
text-transform: uppercase;
color: #757575;
display: inline;
}
header nav ul li:hover > ul {
color: #06cbe2;
display: inline-table;
padding: 5px 60px;
margin: 0 20px 0 0;
float: left;
position: absolute;
}
header nav ul li:hover a {
color: #06cbe2;
}
header nav ul li a {
display: inline;
color: #757575;
text-decoration: none;
text-transform: uppercase;
}
header nav ul ul {
background: #fff;
padding: 0px 20px 0px 0px;
list-style: none;
position: absolute;
float: left;
display: none;
}
header nav ul ul li {
position: absolute;
display: inline;
margin: 0 30px 0 0;
color: #757575;
text-transform: uppercase;
padding: 10px -60px;
font-size: 10pt;
}
header nav ul ul li a {
padding: 10px -60px;
color: #757575;
text-decoration: none;
text-transform: uppercase;
display: inline-table;
font-size: 6pt;
}
header nav ul ul li a:hover a {
color: #06cbe2;
}
firstly make sure where and how you wanted to display the controls, if you saying all controls are sitting on over the other then all those positions have same value, the css have same values for almost all ID and Class, I can give you and example to fix and it might help you to fix your problem
Imagine you need two dropdown list one is on left and one is on right side then do this
NOTE(its just an example)
<div id=Main>
<div id=left></div>
<div id=right></div>
</div>
now provide height and width as 100% to "Main", then provide css for "left" as below
#left
{
height:100%;
width:50%;
border:1px solid black;
background-color: #ffffff;
float:left;
}
#right
{
height:100%;
margin-left:50%;
border:1px solid black;
background-color: #ffffff;
float:right;
}
and inside to those div's use your dropdown controls or any controls and modify the width if you want, Let me know if it works, will help you
I have this issue, I can't for the life of me try and remove the whitespace in this (li) tag, below I've include a screen capture, what I'm trying to do is remove the white before the grey menu bar, as well make the whole menu bar line up to bottom grey bar.
CSS
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu li {
float: left;
margin: 0 0.5em 0 0.5em;
left: 0px;
padding: 0;
list-style: none;
}
.menu li a {
float: left;
display: inline-block;
width: 161.3px;
text-decoration: none;
text-align: left;
font-family: 'MyriadPro', sans-serif;
font-size: .875em;
color: #FFF;
height: 1.2em;
}
#MenuGreyBar li a{
display: block;
width: 200px;
list-style: none;
left: 0px;
height: 1.2em;
float: left;
margin: 0;
}
HTML
<div class="menu">
<div>
<ul id="MenuGreyBar">
<li style="left: 0px;">
</li>
</ul>
</div>
<ul>
<li>
About Us
</li>
<li >
Help & Support
</li>
<li >
Law & Information
</li>
<!-- ... There are a few more. -->
</ul>
</div>
The image: (it didn't let me embed)
http://db.tt/tcSr5kGv
I'm not positive if this is your issue, but here's my guess:
.menu li {
float: left;
margin: 0 0.5em 0 0.5em; /* We set a left margin for all menu elements here
which will cause them to jut over. We want this for
most elements*/
left: 0px;
padding: 0;
list-style: none;
}
.menu li a {
float: left;
display: inline-block;
width: 161.3px;
text-decoration: none;
text-align: left;
font-family: 'MyriadPro', sans-serif;
font-size: .875em;
color: #FFF;
height: 1.2em;
}
#MenuGreyBar li a{
display: block;
width: 200px;
list-style: none;
left: 0px;
height: 1.2em;
float: left;
margin: 0; /*The first menu item is special and needs no margin, so we try
to clear it, however we are clearing the anchor element in the li
block, and the margin is applied on the li block itself, so the li
block's margin is rendered before the anchor has any say*/
}
So what we need to do is clear the margin property on the actual li element, this code will do it:
#MenuGreyBar li{
margin: 0;
}
That should do it, my best guess.