I'm trying to do something so astonishingly simple, and yet after pounding my head on the wall I'm unable to get the div that contains my navigation menu to center within the container. I would appreciate it if you'd have a look and let me know why it isn't working. I have a 1px border around the elements so you can see how the 'nav' div is staying left justified.
Here's a link to jsfiddle:
http://jsfiddle.net/glennw9/7vr7tovh/3/
html, body {
background-color:#F2EED6;
width:900px;
height:900px;
border: 1px solid #630800;
margin: 0px 0px 0px 0px;
}
#container {
/*border: 1px solid #630800;*/
width: 860px;
margin: 0 auto;
border: 1px solid #630800;
}
h1 {
font-size: 2.5em;
font-family: Georgia;
letter-spacing: 0.1em;
color: #630800;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.6);
text-align: center;
}
div.nav {
margin-left: auto;
margin-right: auto;
display: inline-block;
border: 1px solid #630800;
text-align: center;
}
ul.nav {
width: 840
margin: 0 auto;
display: block;
}
ul.nav, li.nav {
list-style-type: none;
}
li.nav, a.nav {
background: #354178;
color: white;
font-family: Arial, Helvetica, sans-serif;
padding: 6px 10px;
text-decoration: none;
}
li.nav, a.nav:hover {
background: #4A5AA7;
display:inline;
}
li {
display:inline;
padding: 10px;
}
a.active {
background: white;
color: black;
border: 1px solid #CCCCCC;
}
<body>
<div id="container">
<h1>Edit Order Record</h1>
<div class="nav">
<ul class="nav">
<li><a class="nav" href="inv-main.php">Main Page</a>
</li>
<li><a class="nav" href="prod-view-paged.php">View Products</a>
</li>
<li><a class="nav active" href="order-view-paged.php">View Orders</a>
</li>
<li><a class="nav" href="cat-view.php">View Categories</a>
</li>
<li><a class="nav" href="#Bot">Go to Bottom</a>
</li>
</ul>
</div>
<br>
<br>
<br>
</body>
Simply add text-align: center; to the #container element.
Here's a fiddle.
You can center align it by simply two ways.
This "div.nav" class has inline-block. To make it center aligned with its parent, you have to use "text-align:center" to its parent.
Remove inline-block for "div.nav" class and add margin:0 auto in this class. It will be center aligned.
you have a lot of options mentioned above. This too counts as one of them: position: absolute;
left:50%;
margin-left: (half of the width of the div u wish to center)
Remember, set your parent element/div to relative.
What about this (updated fiddle)?
div.nav {
margin: 0 auto;
border: 1px solid #630800;
text-align: center;
}
If you want to consider using flex-box, you can do something like this too (see the fiddle, and here's the browser compatibility table):
HTML:
<nav>
<h1>Hello world</h1>
<ul>
<li>Thing</li>
<li>Another thing</li>
<li>Yet another</li>
</ul>
</nav>
CSS:
nav {
border: 1px solid gray;
display: flex;
flex-flow: column wrap;
align-items: center;
width: 100%;
}
li {
display: inline-block;
border: 1px solid black;
}
And lastly, here's a list of ways to center stuff:
Set this on the child element: { margin-left: 50%; transform: translateX(-50%) }
If the child element is block do this: { margin: 0 auto }
Or, on the parent element, do: { text-align: center }
remove the margin:0px 0px 0px 0px; and change that to margin:auto; in html,body{}
and add text-align:center in #container.
html, body {
background-color:#F2EED6;
width:900px;
height:900px;
border: 1px solid #630800;
/* margin: 0px 0px 0px 0px;*/
margin: auto;
}
#container {
/*border: 1px solid #630800;*/
margin: 0 auto;
border: 1px solid #630800;
text-align:center;
}
just edit the css part. and it will generate the output like this:
Related
So here is my issue, I am trying to make the whole list element click able, but for some reason with display: table-cell there is a margin/border either side of the anchor tag, so it does not fill the entire width of the list element.
I want to use display:table-cell so my fit evenly across the navbar.
HTML:
<ul id="nav_list">
<li class="selected"><a href="search" id="menu_item" >Search</a></li>
<li class=""><a href="suggest" id="menu_item" >Suggest</a></li>
<li class=""><a href="report" id="menu_item" >Report Bug</a></li>
<li class=""><a href="about" id="menu_item" >About</a></li>
<li class=""><a href="help" id="menu_item" >Help</a></li>
</ul>
</nav>
CSS
#container{
margin: 0 auto;
width: 500px;
}
nav ul{
list-style-type: none;
background-color:#415d79;
border-radius: 3px;
margin: 0;
padding: 0;
height:auto;
width: 100%;
display: table;
overflow:hidden;
}
nav li{
display: table-cell;
padding: 10px;
color:#FFF;
text-align: center;
font-weight: 500;
border-right: 2px solid #364F69;
border-bottom: 3px solid #324961;
}
nav a{
padding: 10px;
}
Checkout the fiddle https://jsfiddle.net/kk9qqq2f/
I have modified your code a bit to make the entire area of the cell click-able
CSS
nav li{
display: table-cell;
padding: 0; /* Changed padding from 10px to 0 */
color:#FFF;
text-align: center;
font-weight: 500;
border-right: 2px solid #364F69;
border-bottom: 3px solid #324961;
}
nav a{
padding: 10px;
display:block; /* Added */
}
nav a {
width: 100%;
padding: 10px;
height: 100%;
display: inline-block;
}
Use the above CSS
DEMO
I am semi-new to web development and am currently working on a webpage with a fixed top navbar. I have my logo in the center of a list and my links outside it. I would like the links to be vertically centered. I will include a screenshot and the code. Maybe you can help me? Thanks a lot! I appreciate your time.
Screenshot of Navbar
HTML:
<div class="header">
<div class="table">
<div class="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Before & After</li>
<li><img src="photos/logo.png"> </li>
<li>Portfolio</li>
<li>Facebook</li>
<li> <script src="js/email.js"></script>
</ul>
</div>
</div>
</div>
CSS:
#font-face {
font-family: offbeat;
src: url(offbeat.woff);
font-weight: normal;
font-style: normal;
}
body {
margin: 0 auto;
padding: 0;
background: rgb(209,202,178);
}
.header {
background: rgb(175,166,135);
width: 100%;
height: 100px;
margin: 0px;
padding: 0px;
position: fixed;
top: 0px;
z-index: 2;
border-bottom: 1px solid rgb(102,102,102);
}
.table {
display: table;
float: left;
left: 50%;
width: 1150px;
height: 100px;
line-height: 100px;
overflow: auto;
position: absolute;
}
.logo img {
z-index: 4;
position: relative;
left: 50%;
}
.navbar {
float: left;
right: 48.5%;
position: relative;
}
.navbar li {
display: inline;
padding: 0px;
margin: 0 auto;
width: 100%;
margin-right: 40px;
text-shadow: 1px 1px rgb(115,109,88);
font-family: offbeat;
font-size: 20px;
letter-spacing: 5px;
white-space: nowrap;
overflow: auto;
}
.navbar a {
text-decoration: none;
color: rgb(255,255,255);
text-align: center;
border-bottom: 1px solid;
border-color: rgb(255,255,255);
padding: 10px;
margin: 5px;
white-space: nowrap;
}
.navbar a:hover {
background-color: rgb(135,127,99);
}
I would look to use line-height to achieve this. Set the height on the parent container .navbar to 100px then set a line-height of 100px on the .navbar li.
This will mean the link text is always in the centre of the navbar. To ensure the logo was in the centre I would add vertical align middle.
As a bonus I would look to implement box-sizing it greatly helps with layouts that use padding.
#font-face {
font-family: offbeat;
src: url(offbeat.woff);
font-weight: normal;
font-style: normal;
}
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0 auto;
padding: 0;
background: rgb(209, 202, 178);
}
.header {
background: rgb(175, 166, 135);
width: 100%;
height: 100px;
margin: 0px;
padding: 0px;
position: fixed;
top: 0px;
z-index: 2;
border-bottom: 1px solid rgb(102, 102, 102);
}
.navbar {
margin: 0;
padding: 0;
text-align: center;
}
.navbar ul {
margin: 0;
padding: 0;
overflow: hidden;
}
.navbar li {
display: inline-block;
padding: 0px;
margin-right: 40px;
text-shadow: 1px 1px rgb(115, 109, 88);
font-family: offbeat;
font-size: 20px;
letter-spacing: 5px;
line-height: 100px;
vertical-align: middle;
}
.navbar img {
vertical-align: middle;
}
.navbar a {
text-decoration: none;
color: rgb(255, 255, 255);
text-align: center;
border-bottom: 1px solid;
border-color: rgb(255, 255, 255);
padding: 10px;
margin: 5px;
white-space: nowrap;
}
.navbar a:hover {
background-color: rgb(135, 127, 99);
}
<div class="header">
<div class="navbar">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Before & After
</li>
<li>
<img src="http://placehold.it/50x50">
</li>
<li>Portfolio
</li>
<li>Facebook
</li>
<li>
<script src="js/email.js"></script>
</ul>
</div>
</div>
I edit your base code as you used a lot of needed positioning techniques. Please compare with your code.
try adding this to your css
.navbar ul
{
display:inline;
vertical-align:middle;
}
Let the ul padding:20px 0px; direct the center vertically and text-align:center direct your center horizontally. Also use inline-block so that you can give your entire li focus for menu linking purposes
here is your problem solved FIDDLE
p.s. Your main problem is you are using way too much css. This is not supposed to be such a hard implementation and you definitely do not need absolute positioning, but fixed positioning. The rest is just colors.
If you need to give more padding to the top so they look closer to the bottom, use the padding property to distribute the padding as needed (i.e. padding: 40px 0px 5px) etc.
Here is a common saying we have...Use "absolute" only when "absolutely" necessary ;)
heres how i did it.
core change on css:
.navbar {
display:table;
margin: 15px auto;
}
.navbar li {
line-height:70px;
display: block;
padding: 0px;
float:left;
margin: 0 auto;
margin-right: 40px;
text-shadow: 1px 1px rgb(115,109,88);
font-family: offbeat;
font-size: 20px;
letter-spacing: 5px;
white-space: nowrap;
}
simplified html:
<div class="header">
<ul class="navbar">
<li>Home</li>
<li>About</li>
<li>Before & After</li>
<li><img src="http://img1.wikia.nocookie.net/__cb20120630091052/farmville2/images/0/0f/Google-Logo.png" height=70px /></li>
<li>Portfolio</li>
<li>Facebook</li>
</ul>
<script src="js/email.js"></script>
</div>
http://jsfiddle.net/4a8dkz3n/
i messed around a bit on jsfiddle so it might be a bit different,
but basically i gave display:table to so that i can give "margin:0 auto;" to it
and used 'line-height' to vertical alignment of the list menu.
also simplified the code a bit.
I am trying to create a responsive centered logo header with side navigation. because I want it to be responsive there are no fixed widths which makes it difficult to accomplish the centering (margin:auto). As the window becomes smaller I would like the li tags to sit on top of each other. I do not want to float left and float right the side navigations because I want them to be be attached to the sides of the logo not the sides of the window, with the same amount of space between logo and menu on left and right.
html:
<div id="header">
<div id="nav">
<div id="nav-inner">
<ul id="site_nav_1">
<li id="menu-item">
The Problem
</li>
<li id="menu-item">
Why Sanitize
</li>
</ul>
<div id="logo-nav">
<div id="logo"></div>
</div>
<ul id="site_nav_2">
<li id="menu-item">
About Us
<li id="menu-item">
Sanitize Now!
</li>
</ul>
</div>
</div>
</div>
http://jsfiddle.net/7PhJZ/74/
You need to use media queries and set different styles depending on breakpoints. I would suggest mobile first.
Very rough fiddle at http://jsfiddle.net/7CcjD/ - try changing the width of the Result box.
<div id="header">
<div class="menu-1">Menu 1</div>
<div class="logo">Logo</div>
<div class="menu-2">Menu 2</div>
</div>
div {border: 1px solid #999}
.menu-1 {border-color: red}
.logo {border-color: green}
.menu-2 {border-color: blue}
.menu-1, .logo, .menu-2 {
margin: 1em auto;
width: 80%
}
#header {text-align: center;}
#media only screen and (min-width: 640px) {
.menu-1, .logo, .menu-2 {
border-width: 2px;
width: 20%;
display: inline-block;
}
}
you could use inline-block instead floatting :
http://jsfiddle.net/7PhJZ/75/
#nav {
margin:auto;
display: block;
border: 1px solid green;
}
#nav-inner {
max-width:810px;
height:200px;
margin:auto;
display: block;
border: 1px solid grey;
white-space:nowrap;/* keep them on one line */
}
#header {
position: fixed !important;
overflow: visible;/* auto if fixed would be wised somehow */
padding: 0px;
width: 100%;
top: 0;
left:0;
border: 1px solid purple;
}
#logo-nav {
display: inline-block;
}
#logo {
border: 1px solid blue;
margin: 0px auto 0px auto;
width: 225px;
height: 124px;
}
ul#site_nav_1 {
display:inline-block;
border: 1px solid red;
text-align:right;
max-width:32%;
}
ul#site_nav_2 {
display:inline-block;
border: 1px solid red;
text-align:left;
max-width:29%;
}
li#menu-item {
display:inline-block;
padding:20px;
text-align: center;
}
a {
font-family:'gobold_boldregular';
font-size:25px;
text-transform:uppercase;
letter-spacing: 1px;
text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
}
/* some reset */
#logo-nav, #site_nav_1, #site_nav_2 {
vertical-align:middle;
}
ul, li {
padding:0;
margin:0;
white-space:normal;
}
http://jsfiddle.net/hmaQR/
Here is my html:
<div id="page">
<div id="logo">
<h1>My Website</h1>
</div>
<div id="navigation-wrapper">
<ul id="top-navigation">
<li class="home">Home</li>
<li class="about">About</li>
<li class="Blog">Blog</li>
<li class="Contact">Contact</li>
</ul>
</div>
<div id="body"></div>
</div>
and the CSS
#page {
margin: 0 auto;
border: 2px solid black;
width: 960px;
height: 700px;
}
h1 {
font-family: Helvetica;
text-decoration:;
color: #0099CC
}
#logo {
position: relative;
margin: 0 auto;
text-align: center;
font-size: 20px;
border: 1px dashed blue;
}
#navigation-wrapper {
margin: 0 auto;
border: 1px dashed blue;
text-align: center;
}
#top-navigation {
border: 1px solid black;
margin: 0 auto;
list-style: none;
}
#top-navigation li {
width: 80px;
height: 20px;
background-color: orange;
padding: 5px;
color: blue;
font-family: Helvetica;
display: inline-block;
}
You'll notice that the orange navbar/list is not quite centered to the logo above it. What the heck am I missing?
I cannot seem to get the #top-navigation to center to the middle of the page. I'm super new to css, so any help would be appreciated.
I suggest you in each css file of a page that you make, always put the following first to disable all margin and padding of the default css:
* { margin:0;padding:0}
Try that, and then you can tweak the margin and padding of your h1
Hope this helps
I forked your fiddle: http://jsfiddle.net/hmaQR/1/
ul { padding-left: 0; }
I highly recommend getting a good dev toolbar. Chrome has a great one out of the box.
I am learning about css atm, and I am trying to use a external css to style all my website. I found that if I do:
<ul id="menu" style="width:420px; margin:0 auto">
I get the result I want, but if I do it on a external file like:
this is the css file:
*{
margin:0px;
padding:0px;}
header, section, footer, aside, nav, article, hgroup {
display:block;}
body {
width:100%;
display:-webkit-box;
background-color: #808286;
-webkit-box-pack: center;}
#container {
max-width: 1000px;
margin: 20px 0px;
display:-webkit-box;
background-color: #FFFFFF;
display:-webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1; }
#top_header {
background-color: #fdd023;
padding: 20px;
border: 2px solid #49207e;}
#new_div {
display:-webkit-box;
-webkit-box-orient: horizontal; }
#navigation_bar {
border: 1px solid #5970B2;
padding: 0;}
#main_section {
border: 1px solid blue;
-webkit-box-flex: 1;
margin: 20px;
padding: 20px;}
#side_left {
border: 1px solid red;
width: 220px;
margin: 20px 0px;
padding: 30px;
background: #66CCCC;}
#main_footer {
text-align: center;
padding: 20px;
border-top: 2px solid green;}
#menu {
width:420px;
margin:0 auto;}
#menu li {
list-style: none;
display: inline;
}
#menu li a {
display: inline;
padding: 0 8px 0px;
text-align: center;
text-decoration: none;
}
#menu div {
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #5970B2}
#menu div a {
position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;}
this is the Html code:
<div id="container">
<nav id="navigation_bar">
<ul id="menu">
<li>
<a href=""">
A
</a>
<div id="firstMenu">
1
2
</div>
</li>
<li>
<a href="">
B
</a>
<div id="secondMenu">
1
2
3
4
</div>
</li>
<li>
<a href="">
C
</a>
</li>
<li>
<a href="">
D
</a>
</li>
<li>
<a href="">
E
</a>
</li>
</ul>
<div style="clear:both"></div>
</nav>
I get a different layout. The first centers my menu bar, and the second one give me a little of a padding. I am using Chrome, but I think I may be missing a key concept here.
The differences you are seeing are due to some other code on the page.
If a CSS rule applies (after the cascade is applied), then it doesn't matter where it came from as far as rendering is concerned.