|
CSS - How To Make It Printerfriendly?
Hi everybody,
my site is becoming more and more what i wanted it to be. I thought making it printerfriendly would have been easy, but i encounter some strange problems. http://users.pandora.be/jef_patat/index.htm First of all: there is a big box at the top of the page, it is there for some reason because all browsers i tested it with show the box. I made the body background color yellow for better visualization. Second: if i try to print it out with netscape or firefox the both leave some text in the area between two pages, so when the print some text is missing. I hope a solution can be found, many thanks, Jef Patat Similar TutorialsHi... Can any body tell me how to make effect mentioned below. http://forums.devshed.com/archive/t-175080 Basically i am a designer, and i am new to programming. When the above mentioned page will open, there are links in blue color i.e "Firewall", "Backup", "internet", "Viruses", "VPN", etc etc. I need this type of effect for my web site, can any body tell me how to make this.... Thanks Hi, I'm working on redeveloping my site using CSS (learning CSS as I go), and for the most part it's fine. I'm having a bit of a problem getting my footer (containing links to Terms & Conditions, copyright notice, etc.) to display at the bottom of the page. I have a div called MainSection as follows : #MainSection { position: absolute; border: 1px solid #000033; top: 100px; left: 1px; width: 777px; z-index: 0; } Within that, I have 3 divs - WhereYouAre, LeftPanel and MainBodyContent, as follows: .WhereYouAre { position: absolute; width: 500px; top: 8px; left: 205px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12px; text-decoration: none; color: #000033; } #LeftPanel { position:absolute; top: 3px; left: 3px; width: 190px; border: 1px solid #000033; } #MainBodyContent { position: absolute; border: 1px solid #000033; padding: 0px 5px 5px 5px; top: 5px; left: 200px; width: 567px; z-index: 0; } Then at the bottom, after the closing </div> for the MainSection, I have my div called BottomNav: #BottomNav{ position:inherit; margin:10px; border-top: 1px solid #000033; border-bottom: 1px solid #000033; width: 780px; left: 0px; } The BottomNav keeps appearing at the top of thepage instead of at the bottom - I've tried different values (inherit / relative, etc) to see can I get something to work, but no good so far... and I can't set the positon to absolute as the location of the BottomNav depends on the length of the MainSection. Thanks a lot for any suggestions, J. Can someone show the the CSS to make the unordered list to the right of the picture display the same way in IE as it does in FF? HERE is my link. Many thank yous from the CSS noob. Hi, I'm looking for a javascript technique that will allow me to check whether all of my external files (CSS, JS, XML) have been successfully downloaded before allowing other scripts to be run in the page. I can accomplish this for script files by setting a global variable in the main page and having the external script reset that variable when it is loaded, but I dont know how to do it for CSS files (or others). Any ideas? W. Hi guys... I'm fairly experienced at webdesign, but I never actually used css for the *entire* design before (besides on one or two unfinished sites that came out badly). I was wondering if anyone could help me out designing the basic layout with css, and I can probably handle the rest. It would be much appreciated! Sorry for the boring thread. What I am basically trying to do is make a grid of numbers (its for a small calendar), and I want to do it using css. Would appreciate any suggestions for the best way to go about it. (an expample is the HTML code that it would be) Code: <table width="150" border="1"> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr> <tr><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td></tr> <tr><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td></tr> <tr><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td></tr> <tr><td>30</td><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td><td>36</td></tr> </table> I am not to bad at the css thing but this got me foxed... I started of by indenting the margin of each <td> as <div> and appling a more negative of a top margin for each one... it started to get confusing! Cheers, http://www.webpagedesignrus.co.uk/DECS Code: #container {
margin: auto;
width: 100%;
display: block;
text-align: center;
height: 100%;
}
#middle {
text-align: left;
margin: auto;
width: 600px;
height: 100%;
background-color: #FFF;
}
#main {
margin: auto;
background-color: #FFF;
border-left: solid black 1px;
border-right: solid black 1px;
width: 650px;
height: 100%;
cell-padding: 0px;
cell-spacing: 0px:
}
I can't get the white part to be 100% height... I need it to go to the bottom of the page... Please help... I have decided that it would be easier to make 2 seperate div tags so I wouldn't have to deal with the issues on margin and padding that IE barf all over at. So, what I'm going to do is to make the 2nd <div> to overlap the 1st <div>. So, what the property or attribute that I can use to make it the overlapping work that work for most web browsers?? Thanks, FletchSOD I'm still new to the CSS layout deal, but I'm giving it what I can, and I felt I was getting close until I looked at the page in IE and then ran it through some validation First the validation This is my page so far: Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="layoutTest.css" />
<style type="text/css" media="screen">@import "layoutTest.css";</style>
<style type="text/css">
<!--
#ctNav {
position:absolute;
height:auto;
min-height:30px;
margin:0px 0px 0px 144px;
border:0px;
background-color:68657A;
z-index:3;
width: 100%;
}
#ctNav ul {
padding: 0;
margin: 0;
}
#ctNav li {
display: inline;
list-style-type: none;
padding: 0;
margin: 0;
}
-->
</style>
</head>
<body>
<div id="localNav">
<a href="http://www.codetailor.com"> <img height="66" alt="Alt Text" src="#" width="144" border="0" /></a>
<ul><li>localMenu</li></ul>
</div>
<div id="ctNav">
<ul><li><a href=""><img height="30" alt="Alt Text" src="#" width="223" border="0" /></a></li></ul>
</div>
<div class="content">
<h1>Heading 1</h1>
<p><img src="#" width="288" height="288" align=right hspace="12" alt="picture" ></p>
<h3>Heading 3</h3>
<p>This is some text</p>
</div>
</body>
</html>
I have bolded the part that will not validate when I run it through the http://validator.w3.org/ validator. if this is the case, how do I add styles. It won't allow me to put them on the page or in another file (both are shown here by the way, only one way will be used) the second part is the fact that without having the #ctNav styles on the page I get a little extra on the bottom of my pictures. I can do a screenshot of this if it would help, but if you run it with and without these tags in there you will see for yourself. these are the styles contained in the external file: Code:
body {
margin: 0px;
}
h1 {
margin:0px 0px 15px 0px;
padding:0px;
font-size:24px;
text-align: center;
}
h2 {
font:bold 12px/14px verdana, arial, helvetica, sans-serif;
margin:0px 0px 5px 0px;
padding:0px;
}
p {
font:11px/20px verdana, arial, helvetica, sans-serif;
margin:0px 0px 16px 0px;
padding:0px;
}
.Content>p {margin:0px; text-indent:30px;}
.Content>p+p {text-indent:30px;}
/* All the content boxes belong to the content class. */
.content {
position:absolute; /* Position is declared "relative" to gain control of stacking order (z-index). */
width:auto;
min-width:120px;
margin:36px 10px 20px 165px;
border:0px;
background-color:white;
z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
}
#localNav {
position:absolute;
width:auto;
min-width:120px;
margin:0px auto 0px 0px;
border:0px;
background-color:3D3B7C;
z-index:4;
height: 100%;
}
#localNav p {margin:0px;}
#localNav ul {
list-style-type: none;
margin: 0;
padding: 0;
border: none
}
#localNav li {
margin: 0px;
padding: 1px 0px;
border-bottom: 1px solid black;
width: 100%;
display: block;
text-indent: 4px;
}
#localNav li.selected {
margin: 0px;
padding: 1px 0px;
border-bottom: 1px solid black;
width: 100%;
display: block;
text-indent: 4px;
background-color: 67657A;
}
#localNav li:first-child {
margin: 0;
padding: 1px 0px 1px 0px;
border-top: 1px solid black;
border-bottom: 1px solid black;
width: 100%;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
color: #000000;
text-align: center;
background-color:#67657A;
font-weight: bolder;
text-indent: 0px;
}
#ctNav {
position:absolute;
height:auto;
min-height:30px;
margin:0px 0px 0px 144px;
border:0px;
background-color:68657A;
z-index:3;
width: 100%;
}
#ctNav ul {
padding: 0;
margin: 0;
}
#ctNav li {
display: inline;
list-style-type: none;
padding: 0;
margin: 0;
}
finally, when I look at this in IE, the localNav is taking over the whole screen, I assume that it is because of one of the tags, but I can't see it. Point it out for me if you know. thanks for your time. Hi I have a page which has a header, footer, nav bar and content area using CSS and works great in IE8, FF, Chrome and Safari, and almost works in Opera. Although I have tried to avoid it, my boss wants the page to work in IE6 as we have corporate clients still using it, and I CANNOT figure out how to arrange it without fixed sizing! Can anyone help? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
Untitled Page
</title>
<style type="text/css">
#test div {
border:solid 2px red;
position:absolute;
}
#head {
height:100px;
top:0;
left:0;
right:0;
}
#nav {
left:0;
top:105px;
bottom:105px;
width:200px;
}
#foot {
height:100px;
bottom:0;
left:0;
right:0;
}
.scroll {
top:0;
right:0;
left:0;
bottom:0;
margin-left:205px;
margin-top:105px;
margin-bottom:105px;
}
</style>
</head>
<body>
<div id="test">
<div id="head"></div>
<div id="nav"></div>
<div id='x40702f5b28_scroller' class='scroll' style='overflow:scroll;'>
<div id='x40702f5b28' style='width:1024px;height:768px;position:relative;'>
</div>
</div>
<div id="foot"></div>
</div>
</body>
</html>
The red borders are purely so I can see where the DIVs are and don't need to be in the final version. Any help would be greatly appreciated... SW. Hi I am new to flex and i am suppose to change the css file so that it references a a swc file instead of an programmatic skin. I know the syntax is classreference... for the action script. I just want to to know what i should replace it as. Thanks Basically on this page here -> http://www.prxa.info/area51/profile.php?info=1 The copyright molds into the right column and i wish it to stay below both the left and right, how would i go about doing that? Hi guys I'm in little trouble, because I cannot get a little block (div) to be shown always at bottom, no matter the height of my left column I'm making a complete tableless css layout for the first time Look: Here's the skeleton code Code: <!-- Begin Left Column --> <div id="cssleftcolumn"> HERE I LOAD THE LEFT COLUMN MODULES (IT IS A CMS) <div id="imagedownmenu"><font color="white">this little block should go bottom!!</font></div> </div> <!-- End Left Column --> And here the css code Code:
#cssleftcolumn {
width: 218px;
float: left;
color: white;
}
#imagedownmenu {
background-image: url(../images/fondo_botleft.jpg);
background-position: bottom left;
background-repeat: no-repeat;
height: 76px;
vertical-align: bottom;
}
I cannot get the little image to aling at bottom, and well, I don't know if this code will be enough for you guys, so I'll be waiting for your help in case you need more info to accomplish this Thanks a lot in advance, A column on the left side of the page 200 pixels wide (reserved for a vertically orientated textbased navigation bar). The background colour of this area should be black. An area to enter content that is 800 pixels wide with a white background. Any help appreciated. I need to create a 2 column layout as in the link below: http://css.maxdesign.com.au/floatutorial/tutorial0816.htm However, I will not always know whether or not the contnet in the left or right will be longest. As it is in the design above they recommend to put the border on the left content if the left side is longer. But I will not always know which is longest, so I can't just change the border in the CSS. Is there anyway to create a layout like the above link that has a border separating the two columns that will resize to the longest column, no matter which side has longer content? Any help is much appreciated! <style type="text/css"> select{width:75px} option{width:150px} </style> I'm guessing the answer is no but I thought i would ask. In firefox that does exactly what it says it will. in ie all content is squashed in the options. I thought I've seen it work in IE but I dont recall where or how it was done. Anyone knows how to make the standardized border as the attached file ? cheers. Hey, I have a CSS file that I use for my website, and I have a quick question. Is it possible in any way to make a .CSS file undownloadable/unveiwable while still allowing it to be displayed by the server? Thanks, -RuSty Hi, I have started to reformat my webpage (formally with frames) using css. Needless to say I am a complete newbie. The css file (included below) is an alteration of some layout files I found online. The page looks great (to me at least) using firefox 1.01 but appears like complete crap with IE6. Are there some fairly simple hacks to make this appear good in both browsers? You can view the page at: rhaynes.acadiau.ca/cards/newmywish.php Here is the part of the css file which includes the layout. Code:
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: verdana, arial, helvetica, sans-serif;
color: #000000;
background-color: #ccc;
}
#top {
margin: 20px 20px 0px 20px;
padding: 0px;
border: 0px solid #000000;
background: #FFFFFF;
}
html>body #top {
height: 70px;
}
#left {
position: absolute;
top: 110px;
left: 0px;
margin: 20px;
padding: 10px;
border: 3px solid #000000;
background: #FFFFFF;
}
html>body #left {
width: 210px;
}
#middle {
position: absolute;
top: 110px;
margin: 20px 20px 20px 270px;
padding: 10px;
border: 4px solid #000000;
background: #FFFFFF;
}
Any suggestions would be greatly appreciated. R Haynes i want to make a select box... and attempt to make its background transparent... slightly showing a background image... i have seen this done with search boxes before. |
|||||||