CSS - Urgent - Conflicting Css Positioning - Help!
Hello,
I am having an issue with positioning my drop-down menu properly on a test site I am making for a relative...which he told me last night needs to be done tomorrow. I am not really CSS-savvy, my CSS skills consist of copy and paste from open-source pages and editing them through trial and error and lots of page refreshing. I am trying to combine a CSS drop down menu with a CSS gallery template -- lyteforms.com/galtest.html THE PROBLEM: I can't get that drop down menu to be centered on the page -- I've tried html <center> tags, CSS position tags, and div align tags in every manner and place possible, but it doesn't seem to work. Could any kind soul view source the stubborn thing and tell me why I am failing miserably? Similar TutorialsHi, I've tried adding AdSense to my site, but it always messes up my page. This seems to happen only in Chrome and in Safari, but it works fine with IE & Firefox Here's a sample page I created to show the problem: http://www.deutsched.com/adsense.php Try displaying it with Chrome & Firefox, and you'll notice the difference I've tried tracking down the source of the error, and it seems to be that part of the CSS file, however I'm not that good at programming, so I'm unsure of how to fix it: Code: #header { position: relative; height: 85px; } Any help would be greatly appreciated. Thanks ! Hi, Ok I have a slight problem. I am using two different styles for my <ul>/<li> tags. This is how it works: Code: <td class="contentmain"> <p>This is some example text - here is a list: <ul> <li>Link 1</li> <li>Link 2</li> </ul> </p> <div id="menu"> <ul> <li><a href="../link/" class="linkmenu">Link 1</a></li> <li><a href="../link/" class="linkmenu">Link 2</a></li> </ul> </div> </td> Now, I need to use two different styles for the td "contentmain" cell and the div "menu". Now, I know I could just put a class to the list, but I am creating this site for someone who doesn't know too much about HTML so I need to make it simple. These are my two styles: Code: td.contentmain ul { color: #CCCCCC; list-style-type: none; padding: 20px; margin: 0px; } td.contentmain li { background: url(../_img/img_dot.gif); background-repeat: no-repeat; padding-left: 3em; padding-bottom: 3em; font-size: 0.95em; } Code: div#menu ul { margin-left: 0px; padding-left: 0px; font-size: 0.95em; } div#menu li { list-style: none; margin-left: 0px; padding-left: 0px; font-size: 0.95em; text-decoration : none; border-bottom: 1px solid #999999; line-height: 2em; } Unfortunately, the list in the div "menu" seems to take some of the td.contentmain style - any idea how to say, don't use it...if you know what I mean. I know it's because the div is inside td.contentmain but I have no idea how to sort it out. Cheers, Chris http://www.deltatango5.com/TESTER6b.html this is the link to reference ....... once you select a menu item: SERVICES and chose a link it of course populates the paired windows ... BUT when you go to GIFT IDEAS for instance, the menu appears until you mouse over ..... there is some kind of conflict with the "content" window/div and the submenu ..... I for the life of me cannot find the issue--assistance is greatly appreciated. NOTE: it works fine with IE ... FIREFOX is the issue ... thanks in advance and happy new year! Hi, Hope you can help. I'm having trouble trying to figure out why the links in my twitter feed have the same Background color thats applyed to my navbar. (#9933CC. I'm certain I isolated the CSS to affect only the navbar. For some reason its affecting the twitter feed and I can work out why. Can you help?? My site is below. www. smartbod co.uk (Delete spaces in url as I cant post link as im new) Thanks in advance David www.l33tmonkey.com/sun/index.html completely ignoring the image issues, which are next on the list to sort out, I have a problem. I've gotten hold of two seperate scripts with permission from the author, and they wouldn't wrk together so I linked them externally as two seperate files. Both scripts cater to IE and other common browsers using conditional comments and are reasonably tidy even after I've been playing with them So here's the problem, the horozontal menu, with the two drop down sub menus, needs to float to the right, the float attribute is already present within the menu script, however, the float attribute will only work when set to the left. I altered it to the right and the menu went haywire. the scripts and index source can be viewed freely. Any help on this would be really appreciated, I'm no expert on CSS I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values): It needs to be sticked to fit after content of 4 column DIV's like it is in example. http://www.split.info/dev/less-content/ http://www.split.info/dev/more-content/ Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Title of website</title> <style type="text/css"> <!-- body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;} #wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;} #contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;} #leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF; top: 150px;} #rightPane {width: 173px; float: right; right: 226px; background-color:#999966; position: absolute; top: 150px;} #rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;} #headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;} #header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; } #footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;} --> </style> </head> <body> <div id="wrapper"> <div id="contentPane">Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> Content area<br> </div> <div id="leftPane">Left Pane area<br> Left Pane area<br> Left Pane area<br> Left Pane area<br> Left Pane area<br> Left Pane area<br> Left Pane area<br> Left Pane area<br> Left Pane area<br> </div> <div id="rightPane">Right Pane area<br> Right Pane area<br> Right Pane area<br> Right Pane area<br> Right Pane area<br> Right Pane area<br> Right Pane area<br> Right Pane area<br> Right Pane area<br> </div> <div id="rightPane2">Right Pane 2 area<br> Right Pane 2 area<br> Right Pane 2 area<br> Right Pane 2 area<br> Right Pane 2 area<br> Right Pane 2 area<br> Right Pane 2 area<br> Right Pane 2 area<br> </div> </div> <div id="headwide"> <div id="header">Header area</div> </div> <div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div> </body> </html> Content from above 4 column div's need to push footer DIV below (after them)! Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx! Echo Hello, Need urgent help with changing colors very large font size. My page is (target/se) As you scroll through the various pages you will find clear that content from the text does not match .. can someone help me urgently? Hey all, I hope someone can help me out here. Been trying to figure this out and having trouble. Complete newbie and learning how to code css on the fly. My Current website is http://wgic.cloudaccess.net . What I want is to have a logo and space for menu bar to be where a header would usually go, side by side. I would like their height to be bigger too, but anytime i seem to change the height it either does nothing or sends everything else going amuck. Also, i want the container to be the widths specified, but expandable and viewable on any resolution (which i currently think i have unless i mux with the code trying to accomplish the above. Below is the code i curently have. Any help is greatly appreciated. Code: * { padding: 0; margin: 0; } img { border: 0; } html, body { font-family: Arial, Helvetica, sans-serif; line-height: 1.3em; margin: 0; padding: 0; font-size: 13px; color: #0F0F0F; height: 100%; background-image:url('../images/body_bg.jpg'); background-repeat:no-repeat; background-position:right top; } a:link, a:visited { text-decoration: underline; font-weight: normal; color: #000; outline: none; text-align: left; } .float { float: left; } .clear { clear: both; } .overall { background-color: #fff; } div.center { text-align: center; margin: 0px auto 0 auto; padding: 0; width: 950px; } #container { position:relative; margin:0 auto; width:960px; height: auto !important; height: 100%; min-height:100%; text-align: left; } #top_logo { text-align: center; height: 98% 10px no-repeat; width:250px; } #header { text-align: center; height: 98% 10px no-repeat; width:700px; } #content { width: 598px; text-align: left; padding: 5px; } #sidebar_left { text-align: center; width: 165px; padding: 5px; } #sidebar_right { text-align: center; width: 165px; padding: 5px; } #footer { position:absolute; width:100%; bottom:0; text-align:center; padding: 5px; } Index.php file Code: <?php defined( '_JEXEC' ) or die( 'Restricted access' );?> <!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" > <head> <jdoc:include type="head" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/wgic3/css/template.css" type="text/css" /> </head> <body> <div id="container"> <div id="top_logo"> <jdoc:include type="modules" name="logo" /> </div> <div id="header"> <jdoc:include type="modules" name ="top" /> </div> <div id="sidebar_left" class="float"> <jdoc:include type="modules" name="left" /> </div> <div id="content" class="float"> <jdoc:include type="component" /> </div> <div id="sidebar_right" class="float"> <jdoc:include type="modules" name="right" /> </div> <div id="footer" class="clear"> <jdoc:include type="modules" name="footer" /> </div> </div> </body> </html> I have make css from page property and type a sample text and covert it into <a> tag as css <a> tag should come in green color bt it shows in purple color and i dont why please suggest asap as required for my institute. thanks in advance link is attached please check the css also Code: http://practice.zymichost.com/ Hi, I was about to put my new website online when I noticed that our CSS drop-down menu no longer works in Internet Explorer. The site is built off some software that we bought (a billing system called AWBS). When I got our template up and running on it, the menu worked fine in IE. Today I did some upgrades to the software, which included changing some of the templates around. I was careful to not disturb much in my template files, however it seems that I have, and I have no idea what. You can see the site at http://www.estyles.com.au/awbs/testpage.php . The menu works fine in FireFox, and previously worked fine in IE before I upgraded. All the CSS for the menu can be found at http://www.estyles.com.au/awbs/temp...es/css/menu.css . The code for the menu is: Code: <ul id="nav"> <li><a href="http://www.estyles.com.au/awbs/index.php">HOME</a> </li> <li><a href="#">WEBHOSTING</a> <ul> <li><a href="http://www.estyles.com.au/awbs/hostingoverview.php" class="menuitem">Overview</a></li> <li><a href="http://www.estyles.com.au/awbs/hosting.php?spt=1" class="menuitem">Shared Hosting</a></li> <li><a href="http://www.estyles.com.au/awbs/hosting.php?pt=r" class="menuitem">Reseller Hosting</a></li> <li><a href="http://www.estyles.com.au/awbs/specials.php" class="menuitem">Specials</a></li> </ul> </li> <li><a href="#">DOMAINS</a> <ul> <li><a href="http://www.estyles.com.au/awbs/check.php" class="menuitem">Register Domain</a></li> <li><a href="pricing.php" target="_blank" onClick='window.open("http://www.estyles.com.au/awbs/pricing.php","pricing","width=700,height=300,status=yes,scrollbars=1,resizable=1");return false;' class="menuitem">Domain Prices</a></li> <li><a href="http://www.estyles.com.au/awbs/transcheck.php" class="menuitem">Transfer Domain</a></li> <li><a href="http://www.estyles.com.au/awbs/whois.php" class="menuitem">Whois Lookup</a></li> </ul> </li> <li><a href="#">SERVICES</a> <ul> <li><a href="http://www.estyles.com.au/awbs/webdesign.php" class="menuitem">Web Design</a></li> </ul> </li> <li><a href="#">ACCOUNT</a> <ul> <li><a href="http://www.estyles.com.au/awbs/cart.php" class="menuitem">My Cart</a></li> <li><a href="http://www.estyles.com.au/awbs/welcome.php" class="menuitem">My Account</a></li> <li><a href="http://www.estyles.com.au/awbs/helpdesk.php?search=open" class="menuitem">Support System</a></li> <li><a href="http://www.estyles.com.au/awbs/tos.php" class="menuitem">Terms of Service</a></li> <li><a href="http://www.estyles.com.au/awbs/LogOut.php" class="menuitem">Log Out</a></li> <li><a href="http://www.estyles.com.au/awbs/admin/adminwelcome.php" class="menuitem" target="_blank">Admin</a></li> </ul> </li> </ul> The HTML is messy and I have no idea where to start looking for the problem. The header and footer on the page both changed during the upgrade but the main content (everything inside the body tags) did not, so I suspect that the problem does not lie within the main content area. If someone could at least point me in the right direction then I would greatly appreciate it, thanks hi friends... I am designing a site http://cvtechnoforum.com/ problem is that when I am using IE then every control are at their appropriate place but for mozila (new version..I have downloaded last day),it is not showing the my banner(logo) image appropriatly. please check it in new mozila browser....even in the old mozila,it is showing correctly but for new mozila banner image width is reduced to almost its half length while image is 1400 wide. please help me.... thanks for any help in advance I really need help for my wordpress blog I need it to have a front page.. and i want to link images from it to the new categories... but the problem is that I want it to be like a grid and don't want all the images in the same sizes.. so here goes this is how it is.. each color is a separate picture to of the exact size.. I need them to be like how this image shows and linked too pls can someone provide me the CSS code for it ??? but the forum is not allowing to post links here it is without the brackets http://tinypic(.)com/r/32zjjpd/4 Error: Material "debug/debuglightmap" uses unknown shader "LightmappedGeneric_dx8"Warning: using WorldTwoTextureBlend on a non-displacement surface.Support for this will go away soon. - Material : de_dust/groundsand_blend - Surface center : -912 64 -16Warning: using WorldTwoTextureBlend on a non-displacement surface (material: de_dust/groundsand_blend). Support for this will go away soon. (THESE ARE THE REASONS WHY MY CSS IS SCREWING UP REALLY BAD) any help please i have no idea what this means test link: users.tpg.com.au/tetsuo/CSS_help/index.html Hi guys, Im really new to CSS, and doing a bit of crammed-study on it. I finally found a fix that worked on css list navigation that i could use that'll work in IE but i cant seem to center each menu item to each respective rollover image (the BG gifs). Some help on this would be greatly appreciated, i cant seem to find anything to fix this. I've tried several solutions (which is probably why my css might look like a huge mess). the css file is he users.tpg.com.au/tetsuo/CSS_help/awis.html Hello All, following is my code Code: <html> <head> <style type="text/css"> .test { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #ff0000; font-weight: bold; } </style> </head> <select name="slt" > <option class="test">value1</option> <option>value2</option> <option>value3</option> </select> </html> In the above code i am trying to apply style for first option i got the color for first option but not the size and weight. The font-size and font-weight attributes are not applied.... can some one help me out in this... Please help me ASAP Thanks in Advance Ramesh Hi, I'm new using CSS and was just handed the task of creating an external style sheet that will 'brand' the web page of a new service we are using with my company's logo and menu. Our page has a logo on the left, with a menu bar extending to the right of it, then a graphic bannner with the company's slogan below all of it. The requirements are for an external style sheet which will apply this to each page of the services hosted pages. I desperately need an example of how this is done, or CAN it be done with an external style sheet (and what code needs to go into the HTML file to make it work). Any help would be greatly appreciated. I've spent 4 days searching for an example and have come up dry, or what I did find didn't work. This is my last resort and I need to finish the project today. Tillius Hello everyone. I have a site that uses a PHP command to pull the PHP modifier from the URL and use that as a class for a header. Those classes each have their own BG image in my external stylesheet. On any browser other than IE win it works fine, headers change as the class changes. On IE win though only the first one (my "about" class) works, the rest default to the standard header. I have re-typed the rest to see if it was just a text problem but nope. Everything validates fine. The page is http://holiday.mrpunkin.com/about.php My classes are as follows: they all modify the "mid" div as you can see: Code: #mid.about {background: transparent url("/img/headers/mid_about.gif");} #mid.activities {background: transparent url("/img/headers/mid_activities.gif");} #mid.food {background: transparent url("/img/headers/mid_food.gif");} #mid.travel {background: transparent url("/img/headers/mid_travel.gif");} #mid.resident {background: transparent url("/img/headers/mid_res_rel.gif");} #mid.health {background: transparent url("/img/headers/mid_health.gif");} #mid.fitness {background: transparent url("/img/headers/mid_fitness.gif");} #mid.maintenance {background: transparent url("/img/headers/mid_bg.gif");} #mid.construction {background: transparent url("/img/headers/mid_construction.gif");} #mid.employment {background: transparent url("/img/headers/mid_employment.gif");} Does anyone know why IE Win won't recognize the different BG images and use those? When I view the source I can tell that its outputting the class name correctly, so thats not the issue. Please get back to me asap. Thanks. |