«

Hello,

I've created a gallery of photos in php. The model is very simple:
Album/subalbum/photos.
If the user clicks on an album, a bunch of subalbums appear. And if
the user selects one of the subalbum, a gallery of photos appear.

The gallery of photos appear right beneath the subalbum list item
selected by the user. I've tested everything and the result is prety
cool.

Now, because im trying to be compiant with HTML/XHTML, and mostly
because im trying to create good code, i was wondering if the piece of
code is OK.

Even though everything works ok, i was wondering for example if i can
insert a <div> between an <li>.
Is it better to put an <a> inside a <ul><li> when im constructiing a
list?


This is a sample of the code. Notice the insertion of the gallery
beneath the <li> selected by the user.
....
<!-- CONTENT_RIGHT -->
<div id="content_right">
<ul>
<li><a href="#">Gallery One</a></li>
<li><a href="#">Sky</a></li>
<li><a href="#">Hello World</a></li>
<li><a href="#">Tribute</a></li>
<div id="thumbnail">
<a href="#"><img src="images/photography/1.jpg" /></a>
<a href="#"><img src="images/photography/2.jpg" /></a>
<a href="#"><img src="images/photography/3.jpg" /></a>
<a href="#"><img src="images/photography/4.jpg" /></a>
<a href="#"><img src="images/photography/5.jpg" /></a>
</div>

<li><a href="#">Cloud 9</a></li>
<li><a href="#">The End</a></li>
</ul>
</div>
......

Is this good code?

Thanks
Marco

On Nov 8, 12:01 pm, SM <servandomont...@gmail.com> wrote:
> Hello,
>
> I've created a gallery of photos in php. The model is very simple:
> Album/subalbum/photos.
> If the user clicks on an album, a bunch of subalbums appear. And if
> the user selects one of the subalbum, a gallery of photos appear.
>
> The gallery of photos appear right beneath the subalbum list item
> selected by the user. I've tested everything and the result is prety
> cool.
>
> Now, because im trying to be compiant with HTML/XHTML, and mostly
> because im trying to create good code, i was wondering if the piece of
> code is OK.
>
> Even though everything works ok, i was wondering for example if i can
> insert a <div> between an <li>.
> Is it better to put an <a> inside a <ul><li> when im constructiing a
> list?
>
> This is a sample of the code. Notice the insertion of the gallery
> beneath the <li> selected by the user.
> ...
> <!-- CONTENT_RIGHT -->
> <div id="content_right">
> <ul>
> <li><a href="#">Gallery One</a></li>
> <li><a href="#">Sky</a></li>
> <li><a href="#">Hello World</a></li>
> <li><a href="#">Tribute</a></li>
> <div id="thumbnail">
> <a href="#"><img src="images/photography/1.jpg" /></a>
> <a href="#"><img src="images/photography/2.jpg" /></a>
> <a href="#"><img src="images/photography/3.jpg" /></a>
> <a href="#"><img src="images/photography/4.jpg" /></a>
> <a href="#"><img src="images/photography/5.jpg" /></a>
> </div>
>
> <li><a href="#">Cloud 9</a></li>
> <li><a href="#">The End</a></li>
> </ul>
> </div>
> .....
>
> Is this good code?
>
> Thanks
> Marco

A URL would be more helpful. But the answer your question, run the
page through the validator and see what it comes up with. Hint: a UL
element can only contain LI elements.

On Nov 8, 3:28 pm, Adrienne Boswell <arb...@yahoo.com> wrote:
> On Nov 8, 12:01 pm, SM <servandomont...@gmail.com> wrote:
>
>
>
> > Hello,
>
> > I've created a gallery of photos in php. The model is very simple:
> > Album/subalbum/photos.
> > If the user clicks on an album, a bunch of subalbums appear. And if
> > the user selects one of the subalbum, a gallery of photos appear.
>
> > The gallery of photos appear right beneath the subalbum list item
> > selected by the user. I've tested everything and the result is prety
> > cool.
>
> > Now, because im trying to be compiant with HTML/XHTML, and mostly
> > because im trying to create good code, i was wondering if the piece of
> > code is OK.
>
> > Even though everything works ok, i was wondering for example if i can
> > insert a <div> between an <li>.
> > Is it better to put an <a> inside a <ul><li> when im constructiing a
> > list?
>
> > This is a sample of the code. Notice the insertion of the gallery
> > beneath the <li> selected by the user.
> > ...
> > <!-- CONTENT_RIGHT -->
> > <div id="content_right">
> > <ul>
> > <li><a href="#">Gallery One</a></li>
> > <li><a href="#">Sky</a></li>
> > <li><a href="#">Hello World</a></li>
> > <li><a href="#">Tribute</a></li>
> > <div id="thumbnail">
> > <a href="#"><img src="images/photography/1.jpg" /></a>
> > <a href="#"><img src="images/photography/2.jpg" /></a>
> > <a href="#"><img src="images/photography/3.jpg" /></a>
> > <a href="#"><img src="images/photography/4.jpg" /></a>
> > <a href="#"><img src="images/photography/5.jpg" /></a>
> > </div>
>
> > <li><a href="#">Cloud 9</a></li>
> > <li><a href="#">The End</a></li>
> > </ul>
> > </div>
> > .....
>
> > Is this good code?
>
> > Thanks
> > Marco
>
> A URL would be more helpful. But the answer your question, run the
> page through the validator and see what it comes up with. Hint: a UL
> element can only contain LI elements.

