|
CSS - Menu Floating Right Pushes Main Text Down In Ie7
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> Similar TutorialsI am having problems with my xhtml (css here). As you can see, the frog is pushing the menu (vert1 in the css) down. I am also told that the news (vert2) is being pushed down in IE6...can anyone help? I'm helping these fine folks fix a few little issues with their site but this one I can't seem to quite figure out. If you roll over the main menu you will see the sub menu slide down on the left. For the life of me I can't get it to line up under the main nav. I've tried many, many things. Can anyone provide a few hints, tips, suggestions? Thanks so much!!! 98.214.188.71/life at excel.htm Code: /*******************menu starts********************/ #menu{float:left; width:100%; background:#ffffff;} #menu a{font-weight:bold; line-height:16px;} #menu table{float:left; width:100%; background:transparent;} #menu .menu01{width:147px;} #menu .menu01 a{float:left; /*width:149px;*/width:100%; height:26px; background:url(images/menu01.gif) no-repeat right 0; float:left; color:#fff; text-decoration:none; text-align:center; padding:10px 0 0 0} #menu .menu01 a.current{float:left; /*width:149px;*/width:100%; height:26px; background:url(images/menu01.gif) no-repeat right 0; cursor:pointer;} #menu .divider{width:.5%; height:36px; background:url(images/white_divider.gif) repeat-x 0 1px;} #menu .menu02{} #menu .menu02 a{display:block; background:url(images/menu02.gif) repeat-x right 0; padding:10px 0 0; height:26px; color:#fff; text-decoration:none; text-align:center} #menu .menu02 a.current{float:left; width:100%; background:url(images/menu02.gif) no-repeat right bottom; color:#fff; cursor:pointer;} #menu .menu03{} #menu .menu03 a{display:block; background:url(images/menu03.gif) repeat-x right 0; padding:10px 0 0; text-align:center; height:26px; color:#fff; text-decoration:none;} #menu .menu03 a.current{float:left; width:100%; background:url(images/menu03.gif) no-repeat right bottom; height:26px; color:#fff; cursor:pointer;} #menu .menu04{width:152px; } #menu .menu04 a{float:left; /*width:152px;*/width:100%; background:url(images/menu04.gif) no-repeat right 0; padding:10px 0 0; text-align:center; height:26px; color:#fff; text-decoration:none;} #menu .menu04 a.current{float:left; /*width:152px;*/width:100%; background:url(images/menu04.gif) no-repeat right bottom; height:26px; color:#fff; cursor:pointer;} #menu .menu05{width:143px;} #menu .menu05 a{float:left; /*width:143px;*/ width:100%;background:url(images/menu05.gif) no-repeat right 0; padding:10px 0 0; text-align:center; height:26px; color:#fff; text-decoration:none;} #menu .menu05 a.current{float:left; /*width:143px;*/width:100%; background:url(images/menu05.gif) no-repeat right -43px; height:26px; color:#fff; cursor:pointer;} .exp{ display:none; clear:both; text-align:center; background:#BA8747; z-index:4; } #menu DIV.sub-mlinks A { color:#000; background:none; font-weight:bold; padding-top:2px; padding-bottom:0px; display:block; height:auto; } #menu DIV.sub-mlinks A:hover{ color:#FFF; } /*******************menu ends********************/ <div id="menu"> <table align="center" border="0" cellpadding="0" cellspacing="0" width="970"><tbody><tr> <td style="width: 19.6%;" id="item1" class="menu01"><a href="http://www.excelfoundry.net/lifeatexcel/">Home</a></td> <td class="divider"> </td> <td style="width: 19.6%;" id="item2" class="menu02" onmouseover="expand(this.id, 'menu2');" onmouseout="collapse(this.id, 'menu2');" onmouseleave="collapseIE(this.id, 'menu2');"><a href="http://www.excelfoundry.net/lifeatexcel/">Excel Tools</a><div id="menu2" class="exp" onmouseout="collapse('item2', this.id);" onmouseleave="collapseIE('item2', this.id);"><div class="sub-mlinks"><a href="http://www.excelfoundry.net/improvement" target="_new" class="menuitem">Continual Improvement</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/service" target="_new" class="menuitem">Crusher Service (FLSP)</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/xlu" class="menuitem">Excel University</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/crm/data" target="_new" class="menuitem">Excelerator CRM</a></div><div class="sub-mlinks"><a href="http://ezlmwc.adp.com/" target="_new" class="menuitem">EZLabor</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/First%20Article/First%20Article%20Parts.xls" class="menuitem">First Article Parts</a></div><div class="sub-mlinks"><a href="https://login.postini.com/exec/login" class="menuitem">FLS Spam Filter Login</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/ecr/" target="_new" class="menuitem">FLSP ECR</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/forms" class="menuitem">Forms Library</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/iso9001" class="menuitem">ISO 9001 Procedures</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/helpdesk" target="_new" class="menuitem">IT Help Desk</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/machine-info" class="menuitem">Machine Info</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/Manu_Memos/Memos.html" target="_new" class="menuitem">Manufacturing Memos</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/metrics" class="menuitem">Metrics</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/msq" target="_new" class="menuitem">MSQ Editor</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/manuals" class="menuitem">Parts Manuals</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/parts" target="_new" class="menuitem">Parts Search</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/po" target="_new" class="menuitem">PO Tool</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/flows" class="menuitem">Process Flows</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/revSupport" target="_new" class="menuitem">Revision Support</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/routing" class="menuitem">Routing Guide</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/safety" class="menuitem">Safety & Training</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/docs/QRM%20Schedule.xlsx" class="menuitem">QRM Schedule</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/training" class="menuitem">Training Request System</a></div><div class="sub-mlinks"><a href="http://my.concureworkplace.com/default.asp?companyid=excet5jvd2telbgk" target="_new" class="menuitem">Travel Expense (EFM)</a></div><div class="sub-mlinks"><a href="http://my.concureworkplace.com/default.asp?companyid=smid5gr1t0br0czj" target="_new" class="menuitem">Travel Expense (FLSP)</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/xcalibur" target="_new" class="menuitem">Xcalibur</a></div></div></td> <td class="divider"> </td> <td style="width: 19.6%; color: black;" id="item3" class="menu03" onmouseover="expand(this.id, 'menu3');" onmouseout="collapse(this.id, 'menu3');" onmouseleave="collapseIE(this.id, 'menu3');"><a href="http://www.excelfoundry.net/lifeatexcel/">Our People</a><div style="top: 168px; left: 376px; width: 183px; position: static; visibility: hidden; display: none;" id="menu3" class="exp" onmouseout="collapse('item3', this.id);" onmouseleave="collapseIE('item3', this.id);"><div class="sub-mlinks"><a href="https://login.fidelity.com/ftgw/pages/fesco/html/NBParticipantLogout.html" target="_new" class="menuitem">401k Login</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/classifieds" class="menuitem">Classifieds</a></div><div class="sub-mlinks"><a href="http://excelfoundry.net/lifeatexcel/?q=our-people/hr/directory" class="menuitem">Employee Directory</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/eu" class="menuitem">Excel University</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/insite" class="menuitem">FLSmidth Insite</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.com/about-excel/company-history" class="menuitem">History of Excel</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/hr" class="menuitem">Human Resources</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/dates" class="menuitem">Important Dates</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/jobs" class="menuitem">Job Openings</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/mlb" class="menuitem">MLB Standings</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/phone" class="menuitem">Phone Directory</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=node/380" class="menuitem">Quality and Mission Statement</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/docs/EFM%20HR%20XLU%20Servant%20Leadership%20Academy.pdf" class="menuitem">Servant Leadership Academy Info</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/training" target="_new" class="menuitem">Training Request System</a></div></div></td> <td class="divider"> </td> <td style="width: 19.6%;" id="item4" class="menu04" onmouseover="expand(this.id, 'menu4');" onmouseout="collapse(this.id, 'menu4');" onmouseleave="collapseIE(this.id, 'menu4');"><a href="http://www.excelfoundry.net/lifeatexcel/">Departments</a><div id="menu4" class="exp" onmouseout="collapse('item4', this.id);" onmouseleave="collapseIE('item4', this.id);"><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/accounting" class="menuitem">Accounting & Administration</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/support" class="menuitem">Customer Support</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/engineering" class="menuitem">Design Engineering</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/foundry" class="menuitem">Foundry</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/hr" class="menuitem">Human Resources</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/it" class="menuitem">IT</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/machine" class="menuitem">Machine Shops</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/maintenance" class="menuitem">Maintenance</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/mktg_wo" class="menuitem">Marketing</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/materials" class="menuitem">Materials</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=node/193" class="menuitem">Manufacturing Engineering</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=node/192" class="menuitem">Production Control</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/quality" class="menuitem">Quality Engineering</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=node/187" class="menuitem">Sales</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/toolcrib" class="menuitem">Tool Crib</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/warehouse" class="menuitem">Warehouse</a></div></div></td> <td class="divider"> </td> <td style="width: 19.6%; color: black;" id="item5" class="menu05" onmouseover="expand(this.id, 'menu5');" onmouseout="collapse(this.id, 'menu5');" onmouseleave="collapseIE(this.id, 'menu5');"><a href="http://www.excelfoundry.net/lifeatexcel/">Our Customers</a><div style="top: 168px; left: 752px; width: 183px; position: static; visibility: hidden; display: none;" id="menu5" class="exp" onmouseout="collapse('item5', this.id);" onmouseleave="collapseIE('item5', this.id);"><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-customers/highlights" class="menuitem">Customer Highlights</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-customers/equipment" class="menuitem">Equipment Profiles</a></div></div></td> </tr></tbody></table> </div>
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. I 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! 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. 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? I have a 4 column div layout using floats. When I resize the browser the text in the columns goes outside of the div, and over everything below it. Is there any way to insure that as the browser is resized the text will stay inside it's div? Here's an example of my code: CSS: Code:
div#middle {
line-height: 130%;
text-align: left;
margin-left: auto;
margin-right: auto;
min-width: 800px;
}
div#featured {
background-color: #666;
color: #333;
border-right: 1px solid gray;
width: 30%;
float: left;
padding: 1em;
font-size: 14px;
}
div#snippets {
background-color: #444;
color: #333;
width: 20%;
float: left;
padding: 2em;
font-size: 12px;
}
div#tools {
color: #333;
background-color: grey;
width: 150px;
float: left;
padding: 1em;
}
div#ads {
background-color: #444;
color: #333;
width: 100px;
float: left;
padding: 1em;
}
HTML: Code: <div id="middle" class="minmax"> <!-- Main Articles --> <div id="featured" class="vsize"> <h1>Featured Header</h1> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> </div> <!-- Short Articles --> <div id="snippets" class="vsize"> <h1>Snippets Header</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> </div> <!-- Search, other tools, event calendar --> <div id="tools" class="vsize">Tools</div> <!-- Ads --> <div id="ads" class="vsize">Ads</div> </div> Following on from an earlier thread I've split one problem off into the code below which can also be found at http://alphaworks.co.uk/test/float.htm The problem should be obvious from the text but just to confirm I want the left boundary of the text to be straight and not to flow back under the image as it is currently doing. I can do that with a margin-left:110px on the .description class but I'd rather have a solution which didn't depend on knowing the width of the image as this may well vary. Is there a way to do this? Thanks, Geoff Code: <html>
<head>
<style type="text/css">
.image
{
border : solid black 1px;
margin : 5px;
padding : 5px;
float : left;
}
.description
{
}
</style>
</head>
<div class="image">
<img src="" width="100" height="100"/>
</div>
<div class="description">
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
</div>
</html>
Hi Guys, Thanks to some incredible pointing me in the right direction yesterday, i have finally got to my 3-col layout that I want. The only issue is now my news box will let content role behind it, but really i want it to push down as with the footer bar! Can anyone point me in the right direction please? Stylesheet below and output at www.generating-sets.com/index.new2.php PHP Code: html {height:100%;} body { margin:0; padding:0; height:100%; background-image:url(bgs.gif); background-position:top right; background-repeat:repeat-y; background-color:#ffffff; font-family: Times, "Times New Roman", serif; } #wrap { background-image:url(bg.gif); background-position:top left; background-repeat:repeat-y; min-height:100%; } * html #wrap {height:100%} #header { background-image:url(label2.gif); background-position:right; background-repeat:no-repeat; background-color: #000066; border-bottom: 2px #ffffff solid; color: #ffffff; margin:0; padding:0; height:80px; } p {margin:5px; padding:0;} h1 { position:relative; line-height:80px; margin:0; padding-left:20px; } #left { float:left; width:150px; color: #ffffff; text-align:center; background-color: #000066; } #main { position:relative; margin-left:200px; } #right { float:right; width:10px; text-align:center; color: #ffffff; background-color: #000066; } #content { padding:5px; margin-right:200px; text-align:left; } #clearfooter { clear:both; height:80px; overflow:hidden; } #footer { height:40px; background-color: #000066; border-top: 2px #ffffff solid; margin:0; padding:0; margin-top:-0px; color: #ffffff; text-align:center; } div#newsbar {padding: 1%; text-align: center; height:150px; background-color: #000066; color: #ffffff; margin-left: +150px; margin-right: +10px; margin-top: -190px; border: 2px #ffffff solid; width: auto;} code { font-size:0.8em; border:1px solid navy; background-color:white; color:#333333; padding:10px; display:block; width:80%; margin:10px auto; overflow:auto; } There must be a reason why it works like it does, but i don't know!! Charlie I am a bit lost as to how to accomplish the following: I have two divs of unequal width, let's say 300 and 100 for example. I need to float both of these divs to the right and have them stacked on top of each other. That's easy enough on it's own, but I need text to wrap around them properly. ie if the wide one is on top the text should flow to it's left edge, then flow underneath it it the narrow divs left edge, then underneath the narrow one. I tried doing this with relaitve positioning, but have had no luck. If I simply float them both to the right, they line up side by side as expected. If I wrap them both in one container div, the text will flow to the left edge of the wide div but obviously not wrap underneath it to the left edge of the narrow div. Any ideas? Hi, Okay my boss wants me to do this: Have a rectangualr div that has another div in it that is smaller and is in the (vertically and horizontally) center. No probs, but the one in the middle has to have text floating around it, thats above left right and bottom. Me thinks this is impossible! Does anyone have any idea??? Cheers, Trying to achieve this: I'm having trouble figuring out how to float the right ad space correctly. This is what i've got so far: http://gatehouse.graffetto.com/floating_divs.html Code: Code: <html>
<head>
<style type="text/css">
.mainDiv {margin: 0; border: 1px solid black; padding: 10px; width: 600px; float: left;}
.image {height: 100px; width: 100px; background-color: red; float: left;}
.rightAd {float: right; background-color: blue; height: 250px; width: 300px; clear:right; margin-top: 300px;}
</style>
</head>
<body>
<div class="mainDiv">
<div class="image">test</div>
<div class="rightAd">test</div>
<div class="textDiv">
Text content
</div>
</div>
</body>
</html>
I know this is simple i just can't figure it out for some reason.. thanks for any help. I now am fixing it with tables.... thanks for the forum! [IMG]cater-express dot com/IE7.png[/IMG] An image of IE7 and IE6 of my newly relaunched website - I actively have: html,body { text-align: center } #content { width: 400px; margin: 0 auto; text-align: left } </style> __________ it does not work... please help bring content up to top in "content" ______ I wish I could just do all the cooking and not the coding! Thanks for any help! Hello, I have a table with two columns and I want it a certain distance from the left side and right side. The distance on the left is a lot more than the right. I added a margin to it and it pushed it off the screen to cause a horizontal scroll. I tried putting a width on the table, but it wouldn't work for some reason and then tried a negative and positive margin on the right side with no avail. I am stuck. Any ideas on how to negate the pussing of a margin? Hi Guys, I'm trying to create a footer for a web page. The content displayed will change dynamically from article to article that is posted. The footer is a simple div that has centered text stating "page posted by $membername on $date" What I want is if the article is not long enough to push the footer all the way to the bottom, that it would be fixed to the bottom of the screen (not the page). Is this possible? For instance, someone posts an article that is long enough that you would need to scroll down to see the entire page. The footer would be ok being placed just after the article. But if the article is very short, just like 1 paragraph.. the footer would show halfway up the page. Ideas? given the following structu #container { width:775px; margin:0px auto; background-color:#fff; border-left:2px solid #424242; border-right:2px solid #424242; border-bottom:2px solid #424242; border-top:2px solid #424242; background-image:url(cont_bg.jpg); background-repeat:repeat-y; } #nav { padding:0px; height:100px; background-color:#4E7395; background-image:url(nav.jpg); background-repeat:no-repeat; background-position:top left; } #masthead { padding:0px; height:200px; background-image:url(header.jpg); background-repeat:no-repeat; background-position:top left; background-color:#E6E6E6; border-bottom:4px solid #4e7395; } #leftnav { float: left; width: 375px; margin-left:0px; padding:0px; background-color:transparent; } #rightnav { clear:right; float: right; width:392px; margin-right:0px; padding:0px; background-color:transparent; } Would it be possible to put text paragraphs side by side inside the rightnav <div> Floating the text in that manner, it would appear that there were two mini-columns, instead of just the one. Is that possible? thanks a million jon |
|||||||