Need help with layout of page generated by .php script...

[robertf]

Hi there,

I'm close to finishing the re-design of my website : www.everything.ie but am having a little trouble laying it all out. This is because pretty much all of the content is generated by a classifieds php script which I bought (and know little about how to modify).

First off look here to see the design I want to get close to:
http://www.grahamvard.com/everything.html

In this case all I'm trying to achieve are the search box (top right) and a list of recent forum postings (top left).

The php script generates everything from the navbar down, including the search box. I want to modify the classifieds script so it generates the recent forum links also.

If you look at my test site you will see that I've managed to do this but it looks terrible because there is no style control on the links and they are both on top of each other as opposed to side by side.

Here it is:

http://www.eveythingfree.buildtolearn.net/classifieds/index.php

I want to get it to look something like the example page listed above.

I need to alter the piece of script that controls the search box and (1) Make it include the forum links and (2) layout the two boxes right.

Here's the php code:

==================================================  ========== 
   // generates the search box form 
   // ==================================================  ========== 
   // 
   function generate_search_box() { 

  if ($this->allow_search) { 

     $output = include('http://www.everything.ie/forum/extern.php?action=new&show=6'); 
     $output = '<div align="center" class="searchbox"><form method="GET" action="'.$_SERVER["PHP_SELF"].'">'; 
     $output .= '<input type="hidden" name="cf_action" value="search">'; 
     $output .= '<input type="text" name="search_query" value="'.$this->format_input($_GET["search_query"]).'">&nbsp;'; 
     $output .= '<input type="submit" value="Search">'; 

     if ($this->show_search_options) {        

        $output .= '<br><input type="radio" name="search_mode" value="any">Any&nbsp;word&nbsp;'; 
        $output .= '<input type="radio" name="search_mode" value="all">All&nbsp;words&nbsp;'; 
        $output .= '<input type="radio" name="search_mode" value="exact">Exact&nbsp;phrase&nbsp;'; 
     } 

     $output .= '</form></div>'; 
  } 

  return $output; 

   } 

I added this line in myself

$output = include('http://www.everything.ie/forum/extern.php?action=new&show=6'); 

It brings in the links from the forums but I have no idea how to attach a .css class to it to control its appearance.

The second line I added (or rather changed) is this:

$output = '<div align="center" class="searchbox"><form method="GET" action="'.$_SERVER["PHP_SELF"].'">'; 

I just changed the class from a basic text one to "searchbox" which has a box around it a and background colour.

The div align tag used to make the seach box appear in the centre of the screen, but since I've changed it, it just alters where the search box appears inside the bigger grey box its contained in.

Finally, here's the .css code that controls the search box and hopefully the forum links, if you can work out a way to attach it to them.

.searchbox { 
   font-family: Verdana, Arial, Helvetica, sans-serif; 
   font-size: 10px; 
   color: #666666; 
   text-decoration: none; 
   border: 1px solid #666666; 
   padding: 25px 0px 0px; 
   height: 100px; 
   width: 228px; 
   background-color: #F9F9F9; 
} 

.forums { 
   font-family: Verdana, Arial, Helvetica, sans-serif; 
   font-size: 10px; 
   color: #666666; 
   text-decoration: none; 
   border: 1px solid #666666; 
   padding: 25px 0px 0px; 
   height: 100px; 
   width: 478px; 
   background-color: #F9F9F9; 
} 
.forums a { 
   font-family: Verdana, Arial, Helvetica, sans-serif; 
   font-size: 10px; 
   color: #333333; 
   text-decoration: none; 
} 
.forums a:hover { 
   font-family: Verdana, Arial, Helvetica, sans-serif; 
   font-size: 10px; 
   color: #CC0000; 
   text-decoration: none; 
} 
.forums a:visited { 
   font-family: Verdana, Arial, Helvetica, sans-serif; 
   font-size: 10px; 
   color: #666666; 
   text-decoration: none; 
} 
.forums a:visited:hover { 
   font-family: Verdana, Arial, Helvetica, sans-serif; 
   font-size: 10px; 
   color: #CC0000; 
   text-decoration: none; 
}

My css is only slightly better than my php so there could be problems there as well. The size of the boxes is just a rough estimate. I will have to tweek them to make them fit exactly like on the design example page.

