I have a script here for my navigation bar:
<style type="text/css">
/* Navigation Bar */
#nav_bar {
display:inline-block;
height:50px;
}
#nav_bar ul {
display:inline-block;
list-style-type: none;
border: 1px solid red;
width: 565px;
height: 100%;
text-align: center;
padding: 0;
margin: 0;
}
#nav_bar li {
display:inline;
height:100%;
padding: 0;
margin: 0;
}
#nav_bar a:hover {
background-color: #000000;
}
#nav_bar a {
display:inline-block;
height: 100%;
color:white;
text-decoration:none;
line-height: 50px;
padding: 0 1em 0 1em;
background-color: #900000;
}
</style>
</font>
I'm having trouble trying to get it displayed in the centre of the page, how can I do it?
I've looked into "display: inline-block;" and "position: relative" and couldn't find a code that worked
the html part of my nav bar is as follows (in regards to your comments) I hope it helps! :)
<div id="nav_bar">
<ul>
<li> Home </li>
<li> Forums </li>
<li> Shipping Info </li>
<li> Contact us </li>
<li> About us </li>
</ul>
</div>
Give it a width and auto margins and make sure its a block level element.
By default a 'div' is a block level element so you can remove this rule.
You must set a width or the menu with expand to the width of its container.
#nav_bar {
display:block;
height:50px;
margin: 0 auto;
width: 567px; /* or whatever you require */
}
Example:
http://jsfiddle.net/29FRa/
#nav_bar {
height:50px;
width:800px;
margin:0 auto;
}
HTML:
<html>
<body>
<div id="#nav_bar"></div>
</body>
</html>
Use text-align: center; on your #nav_bar and be sure it is a block-level element.
http://jsfiddle.net/TKMeU/
A total of six kinds of methods：
１、Margin and width to achieve horizontal center
#nav_bar {
height:50px;
}
#nav_bar ul {
list-style-type: none;
border: 1px solid red;
width: 565px;
height: 100%;
text-align: center;
padding: 0;
margin-left: auto;
margin-right: auto;
}
please view the demo.
2、use the inline-block, like this:
#nav_bar {
height:50px;
text-align: center;
}
#nav_bar ul {
list-style-type: none;
display: inline-block;
border: 1px solid red;
width: 565px;
height: 100%;
text-align: center;
padding: 0;
text-align: center;
font-size: 0;
letter-spacing: -4px;
word-spacing: -4px;
}
#nav_bar li {
margin: 0 5px;
display: inline-block;
*display: inline;
zoom:1;
letter-spacing: normal;
word-spacing: normal;
font-size: 12px;
}
please view the demo.
3、use the float,like this:
#nav_bar {
float: left;
width: 100%;
overflow: hidden;
position: relative;
}
#nav_bar ul {
list-style-type: none;
width: 565px;
height: 50px;
height: 100%;
padding: 0;
clear: left;
float: left;
position: relative;
left: 50%;/*整个分页向右边移动宽度的50%*/
text-align: center;
}
#nav_bar li {
margin: 0 5px;
display: block;
height: 50px;
float: left;
position: relative;
right: 50%;/*将每个分页项向左边移动宽度的50%*/
}
#nav_bar a:hover {
background-color: #000000;
}
#nav_bar a {
display:block;
height: 100%;
color:white;
text-decoration:none;
line-height: 50px;
padding: 0 1em 0 1em;
background-color: #900000;
}
Please view the demo.
Other methods, you can click here.
Related
I'm creating a digital portfolio for myself, and I have created a basic navigation bar, with ul/li styling, using css and html. The hover effect I want is almost there, but when you hover over the image, there is a white box behind the link text. From my understanding, that should only happen if the display property is set to block, since inline is the default, and I have property set to inline but it still behaves as if its block. Can you help?
This is my current css code:
ul{
list-style:none;
width:100%;
border-width: 2px 0px 2px 0px;
border-color: rgb(255,255,255);
border-style: solid;
padding: 0px;
line-height: 0px;
font-family: "Raleway";
font-size: 100%;
color: rgb(255,255,255);
letter-spacing: 0.2em;
position: relative;
margin-top: 9%;
left: 0%;
right: 100%;
float:left;
}
li {
display:inline;
}
li a{
font-size: 28px;
color:white;
text-align:center;
text-decoration: none;
}
li a:hover{
background-color: #f2f2f2;
color: #21cca5;
}
.active{
color: #21cca5;
}
#extras{
color:white;
float: left;
width: 20%;
text-align: right;
padding: 0px;
clear: none;
}
#aoiti{
color:white;
float: left;
width: 20%;
text-align: left;
padding: 0px;
clear: none;
}
#aoitii{
color:white;
float: left;
width: 20%;
text-align: center;
padding: 0px;
clear: none;}
#home{
color:white;
float: left;
width: 20%;
text-align: center;
padding: 0px;
clear: none;
}
#gallery{
color:white;
float: left;
width: 20%;
text-align: center;
padding: 0px;
clear: none;
}
And my relevant html code:
<ul id="linkBar">
<li id="home"><p><p>Home</p></div>
<li id="aoiti"><p>AOIT I</p></li>
<li id="aoitii"><p>AOIT II</p></li>
<li id="extras"><p> Extras</p></li>
<li id="gallery"><p>Gallery</p></li>
<p><br></p>
</ul>
You are writing css like this
li a:hover{
background-color: #f2f2f2;
color: #21cca5;
}
Change it to
li a:hover{
color: #21cca5;
}
I am trying to display logo at top end in HTML and CSS.
However, the logo image size is not reduced to the specified width and height and I do not see it being overridden anywhere else.
Code is as follows:
/*********************************************************************************/
/* Banner */
/*********************************************************************************/
#banner
{
overflow: hidden;
height: 300px;
position: relative;
background: url(images/pic01.jpg) no-repeat center;
background-size: cover;
}
#banner .image
{
}
#banner p{
position: absolute;
top:30%;
left: 40%;
width: 100px;
padding: 5px;
margin: 5px;
font-family: 'Lobster', cursive;
font-weight: bold;
font-size: 55px;
color: #fff;
}
/** MENU */
#menu-wrapper
{
background: #16a085;
overflow:auto;
}
#menu {
overflow: hidden;
height: 100px;
float:left;
}
#menu ul {
margin: 0;
padding: 0px 0px 0px 0px;
list-style: none;
line-height: normal;
text-align: center;
}
#menu li {
display: inline-block;
}
#menu a {
display: block;
letter-spacing: 1px;
padding: 0px 40px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-size: 0.80em;
line-height: 100px;
border: none;
color: #FFF;
}
#menu a:hover, #menu .current_page_item a {
text-decoration: none;
}
#menu .current_page_item a {
background: #1abc9c;
}
#Logo{
width:10px;
height:30px;
float: left;
margin-top: 5px;
}
<div id="wrapper">
<div id="menu-wrapper">
<div id = "Logo" >
<img src="images/Logo.jpg" ></img>
</div>
<div id="menu" class="container">
<ul>
<li class="current_page_item">Homepage</li>
<li>About</li>
<li>Blog</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
/*and so on */
</div>
It looks like this:
White part in the banner is image that is taking up the width despite of having set width attribute to 10 px.
In your CSS. change the style for #Logo to #Logo img{}. you have to set the width to img tag. Not its parent container.
#Logo img{
width:100px;
height:30px;
float: left;
margin-top: 5px;
}
JS Fiddle
I have a website that I'm designing to be responsive to work on various browsers and devices, most of my content is set with widths to either auto or 100%. However my elements aren't exactly centered as the website includes the width under the scrollbar. I want the width to the available room that you can see, so that my website will center properly.
For example my navbar is correctly aligned on the left, but not the right side of the page. Here is the CSS for my navbar, I have LI bullets that make up the options in the HTML.
#header {
border: 2px solid black;
border-top: none;
background-color: #FFFFFF;
height: 2.75em;
left: 0px;
right: 0px;
width: 100%;
z-index: 1;
position: fixed;
margin-top: -2.55em;
}
#navbar {
position: relative;
text-align: center;
right: 0px;
left: 0px;
width: auto;
display: inline;
}
ul {
left: 0px;
right: 0px;
top: 0px;
}
li {
display: inline;
text-align: center;
width: auto;
padding-left: 5em;
padding-right: 5em;
}
Please try this : http://jsfiddle.net/sqp4nfg5/1/
and css :
body { margin:0; padding:0
}
#header {
background-color: #777;
color: #fff;
float: left;
width: 100%;
z-index: 1;
}
#navbar {
float: left;
width: 100%;
}
ul { margin:0; padding:0
}
li {
float: left;
padding-left: 2%;
padding-right: 2%;
text-align: center;
height:35px; line-height:35px; list-style:none;
}
.center_div{float:left; width:100%; }
.center_div div{width:90%; margin:0 auto; overflow:hidden; border:1px solid lightpink; padding:1% 2%}
I have tried probably 15 suggestions from stackoverflow on how to center nav. Can you help? I just want to center the nav and be able to hover over Expertise without the rest of the nav bar getting jumbled around.
Here is my markup:
<nav id="header-home-nav">
<div id="menu">
<ul>
<li id="" class="">About</li>
<li id="line-li"><p class="nav-lines">|</p></li>
<li id="" class="">Contact</li>
<li id="" class=""><p class="nav-lines">|</p></li>
<li id="" class="">Expertise
<ul id="" class="sub-menu">
<li>▶ Finance</li>
<li>▶ Operations</li>
<li>▶ Capital Management</li>
<li>▶ Capital Management</li>
<li>▶ Capital Management</li>
<li>▶ Capital Management</li>
<li>▶ Capital Management</li>
<li>▶ Capital Management</li>
</ul>
</li>
</ul>
</div>
</nav>
css:
#menu {
position: relative;
font-size: 0.8em;
margin: 0;
padding: 0;
overflow: visible;
z-index: 2;
height: 35px;
width:100%;
}
#menu ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
z-index: 3;
width:100%;
background-color: #666666;
}
#menu li {
background-color: #1b1b1b;
display: block;
float: left;
position:relative;
}
#menu a {
color: #ffffff;
display: block;
text-align: center;
text-decoration: none;
margin: 0;
padding: 10px 20px;
}
#menu a:hover {
color: #000000;
margin: 5px 10px;
padding: 5px 10px;
background-color: #C0C0C0;
border-radius: 10px;
}
#menu ul.sub-menu {
display: none;
position: absolute;
left: 0;
top: 100%;
z-index:100;
}
#menu ul.sub-menu li {
width: 200px;
background-color: #C0C0C0;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: #666666;
z-index:5;
}
#menu ul.sub-menu li a {
color: #000;
text-align: center;
margin: 5px 10px;
padding: 5px 10px;
text-align: left;
}
#menu ul.sub-menu li a:hover {
color: snow;
background-color: #666666;
}
#menu li:hover ul.sub-menu {
display: block;
z-index: 90;
}
EDIT:
Here is a jsfiddle:
http://jsfiddle.net/8A9tq/
Sorry, forgot to add it.
EDIT:
Responsive is important. So I needs to be centered regardless of screen size.
You can add the following:
#header-home-nav {
width: 100%;
}
Then, give the child (#menu) some kind of max-width and auto margins:
#menu {
background: #1B1B1B;
margin: 0 auto;
max-width: 300px;
position: relative;
font-size: 0.8em;
padding: 0;
overflow: visible;
z-index: 2;
height: 35px;
}
This seems to work: http://jsfiddle.net/4Eqad/
#menu {
position: relative;
font-size: 0.8em;
margin: 0;
padding: 0;
overflow: visible;
z-index: 2;
height: 35px;
width:100%;
margin-left:25%;
}
Note the new edition is the margin-left:25%. You can make that whatever you would like.
Nav centered: http://jsfiddle.net/8A9tq/1/
To center an element you need three things: a set (non-percentage) width, block display (automatic with block level elements, but it's a good practice anyway), and your left and right margins to be set to auto:
width: 300px;
display: block;
margin: 0 auto;
So for your example, depending on which element you want to center you could try:
#menu ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
z-index: 3;
width: 300px;
display:block;
margin: 0 auto;
background-color: #666666;
}
or
#menu {
position: relative;
font-size: 0.8em;
margin: 0 auto;
padding: 0;
overflow: visible;
z-index: 2;
height: 35px;
width:300px;
display:block;
}
and so on
Here you can keep your markup and just says to the position has to be 50% left and 50% right.
#menu {
position: relative;
font-size: 0.8em;
margin: 0;
padding: 0;
overflow: visible;
z-index: 2;
height: 35px;
width:100%;
left: 50%;
right: 50%;
}
Fiddle: http://jsfiddle.net/uPs8J/2/
Screenshot of the problem:
The yellow block is the logo and the blue box is the nav links (I have blanked them out). I would like to align the links at the bottom so they are stuck to the top of the body content (white box). How would I do this?
Here is the relevant CSS and HTML.
#header {
height: 42px;
}
#logo {
width: 253px;
height: 42px;
background-image:url(logo.png);
float: left;
}
#nav {
width: 100%;
border-bottom: 2px solid #3edff2;
vertical-align: bottom;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 4px;
text-align: right;
font-size: 1.25em;
}
#nav ul li {
display: inline;
background-color: #3edff2;
padding: 5px;
}
<div id="header">
<div id="logo"></div>
<div id="nav">
<ul>
<li>*****</li>
[...]
</ul>
</div>
</div>
Thanks in advance.
Try this. Seems to work in Firefox/Mac
#header {
height: 42px;
}
#logo {
width: 253px;
height: 42px;
background: #00ffff;
float: left;
}
#nav {
width: 100%;
border-bottom: 2px solid #3edff2;
height: 42px;
}
#nav ul {
list-style-type: none;
margin: 0;
padding-top: 18px;
margin-bottom: 4px;
text-align: right;
font-size: 1.25em;
}
#nav ul li {
display: inline;
background-color: #3edff2;
padding: 5px;
}
Bottom left? If so - start by setting clear: both; on your #nav block.
Other than that, I don't really understand your question - can you make a jpg of how you'd like it to look?
You can use absolute positioning like this:
#header {
position: relative;
height: 42px;
}
#nav {
position: absolute;
bottom: 0px;
width: 100%;
border-bottom: 2px solid #3edff2;
height: 42px;
}
in this method, you make "nav" with absolute positioning related to "header" division.