I am using a Html navigation menu on a website using the standard UL LI approach. But the problem is that when I resize the browser window the menu is resized and menu items outside the viewable area are shifted downwards. Has any on faced a similar problem?
Html
<div style="margin-top: 11px; display: block;" class="menubar">
<ul class="tabs">
<li >Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
<li>Menu5</li>
<li>Menu6</li>
</ul>
</div>
CSS
.menubar {
background: url("images/bg.png") repeat scroll left top #222222;
border-bottom: 1px solid #B2D7FC;
border-top: 1px solid #B2D7FC;
color: #FFFFFF;
float: left;
height: 35px;
margin: 10px 0 0;
padding: 0 2%;
width: 96%;
}
ul.tabs {
display: block;
list-style-type: none;
margin: 5px 0 0;
padding: 0;
}
ul.tabs li {
background: url("images/tab_right.png") no-repeat scroll right top transparent;
float: left;
padding: 0;
position: relative;
}
Please define its width if you are not given like
div
{ width:size %/px/em;
min-width:%/px/em;
position:absolute;
}
Set a min-width on your container, or the <ul>.
<ul>
<li></li>
<li></li>
</ul>
CSS
ul{
min-width:720px;
}
Change the 720px to however large you want the menu to be. That way, it will resize until it hits that limit.
Related
I must create a navigation bar exactly how it's shown in the picture below. I was trying to for a whole day. You can see the only code I could write below. The problem is that I used a method from here: Separators For Navigation, but I don't know how to put links and borders to make it look like in the picture. The orange line under the navigation bar doesn't belong to it.
I have a PSD Photoshop file from which I can extract elements of the navigation bar. That's the source of the nav_border.png.
target navigation bar image
my result
My HTML code:
<div id="navbar">
<ul>
<li>First time at auction ?</li>
<li>Next auctions</li>
<li>Rules</li>
<li>Terms of use</li>
<li>FAQ</li>
<li>Contacts</li>
<li></li>
</ul>
</div>
My CSS code (so far):
#navbar {
float: left;
width: 776px;
height: 40px;
border-radius: 8px 8px 0 0;
background-color: #003366;
}
#navbar ul {
list-style-type: none;
}
#navbar li {
float: left;
}
#navbar a {
color: white;
text-decoration: none;
}
#navbar li + li{
background:url('nav_border.png') no-repeat top left;
padding-left: 10px;
margin-left: 30px;
}
Here's a fiddle that should get you headed in the right direction
https://jsfiddle.net/fx6gtj6o/
#navbar {
background: blue;
border-radius: 8px 8px 0 0;
ul {
list-item-type: none;
padding: 0;
li {
display: inline-block;
text-align: center;
padding: 10px 10px;
border-right: 1px solid black;
a {
color: #FFF;
}
}
}
}
No reason to use any of the images from the actual mockup, you can get everything done with CSS
I have a navbar on my website, which is made up of a ul and some lis inside. The last li, Log Out, has to be right aligned. The problem is, when the screen is resized too small, it goes to a line below to prevent running into the other lis.
Here's the HTML for the navbar:
<div class="navbar">
<ul>
<li>Home</li>
<?php if ($user->logged_in) { ?>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li style="margin-right: 10px; float: right;">Log Out</li>
<?php } ?>
</ul>
and the CSS:
/* Navbar */
.navbar {
background: #DDDDDD;
overflow: hidden;
width: 100%;
}
.navbar ul {
border: solid 1px #BBBBBB;
margin: 0;
min-width: 600px;
overflow: hidden;
}
.navbar ul li {
border: solid transparent;
border-width: 0 1px 0 1px;
cursor: pointer;
display: inline-block;
float: left;
padding: 16px;
}
.navbar ul li:hover {
background-image: url("../images/patterns/background.png");
border-color: #369643;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
color: #FFFFFF;
text-shadow: 0 1px 0 #167F39;
}
.navbar ul li a {
color: inherit;
display: block;
text-decoration: none;
width: 100%;
}
Your question isn't too clear but I'm assuming you don't want the "logout" element to go below the other nav elements. The problem is in your css where your setting a "min-width" to your 'navbar ul' element. Therefore when the screen is reduced below that width it is being hidden.
I say hidden because after executing your code the "logout" element doesnt go below other nav elements it is just completely hidden. (Using Safari).
Deleting the 'min-width' fixed that problem for me. Hope it does for you too.
It works well in jsfiddle as well as in local browser.. Overflow is already added.
/* Navbar */
.navbar {
background: #DDDDDD;
overflow: hidden;
width: 100%;
}
.navbar ul {
border: solid 1px #BBBBBB;
margin: 0;
min-width: 600px;
}
I have the below nav menu and whenever i resize using the ctrl+right click the last item FAQ appears and dissapears..not to mention it also breaks my entire site background represented by 2 images.
whats wrong and how to make it stay the same on resizing? cheers!
html:
<div class="nav">
<ul>
<li class='active '><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>about us</span></a></li>
<li><a href='#'><span>our errand ladies</span></a></li>
<li><a href='#'><span>schedule an errand</span></a></li>
<li><a href='#'><span>contact us</span></a></li>
<li><a href='#'><span>faq</span></a></li>
</ul>
</div>
css:
.nav {
width: 100%;
height: 63px;
overflow: hidden;
}
.nav ul {
margin: 0;
padding: 0;
list-style-type: none;
width: auto;
position: relative;
display: block;
height: 63px;
text-transform: uppercase;
font-size: 21px;
background: transparent url('images/nav-bg-repeat.png') repeat-x top left;
font-family: Helvetica,Arial,Verdana,sans-serif;
}
.nav li {
display: block;
float: left;
margin: 0;
padding: 0;
}
.nav li a {
display: block;
float: left;
text-decoration: none;
padding:0 30px;
height: 63px;
line-height: 63px;
vertical-align: middle;
background: transparent url('images/divider.png') no-repeat top right;
}
.nav li a:hover {
background: transparent url('images/nav-hover.png') repeat-x top right;
}
.nav li a span {
color: #000;
font-weight: bold;
}
You have overflow: hidden; set on your .nav element and no width defined.
By default, the .nav is set to 100% width, as it's a block element. It will automatically span the width of the parent it's currently sitting in.
When you resize the window down to a size that cannot fit the links, they fall outside of the .nav and are hidden from view.
You can set a fixed width to your .nav (or parent container) to prevent it from collapsing in width.
.nav {
width: 960px;
}
Or if you still want it to collapse, but still show the nav links, you can remove overflow: hidden; and the elements will appear (however, they will not be inline with each other.
for the second problem set the
body{
background-repeat:no-repeat;
}
and it disappears as overflow is hidden; set it to none
.nav{
width:1000px;
overflow:none;
..
}
the way i see is you are trying to put the list elements inline so you can try this code and modify the looks:
<ul id="navlist">
<li id="active">Home</li>
<li>Here</li>
<li>There</li>
<li>Faq</li>
<li>Contact</li>
</ul>
</div>
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
I am having real troubles with trying to align a horizontal menu.So far my menu is looking like
I have 2 centered elements to make up the menu in the image you can see a gray border (slide-nav class) that has been centered within the page. Now I am trying to do the same for the menu
I have had to hard code the li widths but ideally I would like them to fit automatically. Is it possible without javascript to align the menu items in the center?
My html
<nav class="slide-nav">
<ul class="slider">
<li class="selected">
<div>
<span class="heart"></span>
<div>
Get Started</div>
</div>
</li>
<li>
<div>
<span class="price-tag"></span>
<div>
Get Results</div>
</div>
</li>
<li>
<div>
<span class="star"></span>
<div>
Track & Engage</div>
</div>
</li>
<li>
<div>
<span class="people"></span>
<div>
Features</div>
</div>
</li>
</ul>
</nav>
css
.slide-nav
{
border-bottom: solid 1px #f2f2f2;
margin: 0 auto;
width: 856px;
}
.slider
{
list-style: none;
height: 38px;
margin: 0 auto;
width: 722px;
}
.slider li
{
border-bottom: solid 7px transparent;
cursor: pointer;
display: inline-block;
width: 150px;
}
.slider li div
{
line-height: 31px;
}
.slider li div div
{
text-indent: 6px;
}
.slider li.selected > div
{
border-bottom: solid 7px #592970;
}
Here the CSS that u have to change with
.slide-nav
{
border-bottom: solid 1px #f2f2f2;
margin: 0 auto;
width: 856px;
text-align:center;
}
.slider
{
list-style: none;
height: 38px;
margin: 0;
padding: 0;
}
.slider li
{
border-bottom: solid 7px transparent;
cursor: pointer;
display: inline-block;
padding:0 10px;
}
I believe this has been answered in detail here.
Basically you want to have your individual buttons rendered with display:inline-block which would allow for them to be justified. There's a trick however with adding a "dummy" line break to force justification.
I just got rid of the widths, removed margin: 0 auto from .slider and added the ole text-align: center.
Check out a live demo:
http://jsfiddle.net/RJL7J/
Hope this helps.
Here is my CSS:
<style>
ul, ol, dl { padding: 0;
margin: 0;
}
#navWrapper {
background:#3C6;
height: 90px;
float: left;
position: relative;
width: 600px;
}
#nav {
margin: 0 0 0 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
position: absolute;
bottom: 0;
}
#nav li {
float: left;
list-style-type: none;
}
#nav li a, #nav a:visited {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li a:hover, #nav a:active, #nav a:focus {
color: #c00;
background-color: #fff; }
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
#wrapper {
width: 965px;
background: #FFFFFF;
margin: 0 auto;
}
a img {
border: none;
float: left;
}
</style>
Here is my HTML:
<div id="wrapper">
<div class="header"><img src="" alt="Insert Logo Here" name="Insert_logo" width="300px" height="90px" id="Insert_logo"/>
<div id="navWrapper">
<div id="nav">
<ul class="nav">
<li>Link one</li>
<li>Link two</li>
<li>Link three</li>
<li>Link four</li>
</ul>
<!-- end #nav --></div>
<!-- end #navWrapper --></div>
<!-- end .header --></div>
<div class="clearfloat"></div>
</div>
I am trying to create a navigation bar that sits on the bottom of its wrapper. The only way I can think to do this is using absolute positioning and setting the bottom to 0. But the problem is I have to set a width the div inside of the wrapper, which is what my code reflects now. I want the width to be dynamic and change with the width of the navigation bar while it still sits on the bottom of the wrapper, aligned to the bottom of the header image. How can I do this?
You can set #nav to 100% width, and the four items to 25% width each.
fiddle
If you mean something else, leave a comment.
Here are the exact changes I made.
#nav {
width: 100%; /* Add: */
}
#nav li {
width: 25%; /* Add: */
}
Based on the fiddle you provided, the left float on the navWrapper is causing problems. Removing it hides the logo, which is floated left. To fix this, put a clearfix before the navWrapper, and after the logo image.
updated fiddle