I think the solution to this will involve just a little changing of the php code I supplied, but I have no idea how to do it.

Sorry for the very long post but I figured I better give as much detail as possible so as to make it clear.

I've been struggling with this part of the design for weeks now, so if anyone could sort it out for me I would really appreciate it.

Thanks for reading this far!

Robert

[sidney]

include will output the content retrived from extern.php and asign $output as true then the next line over writes $output

try this

 output = '<div class="classname"'.file_get_contents('http://www.everything.ie/forum/extern.php?action=new&show=6').'</div>';  

         $output .= '<div align="center" class="searchbox"><form method="GET" action="'.$_SERVER["PHP_SELF"].'">';  

         $output .= '<input type="hidden" name="cf_action" value="search">';  

         $output .= '<input type="text" name="search_query" value="'.$this->format_input($_GET["search_query"]).'">&nbsp;';  

         $output .= '<input type="submit" value="Search">';  

you can then add a css class called classname or replace the name one the first line

hope that helps

[robertf]

Hi Sid,

Thanks so much for your help, this has been driving me slightly crazy. Your changes to the script have mostly worked, it now generates both the forums links and the search box. Have a look here to see what I mean:

http://www.eveythingfree.buildtolearn.net/classifieds/index.php

The only problem is that the two boxes are still one on top of the other, while I was hoping to have the forum links on the left hand side of the screen and the search box on the right (both at the same level).

I assume this isn't too hard to do but I have no idea how to go about it.

Hopefully you, or someone else might...

Once again, I really appreciate you helping out.

Robert

[sidney]

you can position the divs with css

example

<style type="text/css">
<!--
.test {
	position: absolute;
	width: 500px;
	height: 50px;
	left: 0px;
	top: 0px;
	right: auto;
	vertical-align: top;
	bottom: auto;
}
.test2 {
	position: absolute;
	width: 400px;
	top: 0px;
	right: auto;
	height: 50px;
	left: 550px;
	vertical-align: top;
	bottom: auto;
}
-->
</style>
</head>

<body>
<div class="test">ttt</div>
<div class="test2">ttt2</div>
</body>
</html>  

[robertf]

Thanks again Sid,

Can I put this into the .php script seeing as that is what generates the two boxes?

<div class="test">ttt</div>
<div class="test2">ttt2</div>

And what does the "ttt" and "ttt2" stand for?

Much obliged,
Robert

[sidney]

ttt is just text or html etc

you can add positioning to you exsisiting css

my example was to show how it can be done with two divs and 2 styles

[robertf]

Thanks Sid,

I didn't know you could position with .css, thanks for letting me know. If you look at the page you'll see I still haven't got it right after an hour of trying to tweak the settings.

I tried setting the positioning to absolute like you had in your posting. While I could get the boxes in the right position this way, they appear in the wrong places if you view the site in a different screen resolution so this isn't likely to work.

I then set positioning to relative. This worked great for the forums box on the right, it stays in the correct position regardless of screen resolution.

When I tried the same thing (relative) with the search box on the right it won't work. The seach box simply won't appear on the same level as the forums one (unless I use absolute positioning with it).

Do you have any idea what's wrong. I have tried lots of different settings, but can't get it right.

Here's what I have at the moment:

.searchbox {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #666666;
	text-decoration: none;
	border: 1px solid #666666;
	background-color: #F9F9F9;
	position: relative;
	width: 230px;
	top: 10px;
	right: 10px;
	height: 80px;
	left: 10px;
	vertical-align: top;
	bottom: auto;
	margin-bottom: 15px;
	padding-top: 30px;
}

.forums {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #666666;
	text-decoration: none;
	border: 1px solid #666666;
	padding: 5px 10px 10px;
	background-color: #F9F9F9;
	position: relative;
	width: 455px;
	height: 50px;
	left: 10px;
	top: 10px;
	right: auto;
	vertical-align: top;
	bottom: auto;
	margin-bottom: 15px;
}

Thanks,
Robert

You can see what it looks like at the moment here:

http://www.eveythingfree.buildtolearn.net/classifieds/index.php

[sidney]

try this

