Browse template : displaying category links and thumbnails together

[Diablo_Gil]

Dear All,

I'm going to finalize my photoblog but have a last pb which I try to solve without sucess (sorry, my english is very poor). I try to get category links and thumbnails displaying side by side (I mean and the same lines, ie : category links on left, thumbnails on center) in my browse template (or page archive, I guess this the same).

An example should be better than my speach. I'd like something near that excellent photoblog design : http://photoblog.sophiepasquet.com/index.php?x=browse

This is what I wrote in browse page :

<div id="page">
<span class="title">Parcourir les archives par catégorie : <CATEGORY_OR_DATE_NAME_PAGED_ARCHIVE></span><hr /><br />
<div align="left">
<CATEGORY_LINKS_AS_LIST_PAGED>
<THUMBNAILS_WHOLE_PAGED>
<THUMBNAILS_PAGES_LINKS>
<ARCHIVE_PAGES_NUM>
</div>

Before posting, I have read several posts in the forum, I tried several different issues but it failed. I suppose it had to do with the content of my CSS style may be...?

Please, could someone help me as I'm not a performer with coding and equiped with a little brain, mean : I understand quickly if you explain me slowly...
;-)

Thanks really.

My PP_blog : www.photodurable.com

[austriaka]

A quick explanation to make you try yourself ;-)

You have to put the <CATEGORY_LINKS_AS_LIST_PAGED> and the thumbnails related things into two different divs.
Make a positioning with css (categories should be absolute, thumbs should be relative).
Play around with width and margins in css to place them exactly where you want them.

HTH
KArin

[Diablo_Gil]

Thanks Karin.

I'll try what you suggest. Sure, it will take me several hours/days/weeks to understand how to but I'll got it ;-)

Best regards,

Gil.

[Diablo_Gil]

Dear Karin,

I'm lost. Really.

This is what I wrote in my browse file :

<div id="page">
<span class="title">Parcourir les archives par catégorie : <CATEGORY_OR_DATE_NAME_PAGED_ARCHIVE></span><hr /><br />
<div id="navigation-vertical">
<b>Cliquez sur la rubrique de votre choix :</b>
<CATEGORY_LINKS_AS_LIST_PAGED>
</div>
<div id="thumbbox">
<THUMBNAILS_WHOLE_PAGED>
<THUMBNAILS_PAGES_LINKS>
<!-- Tag pour navigation dans archives. A activer le moment venu. Will be activate later -->
<!-- <ARCHIVE_PAGES_NUM>-->
</div></div>

...and this is what I wrote in my CSS file :

/* .............................. */
/* Browse */
/* .............................. */

#page {
background:#515151;
border:1px solid #aaa;
padding:20px;
text-align:left;
width:75%;
margin:0px auto 15px;
margin-bottom:3px;
line-height:17px;
}

#navigation-vertical {
text-align:left;
width:300px;
min-height:415px;
margin-bottom:3px;
padding-right:5px;
float:left;
line-height:15px;
font-size:11px;
}

#thumbbox {
text-align:left;
width:600px;
float:left;
}

So, as you adviced me, I put values of positioning in CSS (absolute for categories and relative for thumbs) but it mixed all the stuff on the page : thumbs over categories or categories on the right of the frame for example
:-( Off course, I'm wrong using this values but I don't see where are my mistakes.

1) in IE, all seems to be work well, but when I scale down (I mean : "resize") the windows of the browser, thumbnails take place juste under the categories. I would that they stay on the same line of categories.

2) in FF, its simply...a disaster.

Could you help me a little bit more please ?

Thanks a lot.

Gil.
My PP_Blog : www.photodurable.com

[Joe[y]]

if you need to float a div element you also need to be sure to tell elements you want to react with (ie, your page element in this case) to clear from float elements.

i haven't tested this but adding clear:both: to your thumbnails div will stretch surrounding elements along with it.

[Diablo_Gil]

Ok Joe[y],

I'll try it.

Thank you really.

Gil