CSS - Registration Of Colored Rects With Bg Graphic For Printing
I know the user can enable printing of bg grcs and colour,
this is an administrative thing so I can put in the manual that they need to do that in their browser if they want to print a certain page. I have certain rectangles on the page that align perfectly with areas on the background graphic on the screen. However, when I print preview in Firefox this synch is lost and the rects don't line up with the bg graphic. Kravvitz will hate this page cuz it has a few xhtml errors. I don't know how to make those errors go away without ruining something else. For example, "no system id specified." Quote: Your document includes a DOCTYPE declaration with a public identifier (e.g. "-//W3C//DTD XHTML 1.0 Strict//EN") but no system identifier (e.g. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"). This is authorized in HTML (based on SGML), but not in XML-based languages. so if I put that system identifier in it then the page fails to lock if I render a secure version of it because http://www.w3.org is insecure content, and erodes consumer confidence. The "name" attribute well if you don't have it when you post, I don't think the posts will register it, will they? I have proprietery attributes also and they are kinda necessary. The rest of the errors I could probably clear, but 21 is not so bad compared to 2,874..... Anyway here is an example http://demo.tixrus.us/98 How can I get this page to print correctly??? Similar TutorialsIm deriving a list of photos with information from my database. I want to be able to print the webpage off without any of the information being broken up between pages. Since its coming from the database I cant just use page breaks cause then I get one image per page. Is there a solution to this? Can some explain (briefly) how one goes about specifying CSS styles for different link areas in a page. for example, I want navigation links to have a different set of "rules" than footer links. ted Hi all, I'm using an open source template from oswd.org and I wanted to change the color of one of the links to make it stand out from the others. Here's the CSS code: Code: .nav3-grid {width:199px; border-bottom:solid 1px rgb(200,200,200);} .nav3-grid dt a, .nav3-grid dt a:visited {display:block; min-height:2.0em /*Non-IE6*/; height:auto !important; height:2.0em /*IE6*/; line-height:2.0em; padding:0px 10px 0px 20px; border-top: solid 1px rgb(200,200,200); text-decoration:none; color:rgb(70,122,167); font-weight:bold; font-size:120%;} .nav3-grid dd a, .nav3-grid dd a:visited {display:block; min-height:1.7em /*Non-IE6*/; height:auto !important; height:1.7em /*IE6*/; line-height:1.7em; padding:0px 10px 0px 40px; border:none; font-weight:normal; text-decoration:none; color:rgb(70,122,167); font-size:120%;} .nav3-grid dt a:hover, .nav3-grid dd a:hover {background-color:rgb(225,225,225); color:rgb(42,90,138); text-decoration:none;} .nav3-grid dt a.inquiry:hover, .nav3-grid dd a.inquiry:hover {color:rgb(90,90,90); text-decoration:none;} Note the a.inquiry:hover above - I added that entire line in hopes that would change the color. And here is the HTML in question: Code: <!-- Navigation Level 3 --> <div class="round-border-topright"></div> <h1 class="first">TurnkeySolutionsNow</h1> <!-- Navigation with grid style --> <dl class="nav3-grid"> <dt><a href="whyusetsn.html">Why Use TSN</a></dt> <dt><a href="productdevelopment.html">Product Development </a></dt> <dd><a href="productdevelopment-productdevelopment.html">Product Development </a></dd> <dd><a href="productdevelopment-engineering.html">Engineering</a></dd> <dd><a href="productdevelopment-productdesign.html">Product Design</a></dd> <dd><a href="productdevelopment-productprotection.html">Product Protection</a></dd> <dd><a href="productdevelopment-engineeringservices.html">Engineering Services</a></dd> <dd><a href="productdevelopment-industries.html">Industries</a></dd> <dd><a href="productdevelopment-inquiry-form.html" class="inquiry">Inquiry Form</a></dd> <dt><a href="contact.html">Contact Us</a></dt> </dl> <p> </p> </div> The link I want to change color is the Inquiry Form. I thought by adding class="inquiry" I could define the color, but I'm having issues. Any help is appreciated - thanks in advance! Patrick Hello all.. trying to do something that should be pretty simple (I'm not the best CSS person). Instead of using a table am trying to use just CSS. I want to place a form button styled as a link and some text into a colored box but my css is not working. html is... <span class="yellowbox"> <form name="view constituent" method="post" action="constituents_viewm.php"> <input type=submit name=submit value=$lname, $fname" class="link_submit"> </form> <br /><br />text </span> and css is... .yellowbox { background-color:#fdffe3; margin:10px; padding:10px; border: 1px #000; font-size:13px; width:420px; height:100px; } .link_submit { color:#116500; font-size:17px; font-family:Calibri, Arial, Helvetica, sans-serif; background:none; border:none; display:block; text-decoration:underline; cursorointer; float:left; } any help will be greatly appreciated. I am looking for a way to color the padding/margin/border of all the elements on my page, so that I can, with a quick look, see how the elements are interacting with eachother. If you have used firebug, then you know what I mean, because in Firebug, when you hover over an element in "inspect" mode it shows the margins and padding in different colors. I have heard of diagnostic CSS before, but have never seen anything quite like this. Does anyone know how Firebug does it, or know of anything similar? Hi All, I would like to figure out a way to have my menu item font stay a different color if the user is on that page. I thought that the a:active would do the trick, but apparently a link is only active immediately after clicked and does not carry over to the page that was linked. I am trying to stay away from images and javascript because I can't get them to look right against my background, so I was wondering if there was a css way to create this effect without changing every page. I have a header file that contains this menu because I will be updating it frequently with new links and pages and would rather only change it once... thanks! I am very, very new at web design, and would like to make a colored background behind text, although I am sure that is not the right name for it! For example, in this this website I would like to emulate how to make that curved rectangular background behind the Online Poll, but I have no clue what the name or the source code behind it that makes it so! If anyone could even just give me the proper name for it so I can google it, I would be very thankful! Ok I have created an background image to what i want in a navaigation list, the problem is I need to set the height else the graphic fails to appear and the graphic won't scale to fit inside the area ( end part chops off). #n1 { /* all lists */ // height:50px; background-image:url('green1.gif'); } #n1 ul{ /* all lists */ height:50px; //will fail without? list-style-type:none; // background-image:url('green1.gif'); } #n1 li a{ /* all lists */ float:right; // background-color:yellow; padding-right:5px; text-decoration:none; } <div id="n1"> <ul> <li><A href="#">kkk</a></li> <li><A href="#">kkk</a></li> <li><A href="#">kkk</a></li> </ul> </div> Can anyone take a minute or two and see if they can figure out why the header graphic on the following page is not aligning properly: Click Here It appears that way in FF, IE6, and IE7... I don;t have time to recode the entire page -- I just need to know what is causing the problem....Try as I might, I don;t see the cause...Maybe conflicting styles? I dont know... Thank you. Hi people I have a graphic which has a specific Hue. I would like to allow users who have IE to change the Hue of that graphic by picking it from a combo-box Is there a way to change the Hue of a graphic in runtime by changing CSS filters or by some other technique? regards Hello there, I have been trying to get a web site up and running and am having problems getting a graphic to be positioned to the left and a menu right justified. So far I have been able to make the CSS compatible with both firefox and IE. So far I've got Code: <table width="100%" bgcolor="#666666"> <tr> <td> <img src="images/logo.gif"> </td> <td> <div class="menu" style="text-align:center"> <div class="outerFirst"><a href="index.php"><span>Home</span></a></div> <div class="outerFirst"><a href="index.php"><span>Services</span></a></div> <div class="outerFirst"><a href="index.php"><span>Senoir Centers</span></a></div> <div class="outerFirst"><a href="index.php"><span>Calendar / Menu</span></a></div> <div class="outerFirst"><a href="index.php"><span>Contact Us</span></a></div> <div class="outerFirst"><a href="index.php"><span>About</span></a></div> </div> </td> </tr> </table> and for the CSS Code: #menu { height: 54px; margin: 3em 0; padding:0 1em; border-bottom: 0px solid black; } div.outerFirst { float: left; width: 100px; height: 130px; margin: 0 0px 0 0; background: url( '../images/greyFirst.gif' ) 0 -50px no-repeat; } div.outerFirst a { cursor: pointer; display: block; margin: 0; padding:0; width:100px; height:54px; overflow:hidden; font-family: Arial; font-size:0.7em; font-weight:normal; color:#FFFFFF; text-decoration: none; background: url( '../images/greyFirst.gif' ) top left no-repeat; } div.outerFirst span { height: 54px; display: block; margin:0; padding: 25px 0px 0px 0px; } I know that I've got tables in there, but I don't know how the image and the menu be on the same level without it. Any help with the CSS and html (if I've missed something) would be awesome. Thanks! - K Hi, This is my first post, and I am grateful for any help. I am new to CSS and I have read and absorbed Simon Collison's very good book "CSS Web Development." My question is quite simple. I have a background-image associated with an ID (shown below) which successfully lays down the image but it does not push text. #mainmenu{ background-image: url(images/mainmenubg.jpg); background-repeat: no-repeat; background-position: top center; text-align:left; } ie, my html or php file might read: <div id="mainmenu> <p>Some text blah blah </div> and the text goes right over the image. Is there a "best way" to ensure that the text appears below the image? I can apply a height variable to the id, and then place the text below the /div, which works, but it is not flexible, ie, if I change the size of the image, I need to adjust the height value, and I am trying to avoid this. Any help would be greatly appreciated. Thanks, Pradhan Hi there, I have two questions actually. I purchased this web template and am putting in my own logo but running into two problems: 1) I don't know how to adjust the css file to get the logo to move towards the bottom of brown header area (more in line with the nav text) 2) The logo I created looks okay in Internet Explorer, but is showing up as really pixelated in Firefox and I cannot seem to find any reasons why this is occurring. I am including links to the website http://www.kohlrbaby.com/Communicating/index.html and CSS file http://www.kohlrbaby.com/Communicating/default.css , but have put in the exact associated code below: CSS code associated with the logo as far as I can tell: Code: /** LOGO */ #logo { float: left; width: 430px; height: 96px; } #logo h1, #logo p { margin: 0px; line-height: normal; text-indent: -9999em; } #logo h1 { display: block; top: 0px; left: 0px; width: 430px; height: 96px; } #logo img { top: 200px; left: 0px; } #logo p { margin: -50px 0px 0px 0px; padding: 0px 0px 0px 0px; } HTML Code: Code: <div id="logo"> <a href="http://www.communicatingwell.com"><img src="images/CWlogo.gif" height="35" width="300"/></a> </div> I hope these are okay questions to post, I have tried to figure it out myself, but don't seem to be getting anywhere! Many thanks for any ideas or help! Hi guys, I'm roughing out a template and wondered if you could please help me with something: In IE the background graphic body-stretch.jpg does not stretch as it does in Firefox, I read around and thought this may be something to do with the peekaboo hack but I couldn't get any of the fixes to work. Any ideas? Also, you will see I have a footer graphic that stretches all the way across the bottom of the page, right now it is outside my "container" div because when placed inside it is restricted to the width of the container and not to the edges of the page. If I change the width of the container to suit it everything gets left aligned. Placing the footer div outside the container means the textual content crosses over it (see page in firefox to see what I mean). Pulling my hair out! Any pointers would be greatly appreciated Code: @charset "utf-8"; /* CSS Document */ html { background-image:url(images/body-stretch.jpg); background-repeat:repeat; } body { background-image:url(images/header-stretch.jpg); background-repeat:repeat-x; /*width:100%;*/ padding:0px; margin:0px; text-align: center; /* to centre page pt 1 */ font-family:Arial, Helvetica, sans-serif; } a { color:#b7b977; text-decoration:none; } a:hover { color:#8e52b6; text-decoration:underline; } #nav { background-image:url(images/navigation.jpg); background-repeat:no-repeat; width:899px; height:108px; padding:0px; margin:0px; } #nav a { font-size:24px; color:#000; background-color:#e2b550; } #nav a:hover { font-size:24px; color:#fff; background-color:#9755c3; } p { color:#fff; } #container { margin: 0 auto; /* to centre page pt 2 */ width:899px; /* centres stuff but messes up footer if it's contained within it (which it is */ } #header { } h1 { background-image:url(images/banner.jpg); background-repeat:no-repeat; width:899px; height:242px; padding:0px 0px 0px 0px; margin:0px; text-indent: -9999px; } h2 { font-size:34px; color:#e1b650; } #content { background-image:url(images/body.jpg); background-repeat:repeat-y; height:100%; /*width:899px; margin: 0 auto;*/ } #main-content { float:left; width:635px; text-align:left; padding-left:20px; } h2 { display:inline; } #sidebar-content { float:right; width:244px; } #footer { background-image:url(images/footer-stretch.jpg); background-repeat:repeat-x; width:100%; height:281px; } Code: <html> <head> <link href="styles.css" rel="stylesheet" type="text/css" /> <title>Dwardus</title> </head> <body> <div id="container"> <div id="header"> <h1><a name="top">Dwardus Prime - Entertainment Blog</a></h1> <div id="nav"> <a href="#">HOME</a> <a href="#">FILM</a> <a href="#">TELEVISION</a> <a href="#">MUSIC</a> <a href="#">VIDEO GAMES</a> </div> </div> <div id="content"> <div id="main-content"> <h2>Welcome</h2> <p>quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa</p> <a href="#">link</a><p>quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa</p> <a href="#">link</a><p>quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa</p> <p>quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa</p> <a href="#">link</a> <p>quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa</p> <a href="#">link</a> </div> <div id="sidebar-content"> STUFF HERE! </div> </div> </div> <div id="footer"> <p>FOOTER INFO</p> </div> </body> </html> I created our site's home page using strictly presentational mark-up and am now trying to lay it out strictly using css. Here is my attempt: jalc.org/index_css.html The graphic on the right-hand side with the word Jazz and the musicians should align with the large center image (just under the drop-down nav). Here is how the page is supposed to look: jalc.org I can't get that image to float right and align with the top of the large image. If anyone has any suggestions I would be most appreciative if you could share. I have spent too much time on this already. I'm going mad. Thanks, Andy Basically I am creating a webpage using the free webhost weebly. I have modified the CSS, and the webpage is getting there, however, I have a problem with the graphics in the background, this is what I mean... [IMG](URL address blocked: See forum rules)[/IMG] Why am I getting this? Why isnt the graphic going all the way up? I also get this at the bottom of the page but only on the right hand side. Anyway heres the html.. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "(URL address blocked: See forum rules)"><html xmlns="(URL address blocked: See forum rules)"><head> <title>%%TITLE%%</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--[if lt IE 7.]><script defer type="text/javascript" src="/files/theme/pngfix.js"></script><![endif]--></head><body><div id="wrapper-menu-top"><div id="menu-top"> <ul> %%MENUITEMSTART%%<li><a href="%%MENUITEMLINK%%"><span>%%MENUITEMTITLE%%</span></a></li>%%MENUITEMEND%% %%MENUITEMACTIVESTART%%<li class="active"><a href="%%MENUITEMACTIVELINK%%"><span>%%MENUITEMACTIVETITLE%%</span></a></li>%%MENUITEMACTIVEEND%% </ul></div><!--menu-top--></div><!--wrapper-menu-top--><div id="wrapper-header"><div id="header" class="weebly_header"><div id="wrapper-header2"><div id="wrapper-header3"> <h1>%%TITLE%%</h1></div></div></div></div><div id="wrapper-content"><div id="content"> %%CONTENT%% </div><div id="wrapper-footer"><div id="footer"> <p><span id='weeblyFooter'>%%WEEBLYFOOTER%%</span></p></div></div> </body></html> and the css Code: body { font-family: trebuchet ms, verdana, arial, tahoma; font-size: 90%; color: #888; background-color: #CDBA96; line-height: 160%; margin: 0; padding: 0; text-align: center;}/* Set the page width */#wrapper-menu-top, #header, #wrapper-content, #wrapper-footer { width: 768px; margin: 0 auto; text-align: left;}#wrapper-menu-top { background: white url('fff.jpg') no-repeat left top;}#menu-top { background: transparent url('fff.jpg') no-repeat right top;} #menu-top ul { margin: 0 20px; padding: 1em 0 0 0; list-style: none; font-size: 85%; float: left;}#menu-top li { display: inline; float: left;}#menu-top a { float: left; background:url(menuleft.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; line-height: 1.5em;}#menu-top a span { background: transparent url(menuright.png) no-repeat right top; padding:5px 15px 4px 6px; color:#5b8fbe; display: block; float: left; cursor: pointer; /* IE doesnt display the hand when you roll over the link for some reason. This fixes it */} #menu-top a:hover { background-position:0% -42px; } #menu-top a:hover span { background-position:100% -42px; } #menu-top li.active a { background-position:0% -42px; } #menu-top li.active a span { background-position:100% -42px; }#header { background: #eee url('banner_mountains.jpg') no-repeat center top;}#wrapper-header2 { background: transparent url('ds.jpg') top left no-repeat;}#wrapper-header3 { background: transparent url('right1.jpg') top right no-repeat;}#header h1 { margin: 0 25px; padding: 0; height: 192px; line-height: 3em; color: #636363; font-size: 130%;}#wrapper-content { background: white url('left1.jpg') no-repeat left top;}* html #wrapper-content { height: 1%; }#content { background: transparent url('right1.jpg') no-repeat right top; padding: 15px 40px; min-height: 600px; height:auto !important; height:400px;}/*#wrapper-menu-page { float: right; width:10px; margin: 20px 0px 3em 0px; text-align: center; line-height: 140%; font-family:"Lucida Grande","Lucida Sans Unicode",arial,sans-serif;}* html #wrapper-menu-page { margin-right: 15px; }*/#menu-page { padding-top: 5px; }#menu-page ul { margin: 0; padding: 0; list-style: none; font-size: 90%;}#menu-page h3 { font-size: 75%; text-transform: uppercase; margin: 1em 0 0.3em 0; color: #5b8fbe; font-weight: normal; letter-spacing: 0.15em;}#menu-page a:link, #menu-page a:visited { color: #888; }#menu-page a:hover { color: #5b8fbe; }#wrapper-footer { margin-top: 1em; text-align: center;}#footer { margin: 0 20px; background-color: #e5f0fc; border: 1px solid #ccc; border-bottom: 0; clear: both;}h2 { font-size: 110%; }h3 { font-size: 100%; }a:link, a:visited { color: #5b8fbe; text-decoration: none; }a:hover{ color: #666; text-decoration: none; } Thanks I'm trying to have the contact information for a site to always appear in a right div next to the main content div. I would like it to always appear in the top right of the div, no matter how much the user scrolls down. This way, the information is always visible. I tried experimenting with background images in certain divs, but Firefox (but not IE) was having trouble displaying it the way I wanted. I've seen it in action before, so I'll post a URL if i can find where. Hi, can anyone help me with this problem? I using a graphic with individual boxes on it for links. I want to place text in the boxes describing the link. When I set the padding-top and line - height properties. The text aligns prefect with the graphic. The problem I am having is the padding-top property lowers the graphic placing it below the rest of the table elements. Below is the code for the table cell and the css style. <td height="261" valign="top"><table width="198" height="410" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="198" height="410" valign="top" class="td_1"><a href="#">Home</a> <br /> <a href="neoceram.php">Design</a> <br /> <a href="pyroceram.php">Development</a> <br /> <a href="patterns.php">Management</a> <br /> <a href="drilling.php">Portfolio</a> <br /> <a href="tints.php">Contact Us</a> <br /></td> </tr> .td_1 { background-image:url(nav_bar.gif); background-position:left; background-repeat:no-repeat; background-color: transparent; padding-top: 66px; width: 154; font-size: 12px; font-weight:600; line-height: 21px; position: absolute; font-family:Arial, Helvetica, sans-serif; } Thanks for all your help, mdh2000 I'm a php/css/graphic designer and I'm looking for some small to medium projects to work on. I charge less than most people and I get everything done in a fast,professional manner. You can contact me at ajay@bountyx.net or AIM: stareatceiling. Thank you in advance. Hi There I'd really appreciate some help on this please. I keep getting a problem on just one PC (my client's!!), where a left hand graphic disappears, but shows up on everyone else's browsers in firefox, opera, IE6 and safari. She's running Windows XP with IE6 and firefox. Can anyone suggest why the left hand black logo panel does not show up on her system? Any help would be most appreciated. Thanks! |