Simple horizontal nav bar for artist portfolio website. I am in the process of changing it from a jpg based site to actually coded, and need to match the nav bar on the following page:
http://cynthia-shaffer.com/animal.html
Notice "Natural Elements", "Animal Photos", and "Henna Tattoos" the text is stacked (2 lines as opposed to 1). I want to replicate this in my ul, but can't seem to figure it out.
my code
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Natural Elements</li>
<li>Animal Photos</li>
<li>Henna Tattoos</li>
<li>Murals</li>
<li>Supplementary</li>
<li>Non-Profit</li>
</ul>
</div>
CSS:
#nav ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#nav ul li { display: inline; }
#nav ul li a
{
text-decoration: none;
font-family:"Lithos";
font-size:12px;
color:c0944d;
padding: .3em 1em;
}
So the question is how to get the word "elements" to appear below "natural", without breaking the integrity of the list.
thanks in advance!!
Apply display:inline-block for the <a> tags and set the maximum desired width of a menu item using the max-width property, this will cause the text to automatically wrap when it exceeds the specified max-length
#nav ul li a {
text-decoration: none;
font-family:"Lithos";
font-size:12px;
color:c0944d;
padding: .3em 1em;
display:inline-block;
max-width:50px;
}
side note: it's better to apply display:inline-block while changing display from block, for aligning items horizontally - if you apply display:inline like you've applied to the <li> , the element will not accept width and height properties...
JSFiddle
Related
So I've center aligned the text "Jonathon Smith Photography". Directly below it in a different DIV, I've center aligned an inline list (my navbar) containing "Portfolio Contact Bio". However they appear to be centered at different points? The "Jon smith photography" text has no other properties to it. The list items in the navbar (not the navbar div itself) have a background color as well as padding above/below/left/right of it. However, when I disable the color/padding properties, the texts still appear to be centered at different points. Now I'm guessing the list's centerpoint that is off since it's a little more complex than the plain text. How do I get them to align properly?
HTML:
<div id="title">Johnathon Smith Photography</div>
<div id="navbar">
<ul>
<li>Portfolio</li>
<li>Contact</li>
<li>Bio</li>
</ul>
</div>
CSS:
#title {
text-align: center;
}
#navbar ul li {
background-color: #00225A;
display: inline;
list-style-type: none;
color: #fff;
padding-top: 0.2em;
padding-right: 1em;
padding-bottom: 0.2em;
padding-left: 1em;
}
#navbar {
text-align: center;
}
Add this:
#navbar ul {
padding-left: 0;
}
The ul has a padding in the left by default.
I am working on our company website and I'm very new to HTML and CSS. I am trying to make a drop down menu for the Nav bar and I have the gist of it, but it needs some help. The dropdowns are not lining up properly, the text is too large, and the border I have is spanning the entire length of the lists.
CSS:
.menu{
padding:0;
margin:25px 0 0 0;
}
.menu, .menu li{
list-style: none;
display: block;
float:right;
padding:12px;
border-right: 1px solid #d8d8d8;
}
.menu li{
float:left;
display: block;
width: 100px;
}
.menu ul{
opacity: 0;
}
.menu ul li{
background-color: white;
}
.menu li:hover > ul{
opacity: 1;
}
.menu li.last-menu-item{
border: none;
padding-right:0;
}
.menu a{
color:#132d3c;
font-size:15px;
font-family: 'sansationbold';
text-transform: uppercase;
text-decoration: none;
font-weight:lighter;
}
.current-menu-item a{
color:#f15c22;
}
.menu a:hover{
color:#f15c22;
}
HTML:
<ul class="menu alignright">
<li class="current-menu-item">Home</li>
<li>About
<ul>
<li>Who We Ar</li>
<li>Values</li>
<li>Owners Message</li>
<li>Infotek Blog</li>
<li>Success Stories</li>
<li>Partners</li>
</ul>
</li>
<li>Products & Solutions
<ul>
<li>Security Solutions</li>
<li>Data Solutions</li>
<li>Communication Solutions</li>
<li>Connectivity Solutions</li>
<li>Infrastructure Solutions</li>
<li>Resources</li>
</ul>
</li>
<li class="last-menu-item">Contact</li>
</ul>
Can I get a little help?
http://jsfiddle.net/pQhpu/191/
Hi in this you're making some mistakes.
Don't use opacity for hide the submenus, set it with the property display:none
Set with position:relative your li and the ul inside them with position:absolute
View this demo an make any question http://jsfiddle.net/pQhpu/214/
EDIT
To resolve your request of centering the submenus in relation with his parent you can use Jquery.
I created this function for you: Review the demo here http://jsfiddle.net/pQhpu/264/
$(document).ready (function () {
$('.menu li').mouseenter(function (){
var $this = $(this),
$sub =$(this).children('ul'),
pad = parseInt($this.css('padding-left'),10)+parseInt($this.css('padding-right'),10),
move=($this.width()+pad-$sub.width())/2;
$sub.css ('left',move+'px');
});
})
All you have to change here is the name route of your li that displays the submenu; in my case is '.menu li' . This function takes the width of the submenu and his parent and make an operation to make it centered.
For the borders, put them on the a instead of the actual li. And put your padding on the a as well to push the borders to the right. You usually have to add a class like '.last' to the last item if you don't want a floating border off to the right. Will have to make the widths larger to accommodate all the text on one line, or reduce the overall size. That should get you started.
First off, your design is horrible. I think you probably copied it from somewhere, but there are so many cross-over/overlaying elements. Define each different part(menu options, drop down options, etc.) seperately, rather than applying things to all lis and what not.
Here is a fix for the width. I made the divs larger. It was pretty hard. Next you'd have to define a class for all drop down items, and then make their font-size smaller, and apply the same width as menu items so they aren't slightly larger than the menu items.
http://jsfiddle.net/pQhpu/200/
To correct the alignment issues add:
.menu, .menu li
{
padding: 12px 0 12px 0;
}
This is shown in firebug but not in your code above
.menu, .menu li
{
padding: 12px;
}
To prevent the border from spanning the entire length of the list, use the display property instead changing the opacity.
.menu ul{
display: none;
}
.menu li:hover > ul{
display: inline;
}
I am currently trying to make a nav bar for my website. I am using lists to do so and am having trouble ordering it correctly.
im trying to have the name of my site hanging to the left, 3 lists in the middle and then one hanging to the right.
I am able to get my three in the center correctly but cant get the outside two lists.
Is there a way to space out the lists differently such as adding blank space?
Here is an example of what I have so far. http://jsfiddle.net/DnvLt/2/
Heres my code:
#navbar ul {
margin: 0;
padding: 5px;
list-style-type: none;
text-align: center;
background-color: #000;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #000;
}
#navbar ul li a:hover {
color: #000;
background-color: #fff;
}
You can do it like this
<ul style="overflow:hidden; list-style-type: none;">
<li style="float:left;">Left</li>
<li style="float:right;">Right</li>
<li style="overflow:hidden; display:block; width:300px; margin:0 auto;">
<ul style="list-style-type: none;">
<li style="float:left;">element 1</li>
<li style="float:left;">element 2</li>
<li style="float:left;">element 3</li>
</ul>
</li>
</ul>
At first you wrap all elements in one block (the div), then you place the right and left elements by float and lastly you place the center element statically in the center on top of the floated elements.
to place an element in the center you must make it a block, with a static width and margin:0 auto;
The overflow is there so that the elements that float don't overflow :)
Please help,
i want to align the header menu/nav links to vertically align. See:
http://hyindia.com/demo/myoffshore/index.html
See the CODE here:
nav ul { list-style-type:none; padding:0px; margin:0px; float:left; width:100%;}
nav ul li { float:left; width:119px; height:66px;}
nav ul li a {
float:left;
width:119px;
height:66px;
font:bold 15px 'Myriad Pro';
color:#fff;
text-shadow:1px 1px #1f1f1f;
text-align:center;
}
<nav>
<ul>
<li>HOME</li>
<li>HEALTH INSURANCE</li>
<li>LIFE INSURANCE</li>
<li>OVERSEAS MORTGAGES</li>
<li>ESTATE PLANNING</li>
<li>BANKING</li>
<li>WEALTH MANAGEMENT</li>
<li>QROPS</li>
</ul>
Since some of your nav items have text spanning several rows you won't be able to use the classic line-height-trick (which would be to set the line-height equal to the height).
Instead I'd suggest changing your menu styling to use display: table/table-row/table-cell since tables are excellent at vertically aligning things in the middle.
What you need to do is to change your entire nav styling to this:
nav {
display: table;
width: 100%;
}
nav ul {
display: table-row;
list-style: none;
padding: 0;
margin: 0;
}
nav ul li {
display: table-cell;
vertical-align: middle;
}
nav ul li a {
display: block;
padding: 5px 10px;
}
Remove all the floats and widths + heights (using padding on the a instead) etc (what I have above is all you should have).
You'll also need to move the actual background styling from the as to the lis since the as won't be equal in height any more (but the lis will).
Here is five methods very well explained : http://blog.themeforest.net/tutorials/vertical-centering-with-css/
I am trying to center my navigation links inside the div but no matter what I've tried it won't work. I've tried margin-left:auto, margin-right:auto, but nothing...
Here is the section of CSS code:
#nav {
display:block;
background-color:#505050;
height:17.5px;
box-shadow: 0px 0px 15px 5px #CCCCCC inset;
border:1px solid #EEEEEE;
border-radius:20px;
padding:1.5%;
}
#nav li {
padding:0px 20px 0px 20px;
display:inline;
/*float:left;*/
list-style:none;
position:relative;
}
#nav li a {
padding:0px 0px 20px 0px;
color:#FFFFFF;
text-decoration:none;
}
and here is my ul code:
<ul id="nav">
<li>Home</li>
<li>About Us</li>
<li>Current Litters</li>
<li>Gallery
<ul>
<li>Bandi</li>
<li>Studs Used</li>
<li>Test Dog2</li>
<li>Test Dog3</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
Here is the rest of my code
actually without it i noticed that my drop down menu under (gallery) doesn't display correctly, ...here is the rest of that css file...that shows what happens to the drop down...maybe you can tell me why the float screws it all up...
...and the text align did great....but only after removing the float...
#nav li a:hover {
text-decoration:underline;
}
#nav li ul{
padding:10px;
font-size:medium;
display:none;
position:absolute;
left:0px;
top:30px;
background-color:rgba(50,50,50,0.8);
}
#nav li:hover ul {
display:block;
border-radius:20px;
border:1px solid;
width:150px;
}
This is actually quite simple, since your list items are display:inline. Add this style:
#nav {
text-align:center;
}
Demo: http://jsfiddle.net/fH6f5/
There are many other ways to do it, but this appears to be all you need. Just make sure not to float the <li>s (I see you have it commented out).
Adding text-align: center to the nav unordered list seems to work for me in chrome
#nav {
text-align: center;
}
To center a block element, you also need to explicitly set the width to some value, like this:
#nav {
width: 50%;
margin: 0 auto;
}
There are quite a few changes you're going to need to make to your code in order for it to display properly. Your list elements are currently inline elements. inline elements have a lot of restrictions, including not being able to explicitly set their width, height, and their top and bottom margin. Keep in mind that per the W3 spec:
Generally, inline elements may contain only data and other inline elements.
That being said, you can use display: inline-block with no problems for your current code. There is one very important thing to keep in mind about using inline-block elements: whitespace. Any space between inline-block elements in your code will be shown as a space on your browser. So, if you want the elements to be touching, their tags must be touching also:
<!-- Version A: This will produce a gap between the two elements -->
<li>Home</li>
<li>About Us</li>
<!-- Version B: This will not produce a gap between the two elements -->
<li>
Home
</li><li>
About Us
</li>
If you choose Version A from the code above, I'd recommend you float the elements rather than relying on inline-block for positioning. Centering a floated list is a bit more difficult than centering an inline list. Here's a way that I like to center floated elements:
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
</ul>
</nav>
CSS:
nav { overflow: hidden; }
nav ul {
position: relative;
float: left;
left: 50%;
list-style: none;
padding: 0; }
nav ul li {
position: relative;
float: left;
right: 50%;
margin: 0 5px; }
nav ul li a { display: block; }
Preview: http://jsfiddle.net/Wexcode/rsDbY/
You should post the design that you want for your dropdown menu, I don't really know what you want your final result to look like so I can't really help you with that.
You need to set a fixed width on your ul for margin-right:auto and margin-left:auto
Have you tried to add margin: 0 auto; to #nav style? You also have to set the ul width to get this working.
It's a bit more complicated then simply "text-align" as you have the text inside of a . You need to add "margin: 0px auto;" to your element in your css file. This will then center the divider on the screen first, then center the next element within the divider and so on.