I'm having a total brain fart and can't figure out how to display my title/logo and navigation on the same line in my html code. I want the title/logo to be on the left and the nav to be on the right.
Here's my HTML:
<div class="header">
<div class="title">
<h1>Homegrown</h1>
</div><!--/.title-->
<nav class="nav">
<ul>
<li>Home</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav><!--/.nav-->
</div><!--/.header-->
Here's my CSS:
.title {display:inline; float:left; margin:0 auto;}
.nav {
display:inline;
float:left;
width:100%;
margin:0 1.7%;
padding:25px 2%;
margin-bottom:0;
}
ul {display:inline; float:right; list-style:none;}
li {display:inline;}
For the .nav selector remove width: 100%; , change float: left to float: right and (if you want) change padding:25px 2%; into padding:0 2%;
.nav {
display: inline;
float: right;
/*width:100%;*/
margin: 0 1.7%;
/*padding:25px 2%;*/
padding: 0 2%;
margin-bottom: 0;
}
Demo: http://jsfiddle.net/4svrN/
Remove the padding will work
Demo http://jsfiddle.net/vFgke/
.title {display:inline; float:left; margin:0 auto;}
.nav {
display:inline;
float:right;
margin:0 1.7%;
margin-bottom:0;
}
ul {display:inline; float:right; list-style:none;}
li {display:inline;}
Try
body {
width: 100%;
}
.title {
display:inline;
float:left;
margin:0 auto;
}
.nav {
display: inline;
float: right;
padding: 25px 2%;
}
}
ul {display:inline; float:right; list-style:none;}
li {display:inline;}
Related
Just trying to figure out why this div won't center. If I can get this working, I'll be set.
JSFiddle
body{
margin:0;
overflow: hidden;
}
ul{
list-style-type:none;
overflow:hidden;
padding:0px;
margin: 0 auto;
width:60%;
text-align:center;
}
ul li{
text-transform:uppercase;
float:left;
}
ul li a{
display: block;
width: 120px;
text-decoration:none;
background-color:#98bf21;
text-align:center;
margin:0px;
padding:10px;
font-weight:Bold;
color:#fff;
font-family:Arial;
letter-spacing: 1px;
}
ul li a:hover{
background-color:#7A991A;
}
#container{
width:100%;
}
<div id = "container">
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
Every time I try to display it in the browser, it looks like this:
Also how do I stretch the navigation bar to 100%? Like from the very left of the page to the right?
You want to center a div without specified width. For that, first remove ul{width:60%;}, then add text-align:center to the Parent and display:inline-block to the Child :
#container{
text-align:center;
}
ul{
display:inline-block;
}
body{
margin:0;
overflow: hidden;
}
ul{
list-style-type:none;
overflow:hidden;
padding:0px;
margin: 0 auto;
text-align:center;
display:inline-block;
}
ul li{
text-transform:uppercase;
float:left;
}
ul li a{
display: block;
width: 120px;
text-decoration:none;
background-color:#98bf21;
text-align:center;
margin:0px;
padding:10px;
font-weight:Bold;
color:#fff;
font-family:Arial;
letter-spacing: 1px;
}
ul li a:hover{
background-color:#7A991A;
}
#container{
width:100%;
text-align:center;
}
<body>
<div id = "container">
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</body>
1、delete margin: 0 auto;width:60%;from ul and add display: table;margin: 0 auto;like this：
ul{
display:inline-block;
list-style-type:none;
overflow:hidden;
padding:0px;
/* margin: 0 auto;
width:60%; */
display: table;
margin: 0 auto;
}
2、delete margin: 0 auto;width:60%;from ul and add ‘text-align: center’ in #container，‘display: inline-block’ in ul like this:
#container{
width:100%;
text-align: center;
}
ul{
display:inline-block;
list-style-type:none;
overflow:hidden;
padding:0px;
display: inline-block;
}
3、
#container{
width:100%;
position: relative;
}
ul{
display:inline-block;
list-style-type:none;
overflow:hidden;
padding:0px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
4、
#container{
width:100%;
display: flex;
justify-content: center;
}
ul{
display:inline-block;
list-style-type:none;
overflow:hidden;
padding:0px;
}
5、
#container{
width:100%;
display: flex;
}
ul{
display:inline-block;
list-style-type:none;
overflow:hidden;
padding:0px;
margin: 0 auto;
}
may help you。
choose the best one for you project。
Is this what you are looking for?
All I did was moving the background color to the #container, removed the 60% width, and make the LI elements display: inline-block
ul li{
text-transform:uppercase;
display: inline-block;
}
https://jsfiddle.net/391sz22s/1/
Here is one way of doing it.
Set display: table to the ul element, which will give you a shrink-to-fit block level element that will then center using margin: 0 auto.
Set display: table-cell on the li elements.
The advantage of this approach is that the links will remain on a single line no matter how small you make the page width, which may be the desired effect for some designs.
You could set the with of the ul to 100%, but then your link elements would increase in width, which may not be what you want.
ul {
list-style-type:none;
overflow:hidden;
padding:0px;
margin: 0 auto;
width: auto;
display: table;
}
ul li {
text-transform:uppercase;
display: table-cell;
}
ul li a {
display: block;
width: 120px;
text-decoration:none;
background-color:#98bf21;
text-align:center;
margin:0px;
padding:10px;
font-weight:Bold;
color:#fff;
font-family:Arial;
letter-spacing: 1px;
}
ul li a:hover {
background-color:#7A991A;
}
#container {
width:100%;
}
<div id="container">
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
I'm having issues with centering the text in my navigation bar. I've tried everything I can think of. Any help would be greatly appreciated.
What I have here is my navigation bars html and css code. I have tried centering it and using other means but am still stuck.
hTML
<div class="content-outer" id="top_nav">
<div class="content-inner">
<ul>
<li>Home<li>
<li>Digital</li>
<li>Film</li>
<li>Timeline</li>
<li>Contact</li>
</ul>
</div>
</div>
css
.container {
width: 1060px;
background: #FFF;
padding: 50px;
margin: 0 auto;
}
#top_nav {
position:fixed;
background:#343642;
font-family: Impact, Charcoal, sans-serif;
}
#top_nav ul {
margin:0;
padding:0px 0;
list-style:none;
width:990px;
text-align: center;
overflow:hidden;
}
#top_nav ul li {
margin:0 56px 0 0;
padding:0;
font-size:1.7em;
text-transform:uppercase;
float:left;
font-weight:bold;
}
#top_nav ul li a {
color:#fef6e9;
text-decoration:none;
display: block;
}
#top_nav ul li a:hover {
color:#ed7163;
text-decoration:none;
}
.content { padding: 10px 0;}
.content-outer { width:100%; float:left; overflow:visible; }
.content-outer .content-inner { width:978px; margin:0 auto; overflow:visible; position:relative; }
Is this what you are looking for?
I removed the extra divs; created a nav element; put margin: 0 auto; on the ul; replaced the float: left on the li with display: inline-block; and there you have it!
HTML
<nav id="top_nav">
<ul>
<li>Home<li>
<li>Digital</li>
<li>Film</li>
<li>Timeline</li>
<li>Contact</li>
</ul>
</nav>
CSS
#top_nav {
position:fixed;
background:#343642;
font-family: Impact, Charcoal, sans-serif;
width: 100%;
}
#top_nav ul {
margin: 0 auto;
padding:0px 0;
list-style:none;
width:990px;
text-align: center;
}
#top_nav ul li {
margin:0 56px 0 0;
padding:0;
font-size:1.7em;
text-transform:uppercase;
display: inline-block;
font-weight:bold;
}
#top_nav ul li a {
color:#fef6e9;
text-decoration:none;
display: block;
}
#top_nav ul li a:hover {
color:#ed7163;
text-decoration:none;
}
Instead of giving just a margin-right for each li element like I can see in your code margin: 0 56px 0 0;, why you don't give equal margin left and right to each li tag?
For example: margin:0 34px 0 34px;
It could be a quick solution.
Check this DEMO:
http://jsfiddle.net/4n9hq/1/
Here is the answer in simplest form
<nav>
<ul>
<li>Home<li>
<li>Digital</li>
</ul>
</nav>
CSS
ul {
display: block;
text-align: center;
}
li {
display: inline-block;
}
In conclusion: set the "ul" tag to display:block and then center text
need some help. I'm just learning HTML and have been looking at how to do menus today, whilst doing so I have ran into a problem.
I can't seem to figure out how to center the menu on screen.
This is what I have so far;
<div id="navMenu">
<ul>
<li>Home</li>
<li>WWW.
<ul>
<li>Through the years</li>
</ul></li>
<li>Browsers
<ul>
<li>IE</li>
<li>Firefox</li>
<li>Chrome</li>
</ul></li>
<li>CSS
<ul>
<li>CSS 2.1</li>
<li>CSS 3</li>
</ul></li>
<li>Scripting
<ul>
<li>JavaScripts</li>
<li>jQuery</li>
</ul></li>
</ul>
</div>
Current CSS;
#navMenu{
margin:0;
padding:0;
}
#navMenu ul{
margin:0;
padding:0;
line-height:30px;
}
#navMenu li{
margin:0;
padding:0;
list-style:none;
float: left;
position: relative;
background-color: #999;
border-radius: 5px;
}
#navMenu ul li a{
text-align: center;
text-decoration:none;
height:30px;
width:150px;
display:block;
color: #FFF;
border: 1px solid #FFF;
text-shadow: 1px 1px 1px #000;
}
#navMenu ul ul{
position:absolute;
visibility:hidden;
top:32px;
}
#navMenu ul li:hover ul{
visibility:visible;
}
#navMenu li:hover{
background-color: #09F;
}
#navMenu ul li:hover ul li a:hover{
background-color: #CCC;
color: #000;
}
#navMenu a:hover{
color:#000;
}
The above produces this .... http://gyazo.com/55cf62d121ef16eb1248e5246d0accae
Anyway to get the menu bar in the center of the screen.
SIDE NOTE:: Any spoilers tags on this site?
Try using display: inline-block and text-align: center.
Set display: inline-block for the <ul> and text-align: center for the container #navMenu. Set text-align: left for #navMenu li to fix the submenus.
Also
Example
#navMenu{
margin:0;
padding:0;
text-align: center;
}
#navMenu ul{
margin:0;
padding:0;
line-height:30px;
display: inline-block;
}
#navMenu li{
margin:0;
padding:0;
text-align: left;
float: left;
list-style:none;
position: relative;
background-color: #999;
border-radius: 5px;
}
Add a width to your menu wrapper and give the left and right an automatic margin.
You can adjust the width depending on where in the center you want to have your nav positioned.
#navMenu {
width: 960px;
margin:0 auto;
padding:0;
text-align: center;
}
The margin and paddings your have in the ul and li are not needed.
#navMenu ul{
list-style: none;
line-height:30px;
display: inline-block;
text-align: center;
}
#navMenu li{
display: inline;
}
Padding should go here to keep all your links even.
#navMenu li a {
display: block;
padding: 10px;
}
I am trying to center then float:right my top fixed navbar with the content area of my page. Currently the navbar is floated right but is not centered with my content area.
Click to view my subject site.
CSS
#topribbon{
width: 100%;
height: 30px;
background-color: #AA1119 ;
margin: -11px 0px 1em 0px;
position: fixed;
z-index: 9999;
}
#topribbon ul{
padding-top:5px;
text-align:right;
float:right;
position:relative;
margin:0 auto;
width:980px;
}
#topribbon ul li{
float:right;
color:white;
padding:0 10px 0 10px;
list-style:none;
display:block;
line-height:20px;
text-align:center;
cursor:pointer;
width:auto;
}
#topribbon ul li:hover{
color:#5C8FA5;
HTML
<div id="topribbon"> <ul>
<li>Free Ground Shipping on all orders over $99!</li>
<li>Why Us?</li>
<li>Account</li>
<li>Cart</li>
<li>+1-800-555-5555</li>
</ul>
</div>
My first guess is the width of ul element doesn't work.
Try this instead
<div id="topribbon">
<div class="ribbonwrapper" style="width:980px;margin:0 auto;">
<ul>
<li>Free Ground Shipping on all orders over $99!</li>
<li>Why Us?</li>
<li>Account</li>
<li>Cart</li>
<li>+1-800-555-5555</li>
</ul>
</div>
</div>
Put the style of .ribbonwrapper into CSS to make the code tidy :) then you can remove irrelevant width & margin property of #topribbon ul
I'm not sure I'm entirely clear on what you're trying to do, but if what you want is to float:right the UL and then have all the LI's within it centered, you could do this:
#topribbon ul { float:right; text-align: center; }
#topribbon ul li { display: inline-block; }
Be sure to remove the float:right; from the li style block.
If you mean something else by "centered with my content area" can you explain more?
Try with float:none; on the #topribbon ul
Pretty confused what you mean exactly myself... Maybe this is what you want? jsFiddle
#topribbon {
width: 100%;
background-color: #AA1119;
margin: -11px 0px 1em 0px;
position: fixed;
z-index: 9999;
overflow:hidden;
}
#topribbon ul {
padding:10px 0 8px;
position:relative;
margin:0 auto;
width:980px;
background:red;
overflow:hidden;
}
#topribbon ul li {
color:white;
list-style:none;
display:inline-block;
line-height:20px;
cursor:pointer;
width:auto;
padding:0 10px 0 10px;
float:right;
}
#topribbon ul li:hover {
color:#5C8FA5;
}
like others have said use the ul below. I am just as stumped as you however, I am new so if my code is wrong then please feel free to tell me. Thanks
#topribbon ul { float:right; text-align: center; }
#topribbon ul li { display: inline-block; }
I've tried making horizontal drop down navigation bars following tutorials, however they are never centered and I can't figure out how to center them. I tried going in the opposite direction and centering my navigation bar first, and then attempting to make it a drop down menu, though this seems to throw everything off. This is the code I have.
EDIT: The problem I am having is that the submenu is displayed when the page is loaded, along with a bullet point, which I'm sure can be fixed by setting the list-style to none, however I'm not sure where in the CSS this should be.
I'm trying to create a menu similar to THIS. I understand this uses joomla and I am not.
#header {
height: 100px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#content {
max-width: 700px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
#footer {
height: 85px;
padding-top: 40px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#menu {
margin: 0 auto;
display: inline-block;
list-style: none;
padding: 0;
border-top: 1 solid #ccc;
border-left: 1 solid #ccc;
border-bottom: 1 solid #ccc;
}
#menu li {
float: left;
}
#menu li a {
display: block;
padding: 10px 10px;
text-decoration: none;
font-weight: bold;
}
#menu li a:hover {
color: #c00;
}
<ul id="menu">
<li>Home
</li>
<li>Kandi
<ul>
<li>Claim Kandi
</li>
</li>
<li>Events
</li>
<li>Artists
</li>
<li>Community
</li>
<li>Merchandise
</li>
</ul>
Add this CSS:
#menu, #menu ul {
margin:0 auto;
padding:0;
}
#menu li {
float: left;
position: relative;
list-style: none;
}
#menu > li:hover > ul {
display: block;
}
#menu > li > ul {
display: none;
position: absolute;
}
#menu li a {
white-space: nowrap;
}
http://jsfiddle.net/tcKvH/1/
use this css
#menu{
position:absolute;
top:150px;
left:8%;
padding:0;
margin:0;
}
#menu ul{
padding:0;
margin:0;
line-height:30px;
}
#menu li{
position:relative;
float:left;
list-style:none;
background:rgba(0,0,0,1);
border-radius:5px;
}
#menu ul ul{
position:absolute;
visibility:hidden;
padding:0;
margin:0;
top:30px;
}
#menu ul li a{
text-align:center;
font:"Arial Black", Arial;
font-size:24px;
color:rgba(255,255,255,9);
width:150px;
height:30px;
display:block;
text-decoration:none;
}
#menu ul li:hover{
background-color:rgba(128,128,128,1);
text-decoration:none;
}
#menu ul li:hover ul{
visibility:visible;
z-index:1;
}
#menu ul li:hover ul li a{
background:rgba(0,0,0,9);
z-index:1;
border-bottom:1px solid rgba(160,160,164,1);
opacity:0.9;
text-decoration:none;
border-radius:5px;
}
#menu ul li ul li:hover{
background:rgba(128,128,128,1);
opacity:0.8;
text-decoration:underline;
}
with this html code
<div id="menu">
<ul>
<li>Home</li></ul>
<ul>
<li>Video <!--This is in main menu-->
<ul>
<li>Technology</li> <!--This is in drop downmenu-->
<li>Tutorial</li> <!--This is in drop downmenu-->
</ul>
</li>
</ul>