|
CSS - Problems With Footer. Any Advice?
I am having problems with my footer once I resize my to make my page have to scroll left to right. It displays fine until I do this. It makes my footer background not display all the way.
Here is my css for reference: Code: .footerWrapper {
margin: 20px 0 0 0;
padding: 0;
width: 100%;
background: url(../images/content123bg.png) repeat-x;
}
.footer {
margin: 0 auto;
padding: 0;
width: 960px;
height: 155px;
}
.footer img {
margin: 10px 0 0 0;
float: right;
}
.footer h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: normal;
color: #09F;
text-decoration: none;
text-align: center;
padding: 10px 0 10px 0;
margin: 0;
width: 145px;
}
h3.facts {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: normal;
color: #09F;
text-decoration: none;
text-align: center;
padding: 10px 0 10px 0;
margin: 0 0 0 -3px;
width: 145px;
}
.footer p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #CCC;
text-decoration: none;
text-align: center;
width: 140px;
margin: 0 0 0 2px;
padding: 0 0 5px 0;
}
.footer p a {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
font-weight: normal;
color: #999;
text-decoration: underline;
}
.footer p a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
font-weight: normal;
color: #FFF;
text-decoration: none;
}
#twitter_t {
margin: 0;
padding: 0;
}
#twitter_t img {
width: 150px;
height: 50px;
margin: 0;
border: none;
padding: 0 230px 0 0;
/* [disabled]float: left; */
position: relative;
}
#twitter_m {
width: 370px;
padding: 0 10px 0 0;
background:url(../images/twiiterbubble.png) no-repeat;
float: right;
height: 140px;
margin: -40px 0 0 0px;
border: none;
}
#twitter_container {
min-height:45px;
height:auto !important;
height:40px;
padding-bottom:10px;
/* [disabled]padding-right: 10px; */
}
#twitter_update_list {
width: 350px;
padding: 0 0 0 20px;
overflow: hidden;
font-family: Georgia;
font-size: 14px;
font-style: italic;
color: #000;
line-height: 16px;
font-weight:bold;
}
#twitter_update_list li {
width: 350px;
list-style: none;
margin: 60px 0 0 0;
}
#twitter_update_list li a {
color: #FFF;
border-bottom: dotted 1px;
text-decoration: none;
}
#twitter_update_list li a:hover {
color: #09f;
}
Here is my HTML: Code: <div class="footerWrapper">
<div class="footer">
<div class="fltlft">
<h3>Quick Links</h3>
<p><a href="http://www.beckin.com/">Home</a></p>
<p><a href="http://www.beckin.com/portfolio.html">Portfolio</a></p>
<p><a href="http://www.beckin.com/css-menus.html">CSS Menus</a></p>
<p><a href="http://www.beckin.com/free-templates.php">Templates</a></p>
</div><!-- end fltlft -->
<div class="fltlft">
<h3>Help</h3>
<p><a href="http://www.beckin.com/support/">Custom Quotes</a></p>
<p><a href="http://www.beckin.com/support/">Support</a></p>
<p><a href="http://www.beckin.com/support/">Webmasters</a></p>
</div><!-- end fltlft -->
<div class="fltlft">
<h3 class="facts">Facts</h3>
<p><a href="#">Privacy Policy</a></p>
<p><a href="#">Terms of Use</a></p>
</div><!-- end fltlft -->
<div id="twitter_t">
<a href="http://twitter.com/beckindesigns"><img src="images/top.png" alt="free web templates" /></a>
</div><!-- end twitter_t -->
<div id="twitter_m">
<div id="twitter_container">
<div id="twitter_update_list"></div>
<!-- end .twitter_container --></div>
<!-- end .twitter_t --></div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/beckindesigns.json?callback=twitterCallback2&count=1" type="text/javascript"></script>
<!-- end .footer --></div>
<!-- end .footerWrapper --></div>
Any help with this would be very appreciated. Similar TutorialsHello all, I had a question about the CSS file I was using for my site. I have a multi-column setup, with header, nav, content, right column, and footer as the columns. Now everything except the footer are together. The footer is spaced from the rest of the page, and I'd like it to connect to the bottom of the page. My CSS: * { padding: 0; margin: 0; } body { font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #000; background-color: #3b5999; } h1 { font-family: "Trebuchet MS"; font-size: 20px; color: #000; } h3 { font-family: "Trebuchet MS"; color: #000; font-size: 12px; } A:link { font-family: Verdana; font-size: 12px; color: #000; text-decoration: none; border: 0; } A:visited { color: #000; text-decoration: none; border: none; } A:active { color: #000; text-decoration: none; border: none; } A:hover { color: #8CC1DF; text-decoration: none; } #wrapper { margin: 0 auto; width: 922px; } #header { width: 900px; padding: 10px; height: 100px; background-image: url(background.png); background-repeat: no-repeat; } #navigation { float: left; width: 900px; height: 42px; margin: 0px 5px 0px 0px; text-align: center; font-family: Arial; } #content { float: left; background-color: #fff; font-family: "Trebuchet MS"; font-size: 12px; color: #000; padding: 10px; height: 350px; width: 683px; margin-left: auto; margin-right: auto; overflow: auto; } #rightcolumn { background: #fff; padding: 10px; margin: 0px 0px 5px 0px; height: 350px; width: 195px; float: left; } #footer { width: 920px; height: 40px; padding: 10px; clear: both; margin: 0px 0px 10px 0px; background-image: url(footer.gif); background-repeat: no-repeat; font-family: Arial; color: #000; } Thanks in advance! I can't get a footer after at bottom of the page. The problem is my maincontent area is dynamic in size although i have edited this out. The footer appears to the left of maincontent and not at bottom. Code: ...
div#headerWrapper {
position:absolute;
top:5px;
left: 5px;
background: #63625e ;
width:1000px;
height:120px;
top:3px;
left: 5px;
border:2px groove black;
}
div#header {
position:relative;
top:5px;
left: 5px;
width:990px;
height:100px;
background: black;
border:5px groove #63625e ;
}
div#boxlayer1 {
position:absolute;
width:145px;
height:700px;
z-index:1;
left: 5px;
top: 125px;
border:2px groove black;
// background: green;
background-color:#63625e;
}
div#content1 {
position:absolute;
top:125px; /*border adds 2 px so i take them off*/
left: 165px;
width:850px;
height:900px;
z-index:1;
border:5px groove #666862;
background: black;
}
#footer {
clear:both;
float:none;
width:200px;
height:100px;
background: red;
border:5px groove #63625e ;
}
.....
</head>
<body bgcolor="#666862"> <?php include("navigation2.php"); ?>
<div id="navlist">
<div id="headnavlist">Site Features</div>
<ul >
<li ><a href='login.php'>Upload</a></li>
<li><a href='home.php'>Home</a></li>
<li ><a href='login.php'>Send Mesage</a></li>
<li><a href='home.php'>Message Outbox</a></li>
<li ><a href='login.php'>Upload</a></li>
<li><a href='home.php'>Home</a></li>
<li><a href='home.php'>Message Outbox</a></li>
</ul>
</div>
</div>
<div id="content1" >
asfafas
</div> <br><br>
<div id="footer">
asdsa
</div>
</body>
</html>
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. Firefox renders the page correctly, but IE likes to place the footer in random positions throughout the page. Not sure what's happening here. Look here. Once the page is cached, and the link is selected again, the footer displays correctly. This is very strange. If you clear your cash or refresh the page, it screws the footer up again. The happens on several pages. These are CSS sections for clearfooter and footer. Code:
#clearfooter {
clear: both;
height: 1em;
overflow: hidden;
}
#footer p {
position: absolute;
bottom: 1px; /* Fix for Mozilla spacing from bottom */
left: 150px;
height: 1em;
width: 534px;
color: #ffffff;
text-align: center;
padding: 3px;
margin: auto;
font-weight: bold;
font-size: .6em;
}
I appreciate any help on this... Thanks, Darin Hi all, I have a page with a sticky footer. It's all working great thanks to the sticky bottom tutorial from Ryan Fait. I already contact him but his wrists are broken so he can't do anything. This is the website we're talking about: - www .rokjesdagloop .nl And here is the deal: - As you can see the footer stays at bottom so I insert the sticky bottom tutorial wich lead us to this: www .rokjesdagloop .nl /test .php But I want the footer a little bit inside the content so the text overlaps the girl a bit on the background. I tried several things on the margin's and the heights but still nothing that works. Does anybody have tips or codes? Would be great! Thank you in advanced! Regards, Jonathan Hello! I am new to dreamweaver CS3 and need help with these two things: when I preview my site in IE my lightbox does not work. And my sticky footer does not stick to the bottom of the page. Please someone help me. Thank you in advance! Hey everyone, So I'm working on a website for a client and I am running into a bit of a weird problem.. The home page displays as follows: http://www.beitelligent.com/clients/keldan/index.php As you can see, the footer is pushed to the absolute bottom - where it should be.. this is displaying correctly. I began to make sub-pages and ran into the problem, where the footer isn't pushing to the bottom.. http://www.beitelligent.com/clients/keldan/about.php - Any ideas?? Any help is appreciated. Thanks, Peter Barbosa Hello, I am trying to change the layout of my journal which is based on CSS. The codes doesn't come from me. I found it two years ago on a free layout website where all layouts are allowed to be changed if there are credits given for the original style sheed. I am afraid my problem is pretty simple. I don't know very much about programming and CSS, just very few. So please snap at me immediately if I don't understand fast enough or don't give you exactly the answers you need. Anyways I will give my best! My problem: I want to change the footer and something what is supposed to be called the header. I would say: Let's concentrate on the footer at first. I want to change both from their background color to an image. The text still have to be able to be read. I have read something about putting the footer in the body but there is my normal background of the whole journal and I think it would make problems this way. Well I don't know if the codes are messy. I changed a few colors and positions but even that not fully until now. I hope you can get a clue what is my problem! And thank you so far! Here are the codes from my footer: Quote: #footer { text-align: center; font: 7pt arial, sans-serif; background: #fff url(here would stand the image url but as newbie I am not allowed to post urls, you know the rules) repeat; color: #BBBBBB; z-index: 100; clear: both; border: 0px; padding: 10px; } I've been puzzling over this for a while now! I'm trying to make the footer stick to the bottom of the page even when the content isn't long enough. I have read many tutorials but none of them ever seem to work out quite right. I have created two pages to demonstrate the problems that I am having. http://www.explosiveracing.net/xmed...all_content.htm This is a page without much content and as you can see the footer is pushed to the bottom. All is well in FF but in IE the footers background seems to randomly disappear. Sometimes on a refresh it reappears but I cant work out what is causing it. http://www.explosiveracing.net/xmed...ong_content.htm This page has a large amount of content that pushes the footer further down. In IE though, the content partially overlaps the footer and the background image also still randomly disappears! Any ideas? I'm having trouble with my website structure... view this page for an example... css is here... The Footer (which currently consists just of the validation images) is suppossed to be at the bottom of the page... It works in IE except there is a little line between the images (it is also part of the link...), and it doesn't work at all in FF... how do I get rid of the line in IE, and what do I need to add or change in my css to get it to be viewed properly in FF? Thanks Bryan Hi Guys, I've had a hunt around the forum but haven't yet found anything too specific, so here goes... Basically, I have a design all done in photoshop and ready to be physically created in CSS, no problem there, I can do that. However, I really need to be able to implement some content management into this site and am a little stuck on the best way to go. I've been on google and looked at solutions, downloaded Joomla so far, but this looks like it could be very difficult to get my design into it, so to speak and I'm not so hot on PHP. The templates in Joomla seem quite complex and look nothing even close in layout to my design! Does anyone have any advice on a good CSS based CMS (ideally free!) that I can easily integrate my own design to? If anyone has any experience or advice on doing this, it would be much appreciated. I don't need to be able to do anything massively complicated, just apply my own design, with some content pages, news etc. Any advice/suggestions, very much appreciated! Thanks Jon I want to start using em to specify widths and heights, specifically because of the fact that it correlates with the font size. However, the problem I'm having is that I have no idea what the conversion between % for width and em would be. I'm not worried about height in this fashion, simply because vertical scrolling isn't ugly, but if I specify too high of an em for width, that makes a layout span the entire page for my browser, someone else might not have the same effect, and thus scroll horizontally. Should I just stick to use em for height and % for width? I really want to use em though...need advice on this. Hi, I am quite familiar with css - have a few books on the subject but always struggle when trying to work with a design of my own. I guess where I struggle is in what to do first ... how do I work ... my work flow. I always seem to get part of it right but then as I go further ... I find that my next step might undo my previous ... so I end up with a maze or positioning problems etc. I struggle with getting everything positioned properly ... not sure why. I was hoping someone could start me off in the right direction ... you a what to do first series of steps ... or maybe a workflow from someone more exprienced in the design area of things - I'm more of a backend kinda guy. Really anything would help ... Thanks I had posted in another thread about this but it's been awhile and I am not sure if that thread is still "alive" so to speak. Here is what I am after - www.tmhdesign.com/buzza.jpg Here are my attempts: www.tmhdesign2.com www.tmhdesign2.com/default2.asp www.tmhdesign2.com/default3.asp I have come close in IE but in Firefox it bombs. I can't fathom how that bottom background can be positioned so the text in the navigation and content divs can sit on top of it. okay i want to make myself a website and to make it decent i seem to need to know HTML, PHP, CSS etc etc :s it all seems really hard i know quite a bit of macromedia flash and i know quite a bit of html but i am all new to CSS and PHP. CSS from what i can gather is what i need to know and i don't have a clue about it can somebody give me a link to an easy tutorial for CSS? or if anyone knows where i can start? most tutorials i just end up giving up on because i just can't be bothered reading any further thanks fir reading this i just need to know the basics so i can have a play around with and teach myself. Daz Would you all please peek at this layout, www.tmhdesign.com/buzza.jpg and give me some advice on the structure you'd use. I see a two column layout with a footer and header. I did not lay this out but rather it was given to me by a clients' graphic artist. I am curious to know if you think it will work. I am a bit challenged with the bottom swoosh that is in both the left hand column and the right main body. The designer has main body text going into what I would think would be the footer area? Hi all, I have modified a wordpress theme for my website and its nearly perfect except for an issue where my photo is being cutoff and I have had a look but it appears to be beyond my skill level and is making me pull my hair out. Would REALLY appreciate if anyone can solve this one for me! hmmm I cannot post the url yet as i am new dubdubdub.lightwork.co.nz/?p=1 is the url please replace dubdubdub with www thanks that is the url and its the second image down, the larger image. It works fine in firefox and ie7, but in ie6 (which it needs to work in it is being cutoff as you can see. Any help would REALLY be appreciated. happy to do something in photoshop or whatever in return Mark Hello, I am working on a web site with a two column layout, "Content" on the left and "Sidebar" on the right. Sidebar 1) Sidebar is divided into sections (div). Each section has header. Content Content can display the following data (each is a different page): 2) In HomePage.html a list of blog articles is displayed. Each blog article has a title. 3) In ShowArticle.html a specific article is displayed (Title, Body, Tags). 4) In Documents.html a list of documents is displayed but in this case the page has a title and a subtitle. For example: Documents here you can find all the documents you need. 5) In Contact.html a title with subtitle is displayed just as in (4). After the title and subtitle there is only paragraphs with the contacts. So basically that's it ... I am trying to figure the correct way to use <h1>, <h2>, etc. The text font, weight and color is always the same ... what changes is the size. For example, if in HomePage the Post Header could be <h1> because there is no page title, in Documents there is a page title and a subtitle (should be this a paragraph? it's more like a description phrase then a section separator). So in Documents each Document could have <h3> ... And if there is a Page Title (h1) then should side bar have <h2>? I suppose it is more correct to be h1.Sidebar. And in ShowArticle I am displaying one article. Should I use the <h1> in the title? Then it would be the same tag then in Sidebar section ... I have been looking in a few web sites and blogs and they differ ... Anyway, I am just trying to make this right ... Any help is welcome. Thanks, Miguel Hello, Here's the site, it's being built on a CMS called Sitestaker. http://www.mera.sitestacker.com I can't for the life of me fix all the messed up positioning. here is my CSS. I used another CSS file from a previous site, so there are duplicates and who knows what else I am missing so I can easily lay this thing out. Where can get some CSS templates that I could use to start out a new site. the cms is using Cake PHP if that helps any. I am not a programmer and it is driving me nuts attempting to do the job of one. thanks for your help. I have managed with my other sites, but I can't fix this one. www.theinlan.com Code:
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
line-height: 16px;
color: #666;
background-color:#FF9933;
margin: 10 10 10 10;
}
#header {
background-color:#FFFFFF;
margin-right: auto;
margin-left: auto;
width: 1000px;
height: 133px;
}
#header_right{
}
#search {
width: 150px;
margin-left: 10px;
float: right;
}
#header_container {
background-color:#cc6600;
width: 800px;
margin-left: auto;
margin-right: auto;
}
#header_wrapper {
width: 100%;
margin-right: auto;
margin-left: auto;
height: 133px;
background-color: #cc6600;
/*/#cc6600/*/
}
#menu_wrapper {
width: 900px;
/*/background:url(images/mera_slice_09.jpg) repeat-x;/*/
margin-right: auto;
margin-left: auto;
}
#menu {
background-color:#333333;
width: 900px;
padding: 10px 0px 0px 0px;
font-size: 14px;
font-weight: bold;
}
#menu .item {
float:left;
width: 120px;
margin-right: auto;
margin-left: auto;
height: 30px;
padding-top: 13px;
text-align:center;
}
#menu a {
color: #666666;
text-decoration:none;
}
#menu a:hover {
color: #CCC;
}
#menu .main_menu {
float:left;
}
#breadcrumbs {
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
font-family:Verdana, Geneva, sans-serif;
font-size: 9px;
color: #666;
margin-left: auto;
margin-right: auto;
width: 750px;
}
/*/#r1c1 {
width: 100%;
height: 38px;
}/*/
#r1c1 {
background-color:#CC9966;
/*/Dan's New Stuff/*/
width: 180px;
float:left;
/*/ width: 800px;/*/
/*/padding: 40px 0px 0px 20px;/*/
font-size: 14px;
margin:30px 10px 10px 10px;
padding: 10px;
/*/font-weight: bold;/*/
}
#r1c1 .item { /*/ controls positioning of menu items & text/*/
width: 175px;
height: 30px;
text-align:middle;
background:url(/data/sites/34/images/merabutton.png);
background-repeat:no-repeat;
padding:5px 0px 0px 0px; /*/controls positioning/*/
}
#r1c1 a { /*/ this is the menu font styling/*/
color: #333333;
text-decoration:none;
padding:5px 0px 0px 10px;
}
#r1c1 a:hover { /*/ this is the menu button hover color/*/
color: #999999;
}
#r1c1 .main_menu {
}
#r1c2 {
margin-left: auto;
margin-right: auto;
width: 640px;
}
#r2c2 {
padding: 15px 0px 15px 15px;
margin-left: auto;
margin-right: auto;
width: 700px;
float: left;
}
#r3c2 {
margin-left: auto;
margin-right: auto;
width: 750px;
}
#r2 {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#r4 {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#r2c2 .title {
font-size: 24px;
font-family:Georgia, "Times New Roman", Times, serif;
font-weight: bold;
line-height: 40px;
}
#content_area {
background-color: #e6ebba;
width: 1000px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
}
#content_bg { /*/ white content area with dropshadow edges/*/
width: 1275px;
margin-left: auto;
margin-right: auto;
background: url(images/me) repeat-y ;
/*/height: 1000px;/*/
/*/padding-left: 40px;
padding-right: 45px;
}
/*/
#mainpositions{ /*/ look at tables created in index to see how it was done
tables ,once formatted work the best to hold together
two column layout accross browsers./*/
width:900px;
margin-left: auto;
margin-right: auto;
}
#footer_wrapper {
/*/
background:url(images/mera_slice_02.jpg) repeat-y;
width: 100%;
margin-top: 0px;
position: bottom;
/*/
}
#footer {
background:url(/data/sites/34/images/footer.png) repeat-x;
/*/width: 100%;/*/
margin-left:auto;
margin-right:auto;
/*/ color: #FFF9933;
text-align:center;
padding-top: 30px;/*/
height:369px;
}
#r3c1 {
padding: 10px 10px 10px 10px;
}
#r2 {
}
.cells {
padding: 10px 10px 10px 10px;
vertical-align: top;
text-align: left;
}
#menu .style .menu .submenu_item {
background: url(images/dropdown.png) repeat-x;
height:27px;
text-align: left;
font-size: 12px;
padding-left:10px;
padding-right:14px;
padding-top: 10px;
width: 900px;
cursor: pointer;
}
#menu .style .menu .submenu_item_children {
}
#menu .style .menu .submenu_item:hover{
color: #ccc;
}
#menu .style .menu .submenu_item:hover > div > a{
color: #CCC;
}
#menu .style .menu .submenu_item a {
text-decoration:none;
color:#6699FF;
}
.submenu_item, .submenu_separator {
display:none;
position:absolute;
}
HERE IS THE INDEX FILE PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>{{PAGE_TITLE}}</title> <base href="{{BASEHREF}}" /> <link href="{{CSS_HREF}}" rel="stylesheet" type="text/css" /> <script type="text/javascript" language="javascript" src="{{JS_SRC}}" ></script> <style type="text/css"> <!-- body { margin-left: auto; margin-top: 0px; margin-right: auto; margin-bottom: 0px; } --> </style> <meta name="verify-v1" content="mQhyWuqXn58ls4L3sIdz1oujvxtwMSi8YIWGW8HPAGg=" /> {{HEAD}} </head> <body> <div id="header_wrapper"> <div id="header_container"> <div id="header" tpl_position="header">{{HEADER}}</div> <div id="header_right" tpl_position="header_right">{{HEADER_RIGHT}}</div> <div id="search" tpl_position="search">{{SEARCH}}</div> </div> </div> <div id="menu_wrapper"> <div id="menu" tpl_position="menu">{{MENU}}</div> </div> <div id="content_area"> <table id="content_bg" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <div id="breadcrumbs" tpl_position="breadcrumbs">{{BREADCRUMBS}}</div> <div id="r1c1" tpl_position="r1c1">{{R1C1}}</div> <div id="r2c2" tpl_position="r2c2">{{R2C2}}</div> <div id="r3c2" tpl_position="r3c2">{{R3C2}}</div> </td></tr> </table> </div> <div id="footer_wrapper"> <div id="footer" tpl_position="footer">{{FOOTER}}</div> </div> </body> </html> Hello, I'm a self taught web designer, i've not really got much experience of CSS and i'm having a few issues with some alignment. I'm in the process of developing a site for my cousin, what i'm trying to achieve is the left menu to be at the top of the page, and the text to be in the center of the screen, as i'm new here i'm not able to post a link to my site, so have posted the CSS below. Playing with css and looking at Google I've padded the text so its where i want it, but i can't get the menu to come up from below the text. Any help / links in the right direction would be really appreciated. Code for the text: Code: p.mainbody
{
z-index: 1000;
vertical-align:top;
padding-left: 200px;
padding-right: 250px;
text-align:left;
code for the menu: Code: /* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
ul.MenuBarVertical
{
vertical-align:top;
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 10em;
/*height:10em;*/
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{ z-index: 1000; }
/* Menu item containers, position children relative to this container and are same fixed width as parent */
ul.MenuBarVertical li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 10em;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
{
margin: -5% 0 0 95%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
width: 8.2em;
left: -1000em;
top: 0;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible { left: 0; }
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li { width: 8.sem; }
/******************************************************************************* DESIGN INFORMATION: describes color scheme, borders, fonts *******************************************************************************/
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical { border: 1px solid #CCC; }
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul { border: 1px solid #CCC; }
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
{
display: block;
cursor: pointer;
background-color: #EEE;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
{
background-color: #33C;
color: #FFF;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
{
background-color: #33C;
color: #FFF;
}
/******************************************************************************* SUBMENU INDICATION: styles if there is a submenu under a given menu item *******************************************************************************/
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/******************************************************************************* BROWSER HACKS: the hacks below should not be changed unless you are an expert *******************************************************************************/
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarVertical iframe
{
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarVertical li.MenuBarItemIE
{
display: inline;
float: left;
background: #FFF;
}
}
Many Thanks |
|||||||