CSS - [php5] Different Colored Link When On Page

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???

I'm making a page and I've got an a:link specification. I want a separate specification for a part of the page under a .header tag. The background on that part of the page doesn't match the a:link color I have specified for the rest of the page. So I want one specifically for the .header tag.

Doesn't seem to be working though. How do you think I should throw it in there?

Hello all,

Is it ok to add the following on the same htm page???

The reason I think, and corrcet me if i am wrong, is that Netscape wants the IMPORT one as opposed to IE wanting the LINK one.

Code:

<link href="scripts/CoffsCoast.css" rel="stylesheet" type="text/css" />
<style type="text/css">@import url("scripts/CoffsCoast.css");</style>

Hi there,

I want to create a hyperlink to an external page from my web site.

Is it possible to show that external content on my page without using frame set.

From the attachment, link 1 & link 2 are external links inside a div.

I want to show it on the second div on the bottom.

Thanks.

Hi all,

I am making a test page for a client. It's a VERY simple site (he's a simple guy ), but I am having a little trouble with something that's probably pretty easy. For some reason, though I just can't get it to cooperate.

The site is at www.bartlett-family.net/test

On the footer, you'll notice that it also has a few links and those links have the SAME properties (through the CSS) as the other page links on the left and right. I don't want that. I want the links in the footer to be WHITE at all times, whether clicked, hovered over, etc.

How can I do this?

Thanks!

Chris

Thanks for taking the time to read my question.

Is is possible to have different link attributes on different sections of a page?

For example:

I'd like to have all links on the menu section be white font, visited be black font, hover to be green font and active to be yellow font

On the rest of the page, I'd like all links to be green font, visited to be blue font, hover to be yellow font, and active to be whtie font.

here is my css:

Code:

@charset "iso-8859-1";
body {
text-align:center;
margin-top: 10px;
background-color: green;
/*background-color: #d8d8d8;*/
}

#frame {
width: 640px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: white;
}

#header {
width: 640px;
height: 100px;
background-color: blue;
}

#menu {
color: white;
font-weight: bold;
float: left;
width: 100px;
text-align: left;
text-transform: uppercase;
font-size: medium;
background-color: #FD9800;
font-size: 16px;
border: medium solid #E0E0E0;
padding: 4px;
}

#menu a.nav {
width:92px;
/*How can I have different colored links in this section v.s. the rest of the page?*/
}

a:visited {
color:#FFFF00;
font-size: 12px;
}
a:hover {
color:#FFFFFF;
font-weight: bold;
font-size: 12px;
}
a {
color:green;
font-size: 12px;
}

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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-color:#060606; background:url(images/background.png) repeat-y left top;
}

ul, ul li { margin:0; padding:0; list-style:none; }
ol, ol li { margin:0; padding:0; list-style:none; }
div { margin:0; padding:0; }
.clear { clear:both; }

