View Full Version : Alternate/print stylesheets


shelly121
08-02-2005, 13:36
allo ppl! rite id be v.grateful to whoeva can spare the time to help!! i have created a webiste for an assignment, it has a column down the side using <div> tags, and to the right of the column is my introduction etc. i now have created another styleshhet for if the user wanted to print the page, but i want the writing to appear AFTER the column, as at the moment the writing is goin off the page!!!is this making sence?? heres my "print stylesheet" so far:
body {
background: white;
font-size: 12pt;
}
#menu {
display: none;
}
#wrapper, #content {
width: auto;
margin: 0 5%;
padding: 0;
border: 0;
float: none !important;
color: black;
background: transparent none;
}
div#content {
margin-left: 10%;
}
a:link, a:visited {
color: #520;
background: transparent;
font-weight: bold;
text-decoration: underline;
}
#content a:link:after, #content a:visited:after {
content: " (" attr(href) ") ";
font-size: 90%;
}

ncrossland
09-02-2005, 07:40
Can you post the HTML / and or a link. Which browser are you testing in?

shelly121
09-02-2005, 13:31
Can you post the HTML / and or a link. Which browser are ..


............................................

this is the homepage xhtml-(ive deleted sum stuff-bt jus the paragraphs), i dont want the writing after the links all the time, only on paper-as in when the user prints the pages. so i created that stylesheet but the writin is alongside the links at mo when printed. im testing it in mozilla and I.E.

ncrossland
09-02-2005, 13:42
The IDs you have in your stylesheet don't relate to the IDs in the HTML.

e.g. in your CSS you have #menu, #wrapper and #content

but in your HTML you have IDs

head
nav1
navbar
navcontainer2


As a side note, if you are seperating content and presentation completely, you shouldn't use align="center" or <center> - they should be in the CSS. And semantically you should use margins / padding instead of lots of <br />s.

shelly121
09-02-2005, 14:32
Originally posted by ncrossland
The IDs you have in your stylesheet don't relate to the IDs in the HTML......

oh right, thanks..! il have a go at sortin it out with the propa names and IDs. thank you.

shelly121
14-02-2005, 09:16
Originally posted by ncrossland
The IDs you have in your stylesheet don't relate to the IDs in the HTML.


can any1 help-nt very gud at xhtml bt have 2 do it 4 a uni assignment. i have tryd to create a "print stylesheet" so that when the user prints the page it doesnt show all the colors etc, and i wanted it so that the writing is after the buttons only WHEN PRINTED. as at the mo-the writing is alongside the buttons and goes off the page when printed. heres my stylesheet so far. NCROSSLAND was helpful, and i have tryd changin the IDs but stil dont seem to have chnged nethin!!!:


body {
background: white;
font-size: 12pt;
}
#nav1 #navbar {
display: top;
}
div#class {
width: auto;
margin: 0 5%;
padding: 0;
border: 0;
float: none !important;
color: black;
background: transparent none;
}
div#navbar {
margin-left: 10%;
}
a:link, a:visited {
color: #520;
background: transparent;
font-weight: bold;
text-decoration: underline;
}
#content a:link:after, #content a:visited:after {
content: " (" attr(href) ") ";
font-size: 90%;
}

shelly121
14-02-2005, 09:17
and heres my actual xhtml for tthe homepage-i have deleted stuff in the paragraphs incase ur wondering y they only have "...."!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>My Homepage</title>
<link rel="stylesheet" href="teststyle.css" />
<link rel="stylesheet"
type="text/css"
media="print" href="print.css" />

</head>
<body>

<div class="head"><h1>.....</h1></div>
<div class="nav1">
<ul>
<li><a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0!" height="31" width="88" /></a></li>
<li><a href="http://jigsaw.w3.org/css-validator/validator"><img src="CSS.bmp" alt="css validated!" /></a></li>
</ul></div>
<div class="navbar"><br /><br /><br /><br /><br />
<ul>
<li><a href="About Me.htm" accesskey="a"> <em>A</em>bout Me!</a></li>
<li><a href="MyTown.htm" accesskey="m"> <em>M</em>y Town </a></li>
<li><a href="pets.htm" accesskey="p"> My <em>P</em>et</a></li>
<li><a href="form.htm" accesskey="c"> <em>C</em>ontact Me</a></li>
</ul>
</div>




<!-- Main content -->
<div class="main">
<p>Welcome to my Homepage</p>

<p>.... </p>

<p>...</p>
<br /><br /><br />
<center><img id="plant" src="plant.jpg" alt="plant" width="150" height="105"border="3" /></center>
<br /><br />
<hr />
<center>
<address></address>
<address> England.</address></center><br /><br /><br /></div>
<div id="navcontainer2">
<ul>
<li><a href="form.htm" accesskey="c"><em>C</em>ontact Me</a></li>
<li><a href="About Me.htm" accesskey="a"> <em>A</em>bout Me!</a></li>
<li><a href="MyTown.htm" accesskey="m"> <em>M</em>y Town </a></li>
</ul>
</div>
</body>
</html>