By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,302 Members | 1,816 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,302 IT Pros & Developers. It's quick & easy.

Styling a PHP included menu

AutumnsDecay
100+
P: 170
Alright, so I have a website that I'm using a php included menu.

Normally I just use images with a rollover counterpart, however this time I just want to use text.

I want to set the font-family and size of the menu, which is located in a file called menu.php.

I've gotten it to recognize when the links are being rolled-over so that it changes color (pretty much just echo'ing the a: active tag), but I can't figure out how to define the above mentioned attributes.

Also, do multiple line breaks (<br />'s) not work within an included page?

Here's my CSS code:


index.php:

Expand|Select|Wrap|Line Numbers
  1. <style>
  2. .main
  3.     {
  4.     background: #FFFFFF;
  5.     width: 969px;
  6.     padding-top: 5px;
  7.     }
  8.  
  9. .header
  10.     {
  11.     width:961px;
  12.     background:#FFFFFF;
  13.     border: 1px solid #eaeaea;
  14.     margin-bottom:5px;
  15.     }
  16.  
  17. .navigation
  18.     {
  19.     background: url('images/menuback.jpg');
  20.     width: 186px;
  21.     border: 1px solid #eaeaea;
  22.     float: left;
  23.     padding-left: 10px;
  24.     margin-bottom:20px;
  25.     height: 296px;
  26.     }
  27.  
  28. .leftbar
  29.     {
  30.     background:#FFFFFF;
  31.     width:196px;
  32.     float: left;
  33.     }
  34.  
  35. .rightbar
  36.     {
  37.     width:196px;
  38.     background: #FFFFFF;
  39.     float: right;
  40.     }
  41.  
  42. .latest
  43.     {
  44.     background: #FFFFFF;
  45.     width: 196px;
  46.     border: 1px solid #eaeaea;
  47.     float: left;
  48.     padding-bottom: 5px;
  49.     margin-top: 20px;
  50.     }
  51.  
  52. .bottom
  53.     {
  54.     width:961px;
  55.     background: #FFFFFF;
  56.     height: 25px;
  57.     clear: both;
  58.     }
  59.  
  60. .contentholder
  61.     {
  62.     width:961px;
  63.     background:#FFFFFF;
  64.     display: block;
  65.     }
  66.  
  67. .content
  68.     {
  69.     background: #FFFFFF;
  70.     width: 535px;
  71.     border: 1px solid #eaeaea;
  72.     margin-left: 4px;
  73.     margin-right: 3px;
  74.     text-align:left;
  75.     padding-left:5px;
  76.     padding-right:5px;
  77.     padding-top:3px;
  78.     }
  79.  
  80. .advertise
  81.     {
  82.     background: url('images/menuback.jpg');
  83.     width: 196px;
  84.     border: 1px solid #eaeaea;
  85.     float: left;
  86.     margin-top: 20px;
  87.     }
  88.  
  89. .spacerdiv
  90.     {
  91.     background: #FFFFFF;
  92.     width: 196px;
  93.     height: 50px;
  94.     }
  95.  
  96. .promos
  97.     {
  98.     background: #FFFFFF;
  99.     width: 196px;
  100.     border: 1px solid #eaeaea;
  101.     float: left;
  102.     margin-bottom: 20px;
  103.     height: 296px;
  104.     }
  105.  
  106. .style2
  107.     {
  108.     font-family:Arial, Helvetica, sans-serif;
  109.     font-size: 12px;
  110.     color:#000000;
  111.     font-weight: bold;
  112.     text-align:center;
  113.     }
  114.  
  115. .style5 {
  116.     color: #000000;
  117.     font-family: Arial, Helvetica, sans-serif;
  118. }
  119. .style6 {font-family: Arial, Helvetica, sans-serif}
  120. .style11 {font-size: 14px}
  121. .style13 {font-family: Arial, Helvetica, sans-serif; font-size: xx-small; }
  122. .style15 {font-size: x-small}
  123. .style16 {font-family: Arial, Helvetica, sans-serif; font-size: x-small; }
  124. .style17 {font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
  125. a {
  126.     font-family: Arial, Helvetica, sans-serif;
  127.     color: #CC0000;
  128.     font-size: 12px;
  129.     font-weight: bold;
  130. }
  131. a:visited {
  132.     color: #CC0000;
  133.     text-decoration: none;
  134. }
  135. a:hover {
  136.     color: #000000;
  137.     text-decoration: none;
  138. }
  139. a:active {
  140.     color: #CC0000;
  141.     text-decoration: none;
  142. }
  143.  
  144. a:link {
  145.     text-decoration: none;
  146. }
  147.  
  148. </style>
  149.  


And here's the php include:

Expand|Select|Wrap|Line Numbers
  1. <?php include ('menu.php') ?>
  2.  

And here's the menu.php file
Expand|Select|Wrap|Line Numbers
  1. <?php echo $active[1] ?><a href=”index.php”>Home</a><br /><br />
  2. <?php echo $active[2] ?><a href=”portfolio.php”>Portfolio</a><br /><br />
  3. <?php echo $active[3] ?><a href=”solutions.php”>Solutions</a><br /><br />
  4. <?php echo $active[4] ?><a href=”advertising.php”>Advertising</a><br /><br />
  5. <?php echo $active[5] ?><a href=”hosting.php”>Web Hosting</a><br /><br />
  6. <?php echo $active[6] ?><a href=”resources.php”>Resources</a><br /><br />
  7. <?php echo $active[7] ?><a href=”contact.php”>Contact</a>
  8.  
If you're wondering, yes I have tried to add a style within the php file, and it didn't work.
Apr 13 '08 #1
Share this Question
Share on Google+
2 Replies


drhowarddrfine
Expert 5K+
P: 7,435
The order of styling of links in your css must be:
link
visited
hover
active

Not sure that is the problem. It's very early here.
Apr 13 '08 #2

AutumnsDecay
100+
P: 170
I'm not entirely sure if that's the cause, because the links work fine. The color changes perfectly and bring me to the right page.

I'm just not about to style the links, where as I could if it was in a
<span class=> tag.
Apr 13 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.