|
CSS - Position Footer When Left Nav Is Longer Than Right Content (was "css Issues")
ok at Rodoslovlje I have an issue. The menu on the left is most of the times longer then the right content part. Is there a way to fix that when this occurs I can make the right part move along without editing every page and hitting enter 20 times?
Thnx Similar Tutorialshttp://cheers-sendai.com/fluidframe.htm has a great and simple example of 3 cols (OK, 2 cols in the middle section makes "4 cols"), header and sticky footer, where the middle col has overflow:auto so it can be scrolled. GREAT example, I think (due to the use of bg colors, etc.). The left/right/width values of the divs are manipulated so that the middle section runs from 10% to 90% and the left/right divs fill in accordingly. I'd like to be able to set, for example, the left and right divs to be 150 px wide (NO percentages!) and have the middle section stretch between them (regardless of viewport width) and be able to be scrolled, too. The problem I see is that most examples use percentages. I can set the left div to be a fixed width, then set the middle section left coord. to be, say, 150px, but then I need to set its width to stretch to "150 to the left of the right side of the viewport" and I don't know how to do this. Thanks. I'm using the CakePHP framework to build my site. I hope I'm not asking an impossible question and being since I'm new an all.. Anyways I finished a simple design well I thought it was simple anyway until I tried to make the content box to be a fluid width. Here's what it's supposed to look like. http://planet-rpg(dot)com/PR_style.png // yes I know I'm a new user.. Here's what I currently have. http://planet-rpg(dot)com Here's my coding. html Code:
<?php echo $html->docType('xhtml-trans'); ?>
<html>
<head>
<title>Planet RPG::. Imagine a creative universe : <?php echo $title_for_layout; ?></title>
<?php echo $html->css('styles'); ?>
</head>
<body>
<div id="top_bar">
<p>top bar</p>
</div>
<div id="body">
<div id="header">
<p>Header</p>
</div>
<div id="page-wrap">
<ul id="navigation">
<li class="first"><a href="/games/">Games</a></li>
</ul>
<div id="frame">
<div id="container">
<div id="main_content">
<p>Content area</p>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<p>footer coding</p>
</div>
</body>
</html>
css Code:
html {
background: #2b435d;
}
html, body {
margin: 0;
}
body, table {
color: #303030;
}
img { border: 0; }
#body {
background: #d8dde8;
padding: 0 0 16px;
}
#page-wrap {
min-width: auto;
margin: 10px auto;
}
#frame {
margin: 0 auto;
padding: 0px 1170px 0px 220px;
margin-top: -17px;
}
#main_content {
background-color: #fff;
}
#header {
background: url("../img/header.png") repeat-x bottom left;
height: 64px;
margin-top: 36px;
}
#navigation {
background: url("../img/navigation.png") repeat-x bottom left;
height: 31px;
margin-top: -20px;
font-family: "Arial", sans-serif !important;
font-size: 14px;
color: #fff;
text-shadow:-1px -1px 0 black;
list-style-type: none;
padding:1px 5px 1px 220px;
}
#navigation li {
float: left;
}
#navigation li a {
border-left: 2px solid #303030;
text-shadow:-1px -1px 0 black;
color: #D0D0D0;
font-size: 14px;
font-weight: bold;
text-decoration: none;
display: block;
height: 21px;
padding: 6px 12px 1px;
}
#navigation li a:hover {
color: white;
text-shadow:-1px -1px 0 black;
}
#navigation li.first {
padding-left: 236px;
margin-left: -236px;
text-shadow:-1px -1px 0 black;
}
#navigation li.first a {
background: url("../img/cursor.png")bottom center no-repeat; height:24px;
color: #6193c7;
border: 0;
text-shadow:-1px -1px 0 black;
}
#logo {
width: 166px;
height: 50px;
margin-top: -32px;
margin-left: 20px;
position: absolute;
z-index: 2;
}
#footer {
background: #607080 url("../img/footer.png") repeat-x;
height: 60px;
padding: 30px 0;
clear: both;
}
#top_bar {
background: url("../img/top_bar.png") repeat-x bottom left;
height: 36px;
font-family: "Arial", sans-serif !important;
font-size: 12px !important;
font-weight: normal !important;
height: 36px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 5;
}
I haven't used CSS/html in awhile but if anyone can help me either "fix" the content box so it appears like mockup which would be centered on my screen as my resolution is 2560X1600(30") and just repeat the <div's> when needed. Hope someone can help me with my question. I'm taking over a departmental web page that has a whole bunch of Code: <body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0"> in the web pages. Does anyone know how to put this in a stylesheet so that I don't have to put this code in every <body> tag when I create a new page? I've searched all over and can't find a reasonable resolution. Thanks I have seen sites that have their content centred, but when you make the browser window smaller, their left margin gets lost. When the right hand edge of the browser window touches the right edge of the content I would like the left margin to reduce proportionally until it's all gone. I know auto margins will do something like this, but when I tried that my content continually moved as the window is resized. I only want the left margin to reduce when the window is too small for the content. I have looked at the sites that work like this but generally they are very complicated and as a beginner I cannot isolate which bit allows this to happen. I have a small test page below. What would I need to add/change to make my left margin get lost when the window gets smaller. I have a link to the same code so you can see how it looks in the browser. http://www.cv2.co.uk/margins.html I have kept the CSS in the main file just to keep it simple. Thanks Code: <html>
<head>
<style>
#main {
background:red;
width:500px;
margin-left:200px;
}
</style>
<body>
<div id="main">This is content</div>
</body>
</head>
</html>
Hi all, My first post here as I am struggling a bit with some CSS and i'm not sure where I am going wrong. My brother built a site based on a template, but he needed some help with maintenance and both the html and css code was complete crap. So I have started rebuilding the site from scratch to make it easier to maintain, and am copying a few bits and peices across from the old site to speed up the process. One such peice was the nav menu. As it stands the menu displays properly and the rollovers work etc, however it has some sort of mystery padding to the left hand side that I can't shift. Please can you take a look at the files and let me know where i'm going wrong? www [dot] dubtrippin [dot] com/test.html Cheers, Paul. I'm wondering what's the alternative to the "MARGIN: 0px auto;" where I need the -1px for the margin-left and margin-right as oppose to auto for margin-left and margin-right?? Code: MARGIN: 0px auto; Thanks, FletchSOD Hey all, See on http://yourfishguide.com/Main_Page the grass at the bottom is 'siting' on the bottom of the page? Then on http://yourfishguide.com/Your_Fish_Guide:About it's a little above the bottom of the page. How can I make the grass "stick" to the bottom of the page, regardless of the length of the content above it? Thanks, Jordan what is the equivilant to <table border="1" cellpadding="2" cellspacing="0"> in css? i've tried PHP Code: table { border-spacing: 0px; padding: 0px; border-colapse: colapse; border-style: solid; border-width: 1px; } td { border-style: solid; border-width: 1px; padding: 2px; } That makes the width 2px wide though. I want it to only be one. And the padding seems to be messed up as well. I am working with a dynamic page of search results where a link that should reveal a hidden layer could occur multiple times. My problem is that I need the popup layer to position relative to the link that called it, NOT to the whole page. Right now, now matter which link is clicked it shows up in the same place on the page. I have found many examples where this is the desired effect, multiple links affecting a single result area, but I can't find an example for what I need. It's similar to a sub-menu being relative to a drop-down parent, but those all seem to use lists. This shouldn't be that complicated! Thanks for any help! Here is what I've got: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <title>Popup Test</title> <style type="text/css" media="screen"><!-- div#outer { position: relative; display: none; margin: 0; } .inner { padding-bottom: 4px; background-color: #ccc; text-align: center; position: absolute; left: 0px; top: 30px; width: 256px; border: solid 1px #333; } .inner img { border: 1px solid #333; } --></style> <script type="text/javascript"> function toggleLayer(whichLayer) { if (document.getElementById) { // this is the way the standards work var style2 = document.getElementById(whichLayer).style; style2.display = style2.display? "":"block"; } else if (document.all) { // this is the way old msie versions work var style2 = document.all[whichLayer].style; style2.display = style2.display? "":"block"; } else if (document.layers) { // this is the way nn4 works var style2 = document.layers[whichLayer].style; style2.display = style2.display? "":"block"; } } </script> </head> <body> <table width="740" border="0" cellspacing="0" cellpadding="0"> <tr valign="top" height="100"> <td class="searchresult" colspan="2" valign="top" width="740" height="120"> <div id="outer"> <div class="inner"> <a href="javascript:toggleLayer('outer');" title="Click to Close"><img src="http://www.google.com/images/logo_sm.gif" alt="Google" height="55" width="150" border="0" vspace="3"><br> Close</a> </div> </div> <a href="javascript:toggleLayer('outer');">popup link 1</a> </td> </tr> </table> <table width="740" border="0" cellspacing="0" cellpadding="0"> <tr valign="top" height="100"> <td class="searchresult" colspan="2" valign="top" width="740" height="100"> <div id="outer"> <div class="inner"> <a href="javascript:toggleLayer('outer');" title="Click to Close"><img src="http://www.google.com/images/logo_sm.gif" alt="Google" height="55" width="150" border="0" vspace="3"><br> Close</a> </div> </div> <a href="javascript:toggleLayer('outer');">popup link 2</a> </td> </tr> </table> </body> </html> 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 have a single column CSS layout with a "sticky" footer. In the main column, I have a two column block resulting in a sidebar / main content set-up. Without the two-column block, the stick footer works fine. I can fill the page with 1000 lines of text, simple content DIVs, whatever. But the two-column block breaks it. See it he http://siliconsatan.com/test.php Can't figure out why (I'm a CSS noob, it's probably obvious) Any ideas? Hello, Here's my Page: www.imagesandwords.org.uk/andrewjamesrp/ Inside the < div> #main is a line of text styled like this: Code: #opener
{
clear: both;
position: relative;
bottom: 1em;
width: 718px;
height: 25px;
text-align: center;
color: #484848;
}
Without position: relative the layout breaks down and I am not sure why. Surely a child/descendent element is relative to it's parent anyway? Also, can anyone tell me what the clear:both does in this context? I have an idea that you use it after a float and in my mind I understand it as a chance to clear the slate of any float inlfluence on future elements? Many thanks Martin First post here by the way, so go easy on me! Is posting a link forbidden? Hello, I followed this example that "should" working (not to me): http://lau.csi.it/realizzare/accessibilita/fogli_di_stile/position/completo.htm ]float[/URL] and I wrote my css: Code:
body { background-color: white; color: black; padding: 10px; }
div.footer {
padding: 0.5em;
color: white;
background-color: gray;
clear: left;
border: Solid 2px;
}
div.footer .middle {
margin: 0 15%;
border: Dashed 2px;
}
div.footer .right {
width: 15%;
float:left;
margin-right: 10%;
border: Dashed 2px;
}
div.footer .left {
float:left;
width: 15%;
margin-left: 0%;
border: Dashed 2px;
}
<div class="footer">
<div class="left"> Hiya!!! </div>
<div class="middle">Hello everybody</div>
<div class="right">
Copyright 2011 by EX
</div>
</div>
If I put the margin of the link, it doens't show the content of "left" and "right" part; if I use the margins as I wrote here above, it doens't show the content of "right". What I want is: a footer with a sign on the left (with the text left aligned), a sign in the middle, and one on the right (with the text right aligned). I thin that the problem are not just the margins. Can anybody help, please? http://stuweb.cms.gre.ac.uk/~as234/full/full.htm some problems: in IE the menu at the top is "block" level but i want it to be in a line? whereas in ff its ok! in ff, one of the menu image (called "main" on the left of review) doesnt appear but if u hover over it, u will see the rollover image! the background colour should be grayish however that DOESNT happen! Hi all, I'm having some trouble with my code for a CSS nav bar. I'm all new to this so am not sure where to start. At present my nav bar is working fine. The only problem I am having is when one hovers over a new drop down item the parent doesn't change back to the non hovered state, it remains showing background image for the hover. Here is my test page... http://www.seattleunderground.co.uk/testmenu.html and here is the CSS code... Code: .menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 100% "Marker Felt", "Comic Sans", sans-serif;
font-size:15px;
font-weight:bold;
}
.menu ul{
background:#000000;
height:150px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
width:150px;
padding:0px;
}
.menu li a{
background:url("images/BkgButtonUp.png");
color:#ffffff;
display:block;
font-weight:normal;
line-height:48px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background:url("images/BkgButtonHov.png");
color:#000000;
text-decoration:none;
}
.menu li ul{
background:url("images/BkgButtonUp.png");
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:150;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
background:url("images/BkgButtonUp.png");
display:block;
float:none;
margin:0px;
padding:0px;
width:150px;
}
.menu li:hover li a{
background:url("images/BkgButtonUp.png");
color:#ffffff;
}
.menu li ul a{
display:block;
height:48px;
font-size:15px;
font-style:"Marker Felt", "Comic Sans", sans-serif;
margin:0px;
padding:0px 10px 0px 15px;
text-align:center;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:url("images/BkgButtonHov.png");
border:0px;
color:#000000;
text-decoration:none;
}
.menu p{
clear:left;
}
Please can some kind soul check this out and tell me where I need to add what lines to have the parents change back to BKGButtonUp.png. I want each item to turn white as I go through them. Thanks v.much. P.s. Is it possible to use Marker Felt Wide as the font? At the mo the writing is quite small, and changing font size shifts everything. I used Marker Felt Wide on the main site, but created my nav menu using Flash at first. Flash is causing some issues however so I must change to CSS to fix things. www.seattleunderground.co.uk Best regards, Ash Okay, I've been working really hard on getting myself set up with a static header on my website (one that doesn't move) using "position: fixed;" in CSS, though it recently came to my attention that Internet Explorer refuses to recognize a fixed position unlike most other browsers. Is there an alternative I can use in Internet Explorer to ensure that the div I create never moves when the page scrolls? Any help would be greatly appreciated, as I'm about to rip my last strand of hair out of my head over this. (I originally posted this at the end of another of my topics but I don't think it was seen). I have just noticed this problem in firefox (may happen in other browsers) but I couldnt make it happen in IE6. After the first load of the page or after a "hard refresh" (ctrl + F5) the middle and right column do not "shift up" and leave a gap. (see attached picture). But if I refresh (just F5) firefox shifts them up to display the page as it should be seen. Example Picture The site itself. Any ideas? Hi, I'm trying to build a nav using css, I need to style each <li> within the nav becuase they need to be different lengths on the page. I have had it working fine on IE but I can'#t get it working for for any other browser. Does soneone know how I can style each of my list items accordingly, notice the different block lengths for each one which is very important. I have tried both id="Style" and class="Style" and no joy, I have also tried #nav ul li li li li li a:hover in my style without id or class in my HTML Here is my Html PHP Code: <DIV id="nav"> <ul> <li id="1"><a href="Home">Home</a></li> <li id="2"><a href="About-us">About us</a></li> <li id="3"><a href="FlexNews">FlexNews</A></li> <li id="4"><a href="Careers">Careers</A></li> <li id="5"><a href="Contact">Contact</A></li> </ul> </div> Pretty straight forward, now my css PHP Code: #nav { width:1005px; vertical-align: middle; text-align: left; } #nav ul { list-style: none; padding: 0; margin: 0; } #nav li { float: left; text-align: left; } #1 a{ line-height: 20px; float: left; width: 215px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #1 a:hover { line-height: 20px; float: left; width: 215px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #2 a{ line-height: 20px; float: left; width: 211px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #2 a:hover { line-height: 20px; float: left; width: 211px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #3 a { line-height: 20px; float: left; width: 211px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #3 a:hover { line-height: 20px; float: left; width: 211px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #4 a { line-height: 20px; float: left; width: 184px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #4 a:hover { line-height: 20px; float: left; width: 184px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #5 a { line-height: 20px; float: left; width: 183px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; } #5 a:hover { line-height: 20px; float: left; width: 183px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; } Here is an exmple link http://dev.121design.co.uk/flextrade2/ Works fine in IE but not in Firefox, heres hopling someone can help. Thanks in Advance, tried so many different methods and none seem to work. Cheers, Stuart Hi guys, For a pure CSS site, is it still necessary to have height="82" and width="82" in <img ... /> ? Moreover, is it depreciated to have a size="25" tag in <input elements? (I know it could ba handled in CSS but nice to have directly in the html). Thank you |
|||||||