Thanks!
I completely forgot about the W3C validator.
I did the validation test and, indeed, i got an error on the <ul>
element not having a <li> tag.
I've added a <li> tag that wraps around the <div> (weird as it may
sound) and validates correctly!

Thanks again dude!


code change:
> ...
> <!-- CONTENT_RIGHT -->
> <div id="content_right">
> <ul>
> <li><a href="#">Gallery One</a></li>
> <li><a href="#">Sky</a></li>
> <li><a href="#">Hello World</a></li>
> <li><a href="#">Tribute</a></li>
> <li>
> <div id="thumbnail">
> <a href="#"><img src="images/photography/1.jpg" /></a>
> <a href="#"><img src="images/photography/2.jpg" /></a>
> <a href="#"><img src="images/photography/3.jpg" /></a>
> <a href="#"><img src="images/photography/4.jpg" /></a>
> <a href="#"><img src="images/photography/5.jpg" /></a>
> </div>
> </li>
> <li><a href="#">Cloud 9</a></li>
> <li><a href="#">The End</a></li>
> </ul>
> </div>

SM wrote:
>> <li><a href="#">Tribute</a></li>
>> <li>
>> <div id="thumbnail">
>> <a href="#"><img src="images/photography/1.jpg" /></a>
>> <a href="#"><img src="images/photography/2.jpg" /></a>
>> <a href="#"><img src="images/photography/3.jpg" /></a>
>> <a href="#"><img src="images/photography/4.jpg" /></a>
>> <a href="#"><img src="images/photography/5.jpg" /></a>
>> </div>
>> </li>
>> <li><a href="#">Cloud 9</a></li>

Do you need that div at all?

<li><a href="#">Tribute</a></li>
<li id="thumbnail">
<a href="#"><img src="images/photography/1.jpg" /></a>
<a href="#"><img src="images/photography/2.jpg" /></a>
<a href="#"><img src="images/photography/3.jpg" /></a>
<a href="#"><img src="images/photography/4.jpg" /></a>
<a href="#"><img src="images/photography/5.jpg" /></a>
</li>
<li><a href="#">Cloud 9</a></li>

And while you're at it you could be pedantic and say that the thumbnails are
a list as well:

<li><a href="#">Tribute</a></li>
<li>
<ul id="thumbnail">
<li><a href="#"><img src="images/photography/1.jpg" /></a></li>
<li><a href="#"><img src="images/photography/2.jpg" /></a></li>
<li><a href="#"><img src="images/photography/3.jpg" /></a></li>
<li><a href="#"><img src="images/photography/4.jpg" /></a></li>
<li><a href="#"><img src="images/photography/5.jpg" /></a></li>
</ul>
</li>
<li><a href="#">Cloud 9</a></li>

In article
<. com>,
SM <> wrote:

> This is a sample of the code. Notice the insertion of the gallery
> beneath the <li> selected by the user.
> ...
> <!-- CONTENT_RIGHT -->
> <div id="content_right">
> <ul>
> <li><a href="#">Gallery One</a></li>
> <li><a href="#">Sky</a></li>
> <li><a href="#">Hello World</a></li>
> <li><a href="#">Tribute</a></li>
> <div id="thumbnail">
> <a href="#"><img src="images/photography/1.jpg" /></a>
> <a href="#"><img src="images/photography/2.jpg" /></a>
> <a href="#"><img src="images/photography/3.jpg" /></a>
> <a href="#"><img src="images/photography/4.jpg" /></a>
> <a href="#"><img src="images/photography/5.jpg" /></a>
> </div>
>
> <li><a href="#">Cloud 9</a></li>
> <li><a href="#">The End</a></li>
> </ul>
> </div>
> .....
>
> Is this good code?
>


Not really, you can't do this. This is better and you can
probably improve further:

http://tinyurl.com/27yrkx

--
dorayme

In article <47337daf$>,
"Nik Coughlin" <> wrote:

> <li><a href="#">Tribute</a></li>
> <li id="thumbnail">
> <a href="#"><img src="images/photography/1.jpg" /></a>
> <a href="#"><img src="images/photography/2.jpg" /></a>
> <a href="#"><img src="images/photography/3.jpg" /></a>
> <a href="#"><img src="images/photography/4.jpg" /></a>
> <a href="#"><img src="images/photography/5.jpg" /></a>
> </li>
> <li><a href="#">Cloud 9</a></li>
>

This is not really correct because the idea is that the
thumbnails are an expansion of the item Tribute. Your
alternative, below, is correct but it is not pedantic.



