Hi
I have this fat menu code from http://nettuts.s3.amazonaws.com/819_megamenu/demo/index.html#:
<ul id="main">
<li>Home
<div class="dropdown_2columns"><!-- Begin 2 columns container -->
<div class="col_2">
<h2>Welcome !</h2>
</div>
<div class="col_2">
<p>Hi and welcome here ! This is a showcase of the possibilities of this awesome Mega Drop Down Menu.</p>
<p>This item comes with a large range of prepared typographic stylings such as headings, lists, etc.</p>
</div>
<div class="col_2">
<h2>Cross Browser Support</h2>
</div>
<div class="col_1">
<img src="img/browsers.png" width="125" height="48" alt="" />
</div>
<div class="col_1">
<p>This mega menu has been tested in all major browsers.</p>
</div>
</div
</li>
The relevant portion of the style is:
.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
margin:4px auto;
float:left;
position:absolute;
left:-999em; /* Hides the drop down */
text-align:left;
}
.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}
#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
left:-1px;
top:auto;
}
#menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:7px;
border:none;
}
#menu li:hover {
}
#menu li a {
display:block;
outline:0;
}
#menu li:hover a {
color:#161616;
text-shadow: 1px 1px 1px #ffffff;
}
#menu li .drop {
padding-right:21px;
background:url("img/drop.png") no-repeat right 8px;
}
Even though the position of the dropdown menu is mentioned as absolute - there is no mention of the absolute position (ie co-ordinates). If the position:absolute is removed then, the subsequent elements (such as "5 elements", etc) are floated around the dropdown menu (ie the one that pops up after selecting the "Home" menu from menubar). Hence absolute is making the drop down to be placed directly under the home in the menubar and the next menu "5 columns" is placed next to "home" in the menu bar and not next to the dropdown menu. Then how is this working (ie how is the browser understanding it to be rendered as absolute) without mentioning the values of top/bottom/left/right co-ordinates? In other examples of position: absolute such as for the ones in w3schools, the position is mentioned directly ie top: 10px, left: 5px etc. But here that is happening like magic (but is not helping my understanding at all). So please help me understand this and would highly appreciate such help.
Thanks
If a child element is position:absolute and the parent is position:relative, then the child inherits the positioning of the parent. Here's an example:
http://jsfiddle.net/charlescarver/CdBHQ/
One reason why the parent might be relative of the example you posted is because you will want the dropdowns to move with the navigation bar. Hardcoding in positions would require you to hardcode them again for every change of position.
In your example, each column is given a width. When you however, its starting position is inherited from the relative parent, and then naturally flows to the right.
Related
I am currently using this css sheet to stylize my page but no matter what I do I cannot get the footer to line up with the main content of my webpage. It seems to be an centering issue.
Here is my css:
.footnav
{
padding: 20px 40px 20px 40px;
clear:both;
text-align:center;
color:white;
position:relative;
z-index:100;
}
.footnav li a{
text-decoration:none;
display: inline;
font-weight:bold;
}
.footnav li {
list-style-type: none;
}
Here is the code that previous css it is stylizing, I apologize if it is a lot to read.
<div class="footnav" >
<ul class="nav1">
<li class="header">Main</li>
<li><Home</li>
</ul>
<ul class="nav2">
<li class="header">Aventure</li>
<li>News</li>
<li>Map</li>
</ul >
<ul class="nav3">
<li class="header">Survival</li>
<li>Guide</li>
<li>Gear</li>
</ul>
</div>
This is the css for the content area, that I am trying to line my footer with.
.content
{
color:white;
font-size:12px;
font-weight:none;
font-family:sans-serif;
padding:30px;
margin:auto;
margin-top:10px;
width:70%;
position:relative;
z-index:14;
opacity:1;
border-style:solid;
border-width:10px;
border-style:solid;
border-width:5px;
background-color:#000000;
border-color:#FFFFFF;
border-right-color:#999999;
border-left-color:#666666;
border-bottom-color:#333333;
}
I know that it involves trying to take half the width of the body of the webpage, but for my page I used percentages instead of pixels. I am not sure how to handle that. Thanks in advance and once again, I apologize for the lengthy question but the only way to properly assist me, would be to have the full picture. If there is any more material needed just ask.
Wrap the footer content in <center> tags </center>. They automatically align any child content with the center of the page.
try to add display: inline-block; to .footnav ul. The ul blocks would otherwise have 100% width - this way they can be next to each other, and be centerded together. inline-block limits the width, therefore you also should add a width setting to this rule. So it is:
.footnav ul {
display: inline-block;
width: 200px;
}
(The actual width depends on the content of your li elements in those nav lists)
jsfiddle at http://jsfiddle.net/Sapphireblue/781rrymp/39/ & code at bottom
I have four nav elements, each text in LIs side-by-side via float:left, in a UL, in a DIV, in a NAV, in a DIV whose width is a percentage of its parent element(s). (I am using a responsive grid layout and these LIs are populated by a WordPress menu, so there may well be a more efficient way to achieve this with less overhead, but that efficiency is not part of the spec for this project.)
What I want to do is to keep the left edge of the left-most LI at the left edge of all its parents; the right edge of the right-most LI at the right edge of all its parents; and have the other two LIs evenly spaced between the outer two. So kind of like a fully justified line of text.
Turns out, this is hard. Between the percentage-width div, which means that any margin I specify for the LIs is unsuitable as soon as you resize, and the fact that the text items in the LIs are of different widths so, and etc etc, I can't get the last LI flush right in a way that stays there for any resize (not even setting LI last-child margin-right to 0}.
I've played with various units for my LIs and none is right. I tried media queries for small adjustments to font sizes on the LIs as you resize the browser window and that parent div shrinks, which helps, but unless I set a breakpoint every 5 pixels, this isn't workable as a solution. If I work out margins that are ~close~ to what I want and then just set float:right on the last-child LI, it looks dumb if you resize the window down to where that last LI appears on its own line.
Gotta be a way to do this. And sorry if the question has been asked; I did browse but didn't find anything quite a match.
(Note: I'm not worried about widths so small the LIs wrap onto 2 lines, I just don't want there to be a gap of whitespace to the right of the UL, at any width where the UL can be contained on the one line.)
#myDiv {
width:50%;
margin:0;
border:1px solid red;
overflow:auto;
}
#myDiv ul {
padding:0;
margin:0 0 0 0;
height:auto;
}
#myDiv li {
list-style-type: none;
float:left;
background-color:yellow;
margin-right:20px; /* this value is only good for one
specific viewport width: ugggh */
}
#myDiv li:last-child {
margin-right:0px;
}
<div id="myDiv">
<nav>
<div>
<ul>
<li>Item 1</li>
<li>Item Two</li>
<li>#3</li>
<li>Longer Item Four</li>
</ul>
</div>
</nav>
</div>
If I understand correctly, this sounds like it would be difficult to achieve and unreliable, especially given that the nav text can be edited through a CMS.
In this situation I'd be inclined to handle it a little differently, using display: inline-block on the list items.
#myDiv li {
list-style-type: none;
display: inline-block;
background-color:yellow;
margin: 0 2px;
}
http://jsfiddle.net/781rrymp/40/
How about using TABLE instead of UL. The code would be:
<style type="text/css">
#myDiv {
width:50%;
margin:0;
border:1px solid red;
overflow:auto;
}
#myDiv table {
padding:0;
margin:0 0 0 0;
height:auto;
width: 100%;
}
#myDiv td {
width: 25%;
background-color: yellow;
border-right: 20px solid white;
}
#myDiv td:last-child {
border-right: 0px;
}
</style>
<div id="myDiv">
<nav>
<table>
<tr>
<td>Item 1</td>
<td>Item Two</td>
<td>#3</td>
<td>Longer Item Four</td>
</tr>
</table>
</nav>
</div>
I'm making a menu with floating menu items.
What I want is to always have 10 px padding in top, on hover and not hovering.
My HTML:
<div id="menu">
<div class="menuitem">
Home
</div>
<div class="menuitem">
Item2
</div>
<div class="menuitem">
Item3
</div>
<div class="menuitem">
Item4
</div>
</div>
My css:
#menu
{
margin:0 auto;
background-color:#B89470;
height:50px;
text-align:center;
}
.menuitem
{
font-weight:bold;
padding-top:10px;
height:50px;
width:100px;
float:left;
}
.menuitem:hover
{
background-color:#abca9e;
}
So I have made this.
But for some reasing the padding is only showing while :hover is active.
But I have set the padding in
.menuitemn
and not in
.menuitem:hover
so why isn't there any padding when hover isn't active?
It is because the padding-top: 10px; is adding 10px to the height of the menuitem making it 60px in height. Yet the #menu still remains at 50px with an overlap of 10px. I changed the height of #menu to show you.
DEMO http://jsfiddle.net/6w5kz/1/
height:60px;
Another solution to the proposed ones would be to add:
#menu {
overflow: hidden;
}
The problem is that the child .menuitem is bigger than the #menu, so it overflows it. This happens because of the box model, which I really recommend you to read. So there are several ways to solve it, one is the one I pointed out, other is #Vector's and another is not setting the height of #menu so it's as high as needed.
I've also added cursor: pointer; when you hover the .menuitem to show properly that it's a clickable item.
http://jsfiddle.net/franciscop/6w5kz/3/
I want to have a left-aligned navigation bar across the top of the page, but before (i.e. to the left of) the menu items, I would like a bit of text ("John Doe") that (i) has a substantially larger font size than the menu items but (ii) has the same baseline as the menu items.
From what I understand, the preferred/recommended way to do navigation bars is with floated <li>'s. However, I haven't found a way to use a left floated list and also have the menus align to the same baseline as the text to the left. My current CSS and HTML are:
<html>
<head>
<style>
#navdiv {
overflow:hidden;
border-bottom:solid 1px red;
}
#nav {
list-style:none;
margin:0;
padding:0;
}
#nav li~li {
float:left;
border:solid 1px blue;
width:100px;
}
#name {
float:left;
border:solid 1px blue;
font-size:40px;
width:250px;
}
</style>
</head>
<body>
<div id='navdiv'>
<ul id='nav'>
<li id='name'>John Doe</li>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
</body>
</html>
Is there any way to vertically align all left floated <li>'s to the bottom of the container <div>?
I should say: I can easily achieve the intended effect by using a table instead of a floated list (using vertical-align:bottom on the menu <td>'s), but since floated lists seem to be the recommended standard, I'd like to know if it's possible with them. (Though I really don't understand the animus folks seem to have against using tables for layout.)
Don't need to use float, in fact it's better if you don't, you can just set the display type to a table-cell
#navdiv {
overflow:hidden;
border-bottom:solid 1px red;
}
#nav {
list-style:none;
margin:0;
padding:0;
}
#nav li {
display: table-cell;
vertical-align: bottom;
border:solid 1px blue;
width:100px;
}
#nav li#name {
font-size:40px;
width:250px;
}
also, the extra border style was unnecessary, just change the selectors to #nav li and #nav li#name and you can supersede anything in #nav li with what's in #nav li#name because it has higher priority.
tables are bad mostly because of the way they load, as far as I understand they require the whole table to build before content can load, while using individual elements can load as they please, or something to that affect, i'm sure someone else could explain that part better.
I am trying to create a megamenu (see fiddle: http://jsfiddle.net/BKHNk/) but the issue I am running into is when I put links in the <div> that flies out from the menu. The dropdown under Menu 1 is what I want it to look like but as soon as I turn the text into links as seen in Menu 2 all the formatting goes haywire. I think the issue is that the links are inheriting attributes but I don't know the best way to prevent that from happening.
Basically, I want the width to be as minimally wide as necessary based on the content. The section text should be on one line. The subsection items should all be on their own line with each subsection text (but not the comma) as a link. Again, basically exactly like Menu 1 looks.
I also tried changing the subsection items into an unordered list but that got even more convoluted and I don't think that it's necessary to do so.
Can anyone help me figure out what is being inherited that is making all of the text in the second line wrap and how to prevent it from happening? Thanks!
HTML code below:
<ul id="menu">
<li> Menu 1
<div class="dropdown">
<div class="section">Section goes here</div>
<div class="subsection">Subsection 1, Subsection 2, Subsection 3</div>
<div class="rule"></div>
</div>
</li>
<li> Menu 2
<div class="dropdown">
<div class="section">Section goes here</div>
<div class="subsection">Subsection 1, Subsection 2, Subsection 3</div>
<div class="rule"></div>
</div>
</li>
</ul>
CSS below:
#menu {
font-family: sans-serif;
list-style:none;
height: 32px;
width: 200px;
background: #888;
}
#menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 5px;
margin:5px;
}
#menu li a {
color: black;
display:block;
text-decoration:none;
}
#menu li:hover a {
color:#ccc;
}
.dropdown {
margin:4px auto;
float:left;
position:absolute;
left:-999px;
text-align:left;
padding:10px;
background:#aaa;
width: auto;
white-space:nowrap;
}
#menu li:hover .dropdown {
left:0px;
top:auto;
}
.rule {
height: 2px;
width: 100%;
background-color: red;
}
.section {
font-weight:bold;
}
.subsection {
font-size: 75%;
}
This line is causing your problems:
#menu li a {
color: black;
display:block;
text-decoration:none;
}
This makes any and all links that are child of a list item display as block, which causes the vertical stacking that you're seeing.
Change that selector to #menu li > a and you're good to go. View it on JSFiddle. What this does is only apply the styling to links that are direct children of list items.