|
CSS - Need Help With Css Problem. Urgent!
Similar TutorialsHello, 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>
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? 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 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 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 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 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 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. 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 On button on my website store on CSS but when user turn off "load image automatically" then images don't display. Please show me how to fix it. Thanks a lot. Hello, I really need your help please, and it's quite urgent! We have a new corporate layout, using CSS. I have removed all styling so the attachment contains the HTML and CSS *shell* and nothing else. It works lovely in: - Opera 6.12+ - Konqueror 3.1 - Netscape 7.1 - IE6 - Firebird - Mozilla However, on anything previous than IE6, for example: IE5.5, 5.0, 4.01 there are a few problems. With IE 5.5 and 5.0 there is a problem that when the "content" div contains a table, such as the one given in the attachment, it "pushes" the content div into the right blocks which it shouldn't. In IE 4.01, there is a space beneath the "title2" div which shouldn't be there. I've tried in the CSS using different things i.e. only giving the table a 99% width, but nothing fixed it. We do need a width on the table so it always fills the width of the "content" div as we have different screen resolutions on different workstations. I realise a table shouldn't be used, as the main layout doesn't, but this is from a corporate PHP script that generates a table, so there's nothing I can do about it. Any help you can provide for this would be gratefully appreciated, I really cannot see anything "wrong" as such, and hope you will be able to help me get this work in the older browsers too. Thanks in advance. Regards, Hey, I think i just need someone else to look at this for me. I've been coding all day and would probably be able to figure this out if I just went to bed and did it tomorrow. If you roll over an image that's alson an anchor at www.deeperdevotion.com/wp, you'll find that it places a background-color or underline or both on it. The thing is, I can't find the code in my CSS that's causing me the trouble. my css is located at www.deeperdevotion.com/wp/wp-content/themes/dd/styles/101106.css Thanks. Hello everyone, I am hoping I could get some help on this. I'm the new Marketing guy at this company. One of my duties is to fix an issue with our website which was built by the last guy to sit in this chair. I may not know how to build a proper webpage, but this guy knew exactly how not to do it and ran with just that. So, the issue lies within this example page: tinyurl.com/rediculouswebsite The footer ends up under-lapping the table when viewed in IE (when not in compatibility mode) and Firefox. I know this is a ridiculously constructed site, I just need to fix this one problem and be done with web development forever. High fives and scotch from my boss very well may ensue. Thank you all very much. Hello. I am new at css and web design so if these are easy problems please excuse. First of all, the website url http://www.onlinecasinoboss.com In Firefox, the unordered lists <ul> in the left column do not display correctly. The left margin is way too big. I'm not sure why, please look at the page in IE to see what I want it to look like. And in Internet Explorer, the spacing between my top image, header bar, and main page is screwy. There should be no space between the header image and header bar (the flags are in this area). Also there should only be 2px spacing between the header and the main page, however it appears there is atleast 24px there. Again please refer to the page in FF to see what I want it to look like. I like css, and have decided to pursue my first design in css based off of the many professional designers reconmendations and reviews. But I must say it is a major headache to deal with cross-browser/platform display problems. And what professional designer wants to rely on 'css-hacks' when producing a product for a major vender. Just beginner bitching. Thanks for the help! Hi everyone I am very new to making a website using CSS. I use Dreamweaver to help me and don't write the code so I am still learning. APOLOGIES IF I AM BEING STUPID - please be kind! My new website is looking good in all browsers except one web page in IE6 and IE7 where the thumbnail images, instead of wrapping below each other - string out in a long line across the web page. I am using the same class multiple times, and the container # width dimensions have been specified The web page is www"."marcusbunyan"."com/marcuscss/the-symbolic-order/tso-thumbnail.html The code for the relevant section of the web page is Code: <div id="tsothumbnail"> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-a.html"><img src="/assets/images/the-symbolic-order/a-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-b.html"><img src="/assets/images/the-symbolic-order/b-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-c.html"><img src="/assets/images/the-symbolic-order/c-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-d.html"><img src="/assets/images/the-symbolic-order/d-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-e.html"><img src="/assets/images/the-symbolic-order/e-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-f.html"><img src="/assets/images/the-symbolic-order/f-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-g.html"><img src="/assets/images/the-symbolic-order/g-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-h.html"><img src="/assets/images/the-symbolic-order/h-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-i.html"><img src="/assets/images/the-symbolic-order/i-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-j.html"><img src="/assets/images/the-symbolic-order/j-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-k.html"><img src="/assets/images/the-symbolic-order/k-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-l.html"><img src="/assets/images/the-symbolic-order/l-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-m.html"><img src="/assets/images/the-symbolic-order/m-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-n.html"><img src="/assets/images/the-symbolic-order/n-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-o.html"><img src="/assets/images/the-symbolic-order/o-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-p.html"><img src="/assets/images/the-symbolic-order/p-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-q.html"><img src="/assets/images/the-symbolic-order/q-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-r.html"><img src="/assets/images/the-symbolic-order/r-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-s.html"><img src="/assets/images/the-symbolic-order/s-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-t.html"><img src="/assets/images/the-symbolic-order/t-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-u.html"><img src="/assets/images/the-symbolic-order/u-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-v.html"><img src="/assets/images/the-symbolic-order/v-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-w.html"><img src="/assets/images/the-symbolic-order/w-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> </div> and the .css is Code: #container {
position: relative;
margin-left: auto;
margin-right: auto;
width: 1053px;
text-align: left;
margin-top: 7px;
height: auto;
vertical-align: top;
overflow: visible;
}
#container #tsothumbnail {
clear: right;
float: left;
height: auto;
width: 600px;
margin-left: 180px;
margin-top: 40px;
margin-right: 220px;
position: relative;
margin-bottom: 30px;
}
#container #tsothumbnail .tsothumbnail {
clear: right;
float: left;
height: 66px;
width: 92px;
position: relative;
}
The html and css both validate. Thankx for your help much appreciated Marcus |
|||||||