|
CSS - Dynamic Page Length?
So, I want it so that depending on how much content there is on my page, it will be longer or shorter, so I don't have to stick to a fixed height.
Draft: I was thinking I need to use a code similar to this link. Would anyone care to help me out? Similar TutorialsHey, so I've just formatted my first table-free html page, using CSS. It's mostly cool, except that the page length doesn't mesh with the amount of content... http://mailwerx.ca/grundmans/about_us.htm The css is at... http://mailwerx.ca/grundmans/grundmans.css If anyone knows why this is happening, please tell me! I've played with this for hours! (And I know it's probably something small and stupid.) Thanks! -Jaeger Our pages all validate and work fine in all browsers (opera, firefox, mozilla, ie6, 5.5, nn >= 4.8) but in ie 5.01 the page content is far too long...a badly drawn ascii example: normal view: nav | content nav | content nav | content footer-------- problem in ie 5.01 Code: | content
| content
| blank
| blank
nav | blank
nav | blank
nav | blank
| blank
| blank
| blank
| blank
footer--------
Hope that makes some kind of sense. Basically IE is pushing the nav down, but it also seems to be adding the contents height below the nav as well Hi folks. I'm so new at CSS it's sad. I'm using a css template and I can't figure out how to get the page shorter. I tried adding overflow, tried setting it to auto or inherit. Pretty sure I'm way off. I see in the stylesheet it's set to be 1100px but I don't need it that long on every page. This is my first post here so I will wait to see if anyone wants me to post the stylesheet. Thanx so much for the help! It's a classic problem, but I was just wondering if anyone could give me some help on it. Heres the link to the webpage (note, none of the links or owt work, it's just filler for the mo): Code: http://users.aber.ac.uk/jdg8/WebSiteHelp/ I want to the make the sidebars on each side stretch to the bottom of the page (Down to the footer) but it won't seem to go. I've tried following googles advice and it's not working either. Here's the code: Code: body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background:#FFF;
height: 100%;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #FFF;
}
a:link{color:#00B800;}
a:visited{color:#39F}
a:hover{color:white; text-decoration:underline; font-weight:bold;}
#container {
width: 80%; /* this will create a container 80% of the browser width */
background: #666666; /* the auto margins (in conjunction with a width) center the page */
border: 3px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
height: 100%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#header {
background: #999999;
height: auto;
margin-left: auto;
margin-right: auto;
color: #390;
}
IMG.ukdm {
display: block;
margin-left: auto;
margin-right: auto;
}
/* Tips for sidebars:
1. Since we are working in percentages, it's best not to use side padding on the sidebars. It will be added to the width for standards compliant browsers creating an unknown actual width.
2. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the "#sidebar1 p" rule.
3. Since Explorer calculates widths after the parent element is rendered, you may occasionally run into unexplained bugs with percentage-based columns. If you need more predictable results, you may choose to change to pixel sized columns.
*/
#sidebar1 {
float: left; /* this element must precede in the source order any element you would like it be positioned next to */
width: 22%; /* since this element is floated, a width must be given */
height:100%;
background-color: #555555;
background-image:url(backgroundshizzle.jpg);
padding: 15px 0; /*top and bottom padding create visual space within this div */
}
#sidebar2 {
float: right; /* this element must precede in the source order any element you would like it be positioned next to */
width: 23%; /* since this element is floated, a width must be given */
height:100%;
background-color: #555555;
font-size:14px;
padding: 15px 0; /* top and bottom padding create visual space within this div */
text-align:center;
}
IMG.albumom {
display: block;
margin-left: auto;
margin-right: auto;
font-weight:bold;}
#sidebar1breaker {
width: 4%;
height:680px;
}
#sidebar1 p, #sidebar1 h3, #sidebar2 p, #sidebar2 h3 {
margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
margin-right: 10px;
}
#navi{
display:block;
margin-left: auto;
margin-right: auto;
text-align:center;
font-weight: bold;
font-size: 17px;
}
#aom{
font-style:italic;
}
/* Tips for mainContent:
1. the space between the mainContent and sidebars is created with the left and right margins on the mainContent div.
2. to avoid float drop at a supported minimum 800 x 600 resolution, elements within the mainContent div should be 300px or smaller (this includes images).
3. in the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs.
*/
#mainContent {
/* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the sidebar spaces when the content in each sidebar ends. */
font-size:12px;
margin-left: 3px;
}
#footer {
padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#999999;
text-align:center;
font-size:9px;
}
#footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain its child floats */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
It should be noted that I'm not totally sure about CSS and most of it is either stolen from dreamweaver or rehashed together from old websites I made. Any help I could get would be greatly appreciated. Cheers. I'm wanting to extend a div all the way to the bottom of the page to give the effect of a white column. How can I make it extend all the way to the bottom if the content is too short to make it do this? The example is at http://www.wattersisere.co.uk/devshed. Thanks, Watters Dear All, I have a question - Background : I used the E-book "designing without tables" and created a page with 2 columns. A 200 px column on the left for the links and the rest on the right for the data. There is also a header column on the top with has main menu. Question 1 : If there are 5 links on the left column, how can I link the pages such that when I click on a link on the left column..only the right column should refresh. Meaning, I want the left column to be static with the links and only the right column should be refreshed? Is it possible to do so using only CSS and HTML ? Thanks in advance. Regards. I have an image gallery. Code for the whole thing I've set below.The main image display window is set w/ a fixed position w/ this CSS code: Quote: #jgal li img { position: absolute; top: 20px; left: 220px; display: none; } I want to use it on dynamic php pages that have constantly changing content. I cannot w/ the fixed position. I need it to float correctly to the right of the thumb sidebar images. I've set it into my .tpl pages & it works well w/ no apparant css conflicts. But the main window is still fixed while the thumbs show wherever I place their code. Any ideas how I can float it all as a unit? Thanks, Gene PLEASE HELP ME I have an inline css tester that I built w/ help from W3Schools.com's CSS examples. > http://www.easysavannah.com/pmdinlinecsslinks.html Maybe this will help someone here. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Lightweight Image Gallery</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="imagetoolbar" content="false"> <meta name="description" content=""> <meta name="keywords" content=""> <style media="screen,projection" type="text/css"> /* general styling for this example */ * { margin: 0; padding: 0; } body { padding: 20px; } /* begin gallery styling */ #jgal { list-style: none; width: 200px; } #jgal li { opacity: .5; float: left; display: block; width: 60px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; } #jgal li img { position: absolute; top: 20px; left: 220px; display: none; } #jgal li.active img { display: block; } #jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ } /* styling without javascript */ #gallery { list-style: none; display: block; } #gallery li { float: left; margin: 0 10px 10px 0; } </style> <!--[if lt IE 8]> <style media="screen,projection" type="text/css"> #jgal li { filter: alpha(opacity=50); } #jgal li.active, #jgal li:hover { filter: alpha(opacity=100); } </style> <![endif]--> <script type="text/javascript">document.write("<style type='text/css'> #gallery { display: none; } </style>");</script> <!--[if lt IE 6]><style media="screen,projection" type="text/css">#gallery { display: block; }</style><![endif]--> <script type="text/javascript"> var gal = { init : function() { if (!document.getElementById || !document.createElement || !document.appendChild) return false; if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal'; var li = document.getElementById('jgal').getElementsByTagName('li'); li[0].className = 'active'; for (i=0; i<li.length; i++) { li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')'; li[i].style.backgroundRepeat = 'no-repeat'; li[i].title = li[i].getElementsByTagName('img')[0].alt; gal.addEvent(li[i],'click',function() { var im = document.getElementById('jgal').getElementsByTagName('li'); for (j=0; j<im.length; j++) { im[j].className = ''; } this.className = 'active'; }); } }, addEvent : function(obj, type, fn) { if (obj.addEventListener) { obj.addEventListener(type, fn, false); } else if (obj.attachEvent) { obj["e"+type+fn] = fn; obj[type+fn] = function() { obj["e"+type+fn]( window.event ); } obj.attachEvent("on"+type, obj[type+fn]); } } } gal.addEvent(window,'load', function() { gal.init(); }); </script> </head> <body> <ul id="gallery"> <li><img src="http://monc.se/kitchen/stew/gallery/images/je_1.jpg" alt="Josef & Erika 1"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/roland_ads_2.jpg" alt="Roland Ads"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/cd_2.jpg" alt="CD Cover 2"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/cd_1.jpg" alt="CD Cover 1"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/je_3.jpg" alt="Josef & Erika 3"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/je_2.jpg" alt="Josef & Erika 2"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/lktrd_poster1.jpg" alt="LKTRD Poster"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/je_4.jpg" alt="Josef & Erika 4"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/inside_1.jpg" alt="Inside Magazine"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/oceanen_4.jpg" alt="Oceanen"></li> </ul> <p style="clear: both; padding-top: 2em;">Link back to article: <a href="/kitchen/80/lightweight-image-gallery-with-thumbnails">Lightweight Image Gallery with Thumbnails</a>.</p> </body> </html>
Hello, I'm trying to make the left and right divs increase length with the centre (content) div. http://offhourscomputing.com/test.htm I've tried experimenting with using 100% and auto for the height, but that either makes the left and right sides exactly 100% of the height space in my browser or makes them disappear (using auto). Thanks. Alright, I am new to these forums since the other handful I have went through could not help me out. Here is my situation, I have a layout I am creating for a final project, and I have it set up so that the navigation is in a left column and the content for the actual page is in a right column, right. Both are right next to eachother which you can see below in this image: http://img232.imageshack.us/img232/...sitebug5la1.png My issue is that once the content within the Right Column expands beyond the browser and creates a scroll bar, the left column no longer expands it's background image to match up. All containers and elements have their height set to 100% that are involved. HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/css; charset=ISO-8859-1" /> <title>Digital Foundations Final Project</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="allcontent"> <!--PRINT LOGO--> <div id="logo_print"></div> <!--LEFT COLUMN--> <div id="left_column"> <!--NAVIGATION--> <ul> <li id="home"><a href="index.html"></a></li> <li id="students"><a href="students.html"></a></li> <li id="faculty"><a href="faculty.html"></a></li> <li id="facilities"><a href="facilities.html"></a></li> <li id="maps"><a href="maps.html"></a></li> </ul> <!--RIT LOGO--> <div id="logo_rit"><a href="http://www.rit.edu"></a></div> </div> <!--RIGHT COLUMN--> <div id="right_column"> <!--CONTENT--> <div id="header_home"></div> <div id="content"> <p class="text">Fusce ut justo sit lectus. Duisque dolorem in non erat, congue nullam fermenterdiet imper velit. Nam rutrum velis ac, doloreet ames iacus por sit amet malestibus sempus. Vivamus dissim et leo, pede sit sit ametus eu malestie vehiculis nonummy a, rhoncus ipsum primis senean ligula, felis et, ac risus</p> <p class="text">; In cubia tor varius met, venenatoque estibus et nunc vitae odio eget, loreet, blandis vulputate in, nunc ipsum. Nunc. Mauris. Suspendum. Nulla urna quam nunc. Nullam anteget dolorem in, vel, wisi. Nam primis varius. Quis quis nunc gravida. Vest eget hend ipsum sagittis, in et orci eu magna liberos</p> <p class="text">Integet in dui aliquet. Morbi eleifendum. Quis ligula, magnisse bibero nisl pede, congue nec vulputate ipsum dolor. Nulla varius ipsum primis neque. Suspend ero liberos in accumsan quis nonummy condit ametus non luctus. Pellent posuere consequam quam rhoncus orna. Duis met lectus lectum wisi at a or</p> <p class="text">atis pellus felit, erat turpiscing ris nullamcorper estibus non orci sempus. Classa ante in ornaretra tempus ac augue. Morbi ut neque. Sed sodalesuada sit a, cursus et dolor, aliquam et, diam rutrum sempus orci bibendis lor. Nam eu convallicies metuer leo. Vivamus erat. Vivamus sit lacus wisis sit a</p> <p class="text">wisi. Sed ut, condissim turpis wisi. Aliquat libero. Cras dictus dictus in augue nunc. Donec, diam sed, eget, at ligula mollicies at eu wisi. Vestassa met diam varius. Quis parturpis. Nunc a mauristiquat faucibus sapibus a, magna arcu ad lacilis imper commodo et fermenas sed, phare. Alique euismod p</p> </div> </div> </div> </body> </html> CSS: Code:
html, body {
background-color: #262626;
margin: 0;
padding: 0;
height: 100%;
}
#allcontent {
width: 800px;
margin: 0 auto 0 auto;
padding: 0;
height: 100%;
min-height: 100%;
}
#logo_print {
width: 702px;
height: 209px;
background-image: url(images/logo_main.png);
background-repeat: no-repeat;
margin: 0;
}
#logo_rit {
width: 204px;
height: 51px;
background-image: url(images/logo_rit.png);
background-repeat: no-repeat;
margin: 50px 0 10px 0;
}
#logo_rit a{
width: 204px;
height: 51px;
background-image: url(images/logo_rit.png);
display:block;
}
/*----LEFT SIDE OF PAGE----*/
#left_column{
background-image: url(images/BG_left.png);
background-repeat: repeat-y;
margin: 0;
width: 204px;
height: 100%;
float: left;
}
/*--NAVIGATION--*/
ul{
margin: 0;
padding: 0;
list-style: none;
}
li#home{
background-image: url(images/nav_home.png);
width: 205px;
height: 52px;
display: block;
}
li#home a{
background-image: url(images/nav_home.png);
background-position: 0 0;
height: 52px;
width: 205px;
display: block;
}
li#home a:hover{
background-image: url(images/nav_home.png);
background-position: 204px 0;
}
li#students{
background-image: url(images/nav_students.png);
background-repeat: no-repeat;
width: 205px;
height: 52px;
}
li#students a{
background-image: url(images/nav_students.png);
background-position: 0 0;
height: 52px;
width: 205px;
display: block;
}
li#students a:hover{
background-image: url(images/nav_students.png);
background-position: 204px 0;
}
li#faculty{
background-image: url(images/nav_faculty.png);
background-repeat: no-repeat;
width: 205px;
height: 52px;
}
li#faculty a{
background-image: url(images/nav_faculty.png);
background-position: 0 0;
height: 52px;
width: 205px;
display: block;
}
li#faculty a:hover{
background-image: url(images/nav_faculty.png);
background-position: 204px 0;
}
li#facilities{
background-image: url(images/nav_facilities.png);
background-repeat: no-repeat;
width: 205px;
height: 52px;
}
li#facilities a{
background-image: url(images/nav_facilities.png);
background-position: 0 0;
height: 52px;
width: 205px;
display: block;
}
li#facilities a:hover{
background-image: url(images/nav_facilities.png);
background-position: 204px 0;
}
li#maps{
background-image: url(images/nav_maps.png);
background-repeat: no-repeat;
width: 205px;
height: 52px;
}
li#maps a{
background-image: url(images/nav_maps.png);
background-position: 0 0;
height: 52px;
width: 205px;
display: block;
}
li#maps a:hover{
background-image: url(images/nav_maps.png);
background-position: 204px 0;
}
/*--END NAVIGATION--*/
/*----RIGHT SIDE OF PAGE--*/
#right_column{
background-image: url(images/BG_right.png);
background-repeat: repeat-y;
width: 498px;
float: left;
margin: 0;
height: 100%;
}
#header_home{
width: 498px;
height: 71px;
background-image: url(images/header_home.png);
}
#header_students{
width: 498px;
height: 71px;
background-image: url(images/header_students.png);
}
#header_faculty{
width: 498px;
height: 71px;
background-image: url(images/header_faculty.png);
}
#header_facilities{
width: 498px;
height: 71px;
background-image: url(images/header_facilities.png);
}
#header_maps{
width: 498px;
height: 71px;
background-image: url(images/header_maps.png);
}
#content {
width: 498px;
background-image: url(images/BG_right.png);
background-repeat: repeat-y;
}
p.text{
font-family: Times New Roman, Times, Palatino Linotype, Book Antiqua, Serif;
text-align: left;
padding: 10px 10px 10px 10px;
text-indent: 20px;
}
/*---Letter Linking--*/
p.letters{
font-family: Times New Roman, Times, Palatino Linotype, Book Antiqua, Serif;
text-align: center;
}
p.letters a{
font-family: Times New Roman, Times, Palatino Linotype, Book Antiqua, Serif;
text-align: center;
color: #FF6600;
}
p.letters a:hover{
color: white;
text-decoration: underline, overline;
}
/*---PROFILE IMAGE SETTINGS--*/
.profile{
float: left;
margin: 10px 10px 10px 10px;
width: 200px;
height: 200px;
}
.profile_text{
font-weight: normal;
font-family: Times New Roman, Times, Palatino Linotype, Book Antiqua, Serif;
text-align: left;
}
.bold{
font-weight: bold;
}
Both the CSS and XHTML are valid Any help is much appreciated. Hi, I need some expertise in trying to get equal length columns on a site. I'm completely revamping a site and having trouble with a two column layout. The right column just stops halfway down the page. What am I doing wrong. The CSS is body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; } p { padding: 10px; } ul { list-style-type: disc; display: list-item; } li { } h1 { padding: 10px; text-align: right; font-size: 20px; } h3 { font-size: 14px; font-weight: bold; } ,clear { clear: both; display: block; height: 1px; overflow: hidden; margin: 0; padding: 0; } #wrapper { margin: 0 auto; float:left; width: 100%; } #topadsense { float:left; padding: 10px 10px 10px 10px; } #bookmarking { float:left; padding: 10px 10px 10px 10px; } #printerfriendly { float:right; padding 10px 10px 10px 10px; } #content { float: left; color: #333; background: #FFFFFF; width: 50%; display: inline; } #pagecontent { float: left; color: #333; background: #FFFFFF; width: 75%; display: inline; } #header { color: #333; width: 100%; float: left; margin-left: 0px; margin-right: auto; height: 250px; background: #FFFFFF; } #pageheader { color: #333; width: 100%; float: left; height: 75px; background: #FFFFFF; } #footer { clear: both; width: 100%; position: relative; text-align: center; color: #000; background: #FFFFFF; } #footerbreak { width: 100%; height: 25px; clear: both; margin-left: auto; margin-right: auto; text-align: center; color: #FFF; background: #000000; } #supportfooter { float:left; } #navigation { float: left; width: 100%; height: 25px; color: #333; background: #CC0033; } #leftcolumn { color: #333; background: #EBE3CD; width: 25%; float: left; } #rightcolumn { color: #333; background: #EBE3CD; width: 25%; float: left; display: inline; } #footerleft { color: #000; background: #FFF; width: 33%; float: left; margin-left:auto; margin-right: auto; } #footerright { color: #000; background: #FFF; width: 33%; float: left; margin-left:auto; margin-right: auto; } #footermiddle { color: #000; background: #FFF; width: 33%; float: left; margin-left:auto; margin-right: auto; } #redcolor { color:#CC0033; text-align: center; font-weight:bold; } #topheader { margin-left:auto; margin-right: 0px; } and the page has this setup: <HTML> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>PC Hell: How to Start Windows in Safe Mode</title> <link rel="stylesheet" type="text/css" href="/common/style.css" /></head> <body> <div id="wrapper"> <div id="pageheader"> <h1>How to Start Windows in Safe Mode</h1> </div> <div id="navigation"> </div> <div id="wrapper"> <div id="pagecontent"> <div id="topadsense"> <!--#include virtual="/adsense336.txt" --> </div> <div id="bookmarking"> <!--#include virtual="/bookmarks.txt" --> </div> <div id="printerfriendly"> <A href="/print/printpage.php"><b>Printer Friendly Version </b><img src="/images/printicon.gif"></A> </div> Main body of content is placed here <div id="supportfooter"> <!--#include virtual="/support/supportfooter.txt" --> </div> </div> <div id="rightcolumn"> <p><!--#include virtual="/adsense.txt" --> </p> <br /> <br /> <p align="center"><!--#include virtual="/searchtables2.txt" --> </p> </div> </div> <div class="clear"></div> <div id="footerbreak"><strong>Recommended Software for PC Hell Visitors</strong> </div> <div id="footer"> <!--#include virtual="/indexfooter2.txt" --></div> </div> </body></html> Any help is appreciated. I have a wrapper div that should do the trick, but its not working. Thanks, Mark Hi everyone. This is my first venture into laying out pages using style sheets. If you have a look at the attached image you will see what I need done. Please ignore the pink lines, it's ust my graphic designer slicing up images. I'm pretty sure that I can create the colors, borders, positioning etc. I just don't know how to make the left column grow with the right column when more text is added. Help anyone? Thanks in advance. The picture you can see is part of a PSD which I'm now "converting" into html... anyway, I'd like to know whether there is a CSS attribute that can define the exact width of borders? I've got a site I've started to work on: domosworld.net I want it setup so the three middle columns are equal width? I set right/left borders on the middle content, but am worried that perhaps the right side will be longer than the middle which will cause the layout not to look right. What is the best way to achieve the equal columns? Hello, I have 2 questions - hope that ok moderator? First. My sidebar, it bugs me. I would like for it be the same length as the #Maincontent, but It is either to long or to short...Does anybody have a idea for a solution? Second. I would like to have a picture next to the #maincontent, on the right, from top to bottom, and parallel to it, and a bit out. (Sorry I don't know the correct English term). Kind of like the lines next to the sidebar - which is a background image for #sidebar. I already got a background image on body. Is This possible? In advance, thanks for any help or advice. And I can't post url... so here is some CSS: Code: html { margin-top: 20px; }
body { padding: 0px; background-color:#e6e2bf; background-image: url('imgs/bag.png'); background-repeat:repeat-x; background-position: top right; padding:30px; margin-bottom:0px;}
#wrap { width: 850px; height: 500px; padding: 0px; margin-left: auto; margin-right: auto; background-image: url('imgs/right.png'); background-repeat:repeat-y; background-position: top right;}
#maincontent {position: relative; left: 230px; float: left; text-align: left; width: 580px; min-height: 500px; margin-left:10px; background-color:#fff; z-index:2; }
#header { background-color: #e5edf2; width: auto; height: 100px; margin-bottom: 30px; top:35px; z-index:3;}
#footer { width: 100% height: 50px; margin: 0px auto 30px auto; color: #FFFFFF; background-image: url('imgs/bund.png'); }
#sidebar {position:absolute; top: 0px; text-align: left; padding-top: 40px; padding-bottom:200px; width:auto; height:100%; padding-right:10px; z-index:4; background-image: url('imgs/sidebar_bag.gif'); background-repeat:repeat-y; }
#logo {position: relative; right: 40px;}
I have a three column layout. The third column is empty except for a background image which I'd like to be the same length as the main (content) centre column. This would ensure the background image in the right column is at the same length as the main content Any ideas how I can do that? The site is weary.me.uk/MT and the CSS is weary.me.uk/MT/css/threeColumn.css Thank you so much Hi, My page has 3 elements: one at the top(header banner), one in the middle (a middle content area) and one at the bottom (footer banner). Now I want those positions to remain intact regardless of the number of lines output in the middle element. The content is going to be determined at runtime by a server-side routine so I don't want to use a fixed positioning for the footer banner. I want it to be displayed at the bottom - after the middle content is displayed. And I want the middle content to be visible in the page i.e. I don't want a scroll area within the page. I have tried various approaches and read up on positioning but so far have not been able to do it using css. Any help is much appreciated. Jim EDIT:: Simplier way to write the question ^.^ :: When I scroll off the menu/link onto the first link in the submenu it stays, but when I mvoe down to the next item in the submenu it disappears. (My drop down is vertically aligned on the left.) (bits of the code that relate to the menu) PHP Code: .btn1 { position: absolute; left: 165px; top: 200px; } .btn2 { position: absolute; left: 165px; top: 240px; } .btn3 { position: absolute; left: 165px; top: 280px; } .btn4 { position: absolute; left: 165px; top: 320px; } .btn5 { position: absolute; left: 165px; top: 360px; } .btn6 { position: absolute; left: 165px; top: 400px; } .btn7 { position: absolute; left: 165px; top: 440px; } .btn8 { position: absolute; left: 165px; top: 480px; } .link1 { position: absolute; left: auto; top: 240px; } .link2 { position: absolute; left: auto; top: 280px; } .link3 { position: absolute; left: auto; top: 320px; } .link4 { position: absolute; left: auto; top: 360px; } .link5 { position: absolute; left: auto; top: 400px; } .link6 { position: absolute; left: auto; top: 440px; } .link7 { position: absolute; left: auto; top: 480px; } .link8 { position: absolute; left: auto; top: 520px; } .link9 { position: absolute; left: auto; top: 560px; } #nav, #nav ul { padding: 0; margin: 0; list-style: none; } #nav a { display: block; width: 100px; } #nav li { width: 100px; } #nav li ul { position: absolute; width: 100px; left: -9999px; display: none; top: 0; z-index: 3; } #nav li:hover ul { display: block; left: 266px; z-index: 3; } #nav li:over ul { display: block; left: 266px; z-index: 3; } PHP Code: <ul id="nav"> <li><a href="HOBmain.htm"><img class="btn1" src="../mainbtn.gif" width="100" height="38" alt="MainBtn"></a></li> <li><a href="HOBmain.htm"><img class="btn2" src="../blogbtn.gif" width="100" height="38" alt="BlogBtn"></a> <ul> <li class="link1"><a href=""><img src="../mbtn.gif" alt="bMainBtn"></a></li> <li class="link2"><a href="#"><img src="../anmbtn.gif" alt="bAnimeBtn"></a></li> <li class="link3"><a href="#"><img src="../mgabtn.gif" alt="bMangaBtn"></a></li> <li class="link4"><a href="#"><img src="../gmebtn.gif" alt="bGameBtn"></a></li> <li class="link5"><a href="#"><img src="../bookbtn.gif" alt="bBookBtn"></a></li> </ul> </li> <li><a href="HOBmuse.htm"><img class="btn3" src="../musebtn.gif" width="100" height="38" alt="MuseBtn"></a> <ul> <li class="link2"><a href="HOBmuse.htm"><img src="../mbtn.gif" alt="mMainBtn"></a></li> <li class="link3"><a href="HOBmuse.htm"><img src="../pmbtn.gif" alt="mPoemBtn"></a></li> <li class="link4"><a href="HOBmuse.htm"><img src="../stybtn.gif" alt="mStoryBtn"></a></li> <li class="link5"><a href="HOBmuse.htm"><img src="../drmbtn.gif" alt="mDreamBtn"></a></li> </ul> </li> <li><a href="HOBodd.htm"><img class="btn4" src="../oddbtn.gif" width="100" height="38" alt="ComicBtn"></a> <ul> <li class="link3"><a href="HOBodd.htm"><img src="../mbtn.gif" alt="cMainBtn"></a></li> </ul> </li> <li><a href="HOBart.htm"><img class="btn5" src="../artbtn.gif" width="100" height="38" alt="ArtBtn"></a> <ul> <li class="link4"><a href="HOBart.htm"><img src="../mbtn.gif" alt="aMainBtn"></a></li> <li class="link5"><a href="HOBart.htm"><img src="../recbtn.gif" alt="aRecentBtn"></a></li> <li class="link6"><a href="HOBart.htm"><img src="../gaibtn.gif" alt="aGaiaBtn"></a></li> </ul> </li> <li><a href="HOBpic.htm"><img class="btn6" src="../picbtn.gif" width="100" height="38" alt="PicsBtn"></a> <ul> <li class="link5"><a href="HOBpic.htm"><img src="../mbtn.gif" alt="pMainBtn"></a></li> <li class="link6"><a href="HOBpic.htm"><img src="../recbtn.gif" alt="pRecentBtn"></a></li> </ul> </li> <li><a href="HOBfaq.htm"><img class="btn7" src="../faqbtn.gif" width="100" height="38" alt="FaqBtn"></a></li> <li><a href="HOBcon.htm"><img class="btn8" src="../contactbtn.gif" width="100" height="38" alt="ContactBtn"></a> </li> </ul> <script type="text/javascript" src="drop_down.js"></script> the "nav" is referring to a bit of js, and this is in my header. Also not sure if it's correct, but I can worry about that later. link: The Page Good Morning All, Been having a slight problem with the visual in the screenshot below. The blue line is our H2, and the purple one is our H3, however, as you can see, the underline spans the entire width of the column, not just underneith the text, which is our requirement. ***As i am not allowed to upload a url as a new user, the underline is as follows. With the text centre aligned. text ----------------------------------------------------------- rather than text ------ and obviously by the css, the underline on the headers is a small image, repeated - x. Please see relevant css information. * (line 23) { margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; } h2, h3, h4, h5, h6 (line 101) { font-size: 1.2em; font-weight: normal; padding-bottom: 4px; margin-top: 0.6em; margin-right: 0pt; margin-bottom: 0.8em; margin-left: 0pt; text-align: center; } .contentArea h2, #secondaryNavigation h2 (line 114) { background-color: transparent; background-image: url("../images/h2_gradient_bg.gif"); background-repeat: repeat-x; background-attachment: scroll; background-position: left bottom; color: #0066cc; } Many Thanks in advance. Marc. I am a HTML&CSS novice - I am trying to write a page using a three column layout but the column colour doesn't reach the footer. I understand that this is a common problem and I've looked at a lot of examples on the web of how to work around this or create a better layout but I'm still not sure enough to know which would be the easiest and best to go within the page I have written. I want to avoid images but other than that any help would be great! I have validated the HTML & CSS and they are copied below (could any advice be really specific, as I said this is very new to me!). Thanks HTML: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Drivers Jonas Information Unit</title> <meta name="keywords" content="1" /> <link rel="stylesheet" type="text/css" href="djiucss.css" media="screen" /> <link rel="stylesheet" type="text/css" href="djiuprintcss.css" media="print" /> </head> <body> <div id="top"> <div id="picture"> <img src="GIF.gif" alt="DJ" width="200" height="100" /> </div> <div id="heading"> <div id="title"><h1>Drivers Jonas Information Unit</h1></div> </div> </div> <div id="left"> <br/><p><a href="about.html">About us</a></p><br/> <p><a href="company.html">Company Information</a></p><br/> <p><a href="legal.html">Legal information</a></p><br/> <p><a href="landreg.html">Land Registry</a></p><br/> <p><a href="research.html">Research</a></p><br/> </div> <div id="right"> <div id="title"><h2> News </h2></div> <ul> <li>The Information Unit has recently acquired a set of new APC guides</li> <li>If you would like any training on databases</li> <li>The Information Unit has created an economy timeline </li> </ul> </div> <div id="main"> <div id="title"><h2>Main stuff</h2></div> <p>Suspendisse adipiscing malesuada lectus. Cras vitae dolor. Donec consequat, lectus sed euismod consequat, ipsum mi mollis nunc, eget nonummy neque purus a tortor. Ut vel lorem. Curabitur mollis mauris id diam. Nam posuere. In placerat sapien ut nisl. Donec volutpat augue ut velit. Proin nec mi sit amet metus placerat egestas. Quisque porttitor massa eu lacus. Donec tristique, neque in sollicitudin euismod, enim tellus varius mauris, id vestibulum est massa id massa. Integer et purus. Vivamus condimentum tincidunt ipsum. Duis augue lorem, pretium vel, cursus at, vulputate sed, neque. Quisque justo. Nunc rhoncus. In ornare venenatis velit. </p> <p>Donec facilisis ante sit amet mauris. Nunc fermentum orci eu quam. Donec vestibulum. Vestibulum ultricies nisl eu eros. Curabitur urna. Duis enim erat, lobortis nonummy, mollis non, porttitor nec, nisi. Phasellus pulvinar purus eu pede. In mollis. Duis sit amet dui et arcu rhoncus auctor. Integer est dui, pharetra vel, volutpat ac, luctus in, elit. </p> <p>Suspendisse adipiscing malesuada lectus. Cras vitae dolor. Donec consequat, lectus sed euismod consequat, ipsum mi mollis nunc, eget nonummy neque purus a tortor. Ut vel lorem. Curabitur mollis mauris id diam. Nam posuere. In placerat sapien ut nisl. Donec volutpat augue ut velit. Proin ne</p> </div> <div id="bottom"> Drivers Jonas Information Unit </div> </body> </html> CSS: #top /*DJ logo and page title - includes h1*/ { color: black; font-family: arial, sans-serif; font-size: 20px; background: #d31145; padding-bottom: 15px; } body { color: black; font-family: arial, sans-serif; font-size:14px } img /*DJ logo*/ { padding: 20px; float:left; } #heading { text-align: center; padding:20px; } /*main page title*/ /*should change all reds to DJ red: #d31145*/ #left, #right, #main { color: white; background: black; } #left { float: left; width:140px; border-right:2px solid #d31145; text-align:left; padding-left: 1em; } #right { float:right; width:140px; border-left:2px solid #d31145; text-align:left; padding-right: 1em; } #main { margin-left: 150px; margin-right: 150px; border-left: 1px solid; border-right: 1px solid; padding: 1em; } #bottom { clear:both; margin: 0; color:black; background: #d31145; font-size: 16px; font-family: Arial, sans-serif; text-align: center; } #title { text-align:center; } a:link {color:white} a:visited {color:silver} a:hover {color:#d31145} a:active {color:#d31145} I am generating a list with PHP that is going to be printed out and hung up for display. I would prefer if the following weren't printed. 1) Top Left - Page Title (I know I can have this disappear by having a blank title, but I would prefer to have one) 2) Top Right - Page URL 3) Bottom Left - Page number (ex: 1 of 2) 4) Bottom Right - Date Is there any way to print the list without these? I wasn't sure if there is some css I can use, or if this is something that the printer prints automatically. Thanks |
|||||||