|
CSS - Small Portion Of Div Layout Not Able To Click Links
I am really racking my brain here
I know this will end up being a simple fix but after creating this for a few hours straight, I just can't see it. Ok here's the page and the situation... myspace[dot]com[slash]daggersanddiamonds My links at the top of my page are sliced fine and the links do work (in explorer) but somehow in Firefox, they are being hidden by some invisible layer that extends about 800ish pixels in width that hides the clickability. As you can see, the first half portion of "Add to Friends" works but the rest is disabled, and part of the "Vimeo" link works, but not totally.. and ofcourse the middle links are totally dead to click. My question is, whats hiding these links? Any help is super thanked! Similar TutorialsI've got three issues with my CSS on my page that I cannot seem to figure out. I'm stumped again. Any help would be appreciated. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<title></title>
<style type="text/css" media="screen"><!--
body { background-color: #fff; background-image: url(../images/top_bar_striped.gif); background-repeat: repeat-x; margin: 0; padding: 0 }
hr { color: #ccc; background-color: #ccc; width: 100%; height: 1px; border: 0 }
#container { background-color: #fff; margin: 0 auto; width: 950px }
#main { margin: 0 auto; padding: 0; width: 938px }
#top { margin-bottom: 6px; height: 40px }
#nav { height: 40px }
#banner { height: 212px; overflow: hidden }
#body { background-image: url("../images/body_back.gif"); background-repeat: repeat-y; margin-top: 6px; overflow: hidden }
#bodyLeft { background-image: url("../images/body_left_top_back.gif"); background-repeat: no-repeat; padding: 30px 20px 20px; width: 200px; min-height: 100px; float: left }
#bodyLeft ul { color: #333; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; text-align: right; list-style-type: none; margin-left: 0; padding: 0 }
#bodyLeft li { margin: 12px 0 }
#bodyLeft li a { color: #333; text-decoration: none; padding: 4px 6px }
#bodyLeft li a:hover { background-color: #a5a687 }
#bodyRight { background-image: url("../images/body_right_top_back.gif"); background-repeat: no-repeat; padding: 40px 30px 30px; width: 632px; min-height: 100px; float: right }
#introHeading { color: #32508a; font-size: 16px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: bold; line-height: 22px }
#introText { color: #333; font-size: 13px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 18px }
#introPullout { color: #c00; font-size: 16px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; line-height: 28px; background-image: url("../images/quote_back.gif"); background-repeat: no-repeat; margin-bottom: 30px; margin-left: 30px; padding-left: 20px; width: 180px; float: right }
#featuredProject { margin-top: 30px; clear: both }
#featuredPhoto { margin-right: 20px; margin-bottom: 20px; float: left; border: solid 8px #fff; outline: solid 1px #ccc }
#featuredTitle { color: #333; font-size: 14px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: bold; background-image: url("../images/featured_arrow.gif"); background-repeat: no-repeat; margin: 0 0 10px; padding: 0 0 0 12px }
#featuredText { color: #333; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 16px }
#footer { background-image: url("../images/body_btm_back.gif"); background-repeat: no-repeat; height: 24px }
#copyright { color: #666; font-size: 9px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 14px; text-align: right; padding: 20px }
--></style>
</head>
<body>
<div id="container">
<div id="main">
<div id="top">
<div id="nav"></div>
</div>
<div id="banner"></div>
<div id="body">
<div id="bodyLeft">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
<div id="bodyRight">
<div id="introPullout">
<p>Text here...</p>
</div>
<div id="introHeading">
<p>Text here...</p>
</div>
<div id="introText">
<p>Text here...</p>
</div>
<div id="featuredProject">
<img id="featuredPhoto" src="photo.jpg" alt="" width="130" border="0"/>
<div id="featuredTitle">FEATURED PROJECT</div>
<hr/>
<div id="featuredText">Text here...</div>
</div>
</div>
</div>
<div id="footer"></div>
<div id="copyright"></div>
</div>
</div>
</body>
</html>
1. How do I make the background color for the links (bodyLeft li a:hover) in the bodyLeft DIV fill the entire width of the DIV? Minus the padding, of course. 2. The text/DIVs inside the bodyRight DIV appear to have too much space above them in Safari (appear too far down). It looks like IE is correct. Any ideas? 3. The text in DIV featuredTitle is supposed to have an arrow on its left side where the text would normally start. It doesn't appear and/or looks like the featuredPhoto is covering it up. How can I make the arrow (background image) appear in the correct spot and slide the text over to the right? Thank you for all your help! Hey, I'm new to this board and CSS design in general. I have a question that I couldn't figure out or find anywhere. projecthoods. com/clients/bpa (minus the space before com) (FF) Although I set the div width to 666 (not intentional), why is the background color only appearing in IE? FF doesn't display the bg. I'm assuming it has something to do with the unordered list, because it all works fine if I replace the list with text, however, I can't find a solution because I need the list in there. Any ideas? Thanks guys. CSS Code: body
{
margin: 0 0 0 4em;
padding: 0;
background: #384c7f url(images/bg.gif);
font-family: Verdana,Arial,"Times New Roman",sans-serif;
font-size: small;
color:#484848;
text-align: justify;
}
a:link
{
color: #384c7f;
}
a:visited
{
color: #384c7f;
}
a:hover
{
color: #6173a3;
}
ul
{
margin: 0 0 0 25px;
}
h3
{
font-family: Georgia,"Times New Roman",Verdana,sans-serif;
margin: 0 0 0 0;
}
#header
{
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#eprnavigation
{
color: #f2f2f2;
background: #4b5f92;
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 666px;
}
#nav a
{
color:#f2f2f2;
background: #4b5f92;
text-decoration: none;
font-weight: bold;
padding: 5px 5px 5px 5px;
}
#nav a:hover
{
color: #f2f2f2;
background: #6173a3;
padding: 10px 5px 10px 5px;
}
#nav
{
list-style: none;
color: #f2f2f2;
margin: 0 0 0 0;
padding: 0 0 0 0;
font-size: .8em;
background: #4b5f92;
width: 666px;
}
#nav li
{
float: left;
margin: 0 0 0 0;
padding: 10px 10px 10px 10px;
color: #f2f2f2;
background: #4b5f92;
}
#content
{
background: #e5e5e5;
color:#484848;
width: 666px;
margin: 0 0 0 0;
}
#footer
{
background: #6173a3;
height: 15px;
width: 656px;
color: #f2f2f2;
font-size: .7em;
padding: 5px 5px;
text-align: center;
}
acronym
{
color: #4a5c8b;
background: #e5e5e5;
border-bottom: 1px dotted;
cursor: help;
}
/* Finish Style Formatting */
/* Start Layout Structuring */
#picture
{
text-align: center;
}
#footer
{
clear: both;
}
#left
{
padding: 10px;
float: left;
width: 200px;
}
#right
{
padding: 10px;
float: right;
width: 400px;
}
/* End Layout Structuring */
Ok, I have a two column layout. And I'm trying to get the base of the div stacks to match eachother. Here's the stripped down code I've been playing with to try to create this behavior. Code: <div style="width:600px;">
<div style="width:50%; background-color:#66C; float:right; text-align:center;">
<img src="#" width="150" height="300" alt="Fake Content"/><br />
</div>
<div style="width:50%; height:150px; background-color:#0F0;">1</div>
<div style="width:50%; height:30px; background-color:#C96;">2</div>
<div style="width:50%; height:50px; background-color:#CCC;">3</div>
<div style="clear:both;"></div>
</div>
So the size of div #1 is always fixed, #2 contains dynamic content, and #3 is fixed content but I would like the height of #3 to stretch to match the right column when needed. For the right column, the content is dynamic, and I would like it to stretch to match the bottom of #3 when needed. So basically, the height of both column will vary and I'd like the shorter of the 2 to stretch. I looked around and experimented a bit with some success, but not exactly the behavior I was looking for. The things that have been giving me the most trouble, is that the left column consists of 3 divs, and the right column is floated. From the left, I could probably get away with removing the content from #1 from it's div and let it hang out in the parent div, but the other two really need their own containers. Also, I don't know how else to put the right column on the right side other than to use a float or absolute position (and absolute won't expand the parent div) because both columns are dynamic... Anyhow, I'm searching for suggestions. One thing that sucks is I know this would be a non issue using tables, but this is a page layout and I'm not about to cave now. I use this css: #clearfooter { /* VERTICALLY ALIGN THE FOOTER TO BOTTOM WHERE REQUIRED */ clear: both; height: 170px; overflow: hidden; } #footerbox { /* BOX FOR THE FOOTER */ height: 170px; width: 759px; margin:0 auto; padding:0; margin-top :-170px; text-align: center; } It puts the footer at the bottom of the page. In IE I can click on the links in that part of the page. In FF I cannot. If I remove the "clearfooter" id then it works in FF although obviously it knackers the page layout...any solution available? When my cursor passes over the links on the top of my page (not clicking a link, just passing the cursor over the link), the title jumps from its position directly under the links to a position to the right of the links. Since you are giving me help, I want to make this as easy for you as I can. I have posted a screen shot of exactly how my header looks before and after passing the cursor over the links. www.middle-age-guy.com/forum-css-help_images.html Here is the relevant css. I've separated and labeled the css so that you can see how it flows down the page. ___________________________________________ #header { width: 998px; margin: 0 auto; } #header .container { background:url(images/head_pat.jpg) left top repeat-x; height: 200px; } /* -- links along the top of the page (Home, MAGman Lifestyles, etc. --*/ .topline { } ul.menu li.page_item { float: left; display: inline; font-size:12px; margin-top: 25px; } ul.menu li.page_item a { color:#000!important; text-decoration: none; padding:25px 0 0px 0px; margin-right: 15px; list-style-type: none; } ul.menu li.page_item a:hover { color: #fff!important; text-decoration:none; background:url(images/menu_hover.gif) left repeat-x; } ul.menu li.current_page_item a { color: #fff!important; text-decoration:none; background:url(images/menu_hover.gif) left repeat-x; } /* -------------------- Image on right side of header ---------*/ #magmanheadshot { padding:0; margin:25px 50px 20px 0; float:right; width:160px; color:#003e4f; } /*--------------- Title - Middle-Age-Guy.com --------------*/ #headline { width:450px; margin-top: 20px; } #headline h1 { display: block; clear:left; font-size:30px; margin-left: 20px ; margin-bottom: 5px; color:#FFFFFF; font-weight:normal; } /* ------------- Tagline below the title --------------*/ .desc_l { background:url(images/desc_l.gif); width:10px; height:27px; float:left; margin-left: 25px; } .desc { background:url(images/desc_pat.gif); height:27px; float:left; font-size:14px; line-height:25px; font-weight:normal; color:#FFFFFF; } .desc_r { background:url(images/desc_r.gif); width:10px; height:27px; float:left; } .magmandatingsystem { margin: 10px 0 0 0; font-size: 12px; padding: 0 0 0 23px; float: left; width: 400px; } /* --------------------- Membership login link -----*/ .login { font-size: 18px; color:#FFFFFF; text-decoration: none; float: right; margin-top: -80px; margin-right: 50px; list-style-type: none; } .login a { color:#FFFFFF!important; text-decoration: none; } .login a:hover { color:#FF0000!important; text-decoration:none; } .join { font-styleblique; font-size: 9px; font-weight: bold; } .join a { text-decoration:underline !important; color:#ff0000!important; } .join a:hover { color:#0099FF!important; } /* ------------ End of Header -*/ _______________________________________ Here is the relevant html from header.php <div id="header"> <div class="container"> <div class="topline"> <ul class="menu"> <li class="page_item"> <a href="(URL address blocked: See forum rules)">Home</a></li> <li class="page_item"> <a href="(URL address blocked: See forum rules)/?page_id=89" title="General information foundational to success in all other areas">MAGman Lifestyle</a> </li> <li class="page_item"> <a href="(URL address blocked: See forum rules)/?page_id=89" title="One of the three Pillars of any man's life - his relationships with others">Women & Relationships</a> </li> <li class="page_item"> <a href="(URL address blocked: See forum rules)/?page_id=89" title="The Pillar of a sound body is a middle age guy's call to reality">Health & Fitness</a> </li> <li class="page_item"> <a href="(URL address blocked: See forum rules)/?page_id=89" title="A man's third Pillar is his ability to do battle in the business world.">Business & Wealth</a> </li> <li class="page_item"> <a href="(URL address blocked: See forum rules)/magman-blog" title="MAGman's Blog">Blog</a> </li> <li class="page_item"> <a href="<?php if($db_feedburner_address) { echo $db_feedburner_address; } else { bloginfo('rss2_url'); }?>">Subscribe to RSS</a> </li> </ul> </div> <!-- end #topline --> <div id="magmanheadshot"> <img src="/wp-content/themes/blog-design-studio-newblue/images/mag_man4-Head-shot.gif" /> </div> <div id="headline"> <h1><?php bloginfo(''); ?></h1> <div> <div class="desc_l"></div> <div class="desc">The #1 Personal Development Website for Middle Age Guys</div> <div class="desc_r"></div> <div class="magmandatingsystem"><a href="(URL address blocked: See forum rules)/?page_id=176">Read more</a> about the <a href="(URL address blocked: See forum rules)/?page_id=176"><span style="color:#FF0000!important">MAGman Dating System</span></a> for Middle Age Guys</div> <!-- end #headline --> <div class="login"><a href="(URL address blocked: See forum rules)/?page_id=89">Members' Login</a> <p class="join"><a href="(URL address blocked: See forum rules)">Click here</a> to become a member.</p> </div> </div> <!-- end .container --> </div> <!-- end .header --> ______________________________________________ Finally, this is the source code ________________________________________________ <div id="header"> <div class="container"> <div class="topline"> <ul class="menu"> <li class="page_item"> <a href="(URL address blocked: See forum rules)">Home</a></li> <li class="page_item"> <a href="(URL address blocked: See forum rules)/?page_id=89" title="General information foundational to success in all other areas">MAGman Lifestyle</a> </li> <li class="page_item"> <a href="(URL address blocked: See forum rules)/?page_id=89" title="One of the three Pillars of any man's life - his relationships with others">Women & Relationships</a> </li> <li class="page_item"> <a href="(URL address blocked: See forum rules)/?page_id=89" title="The Pillar of a sound body is a middle age guy's call to reality">Health & Fitness</a> </li> <li class="page_item"> <a href="(URL address blocked: See forum rules)/?page_id=89" title="A man's third Pillar is his ability to do battle in the business world.">Business & Wealth</a> </li> <li class="page_item"> <a href="(URL address blocked: See forum rules)/magman-blog" title="MAGman's Blog">Blog</a> </li> <li class="page_item"> <a href="(URL address blocked: See forum rules)/feed/">Subscribe to RSS</a> </li> </ul> </div> <!-- end #topline --> <div id="magmanheadshot"> <img src="/wp-content/themes/blog-design-studio-newblue/images/mag_man4-Head-shot.gif" /> </div> <div id="headline"> <h1>Middle-Age-Guy.com</h1> </div> <div class="desc_l"></div> <div class="desc">The #1 Personal Development Website for Middle Age Guys</div> <div class="desc_r"></div> <div class="magmandatingsystem"><a href="(URL address blocked: See forum rules)/?page_id=176">Read more</a> about the <a href="(URL address blocked: See forum rules)/?page_id=176"><span style="color:#FF0000!important">MAGman Dating System</span></a> for Middle Age Guys</div> <!-- end #headline --> <div class="login"><a href="(URL address blocked: See forum rules)/?page_id=89">Members' Login</a> <p class="join"><a href="(URL address blocked: See forum rules)">Click here</a> to become a member.</p> </div> </div> <!-- end .container --> </div> <!-- end .header --> Thanks for any help you can bring. Scott Hi I've never posted on a forum before but I am having some css layout issues. Here is an example: URL Basically, only some of the links on the side of the page work. Some just can't be clicked on at all. I have noticed that the ones that can't be clicked on all seem to be parallel with text in the middle column that wraps. It's almost as if the text isn't wrapping in the middle column and carrying straight on and covering the links on the right so they cannot be clicked on. I'm assuming this is something to do with the css as it happens all over the site where the same situation occurs. Has anyone come accross this before or knows how to stop this from happening? Any help would be much appreciated. Also, this only happens in IE not in Firefox. If you need to see the code or the css let me know what you need and i'll post it. Thanks in advance, Bruce I'm trying to determine the best way to design a UI for a PHP application. There is a header portion with menu choices and a footer portion. There is also a background image 'picture frame' that sits in between the header menu and footer and gets loaded depending on the user's preferences. None of these three scroll. Within that picture frame, there is a center screen with a scrolling application. This portion would load different screens based on what was picked as a menu choice, and the user would scroll in the application if the particular screen were longer. Is the best way to do this using frames, or is there a better choice in terms of speed, browser compatibility, etc.? Thanks for your suggestions. Hello. Currently my site is all CSS. I know tables are terrible to some people but should I use a table for this portion of my site? Or should I wrap each member into a div then another dive for the image/postion and another div for name/description? Basically its just for the team members photo and description. It think I'll end up with a ton of divs so I think tables might be better. (unless there is an easy way to do it with limited amount of divs and CSS?) I m wondering if any body help me out regarding style sheet.. I m using an image as a background in a column of a table... I just want to display the lower portion of tht image while using it as a background..and cut down the upper portion...how can i achieve this in css style sheet? Code:
<table width="800" align="center" cellpadding="0" cellspacing="0"
style="">
<tr>
<td width="800" height="258" STYLE="background-image:
url('Images/mega/mega.gif');background-repeat:no-repeat"></td>
</tr>
</table>
I am trying to figure out how to nullify all of the previously set CSS styles in a portion of a page. Then, be able to set new styles to affect just that portion. The situation is this: Using a Wordpress theme, I have a single article that I want to be formatted completely differently than normal. However, there are css styles for things like <body>, <td>, <blockquote> etc (lots of them) that I already set in the theme itself. I don't want these theme-defined styles to affect the article portion, for this article only, and only for the article portion of the page. Is this possible, other than by re-declaring all the css values that are set in the theme? In my css I have the following to set up the height and width of the page to 100%: Code:
html, body {
font-family: verdana, arial, sans-serif;
color: #000000;
background-color: #E1E1E1;
margin: 0;
width: 100%;
height: 100%;
text-align: center;
}
For my website I have the following layout: Code:
<body>
<div id="container">
<div id="header"></div>
<div id="menu"></div>
<div id="main"></div>
<div id="footer"></div>
</div>
</body>
How do I get the <div id="main"></div> to fill in the remainder of the window height, without setting its height to 100% and them causing scroll bars and throwing the footer off the page. Simple question, but i'm trying to create a decent sized space in between my links, and make them white. I can make my links white, but can't seem to change the space inbetween them. HTML Code: div id="bar-links"> <center> <div class="content box1"> <table width="500" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td colspan="4"><img src="images/barlist_01.gif" width="500" height="23" alt=""></td> </tr> <tr> <td background="images/barlist_02.gif" width="20"></td> <td background="images/barlist_03.gif" width="456"> </p> <div id="bar-links"> <h4><a href="#" title="Riley's Pub">Riley's Pub</a> <a href="#" title="Ho Down Bar"style="color: #fff">Ho Down Bar</a> <a href="#" title="Depot Square"style="color: #fff">Depot Square Bar</a> <a href="#" title="Egans Pub"style="color: #fff">Egans Pub</a> </h4> </div> </td> <td background="images/barlist_04.gif" width="24"></td> </tr> <tr> <td colspan="4"><img src="images/barlist_05.gif" width="500" height="27" alt=""></td> </tr> </table> </div> CSS Code: #bar-links { text-indent:inherit; text-align:left; }
Hello, I am using an OS Commerce layout for a client's website. On this page - www.mts-diesel.com you will see how I have the homepage laid out in anticipation of design, with 3 divs of varying colors. One div with an id of #hp_left is where I want to put a nice jquery code. But when I insert that into #hp_left it breaks the whole layout, was seen here www.mts-diesel.com/index2.php I'm not sure what in the css in the code for this script is breaking my layout but Ithought someone here might be willing to shed some light. A big thank you. Tom I am working on the new home page which is based on a template. The left sideColumn is working fine, however I am having a few problems with the mainColumn layout. Here is a static image to show what I want it to look like Here are the problems I am having: 1) The #scroll box is place where I want it in IE but in foxfire it is right up against the left side of the #sideColumn partially hidden. There will be text that scrolls into this box and stops. I haven't started on the part yet - in case that makes a difference. Not my choice, but that is what the bosses want. 2) I want the image centered horizontal within the #mainColumn. Here is what I have for the css: #home img { margin: 5px auto 5px auto; } which I thought would do the trick, but it's not. 3) I want the p text to have a 40px margin on the right and left side like the .large does. Here is what I have for the css: #home p, .large { margin: auto 40px auto 40px; } It works for the .large (Welcome to Vitalograph), but not for the text below it. At one point I had it working, but after addtional changes fixing other problems, now it doesn't and I can't figure out why. Here is the xhtml starting at the 2 column part (wrapper): Code: <!--begin wrapper-->
<div id="wrapper">
<!--begin side column -->
<div id="sideColumn">
<span class="category">Products</span>
<ul>
<li><a href="/products/spirometers.html">Spirometers</a></li>
<li><a href="/products/clinical_trials.html">Clinical Trials</a></li>
<li><a href="/products/asthma_copd.html">Asthma & COPD</a></li>
<li><a href="/products/smoking_cessation.html">Smoking Cessation</a></li>
<li><a href="/products/resuscitaion.html">Resuscitation</a></li>
</ul>
<span class="category">Resources</span>
<ul>
<li><a href="/resources/contact_us.html">Customer Support</a></li>
<li><a href="/resources/training_services.html">Training & Services</a></li>
<li><a href="/resources/exhibitions.html">Exhibitions</a></li>
<li><a href="/resources/newsletters.html">Newsletters</a></li>
<li><a href="/resources/downloads.html">Downloads</a></li>
<li><a href="/resources/useful_links.html">Useful Links</a></li>
<li><a href="/resources/industry_information.html">Industry Information</a></li>
<li><a href="/resources/industry_information.html">Sitemap</a></li>
</ul>
</div>
<!--end of side column -->
<!--begin main column -->
<div id="mainColumn">
<!-- InstanceBeginEditable name="Main_Section" -->
<div id="home">
<div id="scroll"><span>scrolling news will go hear and stop</span></div>
<img src="/images/boys_bubbles.gif" width="485" height="333" alt="boys and bubbles" />
<span class="large">Welcome to Vitalograph</span>
<p>Vitalgraph offers a wide range of spirometers along with other asthma
management equipment with over 40 years experience. From simple hand-held
units to sophisticated Windows based spirometry systems, we have it
all. Check out our full line of respiratory equipment under the product
category.</p>
<p><a href="/about_us/about_us.html">more about us...</a></p>
</div>
<!-- InstanceEndEditable -->
</div>
<!--end of main column -->
</div>
<!--end of wrapper-->
Here is the vitalograph_master.css: Code: body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background-color: #ffffff;
color: #515151;
margin:0px;
padding:10px;
}
/*page container settings*/
#page {
width: 750px;
height: 600px;
border: 1px solid #5094F9;
background-color: #FFFFFF;
overflow: hidden;
margin: auto;
padding: 10px 10px 10px 10px;
text-align: left;
}
/*logo header and tag settings*/
#header {
margin: 0;
padding-bottom: 5px;
width: 450px;
height: 36px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
text-align: left;
}
#header img {
vertical-align: -7px;
}
.tagline {
color: #5094F9;
font-size: 16;
font-style: italic;
font-weight: bold;
display: inline;
clear: both;
line-height: 20px;
margin-left: 10px;
}
/*top bar settings*/
#topbar {
float: top;
height: 20px;
background-color: #5094f9;
clear: both;
padding-left: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:link, #topbar a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:hover, #topbar a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#topbar ul {
list-style: none;
margin: 0;
padding-top: 2px;
}
#topbar li {
display: inline;
margin-right: 160px;
}
/*Main Section two columns under top section*/
#wrapper{
padding: 10px 10px 10px 0px;
width: 100%;
height: 100%;
}
#sideColumn {
float:left;
width:155px;
height: 78%;
background-color: #5094F9;
padding-top: 50px;
padding-left:10px;
padding-bottom:10px;
pading-right: 10px;
margin-right: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-weight: bold;
line-height: 20px;
}
.category {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
letter-spacing: 5px;
}
#sideColumn a:link, #sideColumn a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#sideColumn a:hover, #sideColumn a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#sideColumn ul {
list-style: none;
padding: 15px 0px 15px 10px;
margin: 0px;
}
#mainColumn {
padding: 0px;
}
/*footer*/
.footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #999999;
}
/*text*/
.large {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
}
Here is the home.css: Code: /*home page*/
#home {
margin: auto;
}
#home img {
margin: 5px auto 5px auto;
}
#home p, .large {
margin: auto 40px auto 40px;
}
#home a:link, #home a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#home a:hover, #home a:active {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #990099;
font-size: 12px;
font-weight: bold;
}
#scroll {
width: 560px;
padding: 5px;
background-color: inherit;
border: 1px solid #5094F9;
margin-bottom: 5px;
}
Any help or suggestions are greatly appreciated. Hi there and thanks for reading & helping! I am new to this site, but here is my question: I need to build about a 20 page website. I have been told I should do the "layout" for each page using CSS. Is it possible for each page to "link" to one CSS file for layout instructions? I have found suitable CSS layout templates but am unsure how to link each page to the external CSS file for a basic "header, 2 column, footer" layout, or if it is even possible? Well I got sick of reading through tons of <td> and <tr> tags today so I sat down and tried to write my first CSS script ever. I got the basic idea of it and tweaked it using Firefox/Firebug to get it working great. The problem was I checked back in IE (since most people use it =/...) It looked all messed up and I tried changing a lot of things around and I just got frustrated. Since I am new to this whole thing with CSS, I don't know what to look for or change. I know that the top links are messed up but I will fix those after I get my layout working in both browsers. Can anyone help me out? www.etwcweb.com/ETWC.html Here is the CSS code also: Code: /* Main Part */
body {
font-family: Arial, Helvetica, sans-serif;
background: #333333 url(Images/mainbacknew.png) repeat-y;
font-size: 14px;
margin: 0px;
}
h1 {
font-size: 115%
font-weight: bold;
color: #000000;
}
p, ol, ul {
line-height: 145%
}
a {
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #CCCCCC;
font-weight: bold;
text-decoration: none;
}
ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin-left:0pt;
padding-left:0pt;
}
ul li {
list-style: url(Images/bluearrow.png);
padding-left:15px;
}
img {
border:medium none;
}
img.left {
float:left;
margin:5px 9px 0pt 0pt;
}
img.right {
float:right;
margin:5px 9px 0pt 0pt;
}
hr {
display:none;
}
/* Floating part of Page */
#main_content {
width: 800px;
margin: 0pt auto;
background: url(Images/bg_content.jpg) repeat;
}
#main_content a {
color: #000000;
text-decoration: underline;
}
#main_content a:hover {
color: #666666;
}
/* The Top Picture */
#top_area {
background: url(Images/CSSHeader.png);
height: 433px;
width: 100%;
}
#top_area li {
display: block;
}
#top_area a {
color: #FFFFFF;
display: block;
float: left;
padding: 40px 20px 0pt;
text-decoration: none;
}
/* Search Form */
.search {
float: right;
padding-right: 20px;
margin-top: 50px;
margin-bottom: 50px;
}
.search h1 {
color: #FFFFFF;
font-size: 150%;
}
/* Top Links */
#main_links {
/* background-color: #000000;
opacity: 0.7; */
width: 800px;
margin: 0pt auto;
}
#main_links ul {
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-left: 0pt;
padding-left: 0pt;
}
/* Right Side of Floating Page */
#stories {
background: transparent url(Images/bg_content.jpg) repeat;
width: 535px;
padding: 30px;
float: right;
margin: 0pt auto;
}
#stories h2 {
padding-left: 20px;
padding-top: 15px;
}
/* Left Side */
#left_bar {
background: transparent url(Images/bg_content.jpg) repeat;
float: left;
width: 205px;
margin: 0pt auto;
}
.left {
padding-right: 10px;
padding-top: 0px;
}
.left_list {
padding: 20px;
}
.left_list ul li {
border-top: 1px solid #CCCCCC;
padding: 10px 15px;
}
#left_bar h1 {
background: url(Images/LeftHeaders.png) repeat-x;
padding-left: 20px;
padding-top: 5px;
color: #FFFFFF;
}
/* Message */
#top_footer {
width: 800px;
margin: 0pt auto;
background-color: #666666;
color: #FFFFFF;
font-size: 90%;
font-weight: bold;
padding-top: 4px;
padding-bottom: 4px;
text-align: center;
line-height: 150%;
}
/* Bottom Links */
#links {
width: 800px;
margin: 0pt auto;
text-align: center;
background: #000000;
color: #FFFFFF;
font-size: 90%;
line-height: 160%;
padding-top: 8px;
padding-bottom: 3px;
}
#links a, #links a:hover {
text-decoration: none;
font-weight: bold;
}
#links .contact {
}
#links .contact a, #links .contact a:hover {
text-decoration: underline;
color: #0000CC;
}
Thanks in advance guys and sorry if this is already posted here, but my brain is frazzled and I couldn't find it with a quick search or three Hi, I'm new to using forums, and need a little help trying to fix an IE6 problem. My code is all valid, and i'm using xhtml strict. my page works fine in all the main browsers (including ie:7/8) just not ie6. Here is the problem i have. I have a div (links) which is 956px wide and i am floating 5 other divs (1-5) within the links div. The widths and padding for all of the 5 divs equals 956px's But for some reason the last div (lower5) is dropping out of alignment, it looks like ie6 thinks there is not enough room for all of the 5 divs to fit within the outer div. As you can see i have tried using line height:0; and that did not help. Here is my code...........Any idea's HTML: <div id="lower-links"> <div id="lower1"></div> <div id="lower2"></div> <div id="lower3"></div> <div id="lower4"></div> <div id="lower5"></div> </div> CSS: #links { margin:0; padding:0; background-color: #FFFFFF; width: 956px; height:374px; float: right; line-height:0; } #lower1,#lower3 { background-color: #FFFFFF; width: 161px; height:308px; float: left; padding-top:33px; padding-left:15px; padding-right:15px; line-height:0; } #lower2,#lower4 { background-color: #FFFFFF; width: 162px; height:308px; float:left; padding-top:33px; padding-left:15px; padding-right:15px; line-height:0; } #lower5 { background-color: #FFFFFF; width: 160px; height:308px; float: right; padding-top:33px; padding-left:15px; padding-right:15px; line-height:0; } moved on.... Hi Guys, Hope someone can help out here.. I am trying to create a page with a header and footer and a middle portion for the content. I am not used to using CSS and I thought I had it working but when I test in IE it doesn't quite work as expected.. The footer removes itself from the bottom of the page and the scrollbars for the maincontent extend below the footer.. You'll see what I mean if you open this in IE: http://www.modelglamorous.com/div_test.htm http://www.modelglamorous.com/css/mainstyle.css It works perfectly in Firefox but not in IE.. I think it's something simple but I am not sure how to fix it.. TIA, N. So I made a test design for a site, which I uploaded for testing HERE. The problem is that for a few borders to the navbar and such, an image needed to overlap them, so instead I made them very short div's and cut the image to fit inside the div, about 2px in height. Although this displays fine in firefox, in IE the small images do not show. At first it looked even worse in IE, until I implemented overflow: hidden; to make the div shrink to its actual size. Any recommendations? Is there a better way to do this, or an easy fix? Thanks in advance |
|||||||