.wrapper { width:100%; height:1000px; border:1px solid #FF0000;  }
.header_wrapper { background:url(images/banner_bg.png) no-repeat left top; height:115px; width:100%; border-bottom:2px solid #FCE66F; } 
.header_wrapper .header { width:906px; height:115px; margin:0 auto; outline:1px solid #0000FF;  }
.header_wrapper .header .logo { float:left; left:0; top:0; width:136px; }
.header_wrapper .header .title { float:left; margin-left:10px; padding-top:42px; width:491px; }
.header_wrapper .header .right { width:245px; height:115px; float:right; outline:1px solid #0000FF; position:relative; }
.header_wrapper .header .right .link { font:Tahoma, "Times New Roman", "Trebuchet MS", Verdana, Georgia, Arial, sans-serif; color:#F4E8D1; padding-top:28px; width:145px; height:20px; outline:1px solid #0033FF; position:absolute; right:0;    }
.header_wrapper .header .right .search { width:245px; height:35px; outline:1px solid #FF0000; position:absolute; bottom:20px; right:0; }

.header_wrapper .header .right .link ul li a { line-height:10px; border-left:1px solid #F4E8D1; float:left; text-decoration:none; margin-left:15px; padding-left:15px; color:#F4E8D1; }
.header_wrapper .header .right .link ul li.first a { border:none;  }
.header_wrapper .header .right .link ul li a:hover { text-decoration:underline; }




.container_wrapper { width:923px;  margin:0 auto; background:#060606; outline:1px solid #FF0000;  }
.container_wrapper .nav { margin:0 auto; padding-top:30px; width:923px; height:32px;   font:12px Tahoma, "Times New Roman", "Trebuchet MS", Verdana, Georgia, Arial, sans-serif;   }
.container_wrapper .nav ul { list-style:none; margin:0; padding:0;  }
.container_wrapper .nav ul li { display:inline;  margin-top:27px; }
.container_wrapper .nav ul li a { padding:17px 35px;  color:#FF6600; text-decoration:none;   }
.container_wrapper .nav ul li.first a { margin-left:30px; }
.container_wrapper .nav ul li a:hover { background:url(images/hover_button1.png) center center no-repeat; color:#FF6600; }

.container_wrapper .home_container { margin:0 auto; width:906px; outline:1px  solid #0000FF; position:relative; }
.container_wrapper .home_container .container_bg { background:url(images/body_bg.png) repeat-y left top;  }
.container_wrapper .home_container .left { float:left; width:219px; outline:1px solid #0000FF; margin-left:10px;    }
.container_wrapper .home_container .left .background { background:url(images/left_box_bg_img.png) repeat-y left top; }
.container_wrapper .home_container .left .background .title { font: bold 12px Verdana, Arial, Helvetica, sans-serif; color:#FDFD31; width:190px; border-bottom:2px solid #FF7811; margin-left:12px; padding-bottom:5px; padding-left:2px;    }
.container_wrapper .home_container .left .background .pruduct { width:190px; margin-left:12px; margin-top:5px; }
.container_wrapper .home_container .left .background .pruduct ul li { font:12px Verdana, Arial, Helvetica, sans-serif; color:#FFF500; padding-bottom:5px;  }
.container_wrapper .home_container .left .background .pruduct ul li a { color:#FFF500; text-decoration:none;  }
.container_wrapper .home_container .left .background .pruduct ul li a:hover {  color:#FFF500; text-decoration:underline; }

.container_wrapper .home_container .contain_box { float:left; width:400px; margin:0px 10px 0 10px; }
.container_wrapper .home_container .contain_box .contain_title { font:bold 14px Verdana, Arial, Helvetica, sans-serif; color: #FDFD31; padding:5px 0 8px 0; }
.container_wrapper .home_container .contain_box .text { font:12px Verdana, Arial, Helvetica, sans-serif; color:#ffffff; font-style:normal; text-align:justify; }

.container_wrapper .home_container .right { float:right; width:253px; outline:1px solid #0000FF;  }
.container_wrapper .home_container .right .right_box_bg { background:url(images/right_box_bg_img.png) repeat-y left top; }
.container_wrapper .home_container .right .right_box_bg .daily_news { width:195px; height:120px; outline:1px solid #00FF00; margin:0 auto; padding:0;  }
.container_wrapper .home_container .right .right_box_bg .daily_news .News_title { font: bold 24px "Times New Roman", Times, serif; color:#000000; text-align:center; border-bottom:2px solid #FA7815;   }
.container_wrapper .home_container .right .right_box_bg .daily_news .news_scroll { font:12px Verdana, Arial, Helvetica, sans-serif; text-align:center;  width:175px; padding-left:20px;  }


.container_wrapper .home_container .right .right_box_bg .login_nox { width:230px; height:200px; outline:1px solid #0000FF; margin:0 auto; margin-top:20px;  }

.footer { margin:0 auto; width:906px; height:73px;  background:url(images/footer2.png) no-repeat; margin-top:5px;  outline:1px solid #0000FF; text-align:center;  }
.footer ul li { font:12px "Times New Roman", Times, serif; color:#C1A579;  display:inline; line-height:80px; margin-left:20px; padding-left:20px;  }
.footer ul li a { font:12px "Times New Roman", Times, serif; color:#C1A579; text-decoration:none; }
.footer ul li a:hover { text-decoration:underline; }

</style>
</head>

<body>


<div class="wrapper">
    <div class="header_wrapper">
        <div class="header">
            <div class="logo"><img src="images/logo.png" height="171" width="136"/></div>
            <div class="title"> <img src="images/banner_title.png" width="500" height="56" /></div>
            <div class="right">
                <div class="link">
                    <ul>
                        <li class="first"><a href="">Register</a></li>
                        <li><a href="">Login</a></li>
                    </ul>
                </div>
                <div class="search">
                    <table width="245">
                        <tr>
                            <td><img src="images/search_bg.png" width="179" height="27" /></td><td> <img src="images/go_button.png" width="49" height="29" /></td>
                        </tr>
                    </table>
                </div>
                <div class="clear"><!-- --></div>
            </div>
            <div class="clear"><!-- --></div>
        </div>
    </div>
    
    
    
    
    
    <div class="container_wrapper">
    <div class="nav"> 
        <ul>
            <li class="first"><a href="#">Home  </a></li>
            <li><a href="#">Voluntee </a></li>
            <li><a href="#">About Us </a></li>
            <li><a href="#">Events</a></li>
            <li><a href="#"> Donate </a></li>
            <li ><a href="#"> Carrier with us</a></li>
        </ul>    
    </div>
    
    <div class="clear"><!-- --></div>
    <div class="home_container">
        <div><img src="images/body_top.png" width="906" height="12"></div>
        <div class="container_bg">
        <div class="left">
            <div><img src="images/left_box_top_img.png" width="219" height="14" /></div>
            <div class="background">
                <div class="title">EVENTS</div>
                    <div class="pruduct">                    
                        <ul>
                            <li>* <a href="#">Whatexpect on Sundays</a></li> 
                            <li>* <a href="#">Location and directions</a></li> 
                            <li>* <a href="#">Where to go to wear</a></li> 
                            <li>* <a href="#">What  for your child</a></li> 
                            <li>* <a href="#">Meet the staff</a></li> 
                            <li>* <a href="#">ExploreFaith.org</a></li> 
                            <li>* <a href="#">Mission Opportunities</a></li> 
                        </ul>    
                    </div>
            </div>            
            <div><img src="images/left_box_bottom_img.png" width="219" height="15" /></div>
        </div>
        
        
        <div class="contain_box">
                <div class="contain_title">Welcome to Elite Brigade</div>
                <div class="text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>
<br>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                </div>
        </div>
        <div class="right">
            <div> <img src="images/right_box_top_img.png" width="253" height="18" /></div>
            <div class="right_box_bg">
                    <div class="daily_news">
                        <div class="News_title">Daily News</div>
                        <div class="news_scroll">

  <marquee height="80" behavior="scroll" direction="up" scrolldelay="50" truespeed="truespeed" scrollamount="1"  onmouseover="this.stop()" onmouseout="this.start()" >

Put Your Images tag here

</marquee>                        
                        </div>
                    </div>
                    <div class="login_nox"></div>            
            </div>
            <div><img src="images/right_box_bottom_img.png" width="253" height="17" /></div>
        </div>        
        <div class="clear"><!-- --></div>    
        
        
        </div>
        <div><img src="images/body_bottom_.png" width="906" height="23"/></div>    
     </div>
    
    
        <div class="clear"><!-- --></div>
    <div class="footer">
        <ul>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact us</a></li>
            <li><a href="#">Privacy Policy</a></li>
            <li><a href="#">Copyright statement</a></li>
        </ul>    
    </div>
    
    </div>
    
    </div>
</div>

</body>
</html>

Quote:
Hi Friends...........
Above code is an home page of website and I want that when user clicks on register link, the registration form(PHP File) displays below "Welcome to Ankit" by replacing "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>
<br>
<span style="font-weight: bold">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."</span>
instead of another page.
Anyone plz help me??????????????
Thx in advance............

Hello,

I am currently making a site, and this is my first experience using css, and so far I love it. Now I have a page with multiple links on it, and this page has its css info stored in a seperate css file. Now I want some of the links to show up in all satus's (hover, visited ect)with one color, size ect, and some links to show up with a different color. I know i can modify all the links on the page color by adding this to the css page...
------------------------
A:LINK {font-family: Arial, Helvetica, sans-serif;
color:#000000;
text-decoration:none;
font-size:12pt;
font-weight:bold;}
-----------------------

but how can i make it so each class has a differnt a:link, a:visited, ect. Thanks!

PROBLEM: I create a nice button using the sliding doors technique for rounded corners. But the button displays with 100% width unless I float it. My layout requires that the buttons be inline with the text, so floating won't work. Anyone know an alternative?

I wouldn't mind floating but I want the button to show inline with the text. When I use float:left, it removes it from the inline flow.

Basically, I want a very modular button that can be used in several different places on a page. In many cases, floating is fine because the mockup has it out of the inline text, but I want to use it there, too.

Here's the HTML:

<a class="button" href="#"><span>Update Profile</span></a>

Here's the css:

a.button:link, a.button:visited {
background:url(button_right.gif) no-repeat right top;
}
a.button span:hover, a.button span:active {
background:url(button_left_hover.gif) no-repeat right top;
}
a.button span {
background:url(button_left.gif) no-repeat left top;
color:#fff;
cursorointer;
display:block;
height:20px;
line-height:20px;
margin:0 2px 0 0;
padding:0 10px;
position:relative;
white-space:nowrap;
}

http://tinyurl.com/5llwfl

I'm having some problems with this page in particular. Try clicking on one of the Left or Right white image arrows below the main picture. This only occurs in Firefox 2.x. Once you click the link, the content area below "Starting from $278.497" should shift roughly 5 pixels down.

I thought it may be related to the dotted link outline that surrounds the image, but that was not the case. I applied styles to get rid of that and there was no changes.
I also thought it may be related to a position:relative; bug which this site has been notorious for. I tried making certain divs in that area position:relative to no avail. So to test further I tried an overall #content *{position:relative;} fix which could not fix the position shift, either.

I'm not sure what else it could be. And while I do have access to the build of this app, I have not been able to reproduce the issue by downloading all HTML, CSS, and image files locally.

Hello
Is there a way i can restore my <a href> link back to its original color, that is before the a:visited event, when I click on another link?
PS. no Javascript code needed, is their an alternative in css?

I have my links defined with a dashed border, but I don't want this on linked images and I'm trying to figure out if I can accomplish this with CSS only without additional markup in my HTML file.

Here is a sample file:

http://www. shawkey.com/test/imagebordertest.html

Any suggestions on how I can get the dashed border to not appear below the image and only appear below the text with just CSS?

Hello

is there a way to make it so hyperlinks are not decorated as the default blue? I have the following css which I've attempted to make it so the text '.com' is always white, but it defaults to the standard link color.

html:

<td class="nodecoration"><a class="nodecoration" href="http://www.somesite.com">.com</a></td>

css:

Code:

td.nodecoration {
	background-color: #003399; color: white; width: 120px; height: 30px; font-family: "Verdana", sans-serif; font-size: 25px; font-weight: bold; text-align:center;
}

A:link.nodecoration {text-decoration: none}
A:visited.nodecoration{text-decoration:none}
A:active.nodecoration{text-decoration:none}
a:hover.nodecoration{text-decoration:underline}

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

Hi All :

Currently i'm running in .NET platform together with VB.net and ASP.

I faced a problem regarding to the PAGE BREAK html tag. The problem is when i want to print out a report, it will show with scroll bar and the report is very long. So what i have to do is to apply Page-Break-After/Before into the HTML. how am i know if the report already apply the Page Break function or not? And the only style i can use is CSS. Anyone familiar with this? It's urgent !! Hope can get anyone help asap.


Regards,
JeFFery