I am trying to create a two-part nav bar with options on both the left and right side of the page (its a visual thematic thing for my page, there are supposed to be branches of a tree with leaves being the buttons).
Currently I have them html-coded like this (these 2 png's are just placeholders for now):
<nav>
<img src="images/nav-menu-left-temp.png" alt=""/>
<img id="navright" src="images/nav-menu-right-temp.png" alt=""/>
</nav>
And here's the CSS I have applied.
nav
{
position: fixed;
}
#navright
{
float: right;
width: auto;
}
I would like them to both have fixed position to the top of the page, but for the left nav bar I need it to be also fixed to the right side of the page if possible (so it looks like a branch extending from off the screen). I was hoping float: right would do the job with the help of fixed but there seems to be a margin on the left side between the edge of the browser and the bar image(s). The page width is currently set to auto. I had hoped it would allow it to scale correctly.
Screenshot of what I have:
http://i723.photobucket.com/albums/ww238/cerberosg/nav1_zpsumvws3h7.jpg
What I'm trying to achieve:
http://i723.photobucket.com/albums/ww238/cerberosg/nav2_zpsxpqonads.jpg
I used to have a navigation bar like that, this is what I remeber from the CSS and HTML:
<nav>
<ul class = "pull-left">
<li><img src="images/nav-menu-left-temp.png" alt=""/></li>
</ul>
<ul class = "pull-right">
<li><img id="navright" src="images/nav-menu-right-temp.png" alt=""/></li>
</ul>
</nav>
CSS:
nav {
display: inline;
}
hope this helps!
I suspect the issue is that the nav element is not full width. Try being a bit more explicit with the nav element layout, using some styles like so:
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
You are on the right track. I've put together a fiddle for you to look at / play with:
http://jsfiddle.net/7qxrsrrw/
Related
The first situation I have with my website is the border bottom of my navigation bar. I have tried changing the box-sizing to border-box but it still doesn't work. I want the border to be 100% width of the browser.
Second, I'm trying to create a responsive menu for both tablet and mobile changing my list items into a hamburger slider. Right now, it is awkward since my header image is floated left, and when i put in the hamburger menu, it does not jump below the logo even after i put clear both. Also, the border of the li is messed up, I want it to fill the width of the screen..
I have yet to put the javascript for the menu icon yet, I don't want to continue until I find a fix to these problems please help :(
html:
<header>
<img src="images/brand.png" alt="George Designs Logo" class="brand">
<img src="images/menu.png" alt="menu" class="menu-trigger">
<nav class="nav-menu">
<ul class="clearfix">
<li>Home</li>
<li>Work</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
The css is in the js fiddle
Here is the full project:
http://jsfiddle.net/ntnzz1fj/2/
You have set some margins which are unwanted on mobile or tablet deives.
You need to remove them for mobile devices in order to have a full width menu.
#media screen and (max-width: 768px) {
.nav-menu {
margin: 0;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
margin-right: 0;
}
}
JSFiddle DEMO
Also remove the browser default margin.
body {
margin: 0;
}
As for making elements fit the whole width of the screen, this combination will ensure it's a block element.
.myElement {
margin: 0;
padding: 0;
display: block;
}
Make to include margin: 0; on the body as well. I would recommend using Normalize.css before your main stylesheet. This normally prevents a lot of common kinks in styling.
http://necolas.github.io/normalize.css/
I am able to get my dropdown navigation to stay at the top using absolute positioning, but it squishes the left side and everything at the top goes behind the navigation.
How can I get my navigation to stop overlapping everything else with the position:absolute property? My nav elements are in my CSS, so an invisible <div> won't work.
The following is the HTML in my header.php document:
<center><nav>
<ul>
<li>Home</li>
<li>Arcade
<ul>
<li>Action</li>
<li>Arcade</li>
<li>Puzzle</li>
<li>Vehicle</li>
<li>Violence</li>
<li>Defense</li>
<li>RPG</li>
</ul>
</li>
<li>Watch
<ul>
<li>TV Shows</li>
<li>Movies</li>
</ul>
</li>
<li>Extras
<ul>
<li>Reviews</li>
<li>Updates</li>
</ul>
</li>
<li>Support</li>
</ul>
</nav></center>
The following is the CSS I am using for the background color and positioning before the position is added:
nav{
background-color:#989898;
margin: 0px -12.5%;
}
Now the CSS after I add positioning:
nav{
background-color:#989898;
margin: 0px -12.5%;
position:absolute;
z-index:1000;
}
My website is www.gameshank.com/!
Any ideas? Thanks!
When using position:absolute it removes the element from the document flow. The best way to prevent position:absolute elements from overlapping other elements is to use the margin properties to your advantage.
Try adding this to your CSS (differences noted with asterisks so don't add that to the code):
nav {
background-color: #989898;
margin-left: -10%; /**** Remove other margin: 0 -12.5%; */
margin-top: -100px; /*****/
width: 100%; /****/
position: absolute;
z-index: 100;
}
#logo { /**** This is all new. You can change to a different name if you need to.*/
margin-top:100px;
}
Add this to your HTML <center> tag which immediately follows the <center> tag holding the <nav>.
<center id="logo"> ... </center>
On a different note, you should consider doing a significant rewrite of all that code. That site is using depreciated tags such as <center> and <font> for styles that CSS can handle better along side HTML5 elements such as <nav>.
Edit: Now that flexbox has become basically universally supported, use flexbox!
I want to have 3 div objects next to each other for my navigation bar. There should be an image in the right one to begin the navigation bar, one on the end to finish it, and the middle part should be as wide as it needs to be to fit all the text in. And the navigation bar should be in the middle of the page. I am not sure if I did it totally wrong, because it won't really work at all. This is the code I already got.
HTML:
<div class="navigation">
<div class="navLeft"></div>
<div class="navMiddle">
<ul>
<li id="active">Home</li>
<li>Info</li>
<li>Projects</li>
<li>Contact Us</li>
</ul>
</div>
<div class="navRight"></div>
</div>
CSS:
.navigation {
margin: auto;
height: 70;
}
.navigation ul {
list-style: none;
}
.navigation ul li {
display: inline;
margin: 0px;
}
.navLeft {
float: left;
width: 13;
height: 70;
background: url(../images/Nav_L.png);
}
.navMiddle {
height: 70;
background: url(../images/Nav_Mid.png) repeat-x;
}
.navRight {
float: right;
width: 13;
height: 70;
background: url(../images/Nav_R.png);
}
First of all there are many errors in your css.
width:13; // WRONG
width:13px; //CORRECT
any width, height, margin, padding which is more than 0 should either have px, em or %
adding width: calc(100% - 26px); will take the remaining width of .navMiddle.
JSFIDDLE
It's very hard to diagnose this problem without seeing what is happening. I would imagine that you need to set a width on your navigation class. It might help to float all three of your classes (navLeft, navMiddle, and navRight) in the same direction (most likely left). If you want to vertically center all of this, you will most likely need to make sure whatever is containing this navigation has a height of 100%.
Hi I highly recommend save yourself the headaches with hard coding all of this and utilize the flexbox. It makes a much cleaner solution and gives alot more control with out so much hard coding.
http://net.tutsplus.com/tutorials/html-css-techniques/an-introduction-to-css-flexbox/
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
I'd use inline-block instead of floating. it give's you better handling.
Check out this Fiddle
BTW: values other than 0 need to have a value, so 70 needs to be 70px
I think you can place the <div class="navRight"> before <div class="navMiddle">
<div class="navigation">
<div class="navLeft"></div>
<div class="navRight"></div> <!-- place navRight div here -->
<div class="navMiddle">
<ul>
<li id="active">Home</li>
<li>Info</li>
<li>Projects</li>
<li>Contact Us</li>
</ul>
</div>
</div>
.navLeft, .navMidlle, .navRight{display:inline;}
I'd suppose that would work, you can try to test it out. Delete the float:left; and float:right; in your css also.
Can two floats be side by side no matter what the width is?
basically I have this below:
#container { height: 100%; width: 100%; overflow: auto; background-color: #F6F9FF; }
#navigation { height: 100%; width: 300px; float: left; overflow: auto; background-color: green;}
#content { float: left; background-color: blue;}
<div id="container">
<div id="navigation">
<ul>
<li>1. nav stuff </li>
<li>1. nav stuff </li>
<li>1. nav stuff </li>
</ul>
</div>
<div id="content">
<p>Lorem ipsum snip....ultricies.</p>
</div>
<div>
I want the navigation and the content to always be side by side. The navigation has an initial width of 300px, however you can close it using jquery and then it only takes up 15pxs. I want the content to always fill the remaining portion of the container. Right now I keep getting it so when the width gets small, the content gets bumped down below the navigation.
Here is a link to jsfiddle to help show what i'm talking about.
http://jsfiddle.net/M9sZd/2/
This is very generic. There are many ways to achieve this, and I'll tell you how I'd do it (with JavaScript, of course). There are two situation: 1. nav extended and 2. nav collapsed. I'd use position: absolute for the navigation, and the corresponding width, while having a padding on the container to accommodate the width of the navigation, and add a class to the container depending on the situation.
#navigation { position: absolute; left: 0; top: 0; width: 300px; }
#navigation.collapsed { width: 15px; }
#container { position: relative; padding-left: 300px;}
#container.nav-collapsed { padding-left: 15px; }
The only risk is that the navigation is higher than the content, and will get trimmed. You can prevent that by using a min-height on the container.
Side by side floating can be tricky sometimes depending on the browser. (I have found issues with IE and using up 100%)
I changed the navigation and content areas to use %-based widths - (20%/80%) and that seemed to easily fit them next to each other.
Link with %-Based Widths
Have you considered using something like a "splitter" to separate the content and navigation and make them adjustable?
jQuery Splitter
I used something like that recently and it really worked for what I was trying to accomplish. You could possibly adjust the widths of the areas explicitly - when you alter the navigation width with something similar to below:
var containerWidth = $("#container").width();
onChange()
{
$("#navigation").css("width", 15px);
$('#content").css("width", containerWidth - 15);
}
Pardon the pseudo-code, it was off the cuff.
Anyways - I hope something here you were able to use :)
I have a menu built with jquery from apycom.com that I am trying to center.
The menu items are from a cms and dynamically created when the page loads. So this means that the menu isn't a fixed width.
I have tried several methods using just css, but without having a width set for the menu, they don't want to work.
I have found some information that leads me to believe that there may be a way to do it with javascript.
Is there is a way to dynamically set the width of the div element around the menu and then set the left and right margins to auto to center the menu?
If there is a better way to accomplish this, I am open to ideas.
Thanks in advance
Bjorn
Here is a sample of what I have thus far.
I have already tried using 'margin: 0 auto;' but without a width setting that doesn't work. Because the menu is created by looping over the menu items available from the cms, I don't know the width of the menu.
I've tried using 'display: inline-block;' as well, and that get's me to a point that the block space the menu takes up is only the width of the menu. Now I just need to be able to center that block. I thought that there might be a way that once the menu has been created and the width is then known that you could then apply the margin settings.
Maybe similar to the way jquery is able to apply and change style settings on the fly.
<div class="top_navigation_bar">
<div id="menu">
<ul class="menu">
<li><a class="parent" href="/en/"><span>Home</span></a></li>
<li><a class="parent" href="/en/web-design"><span>Web Design</span></a>
<div>
<ul>
<li><span>Design Packages</span></li>
<li><span>Website Maintenance</span></li>
<li><span>Redesign Website</span></li>
<li><span>Design Fundamentals</span></li>
<li><span>Design Key Elements</span></li>
</ul>
</div>
</li>
<li><a class="parent" href="/en/website-business-solutions"><span>Business Solutions</span></a></li>
<li><a class="parent" href="/en/internet-marketing"><span>Internet Marketing</span></a>
<div>
<ul>
<li><span>Small Business Marketing</span></li>
<li><span>Leveraging the Internet</span></li>
</ul>
</div>
</li>
<li><a class="parent" href="/en/doing-business"><span>About Us</span></a>
<div>
<ul>
<li><span>Design Team</span></li>
</ul>
</div>
</li>
<li><a class="parent" href="/en/blog"><span>Blog</span></a></li>
<li><a class="parent" href="/en/contact-us"><span>Contact</span></a></li>
<li class="last"><span>FAQ</span></li>
</ul>
</div>
.top_navigation_bar {
height: 46px;
padding-top: 4px;
background-color: #3a8658;
}
div#menu {
height: 46px;
padding-left: 24px;
background: url(/site_media/template_images/images/left.png) no-repeat;
_background: url(/site_media/template_images/images/left.gif) no-repeat;
width:auto;
}
div#menu ul {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
Without a sample makes harder to see what exactly is happening. It would be nice if you post a sample for HTML and CSS you are using. But going blind...
For horizontal centering an element with CSS, you can do:
element {margin: 0px auto;}
This is enough to correctly center an element.
Note that block elements (like div, ul, li and p) tends to fill 100% horizontally. Floating elements or absolute positioning them makes they loose this fullfillment characterist. If this is the case, the elements will wrap to minimum comfortable size that allows the content to be displayed, unless you set width and/or overflow properties.
If you set width, and content is larger than the declared width, it will or overflow, or wrap. You have CSS properties to handle those cases too.
I recommend doind this with CSS, because makes layout more accessible. But if you prefer, you can code width with javascript or jquery, making your life a bit easier.
To process that with javascript, you'll need something like:
myMenuElement.style.width = "200px";
with Jquery (width method):
$('#myMenuElement').width(200);
Cheers.
EDIT
Not sure what is exactly the desired effect, but I made a few changes in your css. Check.
.top_navigation_bar {
height: 46px;
padding-top: 4px;
background-color: #3a8658;
}
div#menu {
height: 46px;
padding-left: 24px;
}
div#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
ul.menu>li {
display: inline;
position: relative;
}
ul.menu>li>div {
display: block;
position: absolute;
left: 0%;
}
ul.menu span {
white-space: nowrap;
}
Follow a good reference from both, vertical and horizontal menus (I've learned from those).
If you are trying to center the #menu inside the .top_navigation_bar then you could use the margin:0 auto and additionally use jQuery like this
$(function(){
$menu = $('#menu');
$menu.width(
$('.menu').outerWidth() +
$menu.outerWidth() - $menu.width()
);
// added the following line, because the lavalamp plugin
// corrects itself when the window resizes..
// so we trigger a resize event, and the plugin fixes everything ;)
$(window).trigger('resize');
});
this will resize the #menu according to its contents, and will become centered because of the auto margin we set in css.
example at http://www.jsfiddle.net/MCnbr/