CSS - Problems Adjusting A Float
Hey guys,
I started working on my website again and found a great CSS dropdown menu online that is free to use with a GPL license. I adjusted it without a problem (always could read and adjust code but aren't great when it comes to writing it). Now that I embedded it in my website there is a slight trouble I am running into. I can't seem to center it no matter what I try. I read these floats are tricky to center at times which is why I wanted to share my code with you and see if you might be able to fix it for me. If anyone of you can help me out it would be much appreciated!!! Thanks, alex Here is the site with the code. 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" lang="en"> <head> <title>LWIS.NET Celebrity Drop-Down Menu</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Tom@Lwis (http://www.lwis.net/free-css-drop-down-menu/)" /> <meta name="keywords" content=" css, dropdowns, dropdown menu, drop-down, menu, navigation, nav, horizontal, vertical left-to-right, vertical right-to-left, horizontal linear, horizontal upwards, cross browser, internet explorer, ie, firefox, safari, opera, browser, lwis" /> <meta name="description" content="Clean, standards-friendly, modular framework for dropdown menus" /> <link href="css/dropdown/themes/lwis.celebrity/helper.css" media="screen" rel="stylesheet" type="text/css" /> <!-- Beginning of compulsory code below --> <link href="css/dropdown/dropdown.linear.columnar.css" media="screen" rel="stylesheet" type="text/css" /> <link href="css/dropdown/themes/lwis.celebrity/default.advanced.css" media="screen" rel="stylesheet" type="text/css" /> <!--[if lte IE 7]> <script type="text/javascript" src="js/jquery/jquery.js"></script> <script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script> <![endif]--> <!-- / END --> </head> <body> <!-- Beginning of compulsory code below --> <ul id="nav" class="dropdown dropdown-linear dropdown-columnar"> <li><a href="./">resume</a></li> <li><a href="./">about</a></li> <li class="dir">work <ul> <li class="dir">Reel <ul> <li><a href="./">Montage Reel</a></li> <li><a href="./">Director's Reel <br>(selected scenes)</a></li> </ul> </li> <li class="dir">Narrative <ul> <li><a href="./">The Liberation of the Fish</a></li> <li><a href="./">Behind the Scene</a></li> <li><a href="./">All that Remains</a></li> <li><a href="./">Jumper</a></li> <li><a href="./">Dragoste</a></li> </ul> </li> <li class="dir">Music Video <ul> <li><a href="./">MOBY music video competition</a></li> </ul> </li> <li class="dir">Commercial <ul> <li><a href="./">FIFA spec commercial</a></li> </ul> </li> </ul> </li> </ul> <!-- / END --> </body> </html> And here is the default css which I have tried playing with to no success. Code: @charset "UTF-8"; /** * LWIS Celebrity CSS Drop-Down Menu Theme * * @file default.css * @name Default * @version 0.1 * @type transitional * @browsers Windows: IE5+, Opera9+, Firefox2+ * Mac OS: Safari2+, Firefox2+ * * @link http://www.lwis.net/ * @copyright 2009 Live Web Institute. All Rights Reserved. * */ /*-------------------------------------------------/ * @section Base Drop-Down Styling */ ul.dropdown { font: 20px/normal Helvetica, Arial, sans-serif; letter-spacing: +2px; text-transform: lowercaseercase; } ul.dropdown li { padding: 0 10px; background-color: transparent; color: #000; } ul.dropdown li.last ul li { float: right; } ul.dropdown li.hover, ul.dropdown li:hover { background-color: #cdcdcd; color: #000; } ul.dropdown a:link, ul.dropdown a:visited { color: #000; text-decoration: none; } ul.dropdown a:hover { color: #000; } ul.dropdown a:active { color: #ffa500; } /* -- level mark -- */ ul.dropdown ul { background-color: #cdcdcd; font-size: 12px; letter-spacing: normal; } * html ul.dropdown ul { width: 960px; } ul.dropdown ul li { font-weight: bold; } /* -- level mark -- */ ul.dropdown ul ul { margin-top: 5px; text-transform: none; } ul.dropdown ul ul li { font-weight: normal; } /*-------------------------------------------------/ * @section Support Class `dir` */ ul.dropdown *.dir { padding-right: 30px; background-image: url(../../../../images/lwis.celebrity/nav-arrow-down.png); background-position: 100% 50%; background-repeat: no-repeat; } ul.dropdown ul *.dir { background-image: none; } Similar TutorialsHello everyone!! Great community you have going here! I am working on a personal project, and try to do all the work myself (hired a designer at one point but the best he could do is a table based layout ) The site is based on the drupal CMS and the zen theme. And currently the them has problems when rendered in IE7 everything is getting jammed in the top left corner in IE7 and IE8 compat mode: drupal.org/files/issues/IE8_compat.GIF some people tried to combat this issue by adding this to the IE specific stylesheet: CSS Code: Original - CSS Code #header, #main {overflow: hidden;} #header, but it does not solve the problem 100% drupal.org/files/issues/IE7vsIE8_overflow_hidden.GIF I've been searching for a fix for some time but with no luck, so if you people have any suggestions I would be super appreciative! The live site could be viewed he techbine.nfshost.com P.S. to see the images copy/paste the links to the address bar (I have a low post count so can't link directly ) Hey. On my page I've got smaller "post" div's I put my content in, and those are inside a "mainContent" div again. They have fixed width and I can get two of them beside each other, which works fine with float:left - but if I have two posts with variable height, then the next post on the page will be below the highest one. I uploaded an example at http://www.zaklaberg.tk. I was wondering how I can make it so my post elements stack properly on top of each other? My css-rule for the post div tags looks like this: Code: .post { padding: 5px; height: auto; width: 330px; margin-bottom: 50px; margin-left: 30px; background-color: #CCE3C1; float: left; } The rest of my css is at http://home.online.no/~ste-labe/_css/main.css. Thanks in advance for any help! Hey everyone, Just released v2 of my design site - but there's a problem with the floated sidebar in IE6. http://www.quiviramedia.com/ is the site. http://www.quiviramedia.com/style.css is the CSS URL. What is the problem? Does anybody know? Thank you! Here's the link of the messy page: http://205.205.200.231/~h806209/indexmess.php I need someone to tell me why the float left/right isn't aligning properly. I posted the link above. Here's an example that works: http://205.205.200.231/~h806209/positioning.php and http://205.205.200.231/~h806209/positioning1.php One's in a style tags the other's inline. But when I insert my codes it shows things messed up. Hello. I am trying to solve a float problem. The crux: One wrapper div around a left (floated) column and right column. Content in the left is fine: In the right column I need the image (#logo) to be on the left of a h2 (#name). The #logo is taller than #name. Under both of those I need a ul (#basic_list) to essentially clear both #logo and #name. Please look at my code and diagram of how it should look in my attachment. Thanks Hey. First post on here, so hopefully you lot are very helpful I've been asked to make a site for someone I know, and I've done the design, made most of it in CSS and a little php for navigation alerations. The URL for the website is: (URL address blocked: See forum rules) The problem that I'm seeming to have, is that in IE7 the footer only takes the value of the #bottom_container height, and ignores the #left and #right that are inside this container. Meaning that, the footer rides up to the middle of the page, as shown: [IMG](URL address blocked: See forum rules)[/IMG] Does anyone know how to solve this? It's performing well in Safari and Firefox, and even IE6! Just not the new one. I know it's something to do with the height of the botom container, but each page is going to have different amounts of content, so I cant set a height for all of them. Thanks very much! Nick. I have an image that is float: right that I want a caption under. I read the Floatutorial and another float tuturial and thought I did what it said, but now the image floats left of the caption - sort of. I want the image to float left and the caption in dk blue to be beneath it. Here is the problem page Here is the css code for the float part: Code: .imgRight { clear: none; float: right; min-width: 100px; color: #3399FF; font-weight: bold; } .imgRight img { margin: 0px 0px 10px 20px; border: 1px solid #000099; overflow: visible; } Here is the xhtml code for the float part: Code: <p>Vitalograph Ltd was founded in 1963, building on a successful business in respiratory diagnostic and therapeutic products started in 1951. </p> <div class="imgRight"><img src="../images/p_model.jpg" width="275" height="182" alt="Vitalograph P Model Spirometer" /> 1966 Vitalograph P Model Spirometer</div> <p>Vitalograph achieved its early success by taking spirometry from a complex laboratory test to a simple effective screening procedure - with the key benefit of providing early detection, and therefore more effective treatment.</p> hey all, i have divs within a div but the inner div with the text does not expand the main wrapping div with so the main wrapping div is very thin and the text just goes over it?? here is the code Code: <div id="greyinset"> <div id="insetcontent"> <form name="form1" method="post" action=""> <div id="insetcontentL"> <div align="left"> <label>Smoking:</label> <br> <label>Bed Type:</label> <br> <label>Accessible:</label> <br> </div> </div> <div id="insetcontentR"> <div align="left"> <input name="smoking" type="radio" value="yes"> yes <input name="smoking" type="radio" value="no" checked> no<br> <input name="radiobutton" type="radio" value="radiobutton"> King <input name="radiobutton" type="radio" value="radiobutton"> Two Beds <input name="radiobutton" type="radio" value="radiobutton"> No Preference<br> <input name="accessible" type="checkbox" id="accessible" value="yes"> </div> </div> </form> </div> </div> and the css code Code: #greyinset { width: 100%; background-color: #eee; border: 1px solid black; clear:left; } #insetcontent {width: 100%; padding: 3px 10px 3px 10px; white-space:normal;} #insetcontentL {width: 50%; float: left;} #insetcontentR {width: 50%; float: right;} any ideas?? or do i have to go back to trusty tables thanks RF Thanks for viewing my post. Here is the site I am working with: http://www.flattrackillustrated.com/dev/ I am having two problems: 1) If you shrink your browser too far in on the left, the floating right image goes over everything. I need to MAX left side margin to be about 600px, but with float on, the margin-left doesn't work! Is there a way to tell this image to float, but stop at a certain point? 2) I want the background image I have on the left nav side to continue all the way to the bottom of the page, however, since I already am using a background image for the top, I can't seem to do a horizontal and vertical of two different images. Is there a way to make this happen? Thanks! Here is the industry news page I have the picture floating either right or left with text beside it - then a line underneath it. I want the line to always be at least 10px below the picture. When the text is less, the line crosses into the picture. xhtml: Code: <div id="industry"> <h1>Industry News and Information</h1> <div class="row"> <span class="imgLeft"><img src="../images/ATS-ERS_thumb.jpg" width="100" height="100" alt="ERS ATS Logo" /></span> <h2>New single set of standards for ERS and ATS</h2> <p>Through the combined efforts of the European Respiratory Society (ERS) and the American Thoracic Society (ATS), there is now a new single set of standards for both sides of the Atlantic. <a href="/resources/industry_news/news_ers_ats.html">More ...</a></p> </div> <div class="row"> <span class="imgRight"><img src="../images/ARTP_thumb.jpg" width="112" height="100" alt="COPD Day at Vitalograph" /></span> <h2>Winter ARTP meeting well attended</h2> <p>Vitalograph recently attended the Association for Respiratory Technology and Physiology (ARTP) 3Oth Annual Conference at the Hilton Metropole Hotel in Brighton. <a href="/resources/industry_news/news_artp.html">More ...</a></p> </div> <div class="row"> <span class="imgLeft"><img src="../images/ATS-ERS_thumb.jpg" width="100" height="100" alt="ERS ATS Logo" /></span> <h2>New single set of standards for ERS and ATS</h2> <p>Through the combined efforts of the European Respiratory Society (ERS) and the American Thoracic Society (ATS), there is now a new single set of standards for both sides of the Atlantic. <a href="/resources/industry_news/news_ers_ats.html">More ...</a></p> </div> <div class="rowLast"> <span class="imgRight"><img src="../images/COPDdayoffice_thumb.jpg" width="99" height="98" alt="COPD Day at Vitalograph" /></span> <h2>Vitalograph participates World COPD Day</h2> <p>To mark World COPD Day on 16 November 2005, the British Lung Foundation teamed up with Superdrug to offer a free spirometry test at selected stores across the UK. <a href="/resources/industry_news/news_world_copd_day.html">More ...</a></p> </div> <p class="back"><a href="javascript:history.go(-1)">< Back</a></p> </div> css: Code: .imgLeft img { clear: none; float: left; margin: 0px 20px 10px 0px; border: 1px solid #000099; } .imgRight img { clear: none; float: right; margin: 0px 10px 10px 20px; border: 1px solid #000099; } /*rows*/ .row { padding-top: 10px; margin-top: 10px; border-top: 1px solid #3399FF; } .rowLast { padding-top: 10px; padding-bottom: 10px; margin-top: 10px; margin-bottom: 10px; border-top: 1px solid #3399FF; border-bottom: 1px solid #3399FF; } .line { border-bottom: 1px solid #3399FF; padding-top: 0px; padding-bottom: 10px; } .inline { display: inline; } #mainColumn { padding: 0px; margin-left: 175px; background-color: #FFFFFF; height: 100%; } /*industry news*/ #industry { padding-right: 20px; padding-left: 20px; } #industry h1 { margin-bottom: 20px; } #industry h2 { color: #000099; margin: 0px 0px 10px 0px; } #industry img { margin-bottom: 10px; } .copdDay img { clear: both; margin: 0px 40px 15px 55px; border: 1px solid #000099; } .artp { margin: 0px 40px 15px 40px; } .artp img { clear: both; margin: 0px 40px 15px 25px; border: 1px solid #000099; } Any suggestions on how to get this consistently since through css accounting for varying lengths of text?? I know I can adjust padding/margins for each section to make it work, but I want something that is more universal that I can always use to get the same appearance. Thanks! http://wrath.wr.funpic.org Hello Devshed. I am new here and am here looking for help. Maybe I'm just tired and dumb right now to figure it out. Anyways if you would take a look at the site I pointed out you'll notice the bottom border is missing. Why? When I removed the float:left; on the lis it is fine but when it's in there it's all screwed up. Second thing... if you'll notice my hovers do not work in IE. Is there an alternate way for me to get them to work in IE. Thanks a lot. The underline is on the contact page (the google map has been freaking out on IE, so try FF). I want "Hours" to be underlined, but it isn't showing up. It's an h1 with a class of "comment" and the CSS is Code: h1.comment { text-decoration: underline; } The float problem uses this CSS. The page in question shows all the previous presidents . There's a 0 margin and it does float, it just is aligned wrong. The CSS for both columns is Code: #pastpres table { font-family: Verdana, Helvetica, Arial, sans-serif; font-size: .8em; border-collapse: collapse; margin-bottom: 1em; margin-right: 0; } #pastpres tr { border-bottom: 1px solid #775b36; } #pastpres2 table { font-family: Verdana, Helvetica, Arial, sans-serif; font-size: .8em; border-collapse: collapse; margin-bottom: 1em; float: right; margin-top: 0; margin-left:0; } #pastpres2 tr { border-bottom: 1px solid #775b36; } Here is the relevant HTML code: <table> <tr> <td> <div style="float:left;"> <div class="middle"><div class="r"><div class="l"> <a id="gridtitle" href="javascript:void(0)" onclick="reload()"></a> </div></div></div> <div style="width: 200px;"> <a href="#" onclick="addheader()"><img border="0" src="tab_new_header.png" alt="Delete this grid"/></a> <a href="#" onclick="addfooter()"><img border="0" srctab_new_footer.png" alt="Delete this grid"/></a> </div> </div> <div style="float:right;"> <a href="#" onclick="javascript:toggleLayer('newgrid');"><img border="0" src="button_add.png" alt="Add a grid"/></a> <a href="#" onclick="deleteGrid()"><img border="0" src="button_delete.png" alt="Delete this grid"/></a> </div> </td> </tr> <tr> <td> <div id="gridbox3" class="gridbox" width="870px" height="600px" style="background-color:white;"></div> </td> </tr> </table> And the relevant CSS code [which just sets the background of the tab]: .l {background: url(../../datadir/client/images/billinggrid/name_sidebg1.png) 0 0 no-repeat; height: 43px;} .r {background: url(../../datadir/client/images/billinggrid/name_sidebg2.png) 100% 0 no-repeat; height: 43px;} .middle {background: url(../../datadir/client/images/billinggrid/name_sidebg.png); height: 43px;} This is the output (i can't post images?) http://i34 [.] tinypic [.] com/4hpqag [.] png The first problem I am having is that the div my gridtitle (CIBC) is in does not set its width automatically to the text width. Instaed, it spans the whole table ... Position-wise, I would like the tab with "CIBC" to be to the far left, the header and footer tabs to be right of "CIBC" but still floating left, and the + and x signs to be floating right, all on the same line. Help? Thanks in advance. my layout is a left border, main content, then right border, all vertical columns. here is their code: Code: .left { background-image: url('images/obj_left.gif'); background-repeat:repeat-y; width:28px; margin:0px; } .maintable { width: 100%; background-color:#FFFFFF; border-left:3px solid black; border-right:3px solid black; } .right { background-image: url('images/obj_right.gif'); background-repeat:repeat-y; width:28px; margin:0px; } i also float them left, so imagine that is there. so i have code like this <div class='left floatleft'></div> <div class='maintable floatleft'></div> <div class='right floatleft'></div> but why cant i see the images in right and left? Hi, I have been a CSS/XHTML developer for about 6 months now and I just came accross a problem that I have had difficulty solving... I have spent about a week on this problem, and still no luck... I kind of restarted too with no luck... I am thinking this may be a bug... But it works fine in IE... In firefox, the content division background does not continue, instead a footer background is moved up... This is so weird, I dont know how this can be possible... This has been extremely frustrating... If anyone can help, that would be great! Thanks a lot! subject isn't too good anyhow.. i have 4 cells __ __ |1 | |2 | --- --- __ __ |3| |4 | --- --- 2 and 4 are said to float right, such that 1 and 3 define the height of the page.. but.. when the contents of 2 go LONGER than the contents of 1, number 4 doesn't float right properly.. instead this happens __ __ |1 | |2 | --- | | --- | | |4| --- --- __ |3| --- do you see that? 4 tries to float right, but since it's called underneath 1, and 2 is extended, floating right relative to the page doesn't make it ACTUALLY float right any thoughts that will render this properly? (namely that cells 1 and 3 will inherit the height of 2 and 4 somehow?) Hi and thank you in advance for any advice or help. my website: http://earlystartdc.com/ Im having trouble trying to find the right css code so that i can adjust the banner underneath the menu in order to remove the white spaces in the module. I would like for the banner to be at margin 0 so that its all the way to the top without any white space in between. any help?? Thank you P.s - This is what my css files look like from my template/css folder . Is it possible to setup a frame to adjust? I ran into a problem with my menu being on the left side of the screen in its own frame, when it expands it needs about twice as much space otherwise another frame on the right of this frame cuts off the text and buttons from the menu, (this frame is used to display documents inside of it.) Originally I did not think it would be a problem but I just realized that some of the documents need a lot of room horizontally do to images and descriptive frames being inside of the docs, thus causing the reader to have to keep scrolling from side to side in order to read the paragraphs. Is there some way to get the frame with the menu to adjust according to the size of the menu as the user mouses through it, or a way to make the menu float over the doc viewing frame as the user mouses through it and just make the menu frame big enough to fit the menu when it is not being used, or another alternative all together? Thanks for reading. Hello, I am having a problem with the aligning of m website. Whenever I view my website in a normal size window everything looks fine and in it's place. However when I full screen my browser window everything stays to the left, and my background repeats, nothing moves with the browser window. My question is how do I have everything on my webpage automatically adjust to the browser window? Thanks! |