> And while you're at it you could be pedantic and say that the thumbnails are
> a list as well:
>
> <li><a href="#">Tribute</a></li>
> <li>
> <ul id="thumbnail">
> <li><a href="#"><img src="images/photography/1.jpg" /></a></li>
> <li><a href="#"><img src="images/photography/2.jpg" /></a></li>
> <li><a href="#"><img src="images/photography/3.jpg" /></a></li>
> <li><a href="#"><img src="images/photography/4.jpg" /></a></li>
> <li><a href="#"><img src="images/photography/5.jpg" /></a></li>
> </ul>
> </li>
> <li><a href="#">Cloud 9</a></li>

--
dorayme

Gazing into my crystal ball I observed SM <>
writing in news: ups.com:

>
> Thanks again dude!
>
>

That would be Dudette!

--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

dorayme wrote:

> In article <47337daf$>,
> "Nik Coughlin" <> wrote:
>
[snip]
> This is not really correct because the idea is that the
> thumbnails are an expansion of the item Tribute. Your
> alternative, below, is correct but it is not pedantic.

[snip example where the nested ul is inside the list element
*following* the Tribute list element]

I'll be pedantic then , and say it is not correct. If the
thumbnails are indeed an expansion of the item Tribute, the list would
look like this:

<li><a href="#">Tribute</a>
<ul id="thumbnail">
<li><a href="#"><img src="images/photography/1.jpg" /></a></li>
<li><a href="#"><img src="images/photography/2.jpg" /></a></li>
<li><a href="#"><img src="images/photography/3.jpg" /></a></li>
<li><a href="#"><img src="images/photography/4.jpg" /></a></li>
<li><a href="#"><img src="images/photography/5.jpg" /></a></li>
</ul>
</li>
<li><a href="#">Cloud 9</a></li>


--
Els http://locusmeus.com/

In article <1qr3hbl0xduir$.>,
Els <> wrote:

> dorayme wrote:
>
> > In article <47337daf$>,
> > "Nik Coughlin" <> wrote:
> >
> [snip]
> > This is not really correct because the idea is that the
> > thumbnails are an expansion of the item Tribute. Your
> > alternative, below, is correct but it is not pedantic.
>
> [snip example where the nested ul is inside the list element
> *following* the Tribute list element]
>
> I'll be pedantic then , and say it is not correct. If the
> thumbnails are indeed an expansion of the item Tribute, the list would
> look like this:
>
> <li><a href="#">Tribute</a>
> <ul id="thumbnail">
> <li><a href="#"><img src="images/photography/1.jpg" /></a></li>
> <li><a href="#"><img src="images/photography/2.jpg" /></a></li>
> <li><a href="#"><img src="images/photography/3.jpg" /></a></li>
> <li><a href="#"><img src="images/photography/4.jpg" /></a></li>
> <li><a href="#"><img src="images/photography/5.jpg" /></a></li>
> </ul>
> </li>
> <li><a href="#">Cloud 9</a></li>

That will teach me to be so soft-hearted and trusting! I had just
posted at the time:

http://tinyurl.com/27yrkx

what I thought was a *more* correct plan than the OP

and assumed without looking closely that Nick was following this
general idea.

--
dorayme

On Nov 9, 3:38 am, dorayme <doraymeRidT...@optusnet.com.au> wrote:
> In article <1qr3hbl0xduir$.dew6rcfkfsqr....@40tude.net>,
>
>
>
> Els <els.aNOS...@tiscali.nl> wrote:
> > dorayme wrote:
>
> > > In article <47337da...@clear.net.nz>,
> > > "Nik Coughlin" <nrkn....@gmail.com> wrote:
>
> > [snip]
> > > This is not really correct because the idea is that the
> > > thumbnails are an expansion of the item Tribute. Your
> > > alternative, below, is correct but it is not pedantic.
>
> > [snip example where the nested ul is inside the list element
> > *following* the Tribute list element]
>
> > I'll be pedantic then , and say it is not correct. If the
> > thumbnails are indeed an expansion of the item Tribute, the list would
> > look like this:
>
> > <li><a href="#">Tribute</a>
> > <ul id="thumbnail">
> > <li><a href="#"><img src="images/photography/1.jpg" /></a></li>
> > <li><a href="#"><img src="images/photography/2.jpg" /></a></li>
> > <li><a href="#"><img src="images/photography/3.jpg" /></a></li>
> > <li><a href="#"><img src="images/photography/4.jpg" /></a></li>
> > <li><a href="#"><img src="images/photography/5.jpg" /></a></li>
> > </ul>
> > </li>
> > <li><a href="#">Cloud 9</a></li>
>
> That will teach me to be so soft-hearted and trusting! I had just
> posted at the time:
>
> http://tinyurl.com/27yrkx
>
> what I thought was a *more* correct plan than the OP
>
> and assumed without looking closely that Nick was following this
> general idea.
>
> --
> dorayme

Thank girls and guys!
Everything makes sense now....