doing this for the first time so please be gentle. :) I am aiming for navigation menu in the centre, horizontal, with image in the middle list item. Image will be much bigger as the bottom half is name of the my company and top of the picture might be touching the top. My first problem is that the li elements are only as big as the text, whitch doesnt serve the center-thing purpouse and the second one related that it stretches the whole menu when hoovered on. Please I'm looking for solution where the text is in the middle of li and img sits down on bottom. Thanks so much for help!
<div id="menu">
<ul>
<li><span>Link 1</span></li>
<li><span>Link 2</span></li>
<span><li style="text-algin:bottom;"><img src="Linbach_tuzka.png" height="175px" alt="Domu"></li></span>
<li><span>Link 4</span></li>
<li><span>Link 5</span></li>
</ul>
</div>
body {
width: auto;
background-image: url(blue4.jpg);
background-size: cover;
margin: 2px 0 0 0;
}
#menu {
height:210px;
line-height:36px;
margin:0 auto;
text-align:center;
width:800px;
padding:0;
}
#menu ul {
display: inline;
-webkit-padding-start: 0px;
-webkit-margin-before: 2x;
-webkit-margin-after: 0px;
margin:0;
font-size: 0;
}
#menu ul li {
text-algin:center;
display:inline;
font-family:Arial,sans-serif;
font-size:40px;
padding:0;
margin:0;
text-decoration:none;
background-image:url(../Pics/Buttons/Menu/Menu.gif);
min-width:100px !important;
}
#menu a {
text-decoration:none;
color:#000000;
margin:10px 0;
padding:0;
}
#menu a:hover {
font-weight:bolder;
}
span {
width:100%;
font-size:30px;
}
the only option is left is width to <a> tag : DEMO
I have removed the direct <span> from UL and have added class 'widthAuto' so that it will not affect your logo.
#menu a {
text-decoration:none;
color:#000000;
margin:10px 0;
padding:0;
min-width:100px !important; display:inline-block;
}
Note : Menu will stretch on hover if text exceed min-width.
Related
I have a CSS design problem for a day and a halve now and it is driving me nuts. I have an horizontal navigation bar with a single unordered list inside. Each list item contains an anchor (or hyperlink) to a page within the website, the CSS is as follows:
nav#main{
background:#000;
width:100%;
overflow:auto;
}
nav#main ul{
list-style:none;
}
nav#main li{
float:left;
display: block;
overflow:auto;
}
nav#main a{
display:block;
padding:1em;
color:#FFF;
text-transform:uppercase;
font-size:1.6em;
}
nav#main a:hover{
background:#EF7E05;
background-clip:padding-box;
border-width:0 0 15px 0;
border-image:
url('../images/nav.png')
0
0
25
stretch;
}
And the HTML:
<nav id="main">
<ul>
<li>Link text</li>
<li>Link text</li>
<li>Link text</li>
</ul>
</nav>
<div id="contentArea">
<!-- DIFFERENT DIVS, COLUMS ARTICLES ETC. -->
</div>
This works all like it should work.
However what i am trying to accomplish is that the border image is displayed outside the nav bar and that it doesn't push the contentArea downwards a 25px. Any ideas?
I also tried to absolute position a block with a.hover::after. This works beautifully, however the width of the block cannot be set equal to a. Perhaps any ideas on this one too?
You need to clear your floated elements using a clear rather than overflow:visible
If you do this you can use your absolute positioning to create the border:
nav#main{
background:#000;
width:100%;
}
nav#main:after {
content:'';
display:block;
clear:both;
}
nav#main ul{
list-style:none;
}
nav#main li{
float:left;
display: block;
overflow:visible;
}
nav#main a{
display:block;
padding:1em;
color:#FFF;
text-transform:uppercase;
font-size:1.6em;
position:relative;
overflow:visible;
}
nav#main a:hover{
background:#EF7E05;
}
nav#main a:hover:after{
background-clip:padding-box;
content:'';
position:absolute;
top:100%;
left:0;
right:0;
border-width:0 0 15px 0;
border-image:
url('../images/nav.png')
0
0
25
stretch;
}
Example
I have noticed that the border image thing doesn't work in firefox or ie so this will give you the same effect and is more browser friendly:
nav#main a:hover:after{
background-clip:padding-box;
content:'';
position:absolute;
top:100%;
left:0;
right:0;
height:15px;
background: url('../images/nav.png') left top no-repeat;
background-size: 100% 15px;
}
Example
I´m trying to put a border-bottom to my ul li a menu element that appears when menu item is clicked.
I already have this effect working, but my border-bottom appears a bit down and its like behind my nav menu.
Can someone give me a little help understanding what is happening?
My Html:
<nav id="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contacts</li>
</ul>
</nav>
My CSS:
#menu
{
width:960px;
height:auto;
margin:0 auto 0 auto;
background:green;
}
#menu ul
{
list-style-type:none;
}
#menu ul li
{
height:46px;
line-height:46px;
font-family:'arial';
font-weight:300;
display:inline-block;
position:relative;
}
#menu ul li a
{
text-decoration:none;
color:#ccc;
display:block;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
// this boder is behind the menu!
#menu ul li.active a
{
color:#fff;
border-bottom:1px solid #000;
}
My jsfiddle:
http://jsfiddle.net/mibb/Y4HKF/
It's because you set the display:block for your a, so the border will be around the box (which has height set to 46px). Looks like you explicitly set padding-bottom to 0 and then it still should work (the bottom border should be close to the link text?) but not really, because you also set the line-height to be equal to the height (both are 46px), so the text is centered vertically and give a space between the baseline and the border-bottom.
To solve this problem, simply remove the line display: block; in your css for the a tag. You don't need that at all, removing will solve your problem:
#menu ul li a {
text-decoration:none;
color:#ccc;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
Just add the box-sizing:
#menu ul li.active a {
box-sizing: border-box;
}
you set the border to an anchor. an anchor will just take the space of whatever element its in/around,
so setting border to an anchor is like setting it to the <li> itself.
you should wrap your text in the anchor with a span, that takes the space of the text and set the border to the span.
here is an example:
http://jsfiddle.net/TheBanana/Y4HKF/5/
I'm not sure your JSFiddle represents your problem accurately, but I'll suggest a solution based on that anyway.
Your JSFiddle example doesn't show a border on "li.active a" at all (if you remove the green background on the ul element, you'll see that there is no border present.) The reason, at least in the JSFiddle example, is that the comment "// this boder is behind the menu!" was not recognized as a CSS comment, thus preventing the code following it from working. I actually could swear I've seen this work fine in some environments, but it definitely wasn't working in this case.
See this thread on Stack Overflow: Is it bad practice to comment out single lines of CSS with //?
Besides that, your code seems to work just fine (I assume your JavaScript works, so I added class="active" to one of your li tags.)
In the following code, the black border is showing just below the bottom of the ul. If you want to change where it shows up, you should only have to change the height of the a element.
The HTML:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<nav id="menu">
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Contacts</li>
</ul>
</nav>
The CSS:
#menu
{
width:960px;
height:auto;
margin:0 auto 0 auto;
background:green;
}
#menu ul
{
list-style-type:none;
}
#menu ul li
{
height:46px;
line-height:46px;
font-family:'arial';
font-weight:300;
display:inline-block;
position:relative;
}
#menu ul li a
{
text-decoration:none;
color:#ccc;
display:block;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
/* this boder is behind the menu! */
#menu ul li.active a
{
color:#fff;
border-bottom:1px solid #000;
}
The JSFiddle:
http://jsfiddle.net/mibb/Y4HKF/
I have done this code for a bit of extra study but I can't seem to center the work and I'm not to sure if I need so much code feel like some should be removed, please help!
If some of the code needs to be taken away I understand just dont quite understand and I feel like everything I Read make me more lost and Just keep changing my code with no solution :(
#menubar{
background:#3399CC;
height:120px;
}
#menubarwrap {
margin:0 auto;
width:100%;
}
#navigationbar-main {
float:left;
padding:15px;
color:#000;
font-size:24px;
font-weight:bold;
list-style-type: none;
margin-bottom:10px;
text-align:center;
}
#navigationbar-main li {
margin-right:35px;
position:relative;
}
#navigationbar-main li a {
display:block;
color:#000;
}
#navigationbar-main li ul {
display:none;
z-index:80;
}
.nav-sec {
display:block;
font-size:12px;
font-family: lucida sans unicode;
font-weight:normal;
text-align:center;
}
HTML
<body>
<div id="menubar">
<div id="menubarwrap">
<ul id="navigationbar-main">
<li>Home<span class="nav-sec">Where We Start</span></li>
<li>Gallery<span class="nav-sec">Pure Beauty</span></li>
<li>Contact<span class="nav-sec">Come Book</span></li>
<li>Features<span class="nav-sec">Pure Luxury</span></li>
<li>Location<span class="nav-sec">Where Are We?</span></li>
<li>Rates<span class="nav-sec">Price Of Love</span></li>
</ul>
</div>
</div>
</body>
sorry I'm just fairly new to all this
I am providing with two solutions guessing its what you need:
Fiddle 1
Change
#navigationbar-main {
margin:0px auto;
/*removed float
Other styles remain same*/
}
Fiddle 2
Change
#navigationbar-main li {
display:inline-block;
/*Other styles remain same*/
}
change your ul css
#navigationbar-main {
color: #000000;
font-size: 24px;
font-weight: bold;
list-style-type: none;
margin: 0 auto 10px;
padding: 15px;
text-align: center;
width: 1000px;
}
and give flat:left to your li
If you are trying to center align the #navigationbar-main ul, do this
#navigationbar-main ul{
float:left /*remove this line*/
}
This will get you the ul to the center of the page horizontally.
And if you want to align the li items horizontally apply this:
#navigationbar-main li {
display:inline-block;
}
#navigationbar-main {
width: 100%;
}
Add this to your CSS,
Question
I am trying to put every li at the bottom of the ul, making the bottom of every element (not the text, the actual block element of the ui, whether that's the image or the whole li of text) touching. This should be a simple problem with vertical-align:bottom and display:table-cell being the fix, but for some reason I haven't been able to get it to work. What is the best way to accomplish this?
Its likely there's a question that already answered this, but I've spent a lot of time searching. If there's one that applies, please just point me to it.
Example
Fiddle With It:
http://jsfiddle.net/rxg9m/
HTML
<head runat="server">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="StyleSheet.css" />
</head>
<body>
<div id="outer">
<div id="inner">
<nav>
<ul>
<li>Home
</li>
<li>Product
</li>
<li><img src="logo.png" alt="Javid Logo"/>
</li>
<li>Contact
</li>
<li>Info
</li>
</ul>
</nav>
</div>
</div>
</body>
CSS
* {
font-family:Calibri;
}
#outer {
text-align:center;
}
#inner {
display:inline-block;
}
nav ul {
margin:0px;
padding:0px;
bottom:0;
list-style:none;
}
nav li {
float:left;
display:table-cell;
vertical-align:bottom;
margin:0px;
padding:0px;
}
nav li a {
padding:16px 8px 16px 8px;
margin:0px;
width:120px;
display:block;
background-color:lightblue;
text-decoration:none;
text-emphasis:none;
color:black;
border:0px none black;
border-bottom:1px solid black;
}
nav li a.left {
text-align:left;
}
nav li a.right {
text-align:right;
}
#logo {
padding:0px;
width:auto;
height:auto;
line-height:0px;
border:0px none black;
}
Fiddle Here: http://jsfiddle.net/SinisterSystems/rxg9m/2/
nav li a {
padding:32px 8px 0px 8px;
You are setting a padding on the bottom. You should counteract that and double your padding on top and set your padding-bottom to 0.
Because you had padding applied, it WAS on the bottom technically. The only problem is it also expanded all the way to the top.
Edit: http://jsfiddle.net/SinisterSystems/rxg9m/4/
Aligning WITHIN the ul is very tricky, and your best bet would be to just align the ul inside of a wrapper of sorts. That way, you can use position:relative; on the wrapper and absolutely position your ul to the bottom. And yeah, style from there.
Basic Example:
<div class="wrapper">
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
</div>
* {
margin:0;
padding:0;
}
.wrapper {
height:200px;
background:#CCC;
position:relative;
}
ul {
position:absolute;
bottom:0;
width:100%;
}
ul li {
list-style:none;
float:left;
display:inline-block;
min-width:25%;
text-align:center;
}
http://jsfiddle.net/rxg9m/1/
Your issue was with this
nav li a {
padding:16px 8px 16px 8px;
change it to
nav li a {
padding:16px 8px 0px 8px;
also, if you want the height to be the same, you can just do 32px instead of 16px for the first padding value, like Nicholas did in his answer.
Simply remove the float:left from nav li. Everything else is in order.
Fiddle
http://jsfiddle.net/mXTG6/
My final goal is to create what you see in image B. Note: the menu bar must be centered on the page. I did create B by setting the vertical-align on the image to middle. However, as a result of doing this my dropdown menu is slightly separated from the main header. Therefore, i cannot select the sub-menu items when i move my mouse cursor down. Any ideas on making this work ? Thanks Jillian
<style>
#nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li{
position:relative;
display:inline;
}
#nav a{
display:inline-block;
padding:10px;
}
#nav ul{
position:absolute;
/*top:100%; Uncommenting this makes the dropdowns work in IE7 but looks a little worse in all other browsers. Your call. */
left:-9999px;
margin:0;
padding:0;
text-align:left;
}
#nav ul li{
display:block;
}
#nav li:hover ul{
left:0;
}
#nav li:hover a{
text-decoration:underline;
background:#f1f1f1;
}
#nav li:hover ul a{
text-decoration:none;
background:none;
}
#nav li:hover ul a:hover{
text-decoration:underline;
background:#f1f1f1;
}
#nav ul a{
white-space:nowrap;
display:block;
border-bottom:1px solid #ccc;
}
a{
color:#c00;
text-decoration:none;
font-weight:bold;
}
a:hover{
text-decoration:underline;
background:#f1f1f1;
}
</style>
</head>
<body>
<ul id="nav">
<li>Item one</li>
<li>Item two
<ul>
<li>Sub1</li>
<li>Sub2</li>
</ul>
</li>
<li class="double-line">
<img style="vertical-align:middle" src="img/logo_large.png" alt="logo" /></li>
<li>The Fourth</li>
<li>Last</li>
</ul>
</body>
</html>
You do something like,
#nav ul{
background:url('img/logo_large.png') no-repeat center center;
/* more CSS here */
}
unless you have to use it as a link. Then consider position:absolute; for the image with #nav ul being position:relative;, and use a floating layout for the other links with a z-index to overlap where they should hang over.
You can just offset the submenu up to cover the logo height.
Here is a JSfiddle using the google logo and altering the submenu style by adding this:
#nav ul {
top: 20px;
}
Try to insert in CSS line-height: X px; (for example, parent div height) in each menu title (Item one, Item two, The Fourth, etc.)