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.
Related
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/
I have a fluid-width left div and a fixed-width right div.
It took a while to figure out how to make this work because I am theming a jrox site and jrox will not let me change the order the columns are generated.
The HTML:
<div id="jroxHeader" class="jroxHeader"> </div>
<div id="jroxContent">
<div id="jroxRightColumn" class="jroxRightColumn"> Places to go:
<ul>
<li>First Menu</li>
<li>Second Menu</li>
<li>Third Menu</li>
</ul>
</div>
<div id="jroxMainContent" class="jroxSingleColumn">
Very little content.
</div>
</div>
The CSS:
.jroxSingleColumn{
float: left;
margin-right: 160px;
padding:0 10px;
background-color:#B6B6B4;
}
.jroxRightColumn{
float: right;
width: 160px;
margin-left: -160px;
background-color:#8E8E8C;
}
.jroxHeader{
width: 100%;
background-color:#7A7A78;
height:150px;
}
As you can see with this fiddle this looks great. It works almost perfectly. I didn't notice and issue until I came across a page with very little content in the jroxSingleColumn like in this fiddle. I need the jroxSingleColumn to fill the remaining part of the div and I need it to be cross browser compatible. I can change some of the HTML but the right column will always be in HTML first.
I am almost positive this is not a duplicate. I have read many many similar problems but none are the same.
Thanks.
remove the float:left from your jroxSingleColumn class i.e
change your css to this:
.jroxSingleColumn{
margin-right: 160px;
padding:0 10px;
background-color:#B6B6B4;
}
see this fiddle
Though I would like to suggest, there are much cleaner ways of achieving your end result.
I need to put an unknown number of divs (likely a limit of about 5) into a parent container and always make sure they remain equally divided. I'm not sure if this can be done with CSS alone but I figured I better ask. So if we know that 3 divs are used:
<style>
.menu-button {
float: left;
width: 33%;
}
</style>
<div>
<div class="menu-button">Button X</div>
<div class="menu-button">Button Y</div>
<div class="menu-button">Button Z</div>
</div>
Seems to work, but what if the number of .menu-button divs is unknown? Is there a better way to do it so it automatically adjusts horizontally?
To do that with any element, you have two solutions:
make the browser simulating the table behavior
using Flexible Box layout
For instance, to build an horizontal menu, with equal width of every li elements, with this HTML code :
<div id="menu">
<ul>
<li>First Element</li>
<li>Second Element</li>
<li>Third Element</li>
...
<li>N Element</li>
</ul>
</div>
Using the table layout, CSS code would look like that:
#menu{
width: 100%; /* for instance */
display: table;
table-layout: fixed;
}
#menu ul{
display: table-row;
}
#menu ul li{
display: table-cell;
}
Flexible Box layout is a more modern solution, and it's pretty widely supported nowadays:
#menu{
width: 100%; /* for instance */
}
#menu ul{
display: flex;
flex-flow: row;
}
#menu ul li{
flex-grow: 1;
}
Unfortunatly I think you'll have to use tables to do this. As <td>'s resize itslef to fit into the full width.
HTH
Try this solution (demo page).
Basically, you need to make the divs display:inline-block, and apply text-align:justify to them. Then force a line break. One drawback is there will always be some space between divs, i.e. no way to make their edges touch.
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/