Jump to content

Trouble With HTML Table Layout


holmedwa04

Recommended Posts

Dear AllI am having great trouble with a HTML Table layout on a website that I am creating. I have one table that has a row across the top that is 100% width and has a column span of 3. Then the next row has 3 columns, one that is 15% one that is 70% and one that is 15%. In side the three cells there are the navigation table the main page table and also a blank table for the side panel. These are all set to 100% so they fill the cells that they are in.The main table described with top row and 3 other columns is set to 100% width.Now for some reason unbeknown to me when I add content to sub tables or nested tables it starts changing the width of the columns in the main table. I can't for the life of me work out why.Any help would be much appreciated and if anyone wants any code or screen grabs etc. please do not hesitate to ask, I just didn't want to post more than was needed.Kindest Regards EdwardEdit: Just a quick note, this view okay in resolutions above 1024 by 768, I am trying to get it to work in 1024 by 768. All content of nested tables is the right size to ensure that it is not stretching things etc.

Link to comment
Share on other sites

  • Replies 65
  • Created
  • Last Reply

Tables are a bad way of doing page layout. Nested tables are much worse.Tables were used for layout back then when CSS didn't exist and there was no better way to lay out pages, but that was about 8 years ago.These days, we use CSS and <div> elements to layout the page. It makes pages load faster, and once you get used to it, it's easier to manage than tables.

Link to comment
Share on other sites

Tables are a bad way of doing page layout. Nested tables are much worse.Tables were used for layout back then when CSS didn't exist and there was no better way to lay out pages, but that was about 8 years ago.These days, we use CSS and <div> elements to layout the page. It makes pages load faster, and once you get used to it, it's easier to manage than tables.
I know :) but I don't like the sounds of trying to do what I am trying to do using CSS. It sounds very confusing the only thing that I am using CSS to do at the moment is to set fonts and headings and hyperlinks etc. I suppose I could try CSS based layout but how hard would it be with the layout that I have got?
Link to comment
Share on other sites

I don't know how exactly you want your layout to look, but I do know that it's not easy to control the width of tables, and nesting tables is usually a bad practise, and can be done easier and simpler with <divs> and CSS.You should try looking through the CSS tutorial. By the sound of it, I'd say you're probably using the bgcolor and background attributes; <b>, <u>, and <i> tags to format text; and several <br />s or  s to put spacing between objects. All that can be done with CSS.CSS layouts usually require little mark-up.For example, a two column layout with a header and footer could be like this:HTML:

<div id="header"><h1>Header</h1></div><div id="nav">Left column</div><div id="main">Right column</div><div id="footer">Footer</div>

CSS:

html,body { margin: 0; padding: 0; }#header { background-color: #0099FF; }#nav { width: 120px; float: left; background-color: blue; }#main { margin-left: 120px; background-color: green; }#footer { clear: both; background-color: red; }

Link to comment
Share on other sites

If you can post a sketch we might suggest something. A photoshop rendering would be ideal, but even a scan of a hand-drawn thing would work. Or even use ASCII art. (Change the font to Courier to get the spacing right.)

Link to comment
Share on other sites

Thanks for all of the comments, the site that I have at the moment is upload and working, just not in smaller resolutions how I would like it! So if I give you a like to it, I would like it to look exactly like it does already, but I will need a bit of help with the CSS and <div> container bits!www.goathland.co.nr

Link to comment
Share on other sites

It's a lot of work to go remake your entire page with CSS. Most of us are just here to teach, we don't actually do work for people.The first thing you need to know is that a <div> is a box, and without CSS to give it color or border, it will be invisible.The <div> takes the full width of its container unless you define a width with CSS. A <div> is a block level element, so it won't allow any other element on the same line (horizontal space) as it. You can use the float property to change that.I think this example will help you learn to make your site without tables:[Creating a home page without tables]Try doing experiments with the example to see how they work.Also, I notice the navigation menu on your site is a table. You don't need it, you can use a list.Here's how you could make your same navigation menu, with much less markup than a table would:HTML:

<ul id="menu">  <li><a href="">Home</a></li>  <li><a href="">How to Make Lights</a></li>  <li><a href="">News Archive</a></li>  <li><a href="">About the Layout</a></li></ul>

