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.
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
I'm having a weird problem with my CSS menu. There is a huge space above the links.
I tried everything from removing all the margin and padding settings from the css and still nothing. The only way I can remove the extra spacing is to delete all the li.
Can anyone see what I'm doing wrong?
http://jsfiddle.net/3dB7v/
<div id="test_nav">
<div id="test_subnav">
<ul id="test_ul">
<li>Test 1</li>
<li>Test 2</li>
</ul>
</div>
<asp:panel id="pnlUpdateDate" cssclass="UpdateDate" runat="server">Last Update: 11-26-2013</asp:panel>
</div
#test_nav
{
text-align: left;
padding: 5px;
border: 1px dashed blue;
}
#pnlUpdateDate
{
width: 200px;
border: 1px dashed blue;
}
#test_subnav
{
float: right;
position: relative;
z-index: 1000;
padding: 0;
border: 1px solid red;
}
#test_ul li
{
position: relative;
list-style: none;
margin: 0;
padding: 0;
z-index: 1001;
b1order: 1px dashed orange;
}
#test_ul li ul
{
margin-left: 0;
padding: 0;
}
#test_ul > li
{
float: left;
padding: 3px; /* padding-top: 3px; padding-bottom: 3px; */
margin: 0 2px 0 0;
}
#test_ul > li > a, #test_ul > li > span
{
display: block;
padding: 4px 4px 4px 4px;
margin: 0 3px 0 3px;
font-size: 14px;
font-weight: bold;
color: black;
text-decoration: none;
}
#test_ul > li > span
{
cursor: default;
}
#test_ul > li:hover > a, #test_ul > li.active > a
{
color: Red;
}
#test_ul > li:hover > a:active
{
color: #3B96B6;
}
#test_ul > li:hover > span
{
color: #3B96B6;
}
That space belongs to the default margins of the ul#test_ul element applied by the useragent.
You should reset the default stylesheet applied by user agent on the list element, as follows:
ul#test_ul {
padding: 0;
margin: 0;
}
You can refer to this answer for further details:
User agents apply some default styles to the HTML elements. For
instance they apply a top and bottom margin on the <p>, <ul>, ... elements.
As Google Chrome sets -webkit-margin-before: 1em; and -webkit-margin-after: 1em;.
Working Demo
It's better to reset user agent stylesheet before any author stylesheet to prevent unexpected issues.
Try removing the margin and padding from the ul element.
A quick and dirty way would be * { padding:0; margin:0; }
What you are seeing is the browser default styles. Consider locating a "reset" stylesheet and always applying it first before any other styles. I like this one: http://meyerweb.com/eric/tools/css/reset/
Address the problem, not the symptoms. You'll run into this all the time if you don't. Each browsers default styles are different. Zeroing them all out is the only way to get consistency throughout.
It looks like you need to add this to your CSS:
#test_ul {
padding: 0;
margin: 0;
}
This the link http://jsfiddle.net/a6K3f/1/.
I need to have one link in right aligned in the navigation menu. Below code is fine in all major browser except in ie7. Right aligned 'Link4' is breaking down. I know it works if i add floated:right li as first li in ul. But i cannt add as first li. Becasue i have written pseduo classes first-child for that.
I tried many trials but not yet resolved. Can anybody please help in my concern issue. Thanks
HTML:
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li class="f-Right">Link4</li>
</ul>
CSS:
body {
font-family: arial;
font-size: 13px
}
ul {
list-style: none;
margin: 0;
padding: 0
}
ul li {
display: inline-block;
*display:inline;
zoom: 1;
border: 1px solid #ccc;
margin: 0 1px;
padding: 3px
}
.f-Right {
float: right
}
Like this
please write *float:left; and remove
*display:inline;
demo
css
body {
font-family: arial;
font-size: 13px
}
ul {
list-style: none;
margin: 0;
padding: 0
}
ul li {
display: inline-block;
*float:left; /* <--hack for IE **/
zoom: 1;
border: 1px solid #ccc;
margin: 0 1px;
padding: 3px
}
.f-Right {
float: right
}
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%;
}
I'm trying to make a CSS drop down menu but the problem is that child list items overlap parent list items as you can see in the picture.
I found the source of the problem to be the padding: 10px 5px; in line 12 - When removed, the problem is solved. But I need the padding for the look. I read Inline elements and padding which addresses a similar issue but even the solution provided in the article - using float: left; instead of display: inline; - does not solve my problem.
Why does this happen and what is the solution?
HTML Code
<ul id="navigation_2">
<li>Home</li>
<li>About
<ul>
<li>Who We Are</li>
<li>Our Goal</li>
</ul>
</li>
</ul>
CSS Code
ul#navigation_2
{
margin: 0;
padding: 0;
list-style: none;
font-family: "Century Gothic","HelveticaNeueLT Pro 45 Lt",sans-serif;
}
ul#navigation_2 li
{
float: left;
position: relative;
padding: 10px 5px;
font-size: 114%;
text-align: center;
width: 100px;
}
ul#navigation_2 li a
{
text-decoration: none;
}
ul#navigation_2 li a:link, a:visited, a:active
{
color: black;
}
ul#navigation_2 li:hover
{
background-color: red;
}
ul#navigation_2 li ul
{
margin: 0;
padding: 0;
list-style: none;
display: none;
}
ul#navigation_2 li ul li
{
display: block;
width: 150px;
text-align: left;
}
ul#navigation_2 li:hover ul
{
display: block;
position: absolute;
background-color: #CBD966;
}
Here, I have a working example:
http://jsfiddle.net/hzCZY/2/
Never underestimate the power of inline-block! Basically your list was colliding with the text 'About' as opposed to the red box around the text 'About'. I formatted the actual a tag to be the red block instead, an inline-block, which then collided correctly with the ul below it.
If you need any more explanation I'd be more than happy to help.