css?

[lukeurtnowski]

I'm trying to create a stlye sheet vith php variables in it, is this the way to do it?

echo '
div#Photos{
width:100%; margin:0 auto;}
#Photos p{
width:90%; margin:0 auto; padding:10px 0 50px 0; text-align:center;}
#Photos p a{
display:block; width:150px; margin:5px; text-decoration:none; float:left;}
#Photos p a:link, #Photos p a:visited{
color:#ff9900;}
#Photos p a:focus, #Photos p a:hover{
color:#990000;}
#Photos p a span{
display:block; margin:0 auto;}
#Photos p a#pic1{
width:100px;}
#Photos p a#pic1:link, #Photos p a#pic1:visited{
background:transparent url($Image1) no-repeat 0% 0%;}
#Photos p a#pic1:focus, #Photos p a#pic1:hover{
background:transparent url($Image1) no-repeat 0% -110px;}
#Photos p a#pic2{
width:100px;}
#Photos p a#pic2:link, #Photos p a#pic2:visited{
background:transparent url($Image2) no-repeat 0% 0%;}
#Photos p a#pic2:focus, #Photos p a#pic2:hover{
background:transparent url($Image2) no-repeat 0% -103px;}
#Photos p a#pic3{
width:100px;}
#Photos p a#pic3:link, #Photos p a#pic3:visited{
background:transparent url($Image3) no-repeat 0% 0%;}
#Photos p a#pic3:focus, #Photos p a#pic3:hover{
background:transparent url($Image3) no-repeat 0% -112px;}
#Photos p a#pic4{
width:100px;}
#Photos p a#pic4:link, #Photos p a#pic4:visited{
background:transparent url($Image1) no-repeat 0% 0%;}
#Photos p a#pic4:focus, #Photos p a#pic4:hover{
background:transparent url($Image1) no-repeat 0% -110px;}
#Photos p a#pic5{
width:100px;}
#Photos p a#pic5:link, #Photos p a#pic5:visited{
background:transparent url($Image2) no-repeat 0% 0%;}
#Photos p a#pic5:focus, #Photos p a#pic5:hover{
background:transparent url($Image2) no-repeat 0% -103px;}
#Photos p a#pic6{
width:100px;}
#Photos p a#pic6:link, #Photos p a#pic6:visited{
background:transparent url($Image6) no-repeat 0% 0%;}
#Photos p a#pic6:focus, #Photos p a#pic6:hover{
background:transparent url($Image6) no-repeat 0% -112px;}
';

Thanks...-

[NogDog]

For large blocks of text like that, I prefer to use the "heredoc" method of quoting, mainly so that I don't have to worry about escaping any quotes in the text:

<?php
echo <<<END
#nogdog {
   /* it's now safe to use quotes without having to escape them */
   font: medium "palatino linotype", 'times new roman', serif;
}
div#Photos{
width:100%; margin:0 auto;}
#Photos p{
width:90%; margin:0 auto; padding:10px 0 50px 0; text-align:center;}
#Photos p a{
display:block; width:150px; margin:5px; text-decoration:none; float:left;}
#Photos p a:link, #Photos p a:visited{
color:#ff9900;}
#Photos p a:focus, #Photos p a:hover{
color:#990000;}
#Photos p a span{
display:block; margin:0 auto;}
#Photos p a#pic1{
width:100px;}
#Photos p a#pic1:link, #Photos p a#pic1:visited{
background:transparent url($Image1) no-repeat 0% 0%;}
#Photos p a#pic1:focus, #Photos p a#pic1:hover{
background:transparent url($Image1) no-repeat 0% -110px;}
#Photos p a#pic2{
width:100px;}
#Photos p a#pic2:link, #Photos p a#pic2:visited{
background:transparent url($Image2) no-repeat 0% 0%;}
#Photos p a#pic2:focus, #Photos p a#pic2:hover{
background:transparent url($Image2) no-repeat 0% -103px;}
#Photos p a#pic3{
width:100px;}
#Photos p a#pic3:link, #Photos p a#pic3:visited{
background:transparent url($Image3) no-repeat 0% 0%;}
#Photos p a#pic3:focus, #Photos p a#pic3:hover{
background:transparent url($Image3) no-repeat 0% -112px;}
#Photos p a#pic4{
width:100px;}
#Photos p a#pic4:link, #Photos p a#pic4:visited{
background:transparent url($Image1) no-repeat 0% 0%;}
#Photos p a#pic4:focus, #Photos p a#pic4:hover{
background:transparent url($Image1) no-repeat 0% -110px;}
#Photos p a#pic5{
width:100px;}
#Photos p a#pic5:link, #Photos p a#pic5:visited{
background:transparent url($Image2) no-repeat 0% 0%;}
#Photos p a#pic5:focus, #Photos p a#pic5:hover{
background:transparent url($Image2) no-repeat 0% -103px;}
#Photos p a#pic6{
width:100px;}
#Photos p a#pic6:link, #Photos p a#pic6:visited{
background:transparent url($Image6) no-repeat 0% 0%;}
#Photos p a#pic6:focus, #Photos p a#pic6:hover{
background:transparent url($Image6) no-repeat 0% -112px;}
END;

/* note that the final "END;" command *must* have no spaces/tabs before it. */

[buraks78]

I really do not like to embed that much text into my code. If you are like me, another way to do this is to create a file named style.css (notice: you have to escape the percent sign after no-repeat)

#Photos p a#pic1:link, #Photos p a#pic1:visited{
background:transparent url(%1$s) no-repeat 0%% 0%%;}
#Photos p a#pic1:focus, #Photos p a#pic1:hover{
background:transparent url(%1$s) no-repeat 0%% -110px;}
#Photos p a#pic2{
width:100px;}
#Photos p a#pic2:link, #Photos p a#pic2:visited{
background:transparent url(%2$s) no-repeat 0%% 0%%;}
#Photos p a#pic2:focus, #Photos p a#pic2:hover{
background:transparent url(%2$s) no-repeat 0%% -103px;}
#Photos p a#pic3{
width:100px;}
#Photos p a#pic3:link, #Photos p a#pic3:visited{
background:transparent url(%3$s) no-repeat 0%% 0%%;}
#Photos p a#pic3:focus, #Photos p a#pic3:hover{
background:transparent url(%3$s) no-repeat 0%% -112px;}

then slurp the file and swap arguments

echo sprintf(file_get_contents("style.css"),$image1,$image2,$image3);

HTH

[scrupul0us]

@: dude... heredoc for the win!... i havent thought about that since my perl class in college 😉