<style type="text/css">
.searchbox {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
text-decoration: none;
border: 1px solid #666666;
background-color: #F9F9F9;
position: relative;
width: 230px;
top: -55px;
right: auto;
height: 50px;
left: 465px;
vertical-align: top;
bottom: auto;
margin-bottom: 15px;
padding-top: 10px;
}

.forums {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
text-decoration: none;
border: 1px solid #666666;
padding: 5px 10px 10px;
background-color: #F9F9F9;
position: relative;
width: 455px;
height: 50px;
left: 10px;
top: 10px;
right: auto;
vertical-align: top;
bottom: auto;
margin-bottom: 15px;
}

[robertf]

Hello Again,

I modified the previous .css and now the two boxes fit perfectly on the screen at all screen resolutions. Thanks for that.

The only problem is, as you can see, that there is now about a 150px gap generated between the boxs and the listings. I've tried adjusting the values of the css styles but I'm not sure what is wrong.

I suspect it may be something to do with the value "top: -122px;" but it has to be at this to make the searchbox level with the other one.

Have you any ideas gow to go about fixing this. Thanks to all your help, I've almost got this page working perfectly.

Here is the current css for the 2 boxes:

.searchbox { 
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 10px; 
color: #666666; 
text-decoration: none; 
border: 1px solid #666666; 
background-color: #F9F9F9; 
position: relative; 
width: 230px; 
top: -122px; 
right: auto; 
height: 100px; 
left: 497px; 
vertical-align: top; 
bottom: auto; 
margin-bottom: 15px; 
padding-top: 15px; 
} 

.forums { 
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 10px; 
color: #666666; 
text-decoration: none; 
border: 1px solid #666666; 
padding: 5px 10px 10px; 
background-color: #F9F9F9; 
position: relative; 
width: 453px; 
height: 100px; 
left: 10px; 
top: 10px; 
right: auto; 
vertical-align: top; 
bottom: auto; 
margin-bottom: 15px; 
}

[sidney]

add a third style and place div aroud your listings to position it

[robertf]

Sorry Sid,

I'm not quite sure what you mean. Do I add a 3rd style in the style sheet and then put that in the php script?

I really don't know what I'm talking about!

Thanks

[sidney]

yes add a style to your style sheet called .listings and use that to position relative and top -150 est. thefine the code that generates the listings and edit it so that the listings are within div class ie

<div class="listings">html generated for listings<div>

hope it helps

[robertf]

Thanks again Sid,

I added this:

.listings {
	position: relative;
	top: -130px;
}

And just like you said it brought up the listings to be just below the boxes.

The only problem is now a similar 130 px space appears below the listings!

While I'd rather the space was down there than up the top of the page, I'd also prefer if it wasn't there at all seeing as I will be putting more content into this part of the page.

Have you any idea how to go about fixing this?

In case it's anything to do with the php, here's the bit that controls the listings:

$output = '<div class="listings"><table border="0" cellspacing="0" cellpadding="10" width="100%"><tr></div>' . "\n";

        // fetch the data
        while ($this->db->next_record()) {
            $category_id = $this->db->f('category_id');
            $category_name = $this->db->f('category_name');
            $item_count = $this->db->f('item_count');
            $parent = substr($category_id,0,2);
            $is_parent = (strlen($category_id) == 2) ? 1 : 0;
            if ($is_parent) {
                $parent_categories[$category_id] = array(   "category_name" => $category_name,
                                                            "item_count" => $item_count);
            } else {
                $child_categories[$parent][$category_id] = array(   "category_name" => $category_name,
                                                                    "item_count" => $item_count);
            }
        }
        // build the content 
        $col_width = (int)100/$col_count; 
        $current_col = 1; 
        $i=0; 
        $next_cat=1; 
        reset($parent_categories); 
        $output .= '<td align="left" valign="top" width="'.$col_width.'%">' . "\n"; 
        while(list($key, $val) = each($parent_categories)) { 

            $output .= '<h2 class="cfmaincat">' . "\n"; 
            $output .= '<a href="'.$portal.'?cf_action=list&category_id='.$key.'">'.$val["category_name"].'</a>'; 
            if ($val["item_count"] > 0 || $this->show_zero_category_count) { 
                $output .= '&nbsp;('.$val["item_count"].')'; 
            } 
            $output .= '</h2>'; 

            if ($this->show_children_at_home) { 

                $output .= '<ul class="cfsubcat">' . "\n"; 
                $this_child = $child_categories[$key]; 
                reset($this_child); 
                $j=0; 
                while(list($key, $val) = each($this_child)) { 
                    $output .= '<li><a  href="'.$portal.'?cf_action=list&category_id='.$key.'">' . $val["category_name"] . '</a>'; 
                    if ($val["item_count"] > 0) { 
                        $output .= '&nbsp;('.$val["item_count"].')</li>'; 
                    } 
                    $j++; 
                }
                $output .= '</ul>'; 
            } 

            // Check for need to break to new column 
            $next_cat++; 
            if ($next_cat > $categories_per_column) { 
                if ($current_col < $col_count) 
                { 
                    $output .= '</td>'; 
                    $output .= '<td align="left" valign="top" width="'.$col_width.'%">' . "\n"; 
                    $next_cat = 1; 
                    $current_col++; 
                } 
            } 
            $i++; 


        } 

        // Fillout any unused columns; 
        while ($current_col < $col_count) 
        { 
            $current_col++; 
            $output .= "</td><td>&nbsp;"; 
        } 

        // close the table 
        $output .= '</td></tr></table>'; 


    } else {
        $output = '<p class="bbclasserror">There are no categories defined yet.</p>';
    }

    return $output;
}

