|
CSS - Creating A Floating Menu
I want to create a menu that will float on the side of my page and stay in the same position on the screen as the user scrolls down. Is this done with CSS, Javascipt, or a little bit of both?
thanks. Similar TutorialsI saw this appealing menu from a css contest page and i've studied the code over and over again but i can't seem to get the same effect as this person has done. He has created a menu that just floats while the screen is able to scroll up and down. the site is : http://contest.prestontalk.com/index/FluidFixed/0/4/1/ if anyone knows how this effect is done, let me know. thanks! hey I am trying to get this sub menu floating on the rollover of a list item. Here's my HTML: Code: <body> <div id="banner"> </div> <div id="leftmenu"> <ul> <li>List 1</li> <li><a href="">List 2</a></li> <li><a href="">List 3</a> <ul> <li><a href="">List 3.1</a></li> <li><a href="">List 3.2</a></li> <li><a href="">List 3.3</a></li> <li><a href="">List 3.4</a></li> </ul> </li> <li><a href="">List 4</a></li> <li><a href="">List 5</a></li> <li><a href="">List 6</a></li> <li><a href="">List 7</a></li> <li><a href="">List 8</a></li> <li><a href="">List 9</a></li> </ul> </div> <div id="maincontent"> CONTENT </div> </body> and this CSS: Code:
#leftmenu {
position: absolute;
margin: 0px;
top: 120px;
left: 0px;
width: 147px;
height: 800px;
background-color: #cccc66;
font-size: 10px;
font-weight: bold;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
ul li {
color: #FFFFFF;
display: block;
background-color: #FF0000;
margin-bottom: 1px;
text-align: right;
font-weight: bold;
}
ul li a {
text-decoration: none;
color: #FFFFFF;
}
ul li a:hover {
color: #000000;
}
ul li ul {
display: none;
position: absolute;
top: 200px;
left: 100px;
}
#maincontent {
position: absolute;
z-index: 0;
left: 147px;
top: 120px;
height: 381px;
width: 100%;
padding-top: 10px;
padding-left: 10px;
margin-top: 0px;
margin-left: 0px;
background-color: #FFFFFF;
font-family: Arial;
font-size: 13px;
}
so yeah, I am struggling at this point, I have looked at a reference that someone gave me last time I brought up the issue, but can't get it working, if you can spot why, help would be appreciated, not having much luck, thinking maybe a syntax thing(?), not sure...HELP!! kr. Hi All, I have a site PHP Code: hopevalleycamp.com which features a three box floating menu over a single background image. The menu "works" in Firefox and Safari, but not in IE8. I'm not sure if there is a"fix" I can apply for IE or not. The code for the menu css can be viewed here... PHP Code: * { font-family: Arial,Helvetica,sans-serif; } .yuimenubar { position: static; visibility: visible; } .yuimenu .yuimenu, .yuimenubar .yuimenu { left: -10000px; position: absolute; top: -10000px; visibility: hidden; } .yui-menu-shadow { position: absolute; visibility: hidden; z-index: -1; } .yuimenubar ul, .yuimenu ul { list-style-type: none; } .yuimenubar ul, .yuimenu ul, .yuimenubar li, .yuimenu li, .yuimenu h6, .yuimenubar h6 { margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 0; } #productsandservices { overflow-x: hidden; overflow-y: hidden; padding-left: 0; position: relative; z-index: 1; } .yuimenuitemlabel, .yuimenubaritemlabel { white-space: nowrap; } .hide-scrollbars * { overflow-x: hidden; overflow-y: hidden; } .hide-scrollbars select { display: none; } .yuimenu.show-scrollbars { overflow-x: visible; overflow-y: visible; } .yui-skin-sam .yuimenubar > .bd > ul:after { clear: both; content: "."; display: block; height: 0; line-height: 0; visibility: hidden; } .yui-skin-sam .yuimenubaritem { float: left; } .yui-skin-sam .yuimenubarnav .yuimenubaritem { line-height: 1.42em; margin-right: 11px; } .yui-skin-sam .yuimenubaritemlabel { background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: none; background-origin: padding-box; background-position: 0 0; background-repeat: repeat; background-size: auto auto; color: #FFFFFF; display: block; line-height: 1.42em; text-align: center; text-decoration: none; text-transform: uppercase; } .yui-skin-sam .yuimenubaritemlabel-selected, .yui-skin-sam .yuimenubaritem a.active, .yui-skin-sam .yuimenubaritem-hassubmenu-selected { color: #FFFFFF; } .yui-skin-sam .yuimenubarnav .yuimenubaritemlabel { font-size: 34px !important; font-weight: bold; line-height: 1.42em; } .yui-skin-sam .yuimenu .bd { left: 0; overflow-x: hidden; overflow-y: hidden; top: 0; width: 151px; } .yui-skin-sam .yuimenu ul { padding-bottom: 10px; padding-left: 19px; padding-right: 19px; padding-top: 10px; } .yui-skin-sam li.first-of-type a.active, .yui-skin-sam li.first-of-type a.yuimenubaritemlabel-selected { } .yui-skin-sam .yuimenuitemlabel { color: #FFFFFF; font-size: 14px; font-weight: bold; line-height: 25px; padding-left: 12px; text-decoration: none; text-transform: uppercase; } .yui-skin-sam .yuimenuitemlabel-selected, .yui-skin-sam .bd .yuimenuitem a.active { background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: url("images/drop-hover.png"); background-origin: padding-box; background-position: 0 0; background-repeat: no-repeat; background-size: auto auto; color: #AF4B3E; display: block; overflow-x: hidden; overflow-y: hidden; } #yui-gen0 { background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: url("images/bg-li.png"); background-origin: padding-box; background-position: 0 0; background-repeat: no-repeat; background-size: auto auto; width: 210px; } #yui-gen0 a.yuimenubaritemlabel { height: 115px; padding-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 95px; } #yui-gen0 .bd { background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: url("images/bg-li-drop.png"); background-origin: padding-box; background-position: 0 bottom; background-repeat: no-repeat; background-size: auto auto; margin-top: -12px; width: 210px; } #yui-gen0 .yuimenuitemlabel-selected, #yui-gen0 .bd .yuimenuitem a.active { color: #95D4B5; } #yui-gen1 { background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: url("images/bg-li2.png"); background-origin: padding-box; background-position: 0 0; background-repeat: no-repeat; background-size: auto auto; width: 210px; } #yui-gen1 a.yuimenubaritemlabel { height: 115px; padding-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 95px; } #yui-gen1 .bd { background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: url("images/bg-li2-drop.png"); background-origin: padding-box; background-position: 0 bottom; background-repeat: no-repeat; background-size: auto auto; margin-top: -12px; width: 210px; } #yui-gen1 .yuimenuitemlabel-selected, #yui-gen1 .bd .yuimenuitem a.active { color: #F7C609; } #yui-gen2 { background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: url("images/bg-li3.png"); background-origin: padding-box; background-position: 0 0; background-repeat: no-repeat; background-size: auto auto; margin-right: 0; width: 210px; } #yui-gen2 a.yuimenubaritemlabel { height: 115px; padding-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 95px; } #yui-gen2 .bd { background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: url("images/bg-li3-drop.png"); background-origin: padding-box; background-position: 0 bottom; background-repeat: no-repeat; background-size: auto auto; margin-top: -12px; width: 210px; } #yui-gen2 .yuimenuitemlabel-selected, #yui-gen2 .bd .yuimenuitem a.active { color: #C01349; } .first-of-type a, .first-of-type li a.active, a.yuimenubaritemlabel { color: #FFFFFF; font-size: 34px; text-transform: uppercase; } All help appreciated in advance! I have seen this done but can't find any examples at the moment, but what I am looking to emmulate is have a page that required vertical scrolling. On either the left or right hand side is (for example) a square image and directly below it is a menu. When the user scrolls down the page the image goes off the top but the menu sticks to the top so is always visable. When the user scrolls back up as soon as the image starts to appear it pushes the menu back down so it is sat below the image. If i used position:fixed I can keep the menu in the same place when scrolling but I would like it to rise to the top of the browser when space is availble when scrolling. Make sense? See the image at http://i187.photobucket.com/albums/x205/vitainf/IEhelp.png - having trouble to get it showing the image with the bbcodes :S As you can see the menu to the right, which is known as '.sidebar' in the css followed below, is sort of pushing the main content, which is known as .content in the css below, down. Anyone has any idea how to fix this? Style Sheets Code: body
{
text-align: center;
background: #800000;
color: #fff;
}
* {
padding: 0;
margin: 0;
}
div#container
{
margin-left: auto;
margin-right: auto;
width: 700px;
text-align: left;
}
#spacer {
height: 50px;
}
#header {
height: 100px;
width: 100%;
background: url(ctfiles/logo.png) no-repeat top center #000;
}
#container {
background: #fff;
padding: 10px;
}
#main {
background: #000;
color: #fff;
width: 700px;
}
.sidebar {
float: right;
text-align: right;
background: #000;
color: #fff;
width: 30%;
padding-left: 8px
padding-right: 12px
}
.content {
color: #fff;
background: #000;
width: 70%;
margin-left: 2px;
margin-right: 2px
}
HTML/Template/PHP w/e Note: It's a template for the MODx CMS, which explains some of the calls like [(site_name)]. The lorum ipsum is in the [*content*] call, the menu in the [[wayfinder...]] one. PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>[(site_name)] | [*pagetitle*]</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" href="[(base_url)]chinatown.css" type="text/css" media="screen" /> <base href="[(site_url)]" /> <!--[if lte IE 6]> <style type="text/css" media="screen, tv, projection"> body { behavior: url(assets/js/csshover.htc); } /* hover:anything support */ #content { margin-left: 22px; } /* to avoid the BMH */ a, a:link { border-bottom-style: solid } /* becuase IE just doesn't dot */ </style> <script type="text/javascript" src="assets/js/sleight.js"></script> <![endif]--> </head> <body> <div id="page"> <div id="spacer"> </div> <div id="container"> <div id="header"> </div> <div id="main"> <div class="sidebar"> [[Wayfinder? &startId=`0`]] </div> <div class="content"> <h4>[*longtitle*]</h4> [*#content*] </div> </div> <div id="footer"> [(site_name)] is powered by <a href="http://modxcms.com/" title="Powered by MODx"><strong>MOD</strong>x Content Management System</a> <br /><a href="[~11~]" title="Link to our Blog RSS Feeds">Blog Entries (RSS)</a><br /> MySQL: [^qt^], [^q^] request(s), PHP: [^p^], total: [^t^], document retrieved from [^s^]. </div> </div> </div> </body> </html> I'm trying to create a menu using 'list' but so far without much success :-( Problems? Not displaying horizontally in browser. Can't center text in box. Adding 'padding' didn't work. Any help would be much appreciated, Mike P.S. Please ignore the colors ;-) //paste.pocoo.org/show/207718/ Please add http to the above - I'm not yet allowed to .. I'm trying to create an expanding menu using CSS and no Javascript. So far, it works only sometimes in IE, and only works in FF with the mouse button is pressed down (If I let go of the mouse button, it disappears). Can anyone suggest any fixes on what I should do to get it working properly. Thanks. So far what I have is this: Quote: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <link rel=stylesheet href="dd.css" type="text/css"> <title>Page title</title> </head> <body> <div id="links"> <a href="#">Links<span><br> Sublink 1<br> Sublink 2<br> </span></a> </div> <div id="links2"> <a href="#">Links 2<span><br> Sublink 3<br> Sublink 4<br> </span></a> </div> </body> </html> Quote: My CSS looks like this: div#links a span {display:none;} div#links a:active span {display:block; font:10px Verdana, sans-serif; } div#links2 a span {display:none;} div#links2 a:active span {display:block; font:10px Verdana, sans-serif; } I have a menu where the submenu li's have a blue/darker blue background color and hover color. I have one set of submenu items where I would like to change the background and hover colors for that set only, but haven't been successful in writing the second set of code, the original colors still show up Here's the part of my styles for the list that I'm trying to change.. Code:
/* original backgrounds for the menu */
ul.menu li ul li a {
background: #ccc;
color: #000;
padding-left: 20px;
}
ul.menu li ul li a:hover {
background: #aaa;
border-left: 5px #000 solid;
padding-left: 15px;
}
Is it the way I tried to rename the style? Code:
/* change backgrounds to shades of green for one sub menu */
.green ul.menu li ul li a {
background: #afe4bf;
color: #000;
padding-left: 20px;
}
.green ul.menu li ul li a:hover {
background: #88b796;
border-left: 5px #000 solid;
padding-left: 15px;
}
thanks in advance for any help, Kathy Hi all, I'm trying to create a horizontal menu in CSS and each link has a background image. So I need an image to start the menu, the images for the buttons in the middle, and an image for the end of the menu. Code:
#topnav1 {
position: absolute;
height: 18px;
top: 43px;
left: 300px;
font-weight: bold;
}
#topnav1 ul {
margin:0; padding: 0;
width: 420px;
height: 18px;
display: inline;
}
#topnav1 #first li {
list-style-type: none;
display: inline;
background-image: url(../images/topnav1_1_bg.gif);
background-repeat: no-repeat;
background-position: bottom left;
padding-left: 40px;
padding-bottom: 4px;
}
#topnav1 li {
display: inline;
background-image: url(../images/topnav1_2_bg.gif);
background-repeat: no-repeat;
background-position: bottom left;
padding-left: 34px;
padding-bottom: 4px;
}
#topnav1 #last li {
display: inline;
background-image: url(../images/topnav1_3_bg.gif);
background-repeat: no-repeat;
background-position: bottom right;
padding-right: 10px;
padding-bottom: 4px;
}
First: It seems that as soon as I apply the 'display: inline; code to the 'li' tags, the browser completely ignores the height, width, and padding settings that I put on there. So the background image isn't being displayed properly. Second: I want to align the menu to the right of the page - how can I do this? Cheers! Hi Everyone, I've been doing modest CSS for a while now and feel like I have a good grasp of it, and generally find a way of doing what I want. But, this has always bugged me and I need to understand what is going on... I think it's a question of Floating. This is in reference to http://www.arabellamusic.co.uk I want the blog posts to be on the left, and some other content on the right. How is the best way to go about doing this? You can check my source, but this was my thinking: Code: HTML
<div class='inner'>
<div class='left'>
BLOG PHP HERE
</div>
<div class='right'>
SOME OTHER STUFF HERE
</div>
</div>
And the CSS:
.inner { width:788px; }
.left { float:left; width:50%; }
.right { float:left; width:50%; }
If you grab my stylesheet and my source, you will see that I have a couple more things in there, but I don't think they could be affecting the rest (text-align etc...) So, am I doing this wrong? I have floated columns in other websites this way and it sometimes works, sometimes doesn't. Incidentally, once it would only work when I set 49% to each, I was assuming this was something to do with the box model I read about, but wasn't too sure. I will try not to play around with the site too much until I get a reply or two, but a few things may jump around as I try stuff! Thanks in advance... James I have 3 tables in a div. I have two of the tables one on top of the other. I wanted to place the third table to the left of the bottom table. So I placed the second table relative and left -50px. I placed the third with position absolute, top -70px and float right to achieve this layout. Is there a better way of doing this out of curiousity? Learning CSS and trying to emulate the following table: Code: |--------------------------------------| | Text 1 |----------------| | | Text 2 | Inner box text| | | Text 3 |----------------| | |--------------------------------------| I can get a nested div to work vertically but not horizontally. I'm trying: Code:
div#container { float: left }
div#title { float: right }
<div id="container">
hello<br>hello
<div id="title">
Text 1<br />
Text 2
</div>
</div>
Which is producing: Code: |--------------------------------------| | Hello | | Hello | | |----------------| | | | Text 1 | | | | Text 2 | | | |----------------| | |--------------------------------------| Perhaps a positioning thing which I don't understand yet? It's not homework so you don't have to do it for me, but rather you could just point to knowledge sources.... Tx! Hi, Can someone help me with why the following header bar doesn't work in Firefox? It just shows the very top of the bar with the two other divs inside of it. Code:
<div class="cmsHeader">
<div style="float: left;">Page Name</div>
<div style="float: right;"><a href="" title='Add Page'><img src='images/icons/file_(add)_16x16.gif' border='0' alt='Add Page'></a></div>
</div>
.cmsHeader{
background: #809096;
padding: 5px;
width: 98%;
color: #FFFFFF;
}
.cmsHeader a{
color: #FFFFFF;
text-decoration: none;
}
.cmsHeader a:hover{
text-decoration: underline;
}
hi, i am a total newbie with css and trying to create a floating divider. an example can be seen at www.payjunction.com. does anyone know a tutorial on how to create one? thanks for the help in advance I currently have the following layout Code:
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
how do i go about making the same layout but using CSS. Each <td> is 50% wide I'm having a weird situation. I've got a nested divs in a big box. Anyway, I've got one div floating an image on the left and another div with text on the right. Anyway, there's not much text, but under the img div there's a gap in IE7 but not in FF and I was wondering why. For some reason the margin-bottom: 5px; in the <h3> tag causes there to be the gap under the floating div holding the img. I'm wondering why this is happening in IE7 but not in Firefox. I created an example code to show what I mean and placed comments around the h3 tag that seems to be the cause. I put all the css in the html using style tags. I have a screenshot but it doesn't look like I can attach it. 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">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>test</title>
</head>
<body>
<!-- A big box to hold everything -->
<div style="border-style: solid;
border-color: #777777;
margin-top: 10px;
margin-bottom: 10px;
width: 400px;
padding: 0;">
<!-- the Image Div that holds the 100x100 pixel image and floats on the left in the big box -->
<div style="float: left;
width: 106px;
height: 106px;">
<img src="test.jpg" alt="Picture of Test Image"
style="display: block;
width: 100px;
height: 100px;
border-style: solid;
border-color: black;
border-width: 3px;
margin: 0;" />
</div>
<!-- This is the text Div that holds an H3 heading
Keep a 106px margin to prevent any later text from wrapping.
Neither Removing the margin nor the padding HERE solves the problem
only the margin-bottom in the h3 tag style seems to matter -->
<div style="margin-left: 106px;
padding-left: 10px;
margin-right: 0;
margin-bottom: 0;
margin-top:0;">
<h3 style="margin-top:5px;
margin-bottom: 5px;
border-style: solid;
margin-left: 0;
margin-right: 0;">Test</h3>
<!-- HERE'S THE QUESTION! why does the "margin-bottom: 5px;"
leave a gap 5px gap underneath the image in IE7 but not firefox.
Who's wrong? IE7 for putting the gap in or firefox for not floating things correctly?
The H3 should be WELL away from the bottom of the div with most font
sizes...Also oddly enough, enclosing the parent div of the h3 in a border
removes the gap under the image BUT a border around the h3 itself does NOT
Why the gap? -->
</div>
<!-- This div stops the floating -->
<div style="clear:both;
margin: 0;
margin-right: 0;
padding: 0;
width: 0;
height: 0;">
</div>
</div>
</body>
</html>
In IE, this will produce the look that I'm looking for. The image and a couple of details are provided inside of a blue box. In FF, they overlap eachother. Not the text, just the image. How can I adjust my CSS? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
.fieldset {
border: #26a solid 1px;
width: 85%;
margin-bottom: 5px;
padding: 10px;
}
-->
</style>
</head>
<body>
<div class="fieldset"> 1: dfas <br />
<hr />
<img src="../../imageApp/images/smallrear.JPG"
width="160"
height="120"
border="0"
align=left hspace="12"/> etwrThis is an edit </div>
<div class="fieldset"> 2: <br />
<hr />
<img src="../../imageApp/images/small100_1737 (Small).JPG"
width="89"
height="120"
border="0"
align=right hspace="12"/> </div>
</body>
</html>
http://tonglebeak.com View it in FF, and the floating boxes correctly appear on top of the white div underneath of it. View it in IE, and the floating boxes push the white div below them. How can I get IE to render this the same as FF? Ok. So after some one i don't know on a website i was reading told me i should replace my tables with CSS i decided to listen to them. Now the website's top bar should look like this: http://www.leeksoftware.co.uk And i decided to do each box as a DIV. BUT! I can't get them all in a line. I can get the yellow one to the right of the long one but then i cant get the rest in the line. So far the CSS is: Code:
div.logo
{
height: 70px;
width: 618px;
background-color: #476cD9;
float: left;
}
div.home
{
height: 70px;
width: 100px;
background-color: #E29942;
margin-left: 619px;
float: left;
}
div.soft
{
height: 70px;
width: 100px;
background-color: #CC3333;
margin-left: 719px;
}
div.tuto
{
height: 70px;
width: 100px;
background-color: #006666;
margin-left: 819px;
}
div.cont
{
height: 70px;
width: 100px;
background-color: #254D78;
margin-left: 919px;
}
I tired adding float left to all of them but that made them go diagonal. Can any one help? Thanks Matt I have a web page in which I have a table and within that table I have a sub table with two columns. I am using css and allow visitors to move the first column from right to left (they both are different sizes). I now have a need the text in column one be wrapped under column two (as you can do with pictures in say MS word). I can't write the text ahead of time at the bottom of column two as that column floats from left to right -- meaning that the text that should go underneath would be different each time. I assume it is not possible with tables to do such a thing, but thought to ask the experts to see if it is possible or there is another logical way of accomplishing it. I could simply call two different files based on the right-float and left-float and right text accordingly in both files, but to me that does not sound such a great idea. |
|||||||