|
CSS - Building Menu Hidden Div?
I am trying to build a menu that will load content either on the right of it or the left.
I have looked for a tutorial on how to do this but am having no luck with the search engines. Here is a picture of what I would like to do. If anyone can assist me with this it would be very helpful. Or maybe even point me in the direction of a source. Thank you! Similar TutorialsHi Folks This is my first post here, hopefully I'll keep to etiquette I'm always ready to be corrected if I step out of line. Anyway, I have an unusual problem I can't seem to solve. I am making a menu with drop downs using lists, I have it working in my HTML editor (CoffeeCup). When I try to view it in Firefox or IE7 the sub lists show and push the tabs I made to the side. Here is the CSS I'm trying to use, some I've taken from tutorials, some of my own (which is where the problem possibly lies) Code: /*1. Taken from http://www.sohtanaka.com/web-design/liquid-color-adjustable-css-buttons/ with thanks */
.btn {
float: left;
background: url(images/btn_left.png) no-repeat;
margin: 5px 0;
}
.btn a{
float: left;
height: 40px;
width:100px;
background: url(images/btn_stretch.png) repeat-x left top;
line-height: 40px;
color: #fff;
font-size: 1em;
text-decoration: none;
padding-bottom:25px;
padding-left:10px;
}
.btn span {
background: url(images/btn_right.png) no-repeat;
float: left;
width: 10px;
height: 40px;
}
.btn_home { background-color: #575757;padding-left:10px; }
.btn_e1 { background-color: #575757;padding-left:10px; }
.btn_e2 { background-color: #575757;padding-left:10px; }
.btn_e3 { background-color: #575757;padding-left:10px; }
.btn_e4 { background-color: #575757;padding-left:10px; }
.btn_e5 { background-color: #575757;padding-left:10px; }
.btn_home:hover { background-color: #DC134C; }
.btn_e1:hover { background-color: #DC134C; }
.btn_e2:hover { background-color: #FF00FF; }
.btn_e3:hover { background-color: #DC134C; }
.btn_e4:hover { background-color: #DC134C; }
.btn_e5:hover { background-color: #DC134C; }
/*End of 1*/
/*My random scrawlings*/
#navigation {
height:35px;
width:787px;
position:relative;
margin:0 auto 0 auto;
z-index:100;
}
#navmenu, #navmenu ul {
padding:0;
margin:0;
list-style-type:none;
}
#navmenu {
margin:0;
}
#navmenu li {
float:left;
position:relative;
text-align:center;
}
#navmenu li a, #navmenu li a:visited {
width:101px;
font-size:1em;
font-family:Arial;
height:16px;
text-decoration:none;
}
#navmenu li li a, #navmenu li li a:visited {
display:block;
width:122px;
color:#fff;
height:15px;
text-decoration:none;
z-index:100;
margin-left:-1px;
}
#navmenu li:hover > a {
background-color:;
color:#fff;
text-decoration:underline;
}
#navmenu li li:hover > a {
background-color:#DC134C;
color:#fff;
text-decoration:underline;
}
#navmenu li ul {
display: none;
}
#navmenu li:hover > ul {
display: block;
position: absolute;
top:0;
left:203px;
}
#navmenu > li:hover > ul {
left:0;
top:35px;
}
/*End of my random scrawling*/
And here is the HTML I'm using the create my lists Code: <div id="navigation">
<ul id="navmenu">
<li class="btn btn_home"><a>Home</a><span></span></li>
<li class="btn btn_e1"><a>Element 1</a><span></span></li>
<ul>
<li><a>Sub 1</a></li>
<li><a>Sub 2</a></li>
<li><a>Sub 3</a></li>
<li><a>Sub 4</a></li>
</ul>
<li class="btn btn_e2"><a>Element 2</a><span></span></li>
<ul>
<li><a>Sub 5</a></li>
<li><a>Sub 6</a></li>
<li><a>Sub 7</a></li>
<li><a>Sub 8</a></li>
<li><a>Sub 9</a></li>
</ul>
<li class="btn btn_e3"><a>Element 3</a><span></span></li>
<li class="btn btn_e4"><a>Element 4</a><span></span></li>
<li class="btn btn_e5"><a>Element 5</a><span></span></li>
</ul>
</div>
Any help in where I've been going wrong would be greatly appreciated. Thanks Dave Hello I hope somebody can help me. I have a newly designed home page for my website, which looks fine now in pretty well all browsers - but I've just started getting feedback from people looking at the site with ie, and they say that the flyout menu on the left of the page is obscured by the content in the centre column when it does its flying out thing. I've tried giving the menu elements z-index:100; but it doesn't seem to have made any difference. I would be really appreciative if anyone can help - it is even more difficult to work out as I don't have access to a machine with ie as a browser, and remote screen shots don't show up the problem... This is the page: http://www.independentliving.co.uk/index.shtml And this is the part of the style sheet for the menu: .menu { width:150px; position:relative; margin:0; font-size:11px; margin:0px 0; z-index:100; } .menu ul li a, .menu ul li a:visited { display:block; text-decoration:none; color:#003366; width:150px; height:25px; text-align:center; border:1px solid #fff; border-width:1px 1px 0 0; background:#003366 url(nav.gif); line-height:19px; font-size:11px; z-index:100; } .menu ul { padding:0; margin:0; list-style-type: none; z-index:100; } .menu ul li { float:left; margin-right:1px; position:relative; z-index:100; } .menu ul li ul { display:none; } /* specific to non IE browsers */ .menu ul li:hover a { color:#996600; background:#cccccc; font-size:11px; text-decoration:none; z-index:100; } .menu ul li:hover ul { display:block; position:absolute; top:0; left:150px; width:150px; z-index:100; } .menu ul li:hover ul li a.hide { background:#ffffff; color:#003366; font-size:11px; text-decoration:none; } .menu ul li:hover ul li:hover a.hide { width:150px; font-size:11px; text-decoration:none; } .menu ul li:hover ul li ul { display: none; } .menu ul li:hover ul li a { display:block; background:#cccccc; color:#996600; width:200px; font-size:11px; text-decoration:none; z-index:100; } .menu ul li:hover ul li a:hover { background:#dfc184; color:#666666; font-size:11px; text-decoration:none; z-index:100; } .menu ul li:hover ul li:hover ul { display:block; position:absolute; left:151px; top:0; color:#003366; font-size:11px; text-decoration:none; z-index:100; } .menu ul li:hover ul li:hover ul li a { display:block; width:200px; background:#dfc184; color:#003366; font-size:11px; text-decoration:none; z-index:100; } .menu ul li:hover ul li:hover ul li a:hover { background:#bd8d5e; color:#fff; font-size:11px; text-decoration:none; z-index:100; } Any ideas gratefully received! Thanks Frances Hi all, I have a problem with a site I am developing. I am using CSS and all was well until I placed a Flash Movie on the homepage. The general layout is as follows: Code: <div id="wrapper"> <div id="banner"></div> <div id="nav">links etc</div> <div id="content">Content text etc</div> <div id="flashMovie">Flash movie here</div> <div id="footer"></div> </div> The 'nav' div uses a ProjectSeven popmenu which works fine. It's Z-index is something like 2000. The dropdown menu hides behind the 'flashMovie' layer every time, but appears in front of the content layer??? I have tried messing with the z-index of the 'flashMovie' div but to no avail. I have tried absolute positioning, floats, everything I can think of but with no success. Any advice on what the problem could be would be greatly appreciated. I apologise for not having the actual site online, but Its under development on my other machine. Thanks in advance, Duncan I'm having problems with a javascript rotating picture overlapping my drop down menu! I've fiddled around the the z-index but cant seem to get the drop down menu to drop ABOVE the picture. Everything is contained inside my <div id="wrapper"> and my layout scheme works like: Banner = top image ("Why won't my drop menu's show up") the image extends all the way down to the menu, and then the navigation is just words that go on top of the menu texture i've made. The only gif im using in the #nav is for the small yellow triangle for the roll over effect on the menu's. I get the white and menu bar on the sides because i just made the background a 40px height by 10px width image the sample and had it repeat in x only and then set background colour to that grey. My images are all inside the .main_view div id. Any help is appreciated! you can see my problem he htmltest2.weebly.com What do i need to do to fix this?! Hi everybody, I'm trying to build a layout. There is one piece in the center, a company logo and address. Things are supposed to branch off of it, and you click on them you know, and then that makes it work. I got the thing centered very nicely using absolute positioning and negative margins, but I'm having trouble adding in the little branches. How do you do that without them overlapping the centered thing and moving all around based on resolution? Can it be done? I'm thinking about doing it with an imagemap or Flash instead, but I'd prefer just square CSS. We want the centered thing to recenter itself based on the resolution, and we'd like these things to always be so far from there, but I don't know how to do that. Doesn't work with absolute positioning and I'm not sure if it does with relative (I've not been able to get it to). I made a little drawing of what it should look like. Please see http://tinypic.com/55nsl0 . Thank you, your assistance is deeply appreciated. I'm trying to build a window script. To start with I'm just trying to finalize the HTML needed for the window. You'll find my attempt below. The first one is before adding close and resize elements. It seems an ok starting point. The 2nd one shows my attempt to add the close & resize elements. The difficulty is in making them line up with the right hand side of the window and making the top one not take up an extra line. The problem is that I don't want to specify the size of the 'window' div because I want it to expand to fit the content. Because there is no width set any attempt to align right ends up aligning with the right hand side of the browser window. Anyone got some ideas as to how I deal with this? Am I approaching it wrong? Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>New Document</title>
<style type="text/css">
html, body
{
margin: 0px;
}
.window
{
background: gray;
position: absolute;
border: 1px solid black;
top: 20px;
left: 20px;
}
.ex2
{
left: 300px;
}
.topBar
{
position: relative;
color: white;
margin: 2px;
}
.ex2 .topBar
{
background: none;
}
.closeButton
{
width: 16px;
height: 16px;
background: red;
}
.window .content
{
width: 200px;
height: 200px;
background: white;
overflow: auto;
}
.bottomBar
{
position: relative;
}
.ex2 .bottomBar
{
background: none;
}
.resizeHandle
{
background-color: green;
height: 16px;
width: 20px;
}
</style>
</head>
<body>
<div class='window'>
<div class='topBar'>
Title
</div>
<div class='content'>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
</div>
<div class='bottomBar'> </div>
</div>
<div class='window ex2'>
<div class='topBar'>
Title <div class='closeButton'> </div>
</div>
<div class='content'>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
</div>
<div class='bottomBar'><div class='resizeHandle'> </div></div>
</div>
</body>
</html>
I am trying to build a table in which the center scrolls both ways but the columns and rows around the edges stay put - have a look at the page below using IE6 to see what I mean: (URL address blocked: See forum rules) This is working exactly as I want it to in IE6, my problem is that I can't get it to work right in IE7 - the horizontal scrolling is not working properly. By re-instating the commented out code on line 81 I can get it to sort of work, but I don't want to have to specify the width like this as the table contents are going to be dynamic and there is no way of knowing how wide they will be. This is for use on a company intranet where all the users have IE6 or IE7, hence I am not concerned with other browsers or earlier versions of IE. Any help getting this working would be much appreciated... P Should I or should I not learn more about coding when I build my page using Dreamweaver anyways and it looks and functions fine. I am stuck wit the issue of doc types in my pages which has prevented me to make a center middle design page and had to remove the doc type code on all my websites so that the page content will end up at centre middle. The only solution I have been offered was to use CSS but I have so many old sites that converting the sites I have built to CSS would be too time consuming and not worth it. Anyone have any other better ideas? I have some hidden divs that on click they slide down under the link that was clicked. It works fine in firefox and ie, but in safari if you click it the first time it looks good, but when you click and close it and open it again the hidden div is off to the right i cant figure out why this is happening only in safari. this is the good one http://brendanperkinsDOTcom/ryangood.jpg this is the bad one http://brendanperkins.DOT/pic3.jpg this is the css im using Code:
/* Individual page divs (also in left column) */
.hidden-divs {
position: relative;
display: none;
width: 387px;
height: auto;
border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
font-size: 11px;
line-height: 1.5em;
padding-top: 10px;
padding-bottom: 10px;
}
.hidden-divs a:link, .hidden-divs a:visited {
color: #4d4d4d;
font-size: 14px;
}
and this is my html for the nav and hidden divs Code:
<div id="main-nav">
<ul id="nav-higher" class="nav nav-higher">
<!-- HOME -->
<li><a class="trigger" rel="#header-6" onclick="return toggle_div('home-video', 'ryan_1');" href="#">Home</a></li>
<li><div id="home-video" class="hidden-divs">
<a href="readmore_home.htm" class="ceebox" rel="800 100 ajax">Why you are here</a>
</div>
</li>
<!-- MEET RYAN -->
<li><a class="trigger" rel="#header-5" onclick="return toggle_div('meet-ryan', 'ryan_2'); " href="#">Meet Ryan</a></li>
<li><div id="meet-ryan" class="hidden-divs">
<a href="readmore_meetryan.htm" class="ceebox" rel="800 220 ajax">BIO</a>
</div>
</li><!-- END OF MEET RYAN -->
<!-- PROGRAMS -->
<li><a class="trigger" rel="#header-4" onclick="return toggle_div('programs', 'ryan_3'); " href="#">Programs</a></li>
<li><div id="programs" class="hidden-divs">
<a href="readmore_programs.htm" class="ceebox" rel="800 400 ajax">Make Your Own Lunch™</a>
</div>
</li><!-- END OF PROGRAMS -->
<!-- BLOG -->
<li><a rel="external" href="http://makeyourownlunch.com/">Blog</a><br /></li><!-- END OF BLOG -->
<!-- REVIEWS -->
<li><a class="trigger" rel="#header-3" onclick="return toggle_div('reviews', 'ryan_4');" href="#">Reviews</a></li>
<li><div id="reviews" class="hidden-divs">
<div class="blurbwrap" id="review1">
<p class="blurb">“UH-MA-ZING!!! I laughed so hard that I think I sprouted a six-pack!”</p>
</div><!-- blurbwrap -->
<img class="review1-pic" src="images/Molly.jpg" alt="Review" />
<p class="img_id"><strong>Molly Somerville</strong><br />Idaho Business Professionals of America</p>
<div class="blurbwrap" id="review2">
<p class="blurb">“...In a nutshell Ryan blew those kids away”</p>
</div><!-- blurbwrap -->
<img class="review1-pic" src="images/mell.jpg" alt="Review" />
<p class="img_id"><strong>Misty Elliott</strong><br />Michigan Association of Student Councils and Honor Societies</p>
<p><a onclick="return toggle_div2('review_section2');" href="#">more..</a></p>
<div id="review_section2" style="display: none;">
<div class="blurbwrap" id="review3">
<p class="blurb">“I cannot begin to tell you how much the students, the parents and the staff volunteers all LOVED Ryan and his message. It has been the most astounding feedback we have ever had about a speaker!”</p>
</div><!-- blurbwrap -->
<img class="review1-pic" src="images/my.jpg" alt="Review" />
<p class="img_id"><strong>Sara Gutowski</strong><br />Director of Programming, Michigan Youth Leadership</p>
<div class="blurbwrap" id="review4">
<p class="blurb">“I have never had anyone make that much of an impression of me in only an hour!”</p>
</div><!-- blurbwrap -->
<img class="review1-pic" src="images/loyalist.jpg" alt="Review" />
<p class="img_id"><strong>T.G.</strong><br />Loyalist College</p>
<div class="blurbwrap" id="review5">
<p class="blurb">“Ryan gives inspiration on how you can chase your dreams and make them real!”</p>
</div><!-- blurbwrap -->
<img class="review1-pic" src="images/ffa.jpg" alt="Review" />
<p class="img_id"><strong>M.W.</strong><br />Wisconsin FFA</p>
</div><!-- review section 2 -->
</div><!-- reviews -->
</li><!-- END OF REVIEWS -->
<!-- MEDIA -->
<li><a class="trigger" rel="#header-2" onclick="return toggle_div('media', 'ryan_5');" href="#">Media</a></li>
<li><div id="media" class="hidden-divs">
<h3>Client Resources<br /><br /></h3>
<p>Click <a href="html/av-checklist.htm" class="ceebox" rel="800 500 ajax">here</a> for Ryan's A/V requirements and event checklist<br /><br /></p>
<p>Click <a href="html/speaker-intro.htm" class="ceebox" rel="800 380 ajax">here</a> for Ryan's speaker introduction<br /><br /></p>
<p>Click <a href="html/bio.htm" class="ceebox" rel="800 500 ajax">here</a> for Ryan's bio (to be used in your program, website, blog, newspaper, magazines etc.)<br /><br /><br /></p>
<h3>Media Appearances<br /><br /></h3>
<p>Ryan on the radio If the player does not work, click <a href="pdf/Radio_Interview.mp3">here</a><br /><br /></p>
<p id="radio"><embed flashvars="valid_sample_rate=true&external_url=http://www.ryanspeaks.com/Radio_Interview.mp3" type="application/x-shockwave-flash" wmode="transparent" allowscriptaccess="always" quality="high" src="http://www.odeo.com/flash/audio_player_standard_gray.swf"/><br /><br /></p>
<h3>Photo Gallery <br /></h3>
<p>Click images to enlarge..<br /><br /></p>
<p id="zip"><a href="images/images-download.zip">Click here to download images..</a></p>
<span><a href="images/ryan1_media.jpg" class="ceebox"><img src="images/ryan1_media_thumb.jpg" alt="Video Tag" /></a> </span>
<span><a href="images/ryan2_media.jpg" class="ceebox"><img src="images/ryan2_media_thumb.jpg" alt="Video Tag" /></a><br /><br /></span>
<span><a href="images/ryan3_media.jpg" class="ceebox"><img src="images/ryan3_media_thumb.jpg" alt="Video Tag" /></a> </span>
<span><a href="images/ryan4_media.jpg" class="ceebox"><img src="images/ryan4_media_thumb.jpg" alt="Video Tag" /></a></span>
</div>
</li><!-- END OF MEDIA -->
<!-- CONTACT -->
<li><a href="html/contact-form.php" class="trigger ceebox" rel="800 500 ajax" onclick="return toggle_div2('ryan_5');">Contact</a></li>
<li><a href="http://vimeo.com/1239140" rel="550 360" class="ceebox">Video</a></li><!-- END OF CONTACT -->
<!-- LOGO, FOOTER -->
<li>
<img id="main_logo" src="images/logo.png" alt="Ryan Speaks Logo" />
<div id="footer_content">
<form id="mailing_list" method="post" action="http://www.emailmeform.com/fid.php?formid=177854" enctype="multipart/form-data" accept-charset="UTF-8">
<p id="click_to_join">Click JOIN to receive Ryan's inspiring monthly newsletter</p>
<p><input type="text" name="FieldData0" value="" maxlength="100" size="30" /></p>
<p><input id="mailinglist_submit" type="submit" class="btn" value="Join" name="Submit" /></p>
</form>
<p>or email us at <a href="mailto:info@ryanspeaks.com"><strong>info@ryanspeaks.com</strong></a></p>
<p><a rel="external" href="http://www.facebook.com/ryanspeaks"><em>Facebook</em><!--<img src="images/facebook.gif" alt="Facebook" />--></a><em> .+ </em><a rel="external" href="http://twitter.com/lunch_buddy"><em>Twitter</em><!--<img src="images/twitter.png" alt="Twitter" />--></a></p>
<p>RyanSpeaks.com. All Rights Reserved.<a rel="external" href="http://designpilotonline.com"><strong>Website - Design Pilot</strong></a></p>
</div><!-- Footer Content -->
</li><!-- END OF LOGO FOOTER -->
</ul>
hey guys i have 6 hidden divs that onclick are shown. They look just how i want them on every browser except safari theres something wonky going on that i cant seem to figure out. you can see a screen shot he brendanperkinsDOTcom/pictures/ryan_works.jpg brendanperkinsDOTcom/pictures/ryan_nowork.png Code:
/* Individual page divs (also in left column) */
.hidden-divs {
position: relative;
display: none;
width: 387px;
height: auto;
border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
font-size: 11px;
line-height: 1.5em;
padding-top: 10px;
padding-bottom: 10px;
}
Code:
<div id="main-nav">
<ul id="nav-higher" class="nav">
<!-- HOME -->
<li><a class="trigger" rel="#header-6" onclick="return toggle_div('home-video', 'ryan_1');" href="#">Home</a></li>
<li><div id="home-video" class="hidden-divs"></div></li>
<!-- MEET RYAN -->
<li><a class="trigger" rel="#header-5" onclick="return toggle_div('meet-ryan', 'ryan_2'); " href="#">Meet Ryan</a></li>
<li><div id="meet-ryan" class="hidden-divs">
<p><strong>Ryan Porter</strong> has always believed that human potential is unlimited and that each individual possesses the power to create the life they want to live.<br /><br /></p>
<p>He is the creator of the Make Your Own Lunch™ program, which has been developed to empower students with the 'ingredients' needed to create their individual success.<br /><br /></p>
<p>Ryan is a full-time ambassador of the Make Your Own Lunch™ philosophy. His dedication to inspiring others is evident in his work. He is a successful youth speaker who is known for his entertaining stories and easy-to-understand principles and strategies. His refreshing approach to achieving success creates an extraordinary experience for his audiences.<br /><br /></p>
<p>Ryan has spent his most recent years working for <a rel="external" href="http://www.whats-next.ca/">What's Next?... Transition Strategies</a> in Toronto, Canada. He has spoken to tens of thousands of people of all ages and at all stages of life and has been featured in different newspapers, magazines and on various television programs.<br /><br /></p>
<p>His active presentation style has been called entertaining, engaging, inspiring, motivating, hilarious, unforgettable and Ryan's favorite, "AWESOME!"<br /><br /></p>
<p>When not on stage, Ryan can usually be found on an airplane traveling to new places to create new life-defining experiences.<br /><br /></p>
<p>From cliff diving in Hawaii and backpacking through Europe to shopping in the streets of Shibuya, Tokyo, or scuba diving in Honduras, Ryan knows what it means to create experiences and a life worth living.<br /><br /></p>
<p>For more information on Ryan , subscribe to his always entertaining <a rel="external" href="http://twitter.com/lunch_buddy">Twitter</a> alerts or join him on <a rel="external" href="http://www.facebook.com/ryanspeaks">Facebook.</a></p>
</div>
</li><!-- END OF MEET RYAN -->
<!-- PROGRAMS -->
<li><a class="trigger" rel="#header-4" onclick="return toggle_div('programs', 'ryan_3'); " href="#">Programs</a></li>
<li><div id="programs" class="hidden-divs">
<p><strong>Imagine having a school, conference or assembly full of focused, passionate students.</strong> Students who have a clear purpose and vision of what their future could look like. Imagine having students who were excited to be in their seats because they can see how being there will affect their future.<br /><br /></p>
<p>Does this sound impossible? It isn't! Make Your Own Lunch™ can prove it!<br /><br /></p>
<p><strong>Make Your Own Lunch™ is about one thing; DECISION.</strong> It's about the decision to actively create the exact life you want to lead. It's about deciding what you want to have, what you want to do, where you want to go and who you want to be.<br /><br /></p>
<p>It has nothing to do with the actual preparation of food but everything to do with making a life that you are excited about living everyday.<br /><br /></p>
<p>Make Your Own Lunch™ empowers young people to decide to create their future through experiences.<br /><br /></p>
<p>There are a few different ways to get your portion of Make Your Own Lunch™<br /><br /></p>
<h3>1. Make Your Own Lunch™ - Feast for All <br /><br /></h3>
<h4>Keynote/Assembly Presentation (45-75mins)<br /><br /></h4>
<p>Too many people go day-to-day living lives they don't want to be living. They work in jobs they can't stand, stick around in toxic relationships and give up on lives they used to dream about. It's time for you to become the gourmet chef of your life. It's time to block out all of those distractions, like the people tell you that your dreams aren't realistic and it's time to have the experiences of your lifetime!<br /><br /></p>
<p>Make Your Own Lunch™ is all about deciding to create the life you “crave”. Is it going to University? Owning your own business? Traveling around the world? or all three? Through his hilarious stories and adventures, Ryan Porter will give you the "ingredients" needed to make the exact life you want to live while giving you a bunch of laughs along the way!<br /><br /></p>
<h3>2. Make Your Own Lunch™ - Your Personal Menu<br /><br /></h3>
<h4>Workshop (45 - 60mins)<br /><br /></h4>
<p>This workshop has nothing to do with making a sandwich but everything to do with you deciding to create your own experiences and living a life that you love! In this workshop Ryan will show you 4 decisions you can make that will completely change the way you view your future. His outrageous escapades from Hawaii to Slovakia will have you laughing, learning and preparing to lead the life of your dreams. Stop living by someone else's menu and Make Your Own Lunch™.<br /><br /></p>
<p>Additional breakout sessions are also available upon request. Please contact us with the details of your event for more information.<br /><br /></p>
</div>
</li><!-- END OF PROGRAMS -->
<!-- BLOG -->
<li><a rel="external" href="http://makeyourownlunch.com/">Blog</a><br /></li><!-- END OF BLOG -->
<!-- REVIEWS -->
<li><a class="trigger" rel="#header-3" onclick="return toggle_div('reviews', 'ryan_4');" href="#">Reviews</a></li>
<li><div id="reviews" class="hidden-divs">
<div class="blurbwrap" id="review1">
<p class="blurb">“UH-MA-ZING!!! I laughed so hard that I think I sprouted a six-pack!”</p>
</div><!-- blurbwrap -->
<img class="review1-pic" src="images/ben.jpg" alt="Review" />
<p class="img_id"><strong>Molly Somerville</strong><br />Idaho Business Professionals of America</p>
<div class="blurbwrap" id="review2">
<p class="blurb">“...In a nutshell Ryan blew those kids away”</p>
</div><!-- blurbwrap -->
<img class="review1-pic" src="images/ben.jpg" alt="Review" />
<p class="img_id"><strong>Misty Elliott</strong><br />Michigan Association of Student Councils and Honor Societies</p>
<p><a onclick="return toggle_div('review_section2');" href="#">more..</a></p>
<div id="review_section2" style="display: none;">
<div class="blurbwrap" id="review3">
<p class="blurb">“I cannot begin to tell you how much the students, the parents and the staff volunteers all LOVED Ryan and his message. It has been the most astounding feedback we have ever had about a speaker!”</p>
</div><!-- blurbwrap -->
<img class="review1-pic" src="images/ben.jpg" alt="Review" />
<p class="img_id"><strong>Sara Gutowski</strong><br />Director of Programming, Michigan Youth Leadership</p>
<div class="blurbwrap" id="review4">
<p class="blurb">“I cannot begin to tell you how much the students, the parents and the staff volunteers all LOVED Ryan and his message. It has been the most astounding feedback we have ever had about a speaker!”</p>
</div><!-- blurbwrap -->
<img class="review1-pic" src="images/ben.jpg" alt="Review" />
<p class="img_id"><strong>Heaven Snowden</strong></p>
</div><!-- review section 2 -->
</div><!-- reviews -->
</li><!-- END OF REVIEWS -->
<!-- MEDIA -->
<li><a class="trigger" rel="#header-2" onclick="return toggle_div('media', 'ryan_5');" href="#">Media</a></li>
<li><div id="media" class="hidden-divs">
<h3>Client Resources<br /><br /></h3>
<p>Click <a href="html/av-checklist.htm" class="ceebox" rel="800 500">here</a> for Ryan's A/V requirements and event checklist<br /><br /></p>
<p>Click <a href="html/speaker-intro.htm" class="ceebox" rel="800 250">here</a> for Ryan's speaker introduction<br /><br /></p>
<p>Click <a href="html/bio.htm" class="ceebox" rel="800 500">here</a> for Ryan's bio (to be used in your program, website, blog, newspaper, magazines etc.)<br /><br /><br /></p>
<h3>Media Appearances<br /><br /></h3>
<p>Ryan on the radio If the player does not work, click <a href="pdf/Radio_Interview.mp3">here</a><br /><br /></p>
<p id="radio"><embed flashvars="valid_sample_rate=true&external_url=http://www.ryanspeaks.com/Radio_Interview.mp3" type="application/x-shockwave-flash" wmode="transparent" allowscriptaccess="always" quality="high" src="http://www.odeo.com/flash/audio_player_standard_gray.swf"/><br /><br /></p>
<h3>Photo Gallery <br /></h3>
<p>Click images to enlarge..<br /><br /></p>
<span><a href="images/media_photo1.jpg" class="ceebox"><img src="images/media_photo1_thumb.jpg" alt="Video Tag" /></a> </span>
<span><a href="images/media_photo2.jpg" class="ceebox"><img src="images/media_photo2_thumb.jpg" alt="Video Tag" /></a><br /><br /></span>
<span><a href="images/media_photo3.jpg" class="ceebox"><img src="images/media_photo3_thumb.jpg" alt="Video Tag" /></a> </span>
<span><a href="images/media_photo4.jpg" class="ceebox"><img src="images/media_photo4_thumb.jpg" alt="Video Tag" /></a></span>
</div>
</li><!-- END OF MEDIA -->
<!-- CONTACT -->
<li><a class="trigger" rel="#header-1" onclick="return toggle_div('contact', 'ryan_6');" href="#">Contact</a></li>
<li><div id="contact" class="hidden-divs"></div></li>
<li><a href="http://vimeo.com/1239140" rel="vidbox 550 360" class="ceebox">Video</a></li><!-- END OF CONTACT -->
<!-- LOGO, FOOTER -->
<li>
<img id="main_logo" src="images/logo.png" alt="Ryan Speaks Logo" />
<div id="footer_content">
<p>Contact Toll Free: 1.888.318.3530</p>
<p>or email us at <a href="mailto:info@ryanspeaks.com"><strong>info@ryanspeaks.com</strong></a></p>
<p><a rel="external" href="http://www.facebook.com/ryanspeaks"><em>Facebook</em><!--<img src="images/facebook.gif" alt="Facebook" />--></a><em> .+ </em><a rel="external" href="http://twitter.com/lunch_buddy"><em>Twitter</em><!--<img src="images/twitter.png" alt="Twitter" />--></a></p>
<p>RyanSpeaks.com. All Rights Reserved.<a rel="external" href="http://designpilotonline.com"><strong>Website - Design Pilot</strong></a></p>
</div><!-- Footer Content -->
</li><!-- END OF LOGO FOOTER -->
</ul>
<div id="home" class="hidden-divs"></div>
</div><!-- Main nav -->
I am having trouble with the overflow: hidden; in IE6. I have a simple example. I have rewritten this to make it as simple as possible. [code] <html> <head> </head> <body> <div style="position:absolute; top: 100px; width:200px; z-index:1; bottom: 113px; overflow:hidden"> <img src="images/700/900-pixel-height-image.jpg"> </div> </body> </html> This simple page works fine in Firefox but in IE6 the overflow:hidden does not work. Why? I thought IE6 completely supported overflow. I have some drop-down menus that are hidden behind a flash movie. I have set the z-index way up to 6 on them, but they still stay hidden. Anybody have any ideas? http://www.husbandman.org/2baptist/ I've, thanks to you guys, almost solved all the bugs on my page, so i thought it was about time to make the DIVs hidden as their default setting. But this messes the image-script. try for you self on
Code: www.scalesmusic.dk/beta . When you open the 'Images' window the thumbnail-bar is positioned in the middle... it is supposed to be hidden in the top. See Code: www.scalesmusic.dk/picture.jpg to see how the window is supposed to look. Does anyone of you have an explanation. ...oh, and i still have a wird white line appearing i IE This is working fine in FF, but IE ignores it. I have large bottom margin and large negative bottom padding contained in a wrapper with overflow set to hidden, to keep my columns the same length for different content, which seems to be ignored in IE. Other than that I'm pretty happy with the site, but I don't really know what I'm doing, so I don't really know what I'm doing wrong.. Can anyone help? Structure; Code: <div id="divBranding">
</div>
<div id="divWrapper">
<div id="divSidebar">
</div>
<div id="divContainer">
</div>
</div>
<div id="divFooterWrapper">
<div id="divInfo">
</div>
</div>
CSS for body; Code: body {
width: 800px;
margin-right: auto;
margin-left: auto;
}
CSS for wrapper; Code: #divWrapper {
overflow: hidden;
*html overflow:scroll;
display: block;
}
CSS for Sidebar; Code: #divWrapper #divSidebar {
float: left;
width: 198px;
margin-bottom: -1999px;
padding-bottom: 1999px;
position: relative;
}
And CSS for Content; Code: #divWrapper #divContainer {
float: right;
width: 598px;
margin-bottom: -1999px;
padding-bottom: 1999px;
position: relative;
}
And CSS for Footer Wrapper; Code: #divFooterWrapper {
width: 800px;
margin-right: auto;
margin-left: auto;
position: relative;
clear: both;
}
I am having a problem using nested hidden divs. I'd like to know if what I am doing is even possible. I have one div that is set to "display: none". Inside this div I have another set to "display: none". When I change the style of the outer div to "display: block", the inner div appears as well. Is there a way to keep the inner div hidden?? Hi Their.. I have an html page that contains a form named form1...i want to display another form when the button in form1 have submitted....It's a matter of (show/hide) html elements...Anyone can help..please. Thank you in Advance For some reason overflow hidden is not working in chrome, ff and ie both seem to work as expected. I am totally lost here? Code:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<style type="text/css">
div.menuMaster {
position:absolute;
height: 450px;
width:200px;
margin-top:52px;
border-right-style:solid;
border-right-color:#FFFFCC;
background-color:#323B45;
-webkit-border-top-right-radius: 100px 400px;
-moz-border-radius-topright: 100px 400px;
border-top-right-radius: 100px 400px;
border-width:2px;
overflow:hidden;
z-index:50;
}
.sublink1 {
display:block;
float: left;
height:30px;
width:200px;
padding-top:10px;
font-family:georgia;
vertical-align:left;
text-align:left;
}
.sublink1 a {
display:block;
height:30px;
padding-top:10px;
padding-left:20px;
align:left;
border-bottom-style:solid;
border-bottom-color:#526070;
border-width:1px;
border-top-style:solid;
border-top-color:#2B3239;
border-width:1px;
text-decoration: none;
}
.sublink1 a:hover {
display:block;
height:30px;
align:left;
padding-left:20px;
color:#fff;
border-bottom-style:solid;
border-bottom-color:#526070;
border-width:1px;
border-top-style:solid;
border-top-color:#2B3239;
border-width:1px;
text-decoration: none;
background-color: #293D51;
}
.sublink1 a:link {
display:block;
height:30px;
vertical-align:left;
padding-left:20px;
color:#fff;
text-decoration: none;
}
.sublink1 a:visited {
display:block;
height:30px;
vertical-align:left;
padding-left:20px;
color:#fff;
text-decoration: none;
}
</style>
</head>
<div class="menuMaster">
<div class="sublink1"><a href="../admin/index.php">link1</a><br></div>
<div class="sublink1"><a href="../index.php">link2</a><br></div>
<div class="sublink1"><a href="../index.php?location=branches">link3</a><br></div>
<div class="sublink1"><a href="../index.php?location=involved">link4</a><br></div>
<div class="sublink1"><a href="../index.php?type=sets">link5</a><br></div>
<div class="sublink1"><a href="../index.php?location=external_links">link6</a><br></div>
<div class="sublink1"><a href="../index.php">link7</a><br></div>
<div class="sublink1"><a href="../index.php?location=branches">link8</a><br></div>
</div>
I have 2 divs divs on a page displaying the report. On the first div, I have a form where the user can select the report options. On the second div, I simply display the options used to run the report shown on the page. Either one or the other div is shown on the page at a time. A user can click a button, which switches an inline style (style="display: none;") on the appropriate div. Now, when I print, I never want to show div #1. Easy enough, I just set up a print.css file and set display: none; for. However, I ALWAYS want div #2 to show, but I'm not sure how to handle that. I can't seem to use the same print.css file, because if the inline style is set to none for display, it doesn't show when printing. The only way it shows if if I actually have it showing on the screen when I hit the print button. Any ideas? Hopefully I am making myself clear. Is there a way to have overflow content of a DIV hidden at the top of the DIV instead of the bottom? For instance, if I have a DIV that is 200px in height and the content within the DIV ("My top content ... my bottom content.") exceeds 200px: Code: <div style="height: 200px; overflow: hidden;"> My top content<br><br><br><br><br><br><br><br><br> My bottom content. </div> I want the "My bottom content." to always show at the bottom of the DIV, but the "My top content..." to be hidden. I hope this makes since. Thanks! -Chris I use centered css layout on my site. There is a problem with IE on one page. Sometimes main layer content comes hidden but only text content. Like this: http://img351.imageshack.us/img351/5152/hidden1zu.jpg When on mouse over to the table cells text comes. Like this: http://img351.imageshack.us/img351/1853/nothidden2pe.jpg No problem with Firefox or Opera. The page url is: http://www.limk.com/sonyorumz.php Can you help me about finding the solution? |
|||||||