I have a vertical navigation menu but can't seem to get the text to start from very left edge of the element.
HTML
<div class="jobs-links">
<ul>
<li>Renovations</li>
<li>Remodelling</li>
<li>Adding</li>
</ul> </div>
CSS
.jobs-links {
list-style-type:none;
float:left;
border-bottom:1px solid #5f564d;
border-left:1px solid #5f564d;
border-top:1px solid #5f564d;
font-size:15px;
font-family:Calibri, Times, serif;
box-sizing:border-box;
width:10%;
text-align:left;
height:120px;
}
li {
list-style-type:none;
float:left;
display:block;
width:179px;
height:30px;
border-bottom:1px solid #5f564d;
}
Here is my jsfiddle
Cheers.
Add this:
ul{
padding:0;
}
fiddle
Related
I am trying to center my nav bar. I checked my sites but nothing works
and I'm completely stumped as to why it won't center, here is my navigation bar HTML that I want to center:
<div class='nav'>
<ul class='menu' id='menu'>
<li><a expr:href='data:blog.homepageUrl'>home</a></li>
<li><a class='drop-ctg' href='#'>PORTFOLIO</a>
<ul>
<li><a href='http://effectsforshare.blogspot.com/p/trailer.html'>TRAILER</a></li>
<li><a href='http://effectsforshare.blogspot.com/p/motion-graphics.html'>MOTION GRAPHICS</a></li>
<li><a href='http://effectsforshare.blogspot.com/p/trapcode-particular.html'>TRAPCODE PARTICULAR</a></li>
</ul>
</li>
<li><a href='http://effectsforshare.blogspot.com/'>TEMPLATES</a></li>
<li><a href='http://effectsforshare.blogspot.com/p/my-blog.html'>MY BLOG</a></li>
<li><a href='http://effectsforshare.blogspot.com/p/contact-me.html'>CONTACT ME</a></li>
</ul>
</div>
and here is the CSS
*{
margin:0;
padding:0;
outline:0;
}
.nav {
width:950px;
height:auto;
border-bottom:1px solid #eee;
margin:10px auto 5px;
display:inline-block;
}
.menu {
width:auto;
list-style:none;
font:$pagenavifont;
text-align:center;
margin:0 auto;
}
.menu a {
float:left;
color:#999;
text-decoration:none;
text-transform:uppercase;
width:auto;
line-height:36px;
padding:0 20px;
}
.menu a:hover,li.menuhover a{
color:#111;
}
.menu li {
position:relative;
float:left;
width:auto;
}
.menu li:last-child {
background:none;
}
.menu ul{
display:none;
position:absolute;
top:36px;
left:0;
background:#fbfbfb;
display:none;
list-style:none;
}
.menu ul li{
float:none;
border-top:1px solid #e3e3e3;
border-right:1px solid #e3e3e3;
border-left:1px solid #e3e3e3;
width:auto;
background:none;
}
.menu ul li:last-child {
border-bottom:1px solid #e3e3e3
}
.menu ul li a{
float:none;
display:block;
background:none;
line-height:36px;
min-width:137px;
width:auto;
text-align:left;
padding-left:10px;
color:#444;
}
.menu ul li a:hover{
background:#fdfdfd;
color:#777;
}
I would give you a link to the page but it's being done in Dreamweaver and is not up yet. The logobar.jpg is the logo for the webpage. I love how it looks, but it needs to be centered and not be cut off or taken to the next line when I shrink my screensize.
I tried each of float: right, float: left, and float: none on almost all of the classes; text-align: center on each class on the html side; I have tried align=center on each class; display: inline, inline-block on ul and li classes.
Thank you for your help!
On your .menu class, you do have text-align:center set. We can certainly use that to center the child nodes.
So within your .menu li css property, add display:inline-block and remove the floats. This will center your list items.
See the fiddle: http://jsfiddle.net/RGREA/
<style>
div.nav{margin: 3px auto;}
</style>
i'm trying to create an horizontal menu on my site.
The idea is to have a layout in this way ----O---- where the - are the links of the menu and the O is a picture put in the middle of the page, so the two list are on the left and on the right and the are around the picture.
I've created the html
<div class="prima">
<ul class="prima_lista">
<li>primo</li>
</ul>
</div>
<div class="seconda">
<ul class="seconda_lista">
<li>secondo</li>
</ul>
</div>
and then i've created the CSS that will organize everything
.prima{
position:absolute;
top:400px;
width:50%;
left:-70px;
border:1px solid red;
}
.seconda{
position:absolute;
top:400px;
width:50%;
right:-70px;
border:1px solid green;
}
ul.prima_lista {
margin:0 auto;
list-style:none;
text-align:right;
border:1px solid blue;
}
ul.seconda_lista {
margin:0 auto;
list-style:none;
text-align:left;
border:1px solid blue;
}
ul.prima_lista li {
display:inline-block;
border:1px solid gray;
}
ul.seconda_lista li {
display:inline-block;
border:1px solid gray;
}
ul.prima_lista li a {
text-decoration:none;
color:#000;
font-size:18px;
}
ul.seconda_lista li a {
text-decoration:none;
color:#000;
font-size:18px;
}
The big problem is the while the first ul/li works perfectly and is well aligned on the right edge of the div... the second one instead present some spaces between the UL and the DIV margin. Is there a way to eliminate this space?
No matter how much i try i haven't find a way to solve this riddle -> http://jsfiddle.net/7voe8jea/
--- i've updated the link to the jsfiddle. first of all for it didn't work... and second because i think i haven't explained myself very well. What i'd like to do is to "push" the second ul to the left of the div just like the first one is aligned to the right edge of the first div.
I saw that rather that using an id for the div you used a class. SO i changed it to an id, and prefixed everything in the css with a #. Here is a link to the js with it working http://jsfiddle.net/fstxsd5g/1/
Here is the html:
<div id="lista">
<div id="prima_lista">
<ul id="prima_lista">
<li>primo</li>
</ul>
</div>
</div>
And the css
#lista {
position:absolute;
height:60px;
width:100%;
top:400px;
border:1px solid #000;
}
*/
#prima_lista{
position:absolute;
top:400px;
height:60px;
width:50%;
left:-70px;
border:1px solid red;
}
ul.prima_lista {
margin:0 auto;
list-style:none;
text-align:right;
}
ul.prima_lista li {
display:inline-block;
/* border-top:1px solid #dededc; */
/* padding-top:16px;
padding-right:40px; */
}
ul.prima_lista li a {
text-decoration:none;
color:#000;
font-size:18px;
}
.seconda_lista{
width:50%;
right:-70px;
}
ul.seconda_lista {
margin:0 auto;
list-style:none;
text-align:left;
}
ul.seconda_lista li {
display:inline-block;
border-top:1px solid #dededc;
padding-top:16px;
padding-right:40px;
}
ul.seconda_lista li a {
text-decoration:none;
color:#000;
font-size:18px;
}
Hope this helps! Littleswany
Can't get padding, margin, or line-spacing to work on any UL/LI/ or A tags in CSS.
Keep in mind, I have a CSS reset stylesheet setup before loading all other style sheets.
Here is my HTML:
<div class="h_logo"><img src="http://dummyimage.com/800x125/000/fff"></div>
<div class="h_navbar">
<nav>
<ul>
<li>Home</li>
<li>Web Design</li>
<li>Advertising</li>
<li>Publishing</li>
</ul>
</nav>
</div>
CSS:
.h_logo{
width:800px;
height:125px;
margin:auto;
display:block;
clear:both;
}
.h_nabar{
width:1000px;
height:125px;
padding:10px;
}
.h_navbar li{
list-style-type:none;
display:table-cell;
vertical-align:middle;
width:100px;
height:50px;
text-align:center;
}
.h_navbar ul{
display:table;
margin:auto;
}
.h_navbar a{
text-decoration:none;
display:table-cell;
border:2px double black;
font-size:18px;
}
JSFiddle
CSS
.h_logo{
width:800px;
height:125px;
margin:auto;
display:block;
clear:both;
}
.h_nabar{
width:1000px;
height:125px;
padding:10px;
}
.h_navbar li{
list-style-type:none;
display:inline-block;
vertical-align:middle;
width:120px;
height:50px;
text-align:center;
border:1px solid #111;
}
.h_navbar ul{
display:block;
margin:auto;
}
.h_navbar a{
text-decoration:none;
display:table-cell;
font-size:18px;
vertical-align:middle;
margin:15px;/*Adjust your margin here*/
width:120px;
height:50px;
}
HTML
Home
Web Design
Advertising
Publishing
I am trying to create a fixed horizontal navigation that stretches to the browser's width.The problem I am having is that the links in the navigation bar move when i resize the browser window. How can I make it so that when you resize the web browser, the links(Home, Services...) stay fixed to the right and vertically in-line with the #content.?
Here is my html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
</head>
<body>
<!--Navigation-->
<div id="fixed_bar">
<div id="navigation">
<ul>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<!--Content-->
<div id="content">
<!--Content-->
</div>
</body>
</html>
And my CSS:
body {
background-color:yellow;
color:black;
width:100%;
padding:0;
margin-left:auto;
margin-right:auto;
font-size:16px;
font-family:"Sans-Serif", Helvetica, Arial;
}
/*Navigation*/
#navigation {
background-color:green;
color:black;
width:100%;
height:60px;
margin:0;
padding:0;
position:fixed;
top:0;
z-index:99;
}
#navigation ul {
list-style:none;
display:inline-block;
margin:0;
padding:0;
float:right;
overflow:hidden;
}
#navigation ul li{
padding:10px;
float:left;
clear:right;
}
#navigation ul li a{
background-color:inherit;
color:black;
vertical-align:middle;
text-decoration:none;
text-transform:uppercase;
font-size:15px;
font-family:"Lato", sans-serif;
letter-spacing:1px;
line-height:40px;
clear:both;
}
/*Content*/
#content {
padding-top:50px;
margin:auto;
width:900px;
color:black;
background-color:white;
}
I have been trying to solve this for hours, help would be much appreciated
You can apply your actual #navigation CSS rules to your #fixed_bar div and give #navigation the same width of the content (900px), let the browser calculate the margins with automatic margins and align the text to the right, so the ul will be at the right of #navigation while you keep the background, etc in #fixed_bar.
See it here: http://jsbin.com/bibulewa/1
And this is the CSS I've modified:
#fixed_bar {
background-color:green;
color:black;
width:100%;
height:60px;
margin:0;
padding:0;
position:fixed;
top:0;
z-index:99;
}
#navigation {
width: 900px;
text-align: right;
margin: auto;
}
Not sure if this is what you're looking for
I gave the ul an absolute position and align to the right:2%.
A top margin of 5px.
Remove the float and display the list as inline-block
Here's a jsfiddle - http://jsfiddle.net/rezasan/kE7LK/
/*Navigation*/
#navigation {
background-color:green;
color:black;
width:100%;
height:60px;
margin:0;
padding:0;
position:fixed;
top:0;
z-index:99;
}
#navigation ul {
list-style:none;
position:absolute;
right:2%;
display:inline-block;
margin:5px;
padding:0;
overflow:hidden;
width:60%;
text-align:right;
}
#navigation ul li{
padding:5px;
display:inline-block;
}
#navigation ul li a{
background-color:inherit;
color:black;
vertical-align:middle;
text-decoration:none;
text-transform:uppercase;
font-size:15px;
font-family:"Lato", sans-serif;
letter-spacing:1px;
line-height:3px;
clear:both;
}
set navigation styling:
left:0;
right:0;
i want to make a navigation bar similar the one found here.
I tried but I couldn't :D
Here's what I did:
HTML:
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
CSS
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
or you can try the fiddle that i created
http://jsfiddle.net/uYd9u/
I believe this is what you are looking to do.
http://jsfiddle.net/cornelas/uYd9u/11/
In order to achieve what you are wanting to create.
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
border-bottom: 4px solid #98bf21;
text-align: right; //ADD
}
li
{
display: inline-block; //REMOVE FLOAT:right;
vertical-align: bottom; //ADD to align to bottom
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
li.active,li.active a:link{//ADD so you can have one box have a background.
background-color:#98bf21;
color:#FFFFFF;
}
a:hover,a:active
{
background-color:#7A991A;
}