I've been working on my navbar and with the help of this site, managed to find out how to center it using text align. However, there is a weird indent that I cannot account for in my navbar as you can see in the example so when I center it, it's taking the indent into consideration too, so it doesn't look right.
How do I remove this indent and have it centered properly? I'm rather new to this, so advice would be great. Many thanks.
http://jsfiddle.net/f2eNm/
HTML
<div class="links_container">
<div class="nav1">
<ul>
<li>Home</li>
<li>About</li>
<li>Challenges</li>
<li>Progress</li>
<li>Forum</li>
</ul>
</div>
</div>
CSS
*{
margin:0;
}
.links_container {
width: 100%;
height: 25px;
background-color: #33C4AB;
margin-right: auto;
margin-left: auto;
border-bottom-style: double;
border-bottom-width: 2px;
border-color: #000000;
/* [disabled]-webkit-box-sizing: inherit; */
/* [disabled]-moz-box-sizing: inherit; */
/* [disabled]box-sizing: inherit; */
position: absolute;
max-width: 1000px;
}
.nav1 {
display: inline;
float: left;
}
.nav1 ul li {
list-style-type: none;
float: left;
display: block;
}
.nav1 ul li a {
color: #FFFFFF;
text-decoration: none;
background-color: #333333;
display: inherit;
height: 25px;
width: 100px;
text-align: center;
line-height: 25px;
border-left: thin solid #CCCCCC;
}
.noBorder {
border-left-style: none !important;
}
.nav1 ul li a:hover {
background-color: #6B6B6B;
}
.leftedge {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.rightedge {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
You need to change some things.
.nav1
{
text-align: center;
}
.nav1 ul {
margin: 0;
padding: 0;
display: inline-block;
overflow: hidden;
}
http://jsfiddle.net/f2eNm/3/
Related
im wondering how to write my css so that when i hover the text the green line under the yellow box becomes yellow as well. thank you
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border-bottom: 2px solid green;
}
#left {
float: left;
}
#right {
float: right;
}
a {
display: block;
color: black;
text-align: center;
padding: 12px 12px;
text-decoration: none;
}
a:hover {
background-color: yellow;
}
link
https://jsfiddle.net/18fk9sce/
i should add that i wish the green line to remain. some solutions seem to remove the green line running across the page.
Okay, I've just updated the solution now.
Just replace the overflow: hidden; in ul with a fixed height: 42px. And increase the padding bottom of the hovered link by 2px (i.e the border-bottom size). That would cover the border with yellow color of the link.
Check the updated fiddle
ul {
list-style-type: none;
margin: 0;
padding: 0;
height: 42px;
border-bottom: 2px solid green;
}
#left {
float: left;
}
#right {
float: right;
}
a {
display: block;
color: black;
text-align: center;
padding: 12px 12px;
text-decoration: none;
}
a:hover {
background-color: yellow;
padding-bottom: 14px;
}
HTML - added wrapper
<div class="menu__holder">
<ul class="main_menu_left">
<li id="left">Homehome</li>
<li id="left">Homehomehome</li>
<li id="left">Homehome</li>
<li id="right">Homehome</li>
<li id="right">Home</li>
</ul>
</div>
CSS
.menu__holder {
width: 100%;
padding: 0;
border-bottom: 2px solid green;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
z-index: 9999;
margin-bottom: -2px;
}
ul li {
border-bottom: 2px solid transparent;
}
ul li:hover {
border-color: yellow;
z-index: 9999;
}
#left {
float: left;
}
#right {
float: right;
}
a {
display: block;
color: black;
text-align: center;
padding: 12px 12px;
text-decoration: none;
}
a:hover {
background-color: yellow;
}
Updated fiddle - NEW
You have to set the border in the li not in ul, so you can separately change the border.
Just change the Style to achieve it:
Updated fiddle
Updated Style
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#left {
float: left;
}
#right {
float: right;
}
a {
display: block;
color: black;
text-align: center;
padding: 12px 12px;
text-decoration: none;
}
li{
border-bottom: 2px solid green;
}
li:hover {
background-color: yellow;
border-bottom: none;//you can set other color here
}
Updated CSS :-
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#left {
float: left;
}
#right {
float: right;
}
a {
display: block;
color: black;
text-align: center;
padding: 12px 12px;
text-decoration: none;
border-bottom: 2px solid green;
}
a:hover {
background-color: yellow;
border-bottom: 2px solid yellow;
}
try with adding this to your css.if this is not the case tell me
ul:hover{
border-bottom:1px solid yellow;
}
thanks to everyone who contributed to this question.
in the end this is the code i use.
https://jsfiddle.net/4d0ghscu/
<style>
.menu{
height:40px;
border-bottom:4px solid green;
padding:0;}
.menu_left{
display:inline;
list-style-type:none;}
.menu_right{
display:inline;
list-style-type:none;}
.tab_left{
float:left;}
.tab_right{
float:right;}
a{
display:block;
color:black;
padding:12px 12px;
text-decoration:none;}
a:hover{
background-color:yellow;}
</style>
<ul class="menu">
<ul class="menu_left">
<li class="tab_left">Homehome</li>
<li class="tab_left">Homehomehome</li>
<li class="tab_left">Homehome</li>
</ul>
<ul class="menu_right">
<li class="tab_right">Homehome</li>
<li class="tab_right">Home</li>
</ul>
</ul>
key to the code:
*separating left from right within an overhead. which made it simpler and more flexible to add new elements to the navigation menu.
*adding height.
I am trying to vertically align an anchor tag within a list item, i have managed to horizontally align it so far. See code below and check jsfiddle for demo.
HTML
<div id="header-top">
<div id="header-top-middle">
<ul>
<li><a data-icon="" a href="#">1</a></li>
<li><a data-icon="" a href="#">222222222</a></li>
<li><a data-icon="" a href="#">3</a></li>
<li><a data-icon="" a href="#">4</a></li>
</ul>
</div>
CSS
#header-top {
height:30px;
background-color:#303030;
width: auto;
border-bottom: 2px solid #DDDDDD;
}
#header-top-middle {
width:1024px;
margin: 0 auto;
height:30px;
}
#header-top-middle ul {
list-style: none;
margin: 0;
padding: 0;
}
#header-top-middle ul li {
border-right: 1px solid #DDDDDD;
display: inline;
float: left;
overflow-x: hidden;
overflow-y: hidden;
}
#header-top-middle ul li a {
color: #FFFFFF;
display: block;
font-size: 15px;
height: 30px;
text-align: center;
width: 30px;
text-decoration:none;
}
See jsfiddle
You can use display: table for your list:
#header-top-middle ul {
list-style: none;
margin: 0;
padding: 0;
display: table;
}
as well as display:table-cell; and vertical-align: middle; for your link inside list item:
#header-top-middle ul li a {
color: #FFFFFF;
display: block;
font-size: 15px;
height: 30px;
text-align: center;
width: 30px;
text-decoration:none;
display:table-cell;
vertical-align: middle;
}
Updated Fiddle
Add line-height:30px to a:
http://jsfiddle.net/hRadK/1/
#header-top-middle ul li a {
color: #FFFFFF;
display: block;
font-size: 15px;
height: 30px;
text-align: center;
width: 30px;
text-decoration:none;
line-height:30px;
}
This might help: http://css-tricks.com/centering-in-the-unknown/
In the link, Chris deals with centering an element whose width and height are unknown.
#header-top-middle ul li a {
color: #FFFFFF;
//display: block;
font-size: 15px;
height: 30px;
text-align: center;
width: 30px;
text-decoration:none;
display:table-cell;
vertical-align:middle;
}
http://jsfiddle.net/hRadK/8/
Try the approach outlined in this answer of wrapping your hyperlinks in a div and applying the vertical alignment on the div. The only other amendment you will need to make is then to remove the block display of hyperlinks you currently have defined.
#header-top-middle ul li a {
color: #FFFFFF;
/* display: block; - remove this rule */
font-size: 15px;
height: 30px;
text-align: center;
width: 30px;
text-decoration:none;
}
Updated fiddle
I'm using a navigation bar for a project I'm working on. I've always had trouble with horizontal navigation bars, and I've looked everywhere for the right solution, without success. The navigation bar was shifted to the left, so I put in some padding in my css, and now it's centered, however the text is not centered in it, and the hover effect for the first link doesn't cover the whole 'box' the text is in.
CSS:
/* Entire Document CSS */
html{
height: 100%;
}
/* Header CSS */
.headers{
color: #FFFFFF;
text-align: center;
padding: 30px;
margin-bottom: 0px;
margin-top: 0px;
background-color: #63B8FF;
}
.headers2{
color: #FFD89A;
text-align: center;
padding: 10px;
}
/* Body CSS */
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
}
.container{
margin-left: auto;
margin-right: auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
height: 50%;
}
/* Navigation CSS */
.nav{
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0px 0px 0px 0px;
}
.nav li{
display: inline-block;
}
.nav a{
display: inline-block;
padding: 10px 110px 10px 0.80px;
text-align: center;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link{
color: #FFFFFF;
text-decoration: none;
}
a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover{
background-color: #028482;
color: #FFFFFF;
text-decoration: overline;
}
a:active{
background-color: #FF9C00;
color: #FFFFFF;
text-decoration: underline;
}
.Links A:hover{
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
HTML5 (Index Page)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Play - Learn - Grow</title>
<link rel="stylesheet" href="main.css">
</head>
<body class="body">
<h1 class="headers">Welcome to KUBE Toy Library!</h1>
<nav>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Become a Member</li>
<li>Borrow Toys</li>
<li>Our Policies</li>
<li>Site Map</li>
</ul>
</nav>
<h2 class="headers2">Welcome to the Home Page!</h2>
<div class="container">
Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance
their cognitive, social, emotional and physical development in the important first six years of their lives.
<br><br><span class="Links">Be sure to check out our Wikispace site with more information here!</span>
</div>
<div id="content"></div>
<div id="footer">
Copyright © 2013
</div>
</body>
</html>
Note that I'm quite new compared to the others here on this forum, so please take it easy on me! :) Also this is a fictional company, etc. for an assignment I was given. Thanks!
Hi your page in my browser was displayed like below
I changed your css to make it browser resolution independent. As a UI developer I felt that overline was not looking good so I removed that. Use my code
/* Body CSS */
.body {
background-color: #61B329;
color: #FFFFFF;
}
/* Header CSS */
.headers {
color: #FFFFFF;
text-align: center;
padding: 30px;
margin: 0;
background-color: #63B8FF;
}
.headers2 {
color: #FFD89A;
text-align: center;
padding: 10px;
}
.container {
margin: 0 auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
}
/* Navigation CSS */
.nav {
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0;
padding: 0;
min-width: 1000px;
width: 100%;
}
.nav li {
list-style-type: none;
width: 14.28%;
float: left;
}
.nav a {
display: inline-block;
padding: 10px 0;
width: 100%;
text-align: center;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link,
a:visited,
a:hover {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
background-color: #028482;
}
a:active {
background-color: #FF9C00;
color: #FFFFFF;
text-decoration: underline;
}
.Links A:hover {
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
Demo:
http://jsfiddle.net/NphBK/
This is a common problem. But to fix this you need to make the parent text-align: center and give the children display: inline-block;
If you want to have it completely equalizing you'll need to switch to display: table and display: table-cell.
I am currently trying to get a horizontal navigation menu to stretch from across the whole of my container.
The div that it is in stretches across fine, but the actual list items don't and I am unsure why.
The CSS for the right hand bar, the container holding the nav bar, and the nav items is:
#rhs{
position: relative;
float: right;
height: 720px;
width: 200px;
background-color: #3D0099;
border-left:2px solid #616161;
}
nav{
display: block;
position: relative;
width: 1010px;
height: 50px;
margin-left: 7px;
background-color: #F0F0F0;
border-top: 1px solid #616161;
border-bottom: 1px solid #616161;
z-index: 99999;
}
nav li{
list-style: none;
display: inline;
margin-left: 10px;
z-index: 99999;
}
The full jsfiddle: http://jsfiddle.net/zDzLs/
Any ideas?
Change css of rhs div to:
#rhs{
position: absolute;
right:0px;
height: 720px;
width: 200px;
background-color: #3D0099;
border-left:2px solid #616161;
}
your code was making my OCD go crazy.
I've revised it a bit for you here. Hope you like it.
http://jsfiddle.net/zDzLs/3/
<header>
<img class="logo" src="images/header.png"/>
<nav>
<ul>
<li class="active">Home</li>
<li>What is Counselling?</li>
<li>Personal Counselling</li>
<li>Relationship Counselling</li>
<li>Supervision of Counsellors</li>
<li>Life Coaching</li>
<li>Contact Me</li>
</ul>
</nav>
</header>
<div class="container">
<div class="content-left"><div class="inner">LEFT</div></div>
<div class="content-right"><div class="inner">RIGHT</div></div>
</div>
* {
padding: 0;
margin: 0;
}
body{
background-color: #F0F0F0;
font: 14px Century Gothic;
}
header {
width: 960px;
margin: 30px auto;
}
header .logo {
width: 300px;
}
nav {
background: #F0F0F0;
margin-top: 30px;
overflow: hidden;
}
nav ul li {
list-style-type: none;
float: left;
margin-right: 2px;
font-size: 12px;
}
nav ul li a {
display: inline-block;
text-decoration: none;
padding: 10px;
background: #333;
color: #fff;
text-align: center;
}
nav ul li a:hover,
nav ul li.active a {
background: #666;
}
.container {
margin: 30px auto 0;
width: 960px; /* 958px */
border:2px solid #616161;
overflow: hidden;
background: #fff;
}
.content-left {
float: left;
width:628px;
margin-right: 30px;
}
.content-right {
float:left;
width: 300px;
background: #f9f9f9
}
.inner {
padding: 20px;
}
Someone asked me to improve his CSS to prevent the navigation menu from changing position when the browser gets smaller, but I can't figure out why it won't work. See the jsFiddle: http://jsfiddle.net/gtvTY/10/
The HTML:
<div id="menu">
<ul>
<li>HOME</li>
<li>VIRAGE</li>
<li>RAPIDE</li>
<li>DBS</li>
<li>DB9</li>
<li>CYGNET</li>
</ul>
</div>
This is the original menu:
ul.menu {
position:absolute;
left:18%;
right:18%;
background: #333;
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 64%;
z-index: 3;
}
ul.menu li {
float: left;
margin: 0;
padding: 0;
}
ul.menu a {
background: #333;
color: #ccc;
display: block;
float: left;
margin: 0;
padding: 8px 12px;
text-decoration: none;
}
ul.menu a:hover {
background: #666;
color: #fff;
padding-bottom: 8px;
}
I have redesigned it a bit to this. But it doesn't work at all...
#menu ul {
position: absolute;
list-style: none;
padding: 0;
margin: 0;
}
#menu li
{
float: left;
margin: 0 0.15em;
}
#menu li a
{
background-color: #333;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
color: #fff;
text-decoration: none;
text-align: center;
}
#menu ul a:hover {
background: #666;
color: #fff;
padding-bottom: 2px;
}
Why doesn't this menu stay centered at all times?
Maybe it is something like this you are looking for - jsFiddle in comment
You need to put the menu in a wrapping container. Give it a width and set the margin: 0 auto;
See fiddle here: http://jsfiddle.net/AndrewHenderson/gtvTY/7/
HTML:
<div class="container">
<div id="menu">
<ul>
<li>HOME</li>
<li>VIRAGE</li>
<li>RAPIDE</li>
<li>DBS</li>
<li>DB9</li>
<li>CYGNET</li>
</ul>
</div>
</div>
CSS:
.container{
margin: 0 auto;
width: 800px;
}
Is that what you want? jsfiddle
Menu canter aligned in the bowoser.
Menu Items will not go in the second row.
if this is so the solution is
You have to use position:relative; instead of position:absolute;
<div class="center">
<div id="menu">
<ul>
<li>HOME</li>
<li>VIRAGE</li>
<li>RAPIDE</li>
<li>DBS</li>
<li>DB9</li>
<li>CYGNET</li>
</ul>
</div>
and define a width to your menu css
.center
{
width:auto;
}
#menu
{
width:900px;
margin:0 auto;
position:relative;
}
#menu ul {
list-style: none;
padding: 0;
margin: 0;
}
#menu li {
float: left;
margin: 0 0.15em;
}
#menu li a {
background-color: #333;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
color: #fff;
text-decoration: none;
text-align: center;
}
#menu ul a:hover {
background: #666;
color: #fff;
padding-bottom: 2px;
}