So i have a 'meganav' in my site that is essentially a side nav in an area, that is floated left and takes up a 3rd of the site, then once a parent anchor is clicked, it opens up its child div with a class of 'meganav-div', which opens up to the right and takes up the other 2/3rds of the wrapper area appearing above whatever is in that area.
Currently i have it all working in all browsers, apart from ie6 and ie7, where you can open the first item (div#one) and click on everything just fine, however, anything underneath this (div#two, div#three etc) are not working in that any links inside these divs are not clickable. I have a close button in each div that works on all browsers but not ie6 and 7. The cursor even changes to a pointer on all the anchors, but just will not click. Im assumint that this is something to do with z-index due to the first one working and then not the ones further down the nav list, but i have added the same z-index for all .meganav-div's and still no joy.
Please find the code below. Any help would be much appreciated. thanks. Please find a link to jsfiddle: http://jsfiddle.net/tomiswoot/vqJnY/1/
<section id="herocontainer">
<div class="hero-white">
<aside>
<ul id="mainnav">
Nav item 1
<!--===MEGANAV one====----->
<div id="one" class="meganav-div">
MEGANAV DIV CONTENT HERE
</div>
</li>
<li>
Nav item 2
<!--===MEGANAV two====----->
<div id="two" class="meganav-div">
MEGANAV DIV CONTENT HERE
</div>
</li>
<li>
Nav item 3
<!--===MEGANAV three====----->
<div id="three" class="meganav-div">
MEGANAV DIV CONTENT HERE
</div>
</li>
<li>
Nav item 4
<!--===MEGANAV four====----->
<div id="four" class="meganav-div">
MEGANAV DIV CONTENT HERE
</div>
</li>
<li>
Nav item 5
<!--===MEGANAV five====----->
<div id="five" class="meganav-div">
MEGANAV DIV CONTENT HERE
</div>
</li>
</ul>
</aside>
</div>
</section>
It's caused by the fact that you have multiple close buttons with the same id=close1 - which makes your html invalid. I changed it to class=close1, now it seems to be working (i also changed positioning a bit for more easy testing)
http://jsfiddle.net/vqJnY/7/
Related
There's this fixed header element (a block element), with an absolute positioned nav element with a menu, and another fixed element as the logo:
<header>
<nav id="menu">
<ul id="menuItems">
<li class="menu-item" role="menuitem">About</li>
<li class="menu-item" role="menuitem">Contact</li>
</ul>
</nav>
<div id="topLogo">
<h1>MAIN</h1>
<h2>SUB</h2>
</div>
</header>
The <header> doesn't have dimensions, it doesn't take-up space (check out with an inspector tool).
I need it to take space (and still be fixed).
Look at the JSFiddle to see it with the complete CSS as well:
https://jsfiddle.net/5amo16q8/4/
Changing the nav to float:left and removing the position:absolute seem to create to desired result.
See: https://jsfiddle.net/5amo16q8/8/
Does anyone can create a JSfiddle code to demonstrate how to integrate two or more anchor tags in the same li item? I have searched but no clear answer of how could you for instance divide the li element with lets say 3 square anchors 1/3 each. Do you for example need to add div tags to each anchor?
eg.
<ul>
<li>
</li>
<li>
</li>
You can use the jQuery Mobile grid:
http://demos.jquerymobile.com/1.4.5/grids/
e.g.:
<li>
<div class="ui-grid-b">
<div class="ui-block-a">
<img src="http://lorempixel.com/80/80/food/1/" />
</div>
<div class="ui-block-b">
Some text
</div>
<div class="ui-block-c">
Delete
</div>
</div>
</li>
Here is a simple DEMO
NOTE: you can then use CSS to tweak widths, margins, padding, etc. to taste.
Let's say, as you asked, you have 3 elements:
<div class="your_three_elements">
<img src="..." alt="..." />
Your Text
Your Button
</div>
So you have to have one link per one target. But those things aren't anchors. An anchor would be something like this:
<div class"your_anchorlink">
Your Link
</div>
<div id="gototext">
When you click on the link, you will get to this text (which is on the same page).
</div>
You could combine that by having a link go_to_some_page.html#gototext which will open the go_to_some_page page and jump to the id gototext.
But maybe I am missunderstanding what you want to do.
I am in the middle of creating a website using Dreamweaver CC 2014. The Homepage scrolls fine, but the About page and Calendar page doesn't scroll at all and cuts off the bottom half that should be displaying. I've read the other threads that say to add the overflow: scroll code to the CSS. I have done that, but it still isn't working and I'm wondering if I have placed the code in the wrong place?
Here is the link to the Calendar page:
http://normajdougherty.com/Calendar.html
Would you look at the CSS and HTML code and let me know what the problem is? Thanks so much.
You have
position:fixed;
Specified in your navigation bar, which is effectively "locking" the page in place. If you set its position to relative, your menu items (which should also not be set to "fixed") are no longer going to be attached to the navbar.
But the way you have implemented the navbar in the first place is kind of kludgy. You don't need a separate div for the blue bar in the background.
Instead of having two overlapping fixed divs, which is a bad practice for several reasons, just place your navigation buttons in a single div with a background color, using the "background-color" property.
Also, the reason it looks "cut off" halfway down is because that's just the size of the image you're using in the background. Consider setting up a color gradient or something, or honestly just leave the background a solid color. Unless you do something particularly fancy, a big static image like that is not going to look the way you want it to.
EDIT: Okay, at second glance, it looks like your entire page is wrapped within the navigation bar div. That's why the whole page is locked in place when "position:fixed" is set. Make sure you close the tag for the navbar before the rest of the page content starts.
But still, you shouldn't have a fixed navbar like that in the middle of the page, as it will scroll down with the rest of your content and just end up looking really bad.
It is because you set
positon:fixed;
in navbar class.
remove it and page will work fine
So remove
position:fixed
from .navbar class in calendar.css
You're facing this problem because the content part of your page is wrapped inside the navbar div which has been assigned a fixed position. You will need to add the intro div and the <iframe> after the navbar div for your website to function properly.
This is how that particular part of code currently looks like on your website (notice <div class="intro"> and the <iframe> is inside <div class="fluid navbar">):
<div class="fluid navbar">
<img src="images/BlueNavBar.png" alt="navigation menu">
<div id="menu">
<ul>
<li>HOME
</li>
<li>ABOUT ME
</li>
<li><a href: "books.html"="">BOOKS</a>
</li>
<li>BLOG</li>
<li>MEDIA KIT</li>
<li>SPEAKER</li>
<li>
</li><a href="Calendar.html" calendar<="" a="">
<li>CONTACT</li></a>
</ul><a href="Calendar.html" calendar<="" a="">
</a>
</div>
<div class="intro">
<p><b>Below is a monthly calendar of the events I will be attending, participating in or speaking. <br>I may also post my blog schedule, contests and other giveaways.</b>
</p>
</div>
<br>
<center>
<iframe src="https://www.google.com/calendar/embed?src=sffk4qmbgj5b1e08d7lkg84rr0%40group.calendar.google.com&ctz=America/New_York" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
</center>
</div>
And this is how you should modify it (both <div class="intro"> and the <iframe> are added after <div class="fluid navbar">):
<div class="fluid navbar">
<img src="images/BlueNavBar.png" alt="navigation menu">
<div id="menu">
<ul>
<li>HOME
</li>
<li>ABOUT ME
</li>
<li><a href: "books.html"="">BOOKS</a>
</li>
<li>BLOG</li>
<li>MEDIA KIT</li>
<li>SPEAKER</li>
<li>
</li><a href="Calendar.html" calendar<="" a="">
<li>CONTACT</li></a>
</ul><a href="Calendar.html" calendar<="" a="">
</a>
</div>
</div>
<div class="intro">
<p><b>Below is a monthly calendar of the events I will be attending, participating in or speaking. <br>I may also post my blog schedule, contests and other giveaways.</b>
</p>
</div>
<br/>
<center><iframe src="https://www.google.com/calendar/embed?src=sffk4qmbgj5b1e08d7lkg84rr0%40group.calendar.google.com&ctz=America/New_York" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe></center>
Add this two styles in at header section of Calendar.html (this code is writing as internal css, because this code don't affect other pages)
#menu {position: absolute; }
.navbar {position: static;}
My navigation is changing position in windows explorer 9. It should sit under the heading of the site and works perfectly in Chrome and newer versions of internet explorer. In 9 it appears over the main heading at the top of the page. I tried adding a border around the .nav class and in explorer it adds a border where the nav should be and its new position at the top of the page, weird! Hope someone can help.
link below is a jsbin showing the problem.
Joe
HTML5
http://jsbin.com/lehul/1/edit?html,css,output
This is very problematic because it's entirely encased in an anchor, so in theory, none of the menu links should work correctly either.
http://jsbin.com/lehul/1/edit#/zuvaxubo/1/edit
This should fix it:
<div class="background_nav"></div>
<div id="InvisHeader">
<div class="container">
<a href="index.html" style="text-decoration: none;">
<div id="heading">
<h1>Suzi Mclaughlin Design</h1>
<p>Designing flowers and stuff since forever like u know and stuff!</p>
</div> </a>
<div class="nav">
<ul>
<li>About</li>
<li>Gallery</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
I have a list of calendar events. The html looks like this:
<li data-id="1">
<a href="#calendar-item/1">
<div class="calendar" style="">
<div class="calendar-header"></div>
<div class="calendar-month">Dec</div>
<div class="calendar-day">11</div>
</div>
<p>Parents Association Non-Uniform Day</p>
<span class="chevron"></span>
</a>
</li>
I have given the list item padding, but it is ignoring the content of the div tag, see the image:
Here is the jsfiddle.
works in firefox for me but you defenitely need to clear your float. The easiest way to do that is using overflow: hidden on the list item so it takes the space of the floating icon and wraps its padding around that instead of just the text next to it
Try this my be slow your problem
CSS
give flot:left in below class
li p:nth-of-type(1) {float:left;}
And give flot:left in below class
li{float:left;}