CSS:

#menu {list-style-type: none;padding: 0;margin: 0;}#menu li {border: 1px outset #999999;background-color: #990033;margin: 0;padding: 0;}#menu li a:hover {text-decoration: underline overline;}

Link to comment
Share on other sites

Thank you so much! I have been looking at all of the tutorials about the basics and the likes on CSS on the W3Schools main site and the try me editor thing works a dream! Really is great!I never knew how much you could do with CSS, right down to specifying how thick the left or right border of a table is! I am currently working with the link that you gave me to try and make the layout for my site.At the moment the contents of the little box at the bottom of every page and also the content of the top bar and even the navigation wont be changing, but when it does it needs changing on every page, can content be included in a style sheet? So it displays the content of the style sheet and then if there is content in the div in the HTML as well it using that instead?The navigation code that you sent me will be really useful thank you.I am currently having a problem trying to set up the body of the document...

body{margin: 5% 5% 5% 5%;background-color: #99003;}

for some reason the background doesn't want to work! And also as I understand it divs can be nested can they not? So the example that I am using has a div container that holds the whole site and then there are containers inside it?Sorry to ask so many questions but I am a noob with this stuff! I really appreciate your help, the code and reply you sent me has been indispensible!

Link to comment
Share on other sites

<div> tags can be nested. You can do practivally anything with them. But there's also another part of coding pages that's about semantics: we use tags to identify what the content in them is.For example <p> means paragraph, so instead of a <div> we'll use a <p> for the paragraphs. In my previous example, I used <ul> and <li>, because your nevigation bar really is an unordered list, with list itemsAnyways, just concentrate on trying to make pages without tables. You'll find that it's much better. Divs are far more flexible than tables.You can't store HTML in your stylesheet, but you can make all the elements of a kind look the same on all the pages that have the stylesheet.

Link to comment
Share on other sites

Thanks, its a shame that you can't put content in them in a style sheet but that isn't a great worry to me. I just can't seem to work out why the body code that I posted doesn't work. It is really baffling me and yet if I use this code:

body{margin: 5% 5% 5% 5%}body{background-color: #99003}

It works? :) I just don't understand why the above code works, but the code I posted before doesn't!

Link to comment
Share on other sites

Try applying them to the <html> and <body> elements. By the way, if all four values of margin, padding and other properties are the same, you only need to write them once.You also might want to try adding another digit to the hex code.

html,body{background-color: #990030;}body {margin: 5%;}

Link to comment
Share on other sites

Ok, I have been playing around with the template and have been quite pleased with how it is going, but there are a few problems. This is the code:

<html><head><style type="text/css">a.nav:link { color:#FFFFCC; text-decoration:none; font-weight: bold; font-size: 13 }a.nav:visited { color:#FFFFCC; text-decoration:none; font-weight: bold; font-size: 13 }a.nav:hover { color:#FFFFCC; font-weight: bold; font-size: 13; text-decoration:underline overline }a.bot:link { color:#FFFFCC; text-decoration:none; font-weight: bold; font-size: 11 }a.bot:visited { color:#FFFFCC; text-decoration:none; font-weight: bold; font-size: 11 }a.bot:hover { color:#FFFFCC; font-weight: bold; font-size: 11; text-decoration:underline overline }a:link { color:#000000; text-decoration:none; font-weight: bold; font-size: 13 }a:visited { color:#000000; text-decoration:none; font-weight: bold; font-size: 13 }a:hover { color:#339900; font-weight: bold; font-size: 13; text-decoration:underline overline }#menu {list-style-type: none;padding: 0;margin: 0;}#menu li {border: 1px solid #FFFFCC;background-color: #990033;margin: 0;padding: 3px;}body{background-color: #990030;margin: 5%;font-family:arial;color:black;font-size:12px;}td {font-family:arial;color:black;font-size:12px;}div.container{background-color: #FFFFCC;width:100%;margin:0px;line-height:150%;}div.header{padding:20px;color:black;background-color:#FFFFCC;clear:left;}h1.header{padding:0;margin:0;}div.nav{float:left;width:160px;margin:0;padding:1em;text-align:center;}div.main{padding:20px;}</style></head><body><div class="container"><div class="header"><h1>Welcome to Goathland</h1>This site is designed to display advances and updates in my railway layout named Goathland.  It is a steam era Pre 1960s 00 Gauge layout.  I am a firm believer of IMR (Its my railway) therefore not everything on the layout will be prototypical!  I see a train that I like, I buy it, I run it and that's that!  If it looks good then it must be good!<BR><img width="100%" src="www.goathland.co.nr/images/top.jpg"></div><div class="nav"><ul id="menu"><li><a class="nav" href="">Home</a></li><li><a class="nav" href="">How to Make Lights</a></li><li><a class="nav" href="">News Archive</a></li><li><a class="nav" href="">About the Layout</a></li></ul></div><div class="main"><h2>Free Web Building Tutorials</h2><p><a href="">Click Here</a> At W3Schools you will find all the Web-building tutorials you need,from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p><p>W3Schools - The Largest Web Developers Site On The Net!</p></div></div></body></html>

I would like to know how I can make a right panel that just doesn't contain anything at all. And when I try and set widths of 15% 70% and 15% everything seems to go mad. The navigation left div doesn't go to the bottom of the page, how would I make it do this? And the final problem is padding. I have set padding of 3px for the navigation list and it seems to have worked on the top and the bottom but it hasn't on the left and the right sides. And also I have tried to set the padding on everything else to 20px but as you can see when you open it in a browser the top infomation doesn't have equal padding on the left as it does on the top.Again any help would be greatly appreciated.Regards Edward

Link to comment
Share on other sites

Got your PM. I prefer to respond here. :)Percentage widths for boxes (a div is a box) become a problem as soon as you add borders, padding, or margins, because they are ADDED to the width. So if your total width added up to 100%, any padding etc would exceed that, and the right-most box would drop down a level. (The madness you described?) So for the major layout boxes, use pixel widths. (FWIW, CSS3 will let you deduct pixels from percentages, but a practical application of that is 10 years off.)The question arises, how do you know your client's screen size? Answer: you don't, and we design so it doesn't matter.Method 1. Put all your stuff in a container div set at a fixed width and centered on the viewport. If you think some clients may still be using 800px wide displays, then go with something like 780px. Larger displays will just have big "margins" to left and right, so choose a suitable background color/image for those areas. If your clients have bigger displays, then adjust accordingly. Since you know the exact size of the container, then all the inner divs can be assigned exact widths also (allowing for padding, margins, and border widths).Method 2. Use the whole viewport. Where you have multiple divs that, together, fill the whole width, ONE of them must NOT be assigned a width. Its width will be whatever's leftover when the other(s) have filled their allotment. This is called a fluid div, and its fluidity is what makes this whole plan work. Its width will adjust automatically when the page loads and whenever the client resizes the window.If you have 2 divs, they can both float to the left. If you have three, they will be marked-up in this sequence:left (fixed width; floated left)right (fixed width; floated right)center (no assigned width; it will float right--against the right div--with no assigned float)It seems counterintuitive to lay out the center div after the right, but it is correct, and when you get a feel for it, you'll see this really does make sense.

Link to comment
Share on other sites

I have tried to follow what you said about how the divs float and how you need to float them, but it doesn't seem to have worked...57112249sy0.pngThis is the code that I was using...

<html> <head> <style type="text/css"> a.nav:link { color:#FFFFCC; text-decoration:none; font-weight: bold; font-size: 13 }a.nav:visited { color:#FFFFCC; text-decoration:none; font-weight: bold; font-size: 13 }a.nav:hover { color:#FFFFCC; font-weight: bold; font-size: 13; text-decoration:underline overline } a.bot:link { color:#FFFFCC; text-decoration:none; font-weight: bold; font-size: 11 }a.bot:visited { color:#FFFFCC; text-decoration:none; font-weight: bold; font-size: 11 }a.bot:hover { color:#FFFFCC; font-weight: bold; font-size: 11; text-decoration:underline overline } a:link { color:#000000; text-decoration:none; font-weight: bold; font-size: 13 }a:visited { color:#000000; text-decoration:none; font-weight: bold; font-size: 13 }a:hover { color:#339900; font-weight: bold; font-size: 13; text-decoration:underline overline } #menu {list-style-type: none;padding: 0;margin: 0;} #menu li {border: 1px solid #FFFFCC;background-color: #990033;margin: 0;padding: 3px;} body{background-color: #990030;margin: 5%;font-family:arial;color:black;font-size:12px;} td {font-family:arial;color:black;font-size:12px;} div.container{background-color: #FFFFCC;width:100%;margin:0px;line-height:150%;} div.header{padding:20px;color:black;background-color:#FFFFCC;clear:left;} h1.header{padding:0;margin:0;} div.nav{float:left;width:160px;margin:0;padding:1em;text-align:center;}div.right{float:right;width:160px;margin:0;padding:1em;text-align:center;} div.main{float:right;padding:20px;}</style> </head> <body>  <div class="container"> <div class="header"><h1>Welcome to Goathland</h1> This site is designed to display advances and updates in my railway layout named Goathland.  It is a steam era Pre 1960s 00 Gauge layout.  I am a firm believer of IMR (Its my railway) therefore not everything on the layout will be prototypical!  I see a train that I like, I buy it, I run it and that's that!  If it looks good then it must be good!<BR> <img width="100%" src="www.goathland.co.nr/images/top.jpg"></div> <div class="nav"><ul id="menu"> <li><a class="nav" href="">Home</a></li> <li><a class="nav" href="">How to Make Lights</a></li> <li><a class="nav" href="">News Archive</a></li> <li><a class="nav" href="">About the Layout</a></li> </ul></div> <div class="main"> <h2>Free Web Building Tutorials</h2> <p><a href="">Click Here</a> At W3Schools you will find all the Web-building tutorials you need,from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p> <p>W3Schools - The Largest Web Developers Site On The Net!</p></div><div class="right">Hello</div></div>  </body> </html>

Sorry to be such a pain, its just this CSS thing is new to me!

Link to comment
Share on other sites

Closer than you think. The big thing is putting your main div AFTER the right div. That's the part I called counterintuitive. Also, it doesn't want a float declaration at all. I tweaked a few other things, and then added a footer div so you'd see how clear:both works. I'm pretty sure you can get where you want to from here. (But that's not a brush off!)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd"><html>	<head>		<style type="text/css">			a.nav:link {				color: #ffffcc;				font-size: 13;				font-weight: bold;				text-decoration: none			}						a.nav:visited {				color: #ffffcc;				font-size: 13;				font-weight: bold;				text-decoration: none			}						a.nav:hover {				color: #ffffcc;				font-size: 13;				font-weight: bold;				text-decoration: underline overline			}						a.bot:link {				color: #ffffcc;				font-size: 11;				font-weight: bold;				text-decoration: none			}						a.bot:visited {				color: #ffffcc;				font-size: 11;				font-weight: bold;				text-decoration: none			}						a.bot:hover {				color: #ffffcc;				font-size: 11;				font-weight: bold;				text-decoration: underline overline			}						a:link {				color: #000000;				font-size: 13;				font-weight: bold;				text-decoration: none			}						a:visited {				color: #000000;				font-size: 13;				font-weight: bold;				text-decoration: none			}						a:hover {				color: #339900;				font-size: 13;				font-weight: bold;				text-decoration: underline overline			}						#menu {				list-style-type: none;				margin: 0;				padding: 0			}						#menu li {				background-color: #990033;				margin: 0;				padding: 3px;				border: solid 1px #ffffcc			}						body {				color: black;				font-size: 12px;				font-family: arial;				background-color: #990030;				margin: 5%			}						td {				color: black;				font-size: 12px;				font-family: arial			}						div.container {				line-height: 150%;				background-color: #ffffcc;				margin: 0;				width: 100%			}						div.header {				color: black;				background-color: #ffffcc;				padding: 20px;				clear: left			}						h1, h2 {				margin: 0;				padding: 0			}						div.nav {				text-align: center;				margin: 0;				padding: 1em;				width: 160px;				float: left			}						div.right {				text-align: center;				margin: 0;				padding: 1em;				width: 160px;				float: right			}						div.main {				padding: 20px;			}						div.footer {				padding: 20px;				clear: both;			}		</style>	</head>	<body>		<div class="container">			<div class="header">				<h1>Welcome to Goathland</h1>				<p>This site is designed to display advances and updates in my railway layout named Goathland.  It is a steam era Pre 1960s 00 Gauge layout.  I am a firm believer of IMR (Its my railway) therefore not everything on the layout will be prototypical!  I see a train that I like, I buy it, I run it and that's that!  If it looks good then it must be good!</p>				<img src="top.jpg">			</div>			<div class="nav">				<ul id="menu">					<li><a class="nav" href="">Home</a>					<li><a class="nav" href="">How to Make Lights</a>					<li><a class="nav" href="">News Archive</a>					<li><a class="nav" href="">About the Layout</a>				</ul>			</div>			<div class="right">				<p>Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello</p>			</div>			<div class="main">				<h2>Free Web Building Tutorials</h2>				<p><a href="">Click Here</a> At W3Schools you will find all the Web-building tutorials you need, from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>				<p>W3Schools - The Largest Web Developers Site On The Net!</p>			</div>			<div class="footer">Footer stuff</div>	</body></html>

Link to comment
Share on other sites

That is great! Thank you so much, I have just come across a slight problem though. When the text in the middle extends beyond the navigation it goes underneath it. It there a way of setting the divs to 100% height or something? I am just working on the footer at the moment. Seeing if I can create it without a table.EDIT: Sorry to be a pain aswell... but I have heard that you can use CSS to print just part of a webpage, i.e. the main div section? Is this an easy piece of code to add?

Link to comment
Share on other sites

A guesstimated pixel value will work better than a percentage. This is a little more difficult to grasp the first time around, but if you want a foolproof version of this, try Googling css holy grail. Some older versions have hacks to deal with IE5 that you can safely ignore.

Link to comment
Share on other sites

The trouble is I dont know how big the page is going to be each time, I just dont want the page to start flowing underneath the navigation and other side.What code would I use so that when you press print it only prints the center section?

Link to comment
Share on other sites

The trouble is I dont know how big the page is going to be each time, I just dont want the page to start flowing underneath the navigation and other side.
Then maybe the Holy Grail is the solution. If you've understood what we're doing so far, then the few differences won't be that hard. What it basically does is assign really fat margins to the center div (as wide as the divs on the left and right). You could figure it out from that hint, but go ahead and find a site that describes it completely.
What code would I use so that when you press print it only prints the center section?
Couple ways. The best is probably CSS. You can define special rules for printing. (Google CSS media.) Anything you don't want to show up in the print job, set to {display:none;}. You can have other differences too, like maybe you want links to look like plain text.
Link to comment
Share on other sites

Ok, I have been experimenting and I am getting the hang of it I think! This is what I have got so far. I have made the kindly hosted by table into a nested div if you like. But I am having trouble trying to center the div. Any help would be greatly appreciated, I haven't forgotten about the print thing, I am just trying to get this bit right first!Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd"><html>    <head>        <style type="text/css">            a.nav:link {                color: #ffffcc;                font-size: 13;                font-weight: bold;                text-decoration: none            }                        a.nav:visited {                color: #ffffcc;                font-size: 13;                font-weight: bold;                text-decoration: none            }                        a.nav:hover {                color: #ffffcc;                font-size: 13;                font-weight: bold;                text-decoration: underline overline            }                        a.bot:link {                color: #ffffcc;                font-size: 11;                font-weight: bold;                text-decoration: none            }                        a.bot:visited {                color: #ffffcc;                font-size: 11;                font-weight: bold;                text-decoration: none            }                        a.bot:hover {                color: #ffffcc;                font-size: 11;                font-weight: bold;                text-decoration: underline overline            }                        a:link {                color: #000000;                font-size: 13;                font-weight: bold;                text-decoration: none            }                        a:visited {                color: #000000;                font-size: 13;                font-weight: bold;                text-decoration: none            }                        a:hover {                color: #339900;                font-size: 13;                font-weight: bold;                text-decoration: underline overline            }                        #menu {                list-style-type: none;                margin: 0;                padding: 0            }                        #menu li {                background-color: #990033;                margin-left: 10px;                padding: 3px;                border: solid 1px #ffffcc            }                        body {                color: black;                font-size: 12px;                font-family: arial;                background-color: #990030;                margin: 5%            }                        td {                color: black;                font-size: 12px;                font-family: arial            }                        div.container {                line-height: 150%;                background-color: #ffffcc;                margin: 0;                width: 100%            }                        div.header {                color: black;                background-color: #ffffcc;                padding-top: 20px;                padding-bottom: 0px;                padding-left: 20px;                padding-right: 20px;                clear: left            }                        h1, h2, h3, h4, h5, h6 {                margin: 0;                padding: 0            }                        div.nav {                text-align: center;                margin: 0;                padding: 1em;                width: 160px;                float: left            }                        div.right {                text-align: center;                margin: 0;                padding: 1em;                width: 160px;                float: right            }                        div.main {                padding-left: 195px;                padding-right: 190px;                padding-top: 15px;            }            div.footer {                padding: 20px;                clear: both;            }                        div.footerbox {                padding: 8px;                clear: both;                background: #990033;                border: 2px inset #FFFFCC;                font-family: Arial;                font-size: 12px;                color: #FFFFCC;                line-height: 120%;                width: 35%;                text-align: center;            }        </style>    </head>    <body>        <div class="container">            <div class="header">                <h1>Welcome to Goathland</h1>                <p>This site is designed to display advances and updates in my railway layout named Goathland.  It is a steam era Pre 1960s 00 Gauge layout.  I am a firm believer of IMR (Its my railway) therefore not everything on the layout will be prototypical!  I see a train that I like, I buy it, I run it and that's that!  If it looks good then it must be good!</p>                <img width="100%" src="http://www.hosting.burrawcentral.org/goathland/images/top.jpg">            </div>            <div class="nav">            <center><font size="4">Navigation</font></center><BR>                <ul id="menu">                    <li><a class="nav" href="">Home</a>                    <li><a class="nav" href="">How to Make Lights</a>                    <li><a class="nav" href="">News Archive</a>                    <li><a class="nav" href="">About the Layout</a>                </ul>            </div>            <div class="right">            </div>            <div class="main">                <h2>Free Web Building Tutorials</h2>                <p><a href="">Click Here</a> At W3Schools you will find all the Web-building tutorials you need, from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>                <p>W3Schools - The Largest Web Developers Site On The Net!</p>            </div>            <div class="footer">            <div class="footerbox">Edward Holmes - Goathland<BR>Kindly Hosted by: <a class="bot" target="blank" href="http://hosting.burrawcentral.org">Burraw Central Hosting</a><BR><a title="goathland@hosting.burrawcentral.org" class="bot" href="mailto:goathland@hosting.burrawcentral.org?Subject=Contact Us">Contact Us</a></div></div>    </body></html>

Link to comment
Share on other sites

Good deal. You figured that out real swell. I mean, you are totally up to date, and it didn't even hurt. :)I'm curious: did you find a holy grail example that used padding instead of margins to define the space for the main div, or did you do that on your own? It LOOKS fine, but a purist would say it's semantically muddled, since padding is inside the box and margins are outside the box.More important, if you ever wanted to add a background to the main div, it would fill the whole container, left to right. You're not doing that here, so it doesn't really matter. But I thought I'd mention it in case you ever wanted to use the technique in the future. What I'm saying is, I recommend margins over padding in this instance.I notice (in your original) that you have several pages that use the same "template" and just change the content of the main div. I don't suppose your server has PHP enabled? 'Cause I can show you how to make your life a WHOLE lot easier with just ONE LINE OF CODE. Yes, amazing, but true. One of the most important secrets of the stars requires one line of code.Lemme know.

Link to comment
Share on other sites

Good deal. You figured that out real swell. I mean, you are totally up to date, and it didn't even hurt. :)I'm curious: did you find a holy grail example that used padding instead of margins to define the space for the main div, or did you do that on your own? It LOOKS fine, but a purist would say it's semantically muddled, since padding is inside the box and margins are outside the box.More important, if you ever wanted to add a background to the main div, it would fill the whole container, left to right. You're not doing that here, so it doesn't really matter. But I thought I'd mention it in case you ever wanted to use the technique in the future. What I'm saying is, I recommend margins over padding in this instance.I notice (in your original) that you have several pages that use the same "template" and just change the content of the main div. I don't suppose your server has PHP enabled? 'Cause I can show you how to make your life a WHOLE lot easier with just ONE LINE OF CODE. Yes, amazing, but true. One of the most important secrets of the stars requires one line of code.Lemme know.
Thanks I am quite pleased with it! I looked at the holy grail then I went back to your comments and flicked back and forth then it clicked! And I suddenly realised how it was all working, the panels are floating on top of the main and it is only because they have content in that the main was going in the middle, then you said about the padding or margins. I have one set to a different width because it seems to be more central, not sure if this is right or not though?Yes it is only the main div that would ever change. The server does has PHP enabled. I don't suppose you would be talking about a piece of code called include() would you? I looked into iframes, and PHP and all sorts of things when first designing the site to see if it was possible to only load the main div as it is now. But I couldn't for the life of me get it right and the PHP worked but I couldn't view what the page looked like unless I uploaded it to the server which was kind of annoying when just checking what something looks like.You don't know if I could use targets and names on the divs to get links in the navigation to target the main div and then the browser would only have to refresh the main div every time someone clicks on a link? Just a thought, don't want to make it too complex though! And I would like to start investigating print CSS.
Link to comment
Share on other sites

Ok, I have been playing around making a print.css file and it seems to work ok, there are just a few problems, I am going to have to link to the print.css in every page? Or can I link to it in the main style sheet? Currently I am using the following code:

<LINK rel="stylesheet" type="text/css" href="stylesheet.css"><LINK rel="stylesheet" type="text/css" href="print.css" media="print">

This is the print stylesheet that I have made, I basically editted the main one, I am sure someone can find some things in there that aren't needed! :)

a.nav:link {color: #ffffcc;font-size: 13px;font-weight: bold;text-decoration: none}a.nav:visited {color: #ffffcc;font-size: 13px;font-weight: bold;text-decoration: none}a.nav:hover {color: #ffffcc;font-size: 13px;font-weight: bold;text-decoration: underline overline}a.bot:link {color: #ffffcc;font-size: 11px;font-weight: bold;text-decoration: none}a.bot:visited {color: #ffffcc;font-size: 11px;font-weight: bold;text-decoration: none}a.bot:hover {color: #ffffcc;font-size: 11px;font-weight: bold;text-decoration: underline overline}a:link {color: #000000;font-size: 12px;font-weight: bold;text-decoration: none}a:visited {color: #000000;font-size: 12px;font-weight: bold;text-decoration: none}a:hover {color: #339900;font-size: 12px;font-weight: bold;text-decoration: underline overline}#menu {list-style-type: none;margin: 0;padding: 0}#menu li {background-color: #990033;margin-left: 10px;padding: 3px;border: solid 1px #ffffcc}body {color: black;font-size: 12px;font-family: arial;background-color: #FFFFFF;margin: 0%}td {color: black;font-size: 12px;font-family: arial}div.container {line-height: 150%;background-color: #ffffcc;margin: 0;width: 100%}div.header {display: none;color: black;background-color: #ffffcc;padding-top: 20px;padding-bottom: 0px;padding-left: 20px;padding-right: 20px;clear: left}h1, h2, h3, h4, h5, h6 {margin-top: 0;margin-bottom: 6;padding: 0}hnav{font-weight: bold;font-size: 17px}div.nav {display: none;text-align: center;margin: 0;padding: 1em;width: 160px;float: left}div.right {display: none;text-align: center;margin: 0;padding: 1em;width: 160px;float: right}div.main {padding-left: 0px;padding-right: 0px;padding-top: 0px}div.footer {display: none;padding: 20px;clear: both}div.footerbox {display: none;padding: 8px;clear: both;background: #990033;border: 2px inset #FFFFCC;font-family: Arial;font-size: 11px;color: #FFFFCC;line-height: 120%;width: 35%;text-align: center;margin: 0 auto}p.ref {font-family: arial;font-style: oblique;font-weight: bold;color: grey;text-align: center;font-size: 12px}

Another thing, does anyone know how I can edit the header and footer that is printed on the sheet, I know this is something that is controlled by the browser usually. Can I change the font? Or maybe what is displayed and what order?I think that is everything that I wanted to ask about the print stylesheet.Again, any help is greatly appreciated!

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.


×
×
  • Create New...