Please login or register.

Login with username, password and session length
Advanced search  

Author Topic: andreas05 css template and <?php categories(); ?>  (Read 5191 times)

steerpike

  • Newbie
  • *
  • Karma: 13
  • Posts: 38
andreas05 css template and <?php categories(); ?>
« on: August 16, 2008, 10:44:25 PM »

Hello all,
I am using the andreas05 template and trying to adapt his code to snews-
I'm having trouble with changing his menu sidebar for php categories: (this is a css problem i think)
The code is:
Code: [Select]
<?php


<div id="container">
<div id="sidebar">
<h2>Site menu:</h2>
<class="menu" href="index.html">First page</a>
<class="menu" href="#">Second</a>
<class="menu" href="#">Third</a>
<class="menu" href="#">Fourth</a>
<class="menu" href="#">Fifth</a>
<class="menu" href="#">Sixth</a>
<class="menu" href="#">Seventh</a>

?>


I want to replace that with php categories but I'm not sure if I can work his menu class into it... What I'm doing isn't working..

Here is the css:
Code: [Select]

/* General tags */
* {margin:0; padding:0;}
body {background:#cccccc url(bodybg.gif) repeat; font:76% verdana,tahoma,sans-serif; color:#555555;}
a {background-color:inherit; color:#286ea0; font-weight:bold; text-decoration:none;}
a:hover {text-decoration:underline;}
p {margin:0 0 16px 0;}
ul, ol {margin:0 0 16px 15px; padding-left:5px;}
ul ul, ol ol {margin:3px 0 0 15px;}
img {float:left; margin:0 10px 5px 0;}

/* Headers */
h1 {color:#555; font-size:3.6em; letter-spacing:-3px; margin:0; text-align:right;}
h2 {font-size:1.6em; font-weight:normal; letter-spacing:-1px; margin:5px 0 10px;}

/* IDs */
#title {margin:20px auto -9px; width:700px;}
#container {background:#fff url(front.png) bottom left no-repeat; border:20px solid #555; color:#555; margin:0 auto 15px; padding:10px; width:700px; height:383px; line-height:1.3em;}
#sidebar {float:left; padding-left:175px; width:110px;}
#sidebar p {margin:10px 0 5px 10px; text-align:left; font-size:0.8em;}
#sidebar p a {font-weight:400;}
#main {float:right; width:385px;}
#footer {clear:both; color:#aaa;}

/* Menu */
.menu {border:1px solid #ffffff; color:#286ea0; display:block; font-size:1.1em; font-weight:bold; padding:4px 2px 4px 10px; width:110px;}
.menu:hover {background-color:#f8f8f8; border:1px solid #cccccc; color:#333333; text-decoration:none;}

/* Various classes */
.credits {color:#777; font-size:0.9em; margin-bottom:0;}
.credits a {color:#777;}


Any help would be muchly appreciated!
« Last Edit: August 18, 2008, 01:34:59 AM by Keyrocks »
Logged

steerpike

  • Newbie
  • *
  • Karma: 13
  • Posts: 38
Re: andreas05 css template and <?php catergories(); ?>
« Reply #1 on: August 18, 2008, 12:27:59 AM »

Keyrocks.. Thanks for your very detailed reply! (Which you deleted for some reason?)

I didn't get a chance to give your solution a whirl until just now.. Sorry I didn't reply back sooner.

It still didn't work for me however.. the box effect on hover on the links still is not happening..

Actually my bad-- it works in ff3 but not ie6.. not sure about ie7 don't have that installed--

Anyway appreciate the help very much Keyrocks!
« Last Edit: August 18, 2008, 01:28:28 AM by steerpike »
Logged

Joost

  • Guest
Re: andreas05 css template and <?php catergories(); ?>
« Reply #2 on: August 18, 2008, 12:42:03 AM »

Keyrocks.. Thanks for your very detailed reply! (Which you deleted for some reason?)

Some issues today
Logged

steerpike

  • Newbie
  • *
  • Karma: 13
  • Posts: 38
Re: andreas05 css template and <?php categories(); ?>
« Reply #3 on: August 18, 2008, 12:46:17 AM »

ahh.. thx-

I thought that Keyrocks had gotten annoyed that I didn't reply promptly to his solution to my post and had deleted his reply..

I am a very new member and I thought that somehow I had violated post/reply ettiquite

lol

Logged

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6019
  • Semantically Challenged
    • snews.ca
Re: andreas05 css template and <?php categories(); ?>
« Reply #4 on: August 18, 2008, 01:30:21 AM »

ahh.. thx-
I thought that Keyrocks had gotten annoyed that I didn't reply promptly to his solution to my post and had deleted his reply..
I am a very new member and I thought that somehow I had violated post/reply ettiquite
lol

No... I didn't delete the post (or any other)  ;D
I will see if I still have the code kicking around and post it again if I do. It was working fine in IE7.

OK... so (a shorter version this time)... it was...

1) In your new index.php (template) file... replace those <a class links with a categories division and the categories function-name so it looks like this (don't copy the php tags tho)

Code: [Select]
<?php


<div id="container">
<div id="sidebar">
<h2>Site menu:</h2>
<div id="categories"> <ul>
<?php categories(); ?>

</ul> </div>

?>

And... to give it the styling for your andreas05 template... in your andreas05.css file... replace this
Quote


/* Menu */
.menu {border:1px solid #ffffff; color:#286ea0; display:block; font-size:1.1em; font-weight:bold; padding:4px 2px 4px 10px; width:110px;}
.menu:hover {background-color:#f8f8f8; border:1px solid #cccccc; color:#333333; text-decoration:none;}

with these styles (same styling, but for the new categories division):
Quote

#categories li {border:1px solid #ffffff; color:#286ea0; display:block; font-size:1.1em; font-weight:bold; padding:4px 2px 4px 10px; width:110px;}
#categories li:hover {background-color:#f8f8f8; border:1px solid #cccccc; color:#333333; text-decoration:none;}
#categories li a {background-color:inherit; color:#286ea0; font-weight:bold; text-decoration:none;}

« Last Edit: August 18, 2008, 01:44:06 AM by Keyrocks »
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

steerpike

  • Newbie
  • *
  • Karma: 13
  • Posts: 38
Re: andreas05 css template and <?php categories(); ?>
« Reply #5 on: August 18, 2008, 03:35:53 AM »

Great that works nicely Keyrocks!

Still no box effect on hover in ie6-- but I'm not too worried about it-- most people use ie7 anyway- time to upgrade to ie7 anyway to see if it works there--

btw-- i took out the <ul> tag that categories was nested in because it caused the links to shift to the right too much.. they are just right now..

sNews rocks!

Keyrocks.. well um... rocks!

 ;D

One more quick question if I could--

the following in the css:

#container {background:#fff url(front.png) bottom left no-repeat; border:20px solid #555; color:#555; margin:0 auto 15px; padding:10px; width:700px; height:383px; line-height:1.3em;}

The front.png floats on the left side of the template--  the image is 180x383-- the problem however is that the template heighth is dependent on the content (but not the image) on the page.. so if the categories only take up a little bit of vertical space.. and if the main content only takes up a little space, then the picture gets scrunched vertically because the template height responds the the content on the page.. also if there is a bunch of content, the image starts to shift down vertically, leaving more and more space between the top of the image and the top of the template..

Here is a quick link to the andreas5 template: (My pages aren't live yet)
http://andreasviklund.com/files/demo/andreas05/

This is probably easy css stuff, but I just don't know enough yet..
« Last Edit: August 18, 2008, 04:01:18 AM by steerpike »
Logged

Sasha

  • Hero Member
  • *****
  • Karma: 28
  • Posts: 938
    • cssanarchy.com
Re: andreas05 css template and <?php categories(); ?>
« Reply #6 on: September 07, 2008, 06:40:41 AM »

what is your point?...template works fine..with expanded content text or menu text picture scrole down with template.image cannot expand down same like templates.you canno't resize this image dragon with css to strach with your template.that is whay image moving down with expanded text
« Last Edit: September 07, 2008, 06:55:54 AM by Sasha »
Logged
Every morning, I get up and look through the 'Forbes' list of the richest people in America. If I'm not there, I go to work. | If you love your job, you haven't worked a day in your life. snews with ♥