I'm brand new to this coding stuff so please go easy on me ;)
I'm trying to make the top nav on this website stretch to fit the width of what I understand to be the "container" of the website which is 900px wide. I can't for the life of me remove what appears to be padding or margins to the left and right of the nav. See code below.
Site screenshot here: http://img560.imageshack.us/img560/9479/237c.png
Right now I'm just cleverly making adjustments to padding to make the nav somewhat centered on the page, but ultimately it would look much better if it met up with the edge of the containter like everything else.
Thx for any help.
/* Navigation
--------------------------------------------------------------------------------*/
#topnav {
clear: both;
margin: 0 0;
overflow: hidden;
}
#topnav ul {
list-style: none;
float: left;
text-align: center;
}
#topnav ul li {
list-style: none;
float: left;
background: url(nav-sep.png) right 0px no-repeat;
padding: 15px 0px 12px 0px;
display: inline block;
}
#topnav ul > li:last-child,
#topnav ul > span:last-child li {
background: none;
padding-right: 0;
}
#topnav a {
float: left;
display: block;
color: #545454;
font-family: Blair, sans-serif;
font-weight: 500;
padding: 6px 0 6px;
border: 0;
border-top: 3px solid transparent;
outline: 0;
margin: 0 16.6px;
list-style-type: none;
font-size: .75em;
text-transform: uppercase;
}
#topnav ul > li:last-child a,
#topnav ul > span:last-child li a {
margin-right: 0;
}
#topnav li#active a,
#topnav a:hover {
color: #666666;
border: 0;
border-top: 3px solid #8cc640;
}
Try with
margin-left:auto;
margin-right:auto;
See also:
Cross browser method to fit a child div to its parent's width
Hope this helped. Cheers.
I would say to add a main container div that will enclose all your existing html, and then define a css for it with margin-left/right as auto :
<head>
.......
<style>
#mainContainer {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<html>
<body>
<div id="mainContainer">
............................
............................
............................
</div>
</body>
</html>
Hi if you are new on this you need to know that for default all element tags like ul, p or body has for default some values on properties like margin and padding. What you need is first work on reset those values in CSS to avoid issues and make more easier your cutomization. In your case the ul has some properties:
ul {
display: block;
list-style-type: disc;
margin-before: 1em;
margin-after: 1em;
margin-start: 0;
margin-end: 0;
padding-start: 40px;
}
You can use this simple global reset with * as the global selector :
* {
margin:0;
padding:0;
}
Or search for some complex resets like this one.
Then with values on 0 you can customize in a better way your elements:
#topnav ul {
list-style: none;
float: left;
text-align: center;
width:100%;
}
Related
I've been trying to get multiple background images on my page but I couldn't get more than 2, so I started to think that I might use divs instead. But when I use divs I got like 5 white pixels left at the top and and sides of the screen, that was until I changed the position to absolute but then my navbar was stuck behind the div... If anyone could please help me fixing my issue.
My code isn't that good, but this is what I have at the moment:
#P1Tekstvlak1_1 {
background-image: url("DakB1.jpg");
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
/** — Navbar —*/
#nav {
color: FFFFFF;
opacity: 0.9;
}
#nav_wrapper {
width: auto;
margin: 0 auto;
text-align: left;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: fixed;
min-width: 200px;
text-align: center;
background-color: #B50B26;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
color: white;
text-align: center;
text-shadow: 1px 1px 1px #FFFFFF;
}
#nav ul li a,
visited {
color: #FFFFFF;
font-size: 20px;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
<div id="nav">
<div id="nav_wrapper">
<ul>
<li>Home</li>
<li>Over</li>
<li>Renovatie</li>
<li>Nieuwbouw</li>
<li>Vacatures</li>
<li>WKA</li>
<li>Contact</li>
</ul>
</div>
</div>
Remove the absolute positioning and then apply a CSS reset like the one here . Browsers have some styling attributes it applies by default for accessibility purposes. You should remove them. I do this before starting to build any web UI.
Note: Absolute positioning will stack elements versus applying layout to them. That is why you are seeing it behind your NAV
Hi I am reformatting a menu bar in CSS design using Sublime text reader. This is for a homepage created from a template using Omeka. The main problem I am having is the padding on the end of the menu-bar; particularly with the "last-child". I tried to add padding to see if that would expand the background color but it won't change. The background color ends directly after the word ends. Here is the code:
#primary-nav
{
clear: none;
float: right;
width: auto;
padding: 0 20px;
}
#primary-nav a
{
display: block;
border: none;
color: #ffffff;
background-color: #13294B;
text-align: center;
height: 53px;
line-height: 53px;
padding: 0px 20px;
}
#primary-nav li
{
border: none;
}
#primary-nav li a:hover
{
background-color: #00a3e0;
color: #121111;
}
#primary-nav .navigation > li:first-child a
{
border: none;
}
#primary-nav .navigation > li:last-child a
{
border:none;
text-align: center;
padding: 0px 20px;
}
As a last note, if there is a way to condense this code that would be nice. This is the code that was generated from the template. The only part that was added was "last-child" to fix the formatting at the end of the menu bar.
Here is a link to the webpage so you can see what I am describing. http://digitalhistory.butlerlibraryservices.org/
You have this line in your style.css CSS file (Line 1931) which is causing the problem:
#primary-nav .navigation > li:last-child a {
padding-right: 0;
}
Remove it and you should fix your issue.
I am building a footer but I am having trouble getting the 4 divs which contain links to various pages to centralize. On dreamweaver it behaves correctly, but as soon as I upload it or test it on JSFIDDLE its decentralized.
Ideally I want it to look like this, with each of the divs 'centered' in the footer:
Random information above the divs below (displayed center of footer)
Product Company Etc.... Contact
link link
link link
And so on.
I have a demo here which has the full code: http://jsfiddle.net/NkFe9/3/
Here is some of the CSS:
/*global footer settings*/
#footer {
color: #C9C9C9;
min-width: 1500px;
background-color: #2d2d2d;
list-style: none;
height: 450px;
background-image:url(../img/index/footer/pixelpatterns.png);
background-repeat:repeat;
}
#insidefooter {
margin-top: 20px;
text-align: center;
}
/*settings for social media buttons*/
#insidefootertermsplusbuttons li {
display: inline;
color: #C9C9C9;
}
#insidefooterone h5, #insidefootertwo h5, #insidefooterthree h5, #insidefooterfour h5 {
text-align:left;
margin-bottom: 0;
color:#FFFFFF;
}
#insidefooterone ul, #insidefootertwo ul, #insidefooterthree ul, #insidefooterfour ul{
list-style: none;
text-align: left;
margin-left: 0;
color: #C9C9C9;
}
#insidefooterone li, #insidefootertwo li, #insidefooterthree li, #insidefooterfour li {
list-style: none;
text-align: left;
margin-left: 0;
color: #C9C9C9;
}
#disclaimer {
margin-top: 20px;
font-size: 9px;
text-align: center;
margin-bottom: 0;
}
#disclaimer p {
text-align:center;
color: #C9C9C9;
}
Thank you
Try adding padding:0 to ul
#insidefooterone ul, #insidefootertwo ul, #insidefooterthree ul, #insidefooterfour ul{
list-style: none;
text-align: left;
margin-left: 0;
color: #C9C9C9;
padding:0
}
DEMO
And dont judge the output based on dreamweaver Design view. Always prefer to check in browser.
You need to use margin:0 auto to make the div center aligned. margin:0 auto wont make any difference with float:left. So you need to eliminate float: left from the parent div.
And try adding a parent div to the ul links so that it is easy to align it.
Updated Demo
I'm lost... I tried the other answers given in the questions with no results.
Here, my CCS:
ul.nav { padding-top: 5px; font-family: 'OFL Sorts Mill Goudy TT', Georgia, serif; float: left; }
ul.nav li { margin-left: 7px; }
ul.nav a { font-size: 17px; color: #918f8f; text-decoration: none; text-shadow: 1px 1px 0px #fff; padding: 15px 6px 18px; }
ul.nav a:hover { color: #000000; text-shadow: 1px 1px 0px #fff; }
How can i center my navigation bar?
You can give your UL a fixed width and center like this:
ul.nav {
width: 200px;
margin: 0 auto;
}
If this navigation isn't supposed to be a sidebar, then remove the float: left;
Try this
body{ text-align:center;}
{And rest of your code...}
and it will be in center.
Remove float:left;
add a width.
add margin:0 auto;
`
css
ul.nav {
padding-top: 5px;
font-family: 'OFL Sorts Mill Goudy TT', Georgia, serif;
width: 300px;
margin: 0 auto;
}
Remove the float first of all - it will throw your list over to the left of the screen. Then, you have two options:
Give the List a fixed width, then use margin:0 auto.
ul.nav {
width: 40em;
margin: 0 auto;
}
This if fine if you will always have a set amount of links in your nav bar. Not so useful if this changes frequently, or even dynamically. I would prefer the following solution, although an additional bit of markup is required
Use a wrapping element, styled display:table
The HTML:
<nav class="my-class" role="navigation">
<ul>
...
</ul>
</nav>
Then your CSS:
.my-class {
display: table; /*centers its contents*/
width: 100%; /*make sure it doesn't collapse*/
margin: 0 auto;
}
ul {
whatever /*just don't use text align!*/
}
Now it doesnt matter how much you put in that list, it will always center for you.
I have this css code here
.navigation{
width:100%;
background-color:#7a7a7a;
font-size:18px;
}
.navigation ul {
list-style-type: none;
margin: 0;
}
.navigation li {
float: left;
}
.navigation ul a {
color: #ffffff;
display: block;
padding: 0 65px 0 0;
text-decoration: none;
}
What I am trying to do is center my class navigation. I tried using text-align:center; and vertical-align:middle; but neither of them worked.
and here is the HTML Code
<div class="navigation">
<ul>
<li>home</li>
<li>about</li>
<li>tutors</li>
<li>students</li>
<li>contact us</li>
</ul>
</div><!--navigation-->
When I say its not working, I mean the text is aligned to the left.
Change the rule on your <a> element from:
.navigation ul a {
color: #000;
display: block;
padding: 0 65px 0 0;
text-decoration: none;
}
to
.navigation ul a {
color: #000;
display: block;
padding: 0 65px 0 0;
text-decoration: none;
width:100%;
text-align:center;
}
Just add two new rules (width:100%; and text-align:center;). You need to make the anchor expand to take up the full width of the list item and then text-align center it.
jsFiddle example
You have to make the UL inside the div behave like a block. Try adding
.navigation ul {
display: inline-block;
}
I try to avoid floating elements unless the design really needs it. Because you have floated the <li> they are out of normal flow.
If you add .navigation { text-align:center; } and change .navigation li { float: left; } to .navigation li { display: inline-block; } then entire navigation will be centred.
One caveat to this approach is that display: inline-block; is not supported in IE6 and needs a workaround to make it work in IE7.