This means very little to me I'm afraid!

Thanks,
Robert

[sidney]

its the table structure messing up lay ot i think it would be best to do all lay out with css example below

   <style type="text/css">
<!--
.searchbox {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #666666;
	text-decoration: none;
	border: 1px solid #666666;
	background-color: #F9F9F9;
	width: 230px;
	height: 100px;
	left: 30px;
	vertical-align: top;
	margin-bottom: 15px;
	padding-top: 15px;
	top: 10px;
	position: relative;

} 

.forums { 
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 10px; 
color: #666666; 
text-decoration: none; 
border: 1px solid #666666; 
padding: 5px 10px 10px; 
background-color: #F9F9F9; 
position: relative; 
width: 453px; 
height: 100px; 
left: 20px; 
top: 10px;  

vertical-align: top; 
margin-bottom: 15px;
float: left;

}
.listings {
	position: relative;
	top: 10px;
	float: none;
	left: 15px;
	font-size: 16px;
}
.display {
	height: 100%;
	width: 750px;
	position: relative;
	clip:      rect(auto auto 130px auto);
	border: 1px solid #666666;
	background-color: #FFFFFF;
	font-size: 16px;
	text-align: left;

}

body {
	text-align: center;
	background-color: #CCCCCC;
	font-size: 9px;
	margin: 0px;
	font-family: Arial, Helvetica, sans-serif;
}

.title {
	position: relative;
	font-size: 16px;
	background-color: #CCCCCC;
	text-align: right;
	top: 10px;
	height: 25px;
	width: 750px;
	border: 1px solid #666666;
}

.menulink {
	position: relative;
	height: 30px;
	width: 750px;
	border: 1px solid #666666;
	font-size: 16px;
	background-color: #CCCCCC;
	top: 5px;


}
-->
</style>
</head>

<body>


<div class="title">everythingie</div>
<div class="menulink">menu</div>
<div class="display"> 
<div class="forums">forum</div><div class="searchbox">searchbox</div>
<div class="listings">listings</div>
</div>
copyright
</body>
</html>  

[robertf]

Thanks very much Sid,

I incorporated the updated .searchbox, .forums, and .listings styles and the page looks fine.

The only problem now is that the site only works in Internet Explorer and is badly messed up in Netscape and Mozilla Firefox.

I think this is due to the "float" property in the .forums css, I'm not sure if the other 2 browsers handle "float" the same way as IE.

The problem is there doesn't seem to be any way of removing it without losing the formatting it creates.

I'm going to try reading up on this float property, to see if there is any way around it. Though I'm pretty much an Internet Explorer user, I'd imagine having the site compatible with other browsers (especially Netscape) is important.

Let me know if you have any ideas,

All the best,
Robert.

[sidney]

i see what you mean i hadnt checked it in netscape needs some work

might be an idea to post in a css form

im not that versed in css but will continue messsing with it if i come up with a fix ill let you know

[robertf]

I've posted in a few more forums about the .css and I'll let you know if they come up with anything.

Robert