I have an HTML5 page, which has a <header> element containing the <nav> section.
Due to the style and design of the overall header, the nav is absolutely positioned within the header, which is itself relatively positioned.
This works perfectly for anchors <a> for which it was originally intended. However, I now have need to add a drop-down menu and am using this one:
http://webdesignerhut.com/css-dropdown-menu/
and
How to get a drop-down menu to overlay other elements
But the issue with this and any other CSS dropdown menus that I have found is that they require the parent element to be relatively positioned, but I can't mark the parent <nav> as being both relative and absolute. I am also finding similar CSS requirements with my investigation of jQuery alternatives.
Markup:
<html>
<header>
<nav>
<ul>
<li>
<a>menu option</a>
</li>
<li>
<a>menu option</a>
<ul>
<li><a>submenu option</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<main>
...
</main>
</html>
CSS (simplified, this works for non-dropdown selection)
header {
position: relative;
}
nav {
position: absolute;
}
CSS (required by dropdowns)
nav {
position: relative;
}
nav ul {
position: absolute;
}
So how can I make the nav element act as a position:relative to its children but act as a position:absolute to its parent?
EDIT
Here is a fiddle trying to outline what's going on.
https://jsfiddle.net/8j9z8wak/
It seems the original cause is that the header element (of which nav is a child) has overflow:hidden which helps with resizing on mobile devices and variable screen sizes with floating images on the top left corner of the header image.
I currently on the fiddle have tried to play with overflow-x and overflow-y but this results in scrollbars and not the intended overflow that works with removing overflow:hidden
re (just for your info.) : There are a lot of CSS / HTML parts to the fiddle, the issue is not the bare bones of the navigation but the way it fits with these other parts, so I've kept them in.
I have the nav as a child of header and I need the header to use overflow:hidden, but nav CSS menu works as intended without overflow:hidden.
I have retained media queries as the overflow:hidden is required for smaller screen size handling.
The navigation menu elements have a floating pair of parts that centre the float as found from https://stackoverflow.com/a/21508512/3536236 . This was applied just for today because all dropdown menu systems use floating elements, and they need to be centred.
Add another container element inside the <nav> and then use position: relative on the inner container:
<html>
<header>
<nav>
<div>
<ul>
<li>
<a>menu option</a>
</li>
<li>
<a>menu option</a>
<ul>
<li><a>submenu option</a></li>
</ul>
</li>
</ul>
<div>
</nav>
</header>
<main>
...
</main>
</html>
CSS:
header {
position: relative;
}
nav {
position: absolute;
}
nav div {
position: relative;
}
nav div ul {
position: absolute;
}
Check this code to clear the concept.
div{
border:1px solid #f00;
}
.gp{
position:relative;
height:100px;
width:100%;
display:block;
float:left;
overflow:hidden;
}
.p{
position:absolute;
top:30px;
left:5%;
z-index:1;
width:90%;
height:50px;
}
.c{
position:relative;
border:1px solid #0f0;
}
<div class="gp">
Grand Parents
<div class="p">
Parents
<div class="c"> childs </div>
</div>
</div>
Related
I have a drop-down menu that has a lot of content. If this dropdown is used on a mobile device, the user will be required to scroll down inside the ul (the ul has overflow:scroll) to reveal the rest of the content. This is somewhat unusual, so I want a downwards-pointing arrow on the bottom of the visible part of the ul.
I just cant seem to place it correctly.
I'm using javascript to set the height of the ul to never exceed the viewport height. I'm just scrolling inside the ul as intended, but it can be hard to that there's more menu-content in some cases.
<ul>
<li>
<li>
<li>
<li>
<li>
...
<img class="moreContent-arrow"> //Should be at the bottom of the visible part of the ul
</ul>
The ul has position:absolute. I've tried giving the arrow position:absolute; bottom: 0;, but that just puts it in the correct position until you move the scrollbar.
I've been searching for an answer but I cant seem to find any searchwords that doesn't lead me to how to position a footer to the bottom of the page.
EDIT 1:
Tried to use position:fixed on the image, but I'm using jquery's .slideToggle() on the opening and closing on the menu, meaning that the image which is fixed wont look good, as it pops in and out of existence without sliding into view with the rest of the content.
After trying to realize what you want.
Try this:
ul {
position: relative;
height: 100px;
overflow: auto;
}
.list {
background-color:red;
position: relative;
height: 100px;
}
img {
background-color: green;
height: 20px;
width: 20px;
position: absolute;
display: block;
bottom:0px;
}
<div class="list">
<ul>
<li>
Stuff
</li>
<li>
More Stuff
</li>
<li>
Even more Stuff
</li>
<li>
Stuff
</li>
<li>
Last but not least, Stuff.
</li>
<li>
Stuff
</li>
<li>
More Stuff
</li>
<li>
Even more Stuff
</li>
<li>
Stuff
</li>
<li>
Last but not least, Stuff.
</li>
<li>
Stuff
</li>
<li>
More Stuff
</li>
<li>
Even more Stuff
</li>
<li>
Stuff
</li>
<li>
Last but not least, Stuff.
</li>
</ul>
<img class="moreContent-arrow">
</div>
The list has the height so change the calculation in your js to affect it.
Give the same height to the ul, and overflow: auto.
So, to explain what I did here, as you can notice what scrolls is the ul, that is inside the .list. The img has position: absolute relative to the .list not the ul. So when the ul scrolls, it doesn't affect the img.
IF i get it right,
...
position:fixed;
...
Should be what you're looking for.
You can also use CSS to set the UL height instead of JS
I set up a JSFiddle. I gave the image a position:absolute and bottom:0 and I made the container position:relative.
Edit: I just saw you said ul's position is absolute. It works with its position being absolute, too.
ul {
background-color:red;
height: 200px;
position: relative;
}
img {
background-color: green;
height: 20px;
width: 20px;
position: absolute;
bottom:0px;
}
<ul>
<li>
Stuff
</li>
<li>
More Stuff
</li>
<li>
Even more Stuff
</li>
<li>
Stuff
</li>
<li>
Last but not least, Stuff.
</li>
<img class="moreContent-arrow">
</ul>
Hope this helps.
I'm creating a pure-CSS hover dropdown menu, based on a very basic idea idea.
The HTML:
<ul id="top">
<li>
Menu item 1</li>
<li>
This one has submenu
<div class="submenu">
<ul>...</ul>
<div>
</li>
</ul>
The CSS:
div.submenu {
display: none;
position: absolute;
}
ul#top > li:hover div.submenu { display:block; }
As far as I know, this is the bare minimum to get the idea working.
The problem is I want the submenu to be multi-column, without actually using CSS3 multiple columns.
So I decided to break my submenu into multiple lists and have them float: left like this:
<ul id="top">
<li>
Menu item 1</li>
<li>
This one has submenu
<div class="submenu">
<ul>...</ul>
<ul>...</ul>
<ul>...</ul>
<div>
</li>
</ul>
...and the CSS:
div.submenu ul { float:left; }
This worked well until the point when I got a pretty big submenu in the last main menu item, producing a result like this:
The problem is it is unacceptable to have the submenu fall outside the container. I decided to mark the second half of the main menu items as class="right", and align the submenu's right border to the parent item's right border.
li.right div.submenu { right: 0; }
/* this placed the submenu to the right of the entire page;
it needs a positioning context: */
ul#top li { position:relative; }
That last line causes the <ul>'s to stop floating and just get stacked on top of each other.
Is there a way to keep them floating without setting the <div class="submenu"> to a fixed width?
Interactive demo: http://codepen.io/oli-g-sk/pen/ociet
Edit: if this helps somehow, it is allowed to set the submenu list items .submenu > ul > li to a fixed width. In fact I'm already doing it in the demo.
Try removing float:left from div.submenu ul and add these two rules:
div.submenu {
white-space: nowrap;
}
div.submenu ul {
/* float:left; <-- remove this */
display: inline-block;
}
demo: http://codepen.io/anon/pen/ApxFd
I have a task that I initially thought would be easy, but turned out to be quite difficult. I want to be able to detect the height of the current visible window, center some text in that section of visible window, and place a navigation bar at just the end of the window, so a graphic of what it would look the following:
I have tried various ways of doing this, including setting the height of a div to a certain vh level and centering text inside that dif, though that was quite problematic, as vh is not supported in ie 8 and in order to center the text inside the div, many sources told me to do position: absolute, which tended to shift the text to a corner, which I did not want.
Is there a way in which I can create such a display? If I worded anything incorrectly or posted in the wrong place, please let me know. Thanks in advance for any help.
edit: here is the code I am using: http://pastelink.me/dl/b3cb50
Also some snippets of code for clarification:
what I do is I have a div with height of 100vh and width of 100% and an h1 with an id of myTitle (the css for id myTitle just sets the text-align to center)
<div style="height: 100vh; width: 100%"><h1 id="myTitle"> This is a large title!</h1></div>
and a nav bar directly below it, using foundation's nav bar code:
<nav class="top-bar" id="myNav" data-topbar>
<ul class="title-area">
<li class="name"><h1>My Site</h1></li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section"> <!-- Right Nav Section -->
<ul class="right">
<li class="active">Right Button Active</li>
<li class="has-dropdown">Right Button Dropdown
<ul class="dropdown">
<li>First link in dropdown</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Left Nav Button</li>
</ul>
</section>
</nav>
EDIT: Many answers were said regarding setting the position of the nav bar to the bottom, and I thank you for that, though I forgot to clarify one thing. I would like for the nav bar to only be at the bottom initially, and when someone scrolls down it moves up, and does not stay fixed to the bottom.
find
<div class="navbar navbar-fixed-top">
...
</div>
and change it to
<div class="navbar navbar-fixed-bottom">
...
</div>
bootstrap has a fixed top and bottom selectors :)
JSBIN
Is this what you need? A table is the most supported method for vertical align in CSS.
.table {
display: table;
min-height: 100vh; width: 100%;
}
.table div {
display: table-row;
}
.header {
height: 90px;
background: #ddd;
}
.header h1 {
text-align: center;
}
.content p {
padding: 0 1em;
display: table-cell;
vertical-align: middle;
}
.footer {
height: 220px;
background: #ddd;
}
So, i'm super new to HTML/CSS. For my class I have to make a portfolio webiste.
I want to be very simple. So, I'm starting off with my name centered in the middle of the page, and then underneath I want it to look like this:
About Graphic Design Studio Art (but, spaced out a little obviously)
Here is my html:
<!-- BEGIN: Sticky Header -->
<div id="header_container">
<div id="header">
</div>
<div id="indexheader"><a rel="title">THIS IS MY NAME</a>
</div>
<div id="links">
<a rel="#about">About</a>
</div>
<div id="links">
<a rel="#design">Graphic Design</a>
</div>
<div id="links">
<a rel="#art">Studio Art</a>
</div>
</div>
</div>
<!-- END: Sticky Header -->
Here is my CSS:
/* Make Header Sticky */
#header_container {
background:transparent;
height:60px;
left:0;
position:fixed;
width:100%;
top: 40px;
text-align: center;
}
#header {
left: 0;
position: fixed;
right: 0;
text-align: center;
top: 160px;
z-index: 999;
float: right;
}
body.top-navigation-position-below-banner #navigation-bottom {
position: fixed;
top: 0;
border-bottom: none;
z-index: 999;
}
#page-header-wrapper {
margin-top: 180px;
}
#links {
height: auto;
width: 100%;
margin-top:30px;
background-color:transparent;
text-align: center;
margin-top: 10px;
margin-left:0%;
padding: 0px;
}
http://jsfiddle.net/r7K26/
I also tried to make it a sticky-header. Not sure if that's right either. IM A HUGE NOOB. Forgive me.
You are closing your div with id #header immediately, so the elements beneath is are not receiving any styling. That might be what you want, but then you have an extra at the end of your html.
You can center your div a lot of ways, but the following should work fine:
#indexheader {display:block;width:100%;text-align:center;}
Good luck!
Well, you don't need that many divs first of all. Look at this, for example:
Html:
<div class="myInfo">
<h1>Your Name</h1>
<ul class="myLinks">
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</div>
And actually, you don't even need a div in this case but regardless, having the class on one div you can style with selectors such as:
.myInfo H1 {....}
.myInfo UL {..}
etc
or just
.myLinks {} for the url and then:
.myLinks li {} for the list items.
I know this is a fast answer but as you are learning, I think it might be better to 'sort of' give you some pointers instead of just doing it all, right?
:)
You're very close, and here's one solution using your code as a base. Try this styled JSFiddle and see if its what you need. Please feel free to play around with the code, and hit the Run button when you are ready to see the results. http://jsfiddle.net/TalkingRock/MAuzN/
The structure:
The html code is simplified by using "header_container" to wrap the entire header (title and menu). The "indexheader" is placed in its own div. A new menu div now contains/wraps only the menu items.
<div id="header_container">
<div id="indexheader">THIS IS MY NAME</div>
<div id="menu">
<div class="links">About</div>
<div class="links">Graphic Design</div>
<div class="links">Studio Art</div>
</div> <!-- end menu -->
</div> <!-- end header_container -->
The CSS
Inline-block is used to shrink wrap, center, and display the menu items in a single line. Inline-block has a natural 4px margin around each item, and that can be removed by removing the white space in-between each inline-block item in the html code. You'll also need to add "vertical-align:top". Inline-block is a good style to learn, has good browser support, and comes in handy.
#header_container {
margin:0px;
padding:0px;
border:0px;
min-height:80px; /* use min-height so the div will expand around the contents, regardless of height. */
width:100%;
background-color:transparent;
position:fixed;
top:40px;
}
#indexheader {
text-align:center;
padding:10px;
}
#menu {
text-align:center; /* text-align center works because of the inline-block */
}
.links {
display:inline-block;
vertical-align: top
}
Good article on lnline-block: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
Inline-block support: http://caniuse.com/#feat=inline-block
Here are a few other articles you'll find useful. CSS Fixed Menus:http://www.w3.org/Style/Examples/007/menus.en.html
The Z Index: http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
Note: The div that holds your contents needs a top padding or margin tall enough to make sure it isn't covered up by the fixed menu. Position fixed will be buggy in touch devices, especially handheld phones. In your original code there is an extra div in your html, id's can only be used once per page, use href for your links, and "backgound-color:transparent" (transparent is the default style).
I am having a problem with z-index property on an absolutely positioned div.
Here's my code:
<nav>
<li>
Nav1
<div class="sub_nav">
<ul>
<li>SubNav1</li>
<li>SubNav2</li>
</ul>
</div>
</li>
</nav>
<div id="tabs">
<ul>
<li>Tab1</li>
<li>Tab2</li>
</ul>
<div id="tabs-1">
sjdhfjdshfjsdhf sdjfhsdjfhsdf jsdhfjsdhfj
</div>
<div id="tabs-2">
jsahdjashdjahsd ajshdjahsdjas jashdjashdjhasjhdja
</div>
</div>
The nav li is positioned relative and sub_nav is positioned absolute.
And the list is positioned in left side and tabs in the right side of the screen.
When I hover the nav li the sub_nav goes behind the tabs div.
Here is my Css:
.sub_nav{
position: absolute;
left: 100%;
top: 0;
background: #eee;
width: 200px;
z-index: 99999
}
There is no z-index in tabs div.
Any help would be highly appreciated.
Apparantly there was a position:relative in the tabs div.
I removed that and the problem solved :)
give z-index: 99; to the <ul>
This is not Z-index problem
you put wrong value 'left:100%' in '.sub_nav' replace this in "right:0px;" or as your structure want
this is Fiddle link visit this