Forum Moderators: not2easy

Message Too Old, No Replies

How to style <ul> with html-includes?

Is it possible?

         

reddevil

11:40 am on Mar 1, 2006 (gmt 0)

10+ Year Member



I am trying to make use of html-includes for 4 different parts of my home page. I am using FP2002.

But 1 section (my left menu which is basically a few unordered lists) does not accept the styling as coded in the stylesheet, although strangely enough, the other 3 sections look fine. I have checked and seem to have coded and included all 4 sections in the same way – so there shouldn’t be a difference, right? Are <ul><li> more difficult to style?

However, the left menu include is styled correctly when I look at it as a separate page. But it is not styled correctly when viewed as part of the complete home page.

HelenDev

2:38 pm on Mar 1, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Post some code?

What's wrong with the styling exactly?

The only thing I can think of is that <ul> and <li> do have some extra padding and things which you might want to override for your layout.

reddevil

6:25 pm on Mar 1, 2006 (gmt 0)

10+ Year Member



I am using FP Includes and FP extensions are installed as it works on other sections of the same page.

From reviewing my code below it seems that the include on the actual page does not carry over the <ul> class or the <li> class.

HTML OF THE MAIN PAGE IS LIKE THIS (DOES NOT SHOW CLASS)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css-include/main.css">
</head>

<tr>
<td>
<!--webbot bot="Include" U-Include="html-include/left-menu.html" TAG="BODY" startspan -->
<ul>
<li><a href="html-include/page">HOME PAGE</a></li>
<li><a href="html-include/page">MAIN TITLE</a></li>
<li><a href="html-include/page">Smaller Title</a></li>
<li><a href="html-include/page">Title Here</a></li>
<li><a href="html-include/page">Title Here</a></li>
<li><a href="html-include/page">Title Here</a></li>
</ul>
<!--webbot bot="Include" i-checksum="39536" endspan --></td>
</tr>
<tr>

THE HTML INCLUDE IS AS FOLLOWS (IT SHOWS <LI> CLASSES)

<html>
<head>
<link rel="stylesheet" type="text/css" href="../css-include/main.css">
</head>
<body>
<ul>
<li class="ml"><a href="page">HOME PAGE</a></li>
<li class="ml"><a href="page">MAIN TITLE</a></li>
<li class="sl"><a href="page">Smaller Title</a></li>
<li class="sl"><a href="page">Title Here</a></li>
<li class="sl"><a href="page">Title Here</a></li>
<li class="sl"><a href="page">Title Here</a></li>
</ul>

THE CSS IS AS FOLLOWS

ul {
padding:0;
padding-left:0;
margin:0;
}

.ml {
padding-bottom: 10px;
list-style: none;
}

.ml a:link {
color:#000080;
font-weight:bold;
}

.ml a:visited {
color:#333333;
font-weight:bold;
}

.ml a:hover {
color:#333333;
font-weight:bold;
}

.sl {
padding-left: 10px;
padding-top:5px;
list-style: none;
}

.sl a:link {
color:#000080;
font-weight:normal;
}

.sl a:visited {
color:#333333;
font-weight:normal;
}

.sl a:hover {
color:#333333;
font-weight:normal;
}

Light_Gear

3:51 am on Mar 2, 2006 (gmt 0)

10+ Year Member



First I would put your ordered list inside a div then I would use

<div id="header">
<tr>
<td>
<!--webbot bot="Include" U-Include="html-include/left-menu.html" TAG="BODY" startspan -->
<ul>
<li><a href="html-include/page">HOME PAGE</a></li>
<li><a href="html-include/page">MAIN TITLE</a></li>
<li><a href="html-include/page">Smaller Title</a></li>
<li><a href="html-include/page">Title Here</a></li>
<li><a href="html-include/page">Title Here</a></li>
<li><a href="html-include/page">Title Here</a></li>
</ul>
<!--webbot bot="Include" i-checksum="39536" endspan --></td>
</tr> </div>
<tr> <---- Is this extra ----<

Then in your css you will need
#header ul li { Style Code }

Try that and see if you get any where

reddevil

5:05 am on Mar 2, 2006 (gmt 0)

10+ Year Member



lightgear,

thanks for trying to help. according ot the following article, it seems that frontpage incorrectly strips out the <ul> styling!

[support.microsoft.com...]

oh no, coz i don't want to have to learn how to code html-includes without using fp?

HelenDev

1:28 pm on Mar 2, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I confess I don't know much about front page at all, but coding server side includes is generally pretty straighforward I think, and there's a few possible ways to do it. Try Googling for instructions...

reddevil

1:36 pm on Mar 2, 2006 (gmt 0)

10+ Year Member



I have read up on SSI a little bit but it looks like I have to rename my pages with the .shtml suffix?

And this would afect my SERPS, right?

HelenDev

5:37 pm on Mar 2, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



looks like I have to rename my pages with the .shtml suffix?

I don't think that's necessarily true. I think the server can be set up to parse other file extensions (.htm, .html) as having includes. If you are using an ISP for hosting check with them...

Light_Gear

11:16 pm on Mar 2, 2006 (gmt 0)

10+ Year Member



Sorry yeah another great microsoft program..
I use Dreamweaver.

reddevil

4:16 am on Mar 3, 2006 (gmt 0)

10+ Year Member



My host has said that I would have to use .shtml as the server won't allow otherwise.

Do I have any other options to keep my .html extension but also have includes?

Sorry yeah another great microsoft program..
I use Dreamweaver.

But it wouldn't be any different with Dreamweaver, right?

doodlebee

11:18 pm on Mar 4, 2006 (gmt 0)

10+ Year Member



I have a site set up using includes. Your include files need to have the ".shtml" extension, but your index files and such (which are calling in the includes) can have the .html extension. To anyone visiting (including SE's) it will look like a regular HTML file.

I had to use an .htaccess thing to get this going:

AddType text/html .shtml .shtm .htm .html
AddHandler server-parsed .shtml .shtm .htm .html
Options -Indexes

Just put that in your .htaccess file in your public_html ditrectory, and it will include your .shtml files for you (but leave the regular pages with .html extensions)

As for editing - I use Notepad. I've used Dreamweaver, Front Page and other stuff - but for me, nothing works better than hand-coding with Notepad.

reddevil

10:48 am on Mar 5, 2006 (gmt 0)

10+ Year Member



doodlebee,

this is exactly what i have been looking for and will be of great use for my site maintainability.

thanks a bunch