I've built a CSS navbar on the bottom. For some reason, there is this little buffer on the left side, and nothing seems to eliminate it. This prevents my links from centering correctly.
I've tried padding-left: -10px, but it doesn't move left, even when padding-left: 10px DOES move it to the right.
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
}
footer {
position: fixed;
bottom: 0;
left: 0;
height: 35px;
width: 100%;
font-size: 12px;
background-color: black;
padding-bottom: 25px;
padding-left: 0;
list-style-type: none;
text-decoration: none;
text-align:center;
letter-spacing:2px;
float: none;
}
ul li {
display: inline;
background:url('images/sep.svg') no-repeat top left;
padding-left: 10px
}
a {
text-decoration: none;
list-style-type: none;
color: #DFC184;
a:visited: blue;
}
http://jsfiddle.net/EHXxS/
http://jsfiddle.net/EHXxS/embedded/result/
#nav {
padding:0;
}
seems to fix it. jsFiddle example
Related
I'm kind of new to HTML and CSS. I have a nav bar that I want (the logo and links) aligned to being above the sidebar on my page. It's in different positions on different screens (and when browser is resized) and I don't know how to fix it. I made a fiddle thing and I'll link to the site so that you will know what I mean.
This is the fiddle: The Fiddle
This is the page: The page
#header {
width: 100%;
height: 91px;
margin: 0;
top: 0;
}
#menu {
float: right;
width: 100%;
height: 54px;
margin-top: 0;
background: #ffffff url(http://i1378.photobucket.com/albums/ah105/WinPhanNick/menu_bar_zps6212d723.jpg) repeat-x left top;
position: fixed;
}
#menu ul {
margin: 0;
padding: 0px 0 0;
list-style: none;
line-height: normal;
margin-left: 28%;
}
#menu li {
display: inline;
text-align: center;
}
#menu a {
display: block;
float: left;
height: 36px;
padding: 18px 20px 0px 20px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #ffffff;
}
li#logo {
height: 52px;
width: 52px;
background: url(http://i1378.photobucket.com/albums/ah105/WinPhanNick/cb_logo_zpsd1b14443.png) no-repeat;
margin-top: 1px;
margin-right: 1px;
margin-left: 1px;
}
#menu a:hover,
#menu .active a {
background: #1687ef;
color: #FFFFFF;
}
#logo {
float: left;
width: 270px;
height: 76px;
margin: 0px;
padding: 15px 0px 0px;
margin-left: 27%;
}
Make your link wrapper (which is the ul) the same width as your page container (which is 892px) and set it to margin: auto to center it. You can remove the margin-left: 28% as well. That's not needed. You also have a float issue so your ul is collapsed. You need to clear your floated elements. You can add overflow:hidden.
#menu ul{
overflow: hidden; //clear float issue
width: 892px; // same width as #page
margin: 0 auto; //will center
padding: 0px 30px; //add to keep the same padding as #page-bgtop
}
FIDDLE
I am trying to move an LI Nav bar to the top right of a page, however when I position: absolute; and top: 0; on my <li> I get my list which is also display: inline; all stacked on top of each other. They go to the part of the screen I want because I'm also float: right; but they won't stay in a line.
Any ideas?
HTML(html and doctype and link tags left out, they're there):
<div id="search">Google Search</div>
<div id="lucky">I'm feeling lucky</div>
<form>
<input id="search_box" type="text" name="">
</form>
<ul>
<li class='nav'>+You</li>
<li class='nav'>Gmail</li>
<li class='nav'>Images</li>
</ul>
CSS:
#search {
font-family: Arial;
font-size: 10;
font-weight: bold;
border: 1px solid black;
width: 7.2em;
white-space: nowrap;
padding-left: 4px;
padding-top: 3px;
padding-right: 4px;
padding-bottom: 4px;
margin: 240px 14px 100px 225px;
display: inline-block; }
#lucky {
font-family: Arial;
font-size: 10;
font-weight: bold;
padding-left: 4px;
padding-top: 3px;
padding-right: 4px;
padding-bottom: 4px;
border: 1px solid black;
display: inline-block; }
#search_box {
width: 600px;
position: absolute;
left: 65px;
top: 212px; }
ul {
list-style-type: none;
margin: 0;
padding: 0; }
.nav {
display: inline-block;
float: left;
padding: 20px;
position: absolute; }
The li's are stacked on top of each other because you are absolute positioning them to the same place. You want to make the ul absolute positioned instead. Include the code below in your css and for good measure you should also tell include something that it is positioned relative to.
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
top: 0;
right: 0;
}
.nav {
display: inline-block;
/* float: left;*/
padding: 20px;
/*position: absolute;*/ }
body{position: relative;}
Try this http://jsfiddle.net/csdtesting/oe55maf0/2/
Added #header :
#header{
float:right;
}
and removed position:absolute; from .nav class .Also added #content :
#content{
position:absolute;
}
to contain the form .
Now the structure is clear.
Hope this helps!
How do I make the hover background-color fill the entire height of the navigation bar plus the padding of the text instead of only the text.
I want to make it look like this.
Fiddle
What am I missing? Thank you in advance!
Here you go. I've created a jsfiddle for you. Its working good:
http://jsfiddle.net/cRjF4/3/
Updated CSS:
<style>
.fa {
font-size: 15px;
margin-top: -10px;
margin-bottom: -10px;
}
.navbar-height {
height: 65px;
}
.clearboth {
clear: both;
}
/* workbar styles */
.fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
background: #FFF;
text-align: center;
height: 67px;
margin: 0 auto;
width: 100%;
}
.workbar {
text-align: center;
margin: 0 auto;
background-color: #ffe6e6;
}
.worknav {
list-style: none;
padding-left: 0px;
margin: 0 auto;
text-align: center;
}
.worknav> li {
text-align: center;
display: inline-block;
padding-left: 20px;
padding-right: 20px;
padding-top: 11px;
padding-bottom: 11px;
}
.worknav> li:hover a {
color: yellow;
}
.worknav>li:hover {
background-color: black;
}
.worknav > li > a {
text-decoration: none;
color: #666;
}
.centered {
float: none;
margin-left: auto;
margin-right: auto;
}
.worktop {
margin-top: 70px;
}
</style>
If you wish to colour both the padding and the text try something like:
a:hover{
background-color:yellow;
color:red;
}
Try to do Anchor link css as
.worknav > li > a {
text-decoration: none;
display:inline-block;
color: #666;
line-height:65px;
}
Check on http://jsfiddle.net/kka284556/cRjF4/9/
You can do it by applying padding on anchor tag. Remove height on ul and li tag and instead of height just apply padding on anchor. And also apply background-color on anchor.
It will work i think. If I am right then let me know i'll share some code if you want.
I'm trying to make a dropdown menu on my website. I want to be able to click on a down arrow and have a menu pop up below it. Right now the menu only shows up part way on the screen.
Here's a picture to show what is going on now:
I would like to have the right side of the menu items lined up with the down arrow, instead of the left side like it is.
Here's the CSS that i'm using right now.
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background-image: url(bg.jpg);
background-position: center;
background-repeat: repeat;
}
#top {
background-color: #333;
height: 30px;
margin-bottom: 10px;
}
#menu {
color: #CCC;
height: 30px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
position: absolute;
}
#top_right {
height: 30px;
width: auto;
text-align: left;
float: right;
margin-right: 5px;
color: #CCC;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
}
.menu {
padding-left: 10px;
}
a.mlink:hover {
color: #FFF;
text-decoration: none;
}
a.mlink:link {
color: #CCC;
text-decoration: none;
}
a.mlink:visited {
color: #CCC;
text-decoration: none;
}
a.mlink:hover {
color: #FFF;
text-decoration: none;
}
a.mlink:active {
color: #CCC;
text-decoration: none;
}
#selected {
color: #6C0;
}
#content {
background-color: #CCC;
}
/*
START OF MENU TEST
*/
#esempio{
margin:0;
padding:0;
}
#esempio ul{
padding:0;
margin:0;
}
#esempio li{
position: relative;
float: left;
list-style: none;
margin: 0;
padding:0;
}
#esempio li a{
width:auto;
height: 30px;
display: block;
text-decoration:none;
text-align: center;
line-height: 30px;
background-color: black;
color: white;
}
#esempio li a:hover{
background-color: #666;
}
#esempio ul ul{
position: absolute;
top: 30px;
width: 100px;
visibility: hidden;
}
#esempio ul li:hover ul{
visibility:visible;
}
/*
END OF MENU TEST
*/
The containing element needs to be positioned:
li {
position: relative;
}
Then your dropdown element can be positioned to be flush to the right of its container:
li .submenu {
position: absolute;
right: 0;
}
Without seeing markup, or an example of how your page operates, I cannot be much more specific.
Fiddle: http://jsfiddle.net/jonathansampson/CXbTX/
Sidenote
As an aside, I would avoid doing this:
* { margin: 0; padding: 0; border: 0 }
This will cause you some frustration down the line, especially when it comes to styling form elements and such. I would encourage you instead to use something that will normalize the CSS in a more intuitive manner, like Meyer's Reset.
Here you can see the code: http://jsfiddle.net/LQSK3/1/
I can't get display: inline; working there for every li element.
Also got the problem width the line.png image, as it's height is the same as the font height, I want it to has 35px height with margin left and right set to 5px.
Where is the problem?
You need to update your style sheet. Please add this new style:
#menu {
position: relative;
clear: both;
top: -3px;
background-color: coral;
border: 1px solid black;
width: 800px;
height: 35px;
float:left;
}
li { display: inline;float:left; }
#menu ul {
position: absolute;
font-family: Century Gothic, sans-serif;
font-size: 14px;
list-style-type: none;
padding: 0;
margin: 9px 0 0 123px;
width: 649px;
height: 39px;
color: #FFF;
float:left;
}
a { font-weight: bold; color: red; text-decoration: none; }
a:hover { text-decoration: underline; }
#menu a {
background: url('http://i.imgur.com/rzNj0.png') top right no-repeat;
width: 65px;
height: 18px;
float: left;
margin: 0px 5px;
}
You need to add float: left; to menu div,ul,li and a . Also should set width and height and margin of the a tag.
Here is a working sample : http://jsfiddle.net/YjeBs/
Hope this helps :)
EDIT:
If you want your line to extend from top to bottom of the menu div you can change your styles to:
#menu {
position: relative;
clear: both;
top: -3px;
background-color: coral;
border: 1px solid black;
width: 800px;
height: 35px;
float:left;
}
li {
float: left;
height: 35px;
display:inline;
}
#menu ul {
color: #FFFFFF;
float: left;
font-family: Century Gothic,sans-serif;
font-size: 14px;
height: 35px;
list-style-type: none;
margin: 0 0 0 123px;
padding: 0;
position: absolute;
width: 649px;
}
a { font-weight: bold; color: red; text-decoration: none; }
a:hover { text-decoration: underline; }
#menu a {
background: url("http://i.imgur.com/rzNj0.png") no-repeat scroll right top transparent;
float: left;
height: 29px;
margin: 0 5px;
padding-top: 8px;
width: 65px;
}
Hope this is you want :)
just change li { diplay: inline; } with li { display: inline; } it works.