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.
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)
I used the two border options to round various buttons in my site and because of this, they now cascade by roughly one line break. (See image: http://gyazo.com/14af343dea8b280262f6c88465659c42 )
The HTML and CSS is pretty much the same for each button, so I posted an example. Any ideas on why this is happening (I imagine it's the div tags) and how I can stop it?
EDIT - JS Fiddle upload: http://jsfiddle.net/4phcS/
CSS:
#linkwordpress
{
color:white;
background-color:#5C0DAC;
font-family:Arial, Sans-Serif;
font-size:18px;
text-align:center;
width:100px;
height:30px;
position:relative;
top:-90px;
left:500px;
line-height:28px;
border:2px solid;
border-radius:25px;
}
HTML:
<div id="linkwordpress">
Wordpress
</div>
Don't use id's (#), use classes instead as follows:
.header {
color:white;
text-align:center;
background-color:#5C0DAC;
font-family:Arial, Sans-Serif;
font-size:30px;
padding:0px;
margin-bottom:10px;
height:38px;
width:800px;
border:2px solid;
border-radius:25px;
display: inline-block;
}
And use display: inline-block.
<div class="header">
Leon's CS150 Assignment
</div>
<div class="header">
Leon's CS150 Assignment 2
</div>
Your question is a little vague, but if I had to guess I would say that the fact that you are using a div is probably why.
Divs inherently have a display:block. Try changing the display to inline or inline-block.
#linkwordpress
{
color:white;
background-color:#5C0DAC;
font-family:Arial, Sans-Serif;
font-size:18px;
text-align:center;
width:100px;
height:30px;
position:relative;
top:-90px;
left:500px;
line-height:28px;
border:2px solid;
border-radius:25px;
display:inline;
}
or if your id #linkwordpress is just a container then add the display:inline; or display:inline-block; to the anchor inside of the div instead like so:
#linkwordpress a {
display:inline-block;
}
The best solution would be to remove the <div> from around the anchors entirely and negate the problem you are suffering with the display property. Like this:
<nav>
<div>
<a class="Menu-Item" href="#">Home</a>
<a class="Menu-Item" href="about.html">About</a>
<a class="Menu-Item" href="cv.html">CV</a>
<a class="Menu-Item" href="../wordpress">Wordpress</a>
<a class="Menu-Item" href="../webshop/catalog">Webshop</a>
</div>
EDIT:
After examining your code I noticed several issues you were running into that were breaking the navigation. I've attached a new JSFiddle that I think accomplishes what you are looking for and will attempt to explain some of the changes below:
http://jsfiddle.net/Incredulous/j4ZbT/
You had free floating elements in your <div id="container"> that needed to be put into another div and treated as a column.
I added 2 divs to your code:
<div id="col2">
<div id="sideboxhead">Who am I?</div>
<!-- lots of content here -->
</div>
<div id="col1">
<div id="header2">Home</div>
<!-- lots of content here -->
</div>
Then added the matching CSS to treat these as columns:
#col1 { float:left;width:644px;}
#col2 { float:right; width:145px;}
I also altered all of the width properties of divs in #col1 so that I could apply the width to the entire column instead.
I removed all of your top:XXpx; values because you were artificially attempting to create/reduce space and instead added a margin value to the nav element that can be negative instead.
Lastly I removed all of your left values and instead added float to the columns. If you still want the offset of your center content area you can add another container div around both of the #col2 & #col1, make its width less, then change the width of #col1 by the difference of old width - new width.
Hope this helps.
Update:
After reading your comment, the reason your items are vertical rather than horizontal is because the element that contains your navigation requires one of these two tags:
display: inline;
display: inline-block;
Those two items force the items to remain on the same line, rather then constantly drop to a new line. Think of a nesting doll, each doll is one layer deep diving further and further into the doll. Same applies to html, so to counter act that line drop per an element you modify the dimensions, float, or display to cater the design to your entire goal.
I'm still not entirely sure what your attempting to create, or do. Is this more inline of what your trying to accomplish? Fiddle
When you look at the code it isn't all that much different then yours. One of the primary differences, is that nav is simply a div but it is anchoring to the parent element. In this case header. So I define this element as a position: absolute; which will allow more finite control over the entire menu structure.
Then for large menu's and refactoring sometimes it is better to utilize a div over the traditional ul or plain a href. This will add a higher level of control yet again over your menu structure.
Also you'll notice that I don't use Id. That is because an Id is only allowed on a single page, it is unique. Which means it can't be utilized more than once. A class can be, which is more inline for a repetitive values throughout your page.
I'm still not entirely sure of your goal and or poor wording of the question, but hopefully this points you in the proper direction:
header {
width: 100%;
height: 100px;
background: #5C0DAC;
}
h3 {
font-family: Arial, Sans-Serif;
color: white;
text-align: center;
}
nav {
width: 100%;
height: 10%;
position: absolute;
left: 85px;
}
.Menu-Item {
width: 100px;
height: 30px;
padding: 10px 35px;
border-radius: 25px;
display: inline;
margin: 0px 15px;
box-shadow: 0px 3px 6px 0px;
position: relative;
}
a {
font-family: Arial, Sans-Serif;
text-align: center;
line-height: 28px;
color: white;
}
The html:
<header>
<h3>Leon's CS150 Assignment</h3>
<nav>
<div class="Menu-Item">
Home
</div>
<div class="Menu-Item">
About
</div>
<div class="Menu-Item">
CV
</div>
<div class="Menu-Item">
Wordpress
</div>
<div class="Menu-Item">
Webshop
</div>
</nav>
</header>
when I make the div's(that contains the drop down menu)positioning to relative and the drop down menu div's positioning to absolute,it shows me only the last item on the drop down menu.if I set drop down menu container div to relative and leave the drop down menu div positioning,then it works.But that affects the rest of the page.So,how to set the positioning that would make the drop down works without affecting any other parts of the page.
HTML
<div id="top_head">
My Online Shop
<div id="nav">
<div class="test">Home</div>
<div class="test" id="product">Products
<div class="test1">shirt</div>
<div class="test1">Pant</div>
<div class="test1">inner</div>
<div class="test1">cap</div>
</div>
<div class="test">About</div>
<div class="test">contact Us</div>
</div>
</div>
CSS
body{
color:green;
}
#top_head{
width:100%;
height:100px;
font:48px Arial green;
border:1px dotted red;
}
#nav{
background-color:gray;
width:57%;
border-radius:5px;
font:28px Arial orange;
margin:0px -49px 5px 15px;
}
#nav a{
color:red;
text-decoration:none;
margin:0px 50px;
}
.test{
float:left;
}
.test:hover{
background-color:orange;
}
#product{
position:relative;
}
.test1{
position:absolute;
border:1px solid red;
visibility:hidden;
}
#product:hover .test1{
visibility:visible;
background-color:yellow;
}
I've tried with display property too. Same results.
If you have any idea where the problem lies, please help.
It looks like the issue here is that you're using position:absolute on all of the sub menu divs. This is essentially making them lay on top of each other (leaving the last one on top).
One solution for this is to wrap all of these elements in a container div and make that the thing that is hidden or shown:
Working Fiddle Demo
Your sub-menu becomes:
<div class="test1">
<div>shirt</div>
<div>Pant</div>
<div>inner</div>
<div>cap</div>
</div>
And the CSS is altered slightly:
.test1{
display:none;
}
.test1 div{
border:1px solid red;
}
#product:hover .test1{
position:absolute;
display: block;
background-color:yellow;
}
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/
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.