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>.
Related
From the examples that I have seen this can be achieved by using
right: 0px;
top: 0px;
Or some variation of this. However when I do this, my div stays tight left of the screen. I need to start going into -1000px area to make it appear at the top right, which doesn't seem right.
Here is my HTML, and it is the div with the class "mysettings-menu" I am trying to place at the top right of the screen.
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink(...)</li>
<li>#Html.ActionLink(...)</li>
<li>#Html.ActionLink(...)</li>
</ul>
<div class="mysettings-menu">
<ul>
<li>
Settings
<ul class="sub_menu">
<li>Log In</li>
<li>Add New Application</li>
</ul>
</li>
</ul>
</div>
</div>
As you can see I am using some default bootstrap classes, but even putting my div outside of these divs doesn't make a difference as it remains as close to the left side of the screen as it can get.
.mysettings-menu { position: relative; right: 0}
To put it on the top right,:
.mysettings-menu{
position: absolute;
right: 0px;
top:0px;
}
ie. Change the position to absolute.
First of all,
position: relative
means relative to the current position of the element. Combined with
right: 0
it certainly doesn't affect the positioning of your div.
What you want is
.settings-menu { position: absolute; right: 0; top: 0; } or .settings-menu { float: right; }
though both are different in some ways and similar in some other.
If you are using Bootstrap, then you can add the class pull-left. That basicalley add the propertie float: left !important to your div to make it float left (you can use it to the right too)
The majority of the position property is relative to the parent container.
If you want the div to be position to the top right of the its parent container you need to specify the position as absolute:
.mysettings-menu { position: absolute; top:0; right: 0; }
Alternate values for the position property are:
static (default)
relative
fixed
fixed is the only position property that does not position relative to its parent container, but positions relative to the window.
For example:
.mysettings-menu { position: fixed; top:0; right: 0; }
would set the div to be displayed in the very top right of the window regardless of where you scrolled to - it would always be visible.
jsfiddle demo
html
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" style="display:inline-block">
<li>#Html.ActionLink(...)</li>
<li>#Html.ActionLink(...)</li>
<li>#Html.ActionLink(...)</li>
</ul>
<div class="mysettings-menu">
<ul>
<li>
Settings
<ul class="sub_menu">
<li>Log In</li>
<li>Add New Application</li>
</ul>
</li>
</ul>
</div>
</div>
css
.navbar-collapse{
border:1px solid red
}
.mysettings-menu{
border:1px solid blue;
display:inline-block;
position:absolute;
right: 10px;
What about this:
http://jsfiddle.net/lharby/zs15e48q/
CSS:
.nav {
float:left;
}
.mysettings-menu {
float:right;
}
As others have mentioned you could also use absolute positioning, but it depends if you want to change the flow of the document.
EDIT
As one answer points out (Yerko Palma) if you are using bootstrap you can add pull-left and pull-right classes to your elements, this is actually a better solution than writing new css for the existing elements.
Updated fiddle:
http://jsfiddle.net/lharby/zs15e48q/1/
I hope someone can explain this odd CSS issue I'm encountering.
I have an empty element (think <img> or <input>) inside a li. When I change the display style on the empty element to "block", the alignment of the bullet on the li changes. If I do the same thing with a non-empty element (<span>, say), the bullet alignment does not change.
The bullet alignment changes even if the empty element is inside another block-level element (<div>).
Here are two examples on JSFiddle:
Using an <img> element
Using a <span> element
And screenshots of the results (<img> on the left, <span> on the right:
I have two questions:
Why do the bullets do this?
How can I make the bullets in the <img> example line up the same way as in the <span> example?
For reference, the stylesheet:
ul { background: lightgreen; width: 100px; padding-left: 50px; }
div { background: lightblue; }
img { background: lightcoral; }
li { background: lightyellow; }
img { width: 50px; height: 50px; }
img[rel] { display: block; }
And the HTML:
<ul>
<li>
<div><img rel></div>
</li>
</ul>
<ul>
<li>
<div><img></div>
</li>
</ul>
<ul>
<li>
<div><img rel></div>
<p> ! </p>
</li>
</ul>
<ul>
<li>
<div><img></div>
<p> ! </p>
</li>
</ul>
(I know my <img> elements don't have src attributes. This is just for illustration purposes. BTW, it still works in Google Chrome, but not Firefox.)
It is an issue with alignment for images, they default to the bottom alignment which causes the list items to move with them. In order to fix this problem, add this to the image tag:
img {
display: inline-block;
vertical-align: middle;
}
The display: inline-block is the only display type that will allow vertical align to work.
I'm trying to have the three <div class="forward-link"> align to be all along the same baseline. I've tried float:left and display:inline-block, but nothing seems to work. Any ideas?
The site is made using php/Wordpress, but below is the rendered HTML and CSS.
Also, http://jsfiddle.net/mugUG/
Rendered HTML:
<div id="landing-content">
<div id="landing-brief">
<ul>
<li>
<h2>Growing Edge Blog</h2>
<p>“Embrace the messy imperfect genius. Seek to be misunderstood by creative minds.” ~Ross Martin One thing I have learned over the years as an entrepreneur is that when I am in my most creative space, I have to release being a perfectionist and jump into my creative messiness. I need to create space that allows [...]</p>
<div class="forward-link">
<p><span style="color:#b8bf33">Continue Reading</span></p>
</div><!-- end forward-link -->
</li>
<li>
<h2>Meet Mary Anne</h2>
<p>Mary Anne is the founder of Growing Edge Coaching™, a coaching and consulting company, where she helps individuals and companies develop powerful strategies to move forward in their life, their work, or their business. Her coaching is founded on her 20 years of experience as a manager and senior leader in non-profits.</p>
<div class="forward-link">
<p><span style="color:#b8bf33">More About Mary Anne</span></p>
</div><!-- end forward-link -->
</li>
<li>
<h2>Recent Tweets</h2>
<div id="twitter-feed">
<ul>
<li>
RT #LollyDaskal: regret is often the result of too many excuses. #leadfromwithin #leadership </li>
<li>
What you do in small doses becomes big doses in your life. </li>
<li>
RT #ThisIsSethsBlog: Seth's Blog: Two kinds of unique http://t.co/1TJ1Vuf9 </li>
</ul>
</div><!-- end twitter-feed -->
<div class="forward-link">
<p><span style="color:#b8bf33">Follow #Growing_Edge</span></p>
</div><!-- end forward-link -->
</li>
</ul>
</div><!-- end brief -->
<div id="landing-social">
<h1>Growing Edge Coaching™ works with individuals and companies to attain positive actions and powerful results in their work and life.</h1>
<div id="icons">
<ul>
<li><img src="http://growingedgecoaching.com/wp-content/themes/twentyeleven/images/facebook.png" alt="Growing Edge Coaching Facebook" id="fb" /></li>
<li><img src="http://growingedgecoaching.com/wp-content/themes/twentyeleven/images/twitter.png" alt="Growing Edge Coaching Twitter" id="tw" /></li>
<li><img src="http://growingedgecoaching.com/wp-content/themes/twentyeleven/images/linkedin.png" alt="Growing Edge Coaching Linked In" id="li" /></li>
</ul>
</div><!-- end icons -->
</div><!-- end social -->
<div id="landing-contact-info">
<p><span>PHONE</span> 917.238-9726 | <span>E-MAIL</span> <span style="color:#333333">maflanagan#growingedgecoaching.com</span></p>
</div><!-- end contact-info -->
</div><!-- end landing-content -->
CSS
/* Landing Content */
#landing-content {
background: #f7f7f7;
clear: both;
margin-top: 40px;
}
#landing-brief {
width: 860px;
margin: 0 auto;
padding-top: 40px;
}
#landing-brief ul li {
display: inline-block;
height: 200px;
width: 250px;
position: relative;
vertical-align: top;
}
#landing-brief ul li:last-child {
padding-right: none;
}
#landing-brief #twitter-feed {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 75%;
line-height: 1.5;
color: #333333;
margin-left: -28px;
}
#landing-brief #twitter-feed ul li {
padding-bottom: 5px;
}
#landing-brief .forward-link {
position: absolute;
padding-left: 0;
padding-bottom: 0;
padding-top: 10px;
}
So your LI elements are aligned horizontally yeah?
What you want to do is give all of your LI elements an equal height tall enough enough to accommodate the content in each LI.
Then make the LI elements position:relative
Then make the forward-link elements position:absolute, left:0, bottom:0
That should do the trick.
Give your all 3 div different id. 1st 2 div give float as left and third div float as right.
All 3 div put in main div with overflow hidden.
Fiddle
ul {
position: relative;
}
li {
position: static; /* The default if no position property is applied */
padding-bottom: 1.6em;
}
a {
position: absolute;
bottom: 0; /* Or, in the linked Fiddle, 1em to accommodate the padding
on the bottom of the UL tag. */
}
This only works in IE7+ (IE6 doesn't support absolutely positioned elements with only one edge (left, right, top, or bottom) property), and only when the elements are guaranteed to be side-by-side. When an element is absolutely positioned but no edge properties are specified, the browser attempts to put the element where it would be if it didn't have position: absolute;. Giving the element only one edge property (such as bottom: 1em; as in the example) causes the browser to move it from the "default" location to match that single edge property. So left and right can be left as automatically calculated if only top or bottom is specified. See also W3C Wiki: CSS absolute and fixed positioning.
Make the UL tag position: relative;, but the LI tags position: static; (the default value for position, not absolute… absolute elements have no layout, and will require a fixed height on the parent element). Give the LI tags enough padding on the bottom to make space for the content you want at the bottom. In the example above, the content is one line of text, which is about 1.2em for most fonts. I added a bit more padding for spacing in the example, and made it about 1.6em. Then make the A tags position: absolute; bottom: 0; and they will move to the bottom of the nearest positioned ancestor, or in this case the UL tag.
I have a simple horizontal nav menu that uses highly-styled anchors for buttons. Now, the last button, called "store" has a list of content that becomes visible via this jquery hover effect.
I can't get the "store" button to align with the rest of them. Two days now I'm trying float:left margin 50% whatever, position:incorrect, overflow:I-forget-what, clear:both, plus various cheesy hacks, and I'm at that point of CSS positioning where you start thinking seriously about re-constructing your layout using tables.
Instead of selling my soul to tables, I guess I better just ask someone who is more experienced to please take a look:
http://www.ideagasms.net/ideagasms-with-dropdown-menu.html
When viewing source, you'll notice I added lots of comments next to the main elements so it should be easy to make sense of everything quickly. Thank you. :)
This code should work:
I've added a wrapping div to your menu with a fixed width and centred it on the page. Then added each a tag into an li.
Your jQuery Menu is now broken but it should just be a case of finding the correct elements again now the orders have changed in the dom.
You might also have to create some new styles and add them to the elements again. As I've probably messed a few bits up. I'd suggest adding proper classes and id's so you don't run into styling problems in the future.
<div id="nav">
<ul>
<li>
<a alt="STORE" class="navmenu faded" href="http://www.ideagasms.net/ideagasms-products/">STORE</a>
<ul class="file_menu">
<li>File</li>
<li>Edit</li>
<li>View</li>
<li>Insert</li>
<li>Modify</li>
<li>Control</li>
<li>Debug</li>
<li>Window</li>
<li>Help</li>
</ul>
</li>
<li><a alt="HOME" class="navmenu faded" href="http://www.ideagasms.net/link">HOME</a> </li>
<li><a alt="VIDEO" class="navmenu faded" href="http://www.ideagasms.net/link">VIDEO</a> </li>
<li><a alt="ABOUT" class="navmenu faded" href="http://www.ideagasms.net/link">ABOUT</a></li>
<li><a alt="CONTACT" class="smcf-link navmenu faded">CONTACT</a></li>
<li><a alt="DONATIONS" class="navmenu scroll faded" href="http://www.ideagasms.net/link">DONATIONS</a></li>
<li><a alt="MENTORING" class="navmenu faded" href="http://www.ideagasms.net/link">MENTORING</a></li>
<li><a alt="BEAUTY" class="navmenu faded" href="http://www.ideagasms.net/link">BEAUTY</a></li>
<li><a alt="SNIPPETS" class="navmenu scroll faded" style="letter-spacing:1px" href="http://www.ideagasms.net/link">#iG</a></li>
</ul>
</div>
<style type="text/css">
#buttonnav {
float:left;
height: 25px;
width: 100px;
margin-bottom:1cm;
position:relative;
z-index:9;
}
#nav {
margin: auto;
width: 740px;
background: orange;
}
ul {
margin: auto;
}
ul li {
display: inline;
float: left;
}
.menu_class {
border:1px solid #1c1c1c;
}
ul.file_menu {
cursor:pointer;
display:none;
width:260px;
border: 1px solid #1c1c1c;
margin:0;
padding:0;
list-style:none;
}
.file_menu li {
background-color: #302f2f;
}
.file_menu li a {
color:#FFFFFF;
text-decoration:none;
padding:10px;
display:block;
}
.file_menu li a:hover {
padding:10px;
font-weight:bold;
color: #F00880;
}
</style>
That menu looks atrocious and to be honest, doesn't allow for much flexibility as you noticed.
If I were you I would rebuild it in t way where a proper html structure is used with a (nested) li structure so you could just whip in that extra item and the submenu...
This is the ugly fix
#buttonnav {
display: inline-block;
/* remove the float & widht */
}
.hoverli ul.file-menu {
position:absolute;
}
This is a case where you should probably go back to the basics and re-learn how to make a proper menu. If this is in some content management system then override the classes & templates to make it so you can easily add things...
Stuff I am missing for the sub menu also is position: absolute; (and you probably want the sub-menus parent to be relative).
You need to fix two things to properly present the button and have the sub-menu functioning:
See this working Fiddle Example!
1)
Set the css for the button like:
#buttonnav {
display: inline-block;
height: 25px;
position: relative;
z-index: 9;
}
Note: display:inline-block; gets in and float, margin and width gets out.
2)
Adjust the css for the sub-menu to allow it to appear without breaking the layout:
CSS
.hoverli {
position: relative;
z-index: 1;
}
.hoverli ul {
position:absolute;
}
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/