CMS Made Simple Forums

Content management as it is meant to be
https://forum.cmsmadesimple.org/

Difficulties to set the correct position of the bookmark list.

https://forum.cmsmadesimple.org/viewtopic.php?t=6633

Page 1 of 1

Difficulties to set the correct position of the bookmark list.

Posted: Sun Sep 03, 2006 9:17 pm
by dsolheid
Hi all,

I'm trying to set the position of the bookmark list just on the right of the content (same top position).  :-[ no success

See the prototype of my website : http://ecolo-limbourg.be/index.php

I have set the following code in the template ::

Code: Select all

<!-- Start Content Area -->
      <div id="main">         
         <h2>{title}</h2>
         {content} <br />

         <!-- Start relational links -->
	 <div class="hr"></div>
	 <div class="right49">
	 	<p>{anchor anchor='main' text='^ Haut'}</p>
	 </div>         
	 <!-- End relational links -->

      <hr />
      </div>
	  <!-- End Content Area -->
      <!-- Start Content 2 -->
      <div id="bookmark">         
         <img src="uploads/images/Banners/arrow.jpg">
         {cms_module module="bookmarks" columns="2"}
         <BR><div id="ecolocount"><img src="xxx personnes ont visité ce site.</div>
      <hr />
      </div>
      <!-- End Conten 2 -->


   </div>
   <!-- End Content -->
And the following code in the stylessheet ::

Code: Select all

/* bookmarks content 2 */
div#bookmark{
        position: relative;
        width: 150px;
        margin: 1.5em 0 2em 0; 
        padding: 0px;
        left: 650px; 
        top:0px;
        text-align: left;
        float:left; 
    }


div#bookmark li {
        list-style: none;  
}

div#bookmark {    
      background-color : ccc;
    }
    div#bookmark a,
    div#bookmark a:link,
    div#bookmark a:active,
    div#bookmark a:visited {
        text-decoration: none;  /* couleur du texte */
        color: #98bf14; /* #18507C; */
        background: #e0ebc3;
    }
div#bookmark  li a:hover {
        color: #007342;
}
So, how have the list of bookmark just on the right of the main content ?

Any help will be really appreciate !!

Regards  ;)

Re: Difficulties to set the correct position of the bookmark list.

Posted: Wed Sep 06, 2006 6:53 am
by dsolheid
Nobody knows that ?

I really need to found a solution... I'm really not a CSS expert  :-\

Re: Difficulties to set the correct position of the bookmark list.

Posted: Wed Sep 06, 2006 11:22 am
by dsolheid
HI all,

Still have the problem.

Apparently, it's a problem with the template.
I want to have 1 column with the menu, then one with the content, and the third with the bookmark list ..

Where I have to paste the code for the bookmark list ?

Regards,

Re: Difficulties to set the correct position of the bookmark list.

Posted: Wed Sep 06, 2006 5:07 pm
by Dr.CSS
I can't help if I can't see it on the page, you've commented it out, change that and I'll be back to help...

Re: Difficulties to set the correct position of the bookmark list.

Posted: Wed Sep 06, 2006 8:26 pm
by dsolheid
mark wrote: I can't help if I can't see it on the page, you've commented it out, change that and I'll be back to help...
Hi Mark

Sorry, I was testing, then it was in comment ...

So, now,  this is available. (www.ecolo-limbourg.be)

Here the code of the template :  (the Bookmark code is under the CONTENT 2 comment.)

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- Change lang="en" to the language of your site -->

<head>

<title>{sitename}</title>
<!-- The sitename is changed in Site Admin/Global settings. {title} is the name of each page -->

{metadata}
<!-- Don't remove this! Metadata is entered in Site Admin/Global settings. -->

{stylesheet}
<!-- This is how all the stylesheets attached to this template are linked to -->

{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}
<!-- Relational links for interconnections between pages, good for accessibility and Search Engine Optmization -->



{literal}
<__script__ type="text/JavaScript">
<!--
//pass min and max -measured against window width
function P7_MinMaxW(a,b){
	var nw="auto",w=document.documentElement.clientWidth;
	if(w>=b){nw=b+"px";}if(w<=a){nw=a+"px";}return nw;
}
//-->
</__script>
<!--[if lte IE 6]>
<style type="text/css">
#pagewrapper {width:expression(P7_MinMaxW(847,847));}
#container {height: 1%;}
</style>
<![endif]-->
{/literal}
<!-- The min and max page width for Internet Explorer is set here. For other browsers it's in the stylesheet "Layout: Top menu + 2 columns" -->


</head>

</__body>

<div id="pagewrapper">

    <!-- start accessibility skip links -->
    <ul class="accessibility">
      <li>{anchor anchor='menu_vert' title='Skip to navigation' accesskey='n' text='Skip to navigation'}</li>
      <li>{anchor anchor='main' title='Skip to content' accesskey='s' text='Skip to content'}</li>
    </ul>
    <!-- end accessibility skip links -->

   <hr class="accessibility" />
    <!-- Horizontal ruler that is hidden for visual browsers by CSS -->


   <!-- Start Header, with logo image that links to the default start page. Logo image is changed in the stylesheet  "For template: Top menu + left submenu + 1 column" -->
   <div id="header">
           <h1>{cms_selflink dir="start" text="$sitename"}</h1>
   <hr class="accessibility" />
   </div>
   <!-- End Header -->


   <!-- Start Navigation -->
   <div id="menu_horiz">
      <h2 class="accessibility">Navigation</h2>
      {menu template='simple_navigation.tpl' number_of_levels='1'}
   <hr class="accessibility" />
   </div>
   <!-- End Navigation -->

   <!-- Start Search-->
   <div id="search">
          {search}
   </div>
   <!-- End Search -->

   <!-- Start Content (Navigation and Content columns) -->
   <div id="content">

      <!-- Start Sidebar -->
      <div id="sidebar">

      <!-- Start Sub Navigation -->
      <div id="menu_vert">
  <img src="uploads/images/Banners/arrow.jpg"><BR>
         <h2 class="accessibility">Sub Navigation</h2>
         <ul><li>{menu template='simple_navigation.tpl' start_level='2' collapse='1'}</li></ul>
<BR>
  <img src="uploads/images/Banners/arrow.jpg"><BR>
{cms_module module='NMS'}
      <hr class="accessibility" />
      </div>

      <!-- End Sub Navigation -->
      </div>
      <!-- End Sidebar -->

      <!-- Start Content Area -->
      <div id="main">         
         <h2>{title}</h2>
         {content} <br />

         <!-- Start relational links -->
	 <div class="hr"></div>
	 <div class="right49">
	 	<p>{anchor anchor='main' text='^ Haut'}</p>
	 </div>         
	 <!-- End relational links -->

      <hr />
      </div>
	  <!-- End Content Area -->   
      <!-- Start Content 2 -->

      <div id="bookmark">         
         <img src="uploads/images/Banners/arrow.jpg">
         {cms_module module="bookmarks" columns="2"}
         <BR><div id="ecolocount"><img src="http://www.oxito.net/cgi-bin/counter.cgi?link=ecolocount&style=E&nbdigits=1&reloads=0"> personnes ont visité ce site.</div>
      <hr />
      </div>

      <!-- End Content 2 -->


   </div>
   <!-- End Content -->


   <!-- Start Footer. Edit the footer in the Global Content Block called "footer" -->
   <div id="footer">
      {global_content name='footer'}
   </div>   
   <!-- End Footer  -->


</div><!-- end pagewrapper -->
<__body>
</__html>
And Here, the CSS for the bookmark div:

Code: Select all

    /* CONTENT 2 */
div#bookmark{
   position: relative;
   width: 150px;
   left:650px; 
   top:-10px;
   text-align: left;
   float:left; 
}

div#bookmark li {
   list-style: none;  
}

div#bookmark {    /* Couleur de fond du menu */
   background-color: #dd; /* #ECECEC; */      
}
div#bookmark a,
div#bookmark a:link,
div#bookmark a:active,
div#bookmark a:visited {
   display: block;
   padding: 0px; 

    /* hide from ie/mac \*/
     display: block;
    /* end hide */

   text-decoration: none;  /* couleur du texte */
   color: #98bf14; /* #18507C; */
   background: #e0ebc3;   /* autre menu, non sélectionné */
}
div#bookmark  li a:hover {
   /*background-color: #007443; /* #97be13;  #abb0b6; couleur du menu HOVER */
   font-weight: bold;
}


Anyway, ... it will be very cool to receive your help !

Kind regards,

Didier

Re: Difficulties to set the correct position of the bookmark list.

Posted: Wed Sep 06, 2006 9:27 pm
by Dr.CSS
Do me a favor and close all your tags they should be
use lower case letters they are throwing the tags off and I can't move any thing till then....

Re: Difficulties to set the correct position of the bookmark list.

Posted: Thu Sep 07, 2006 7:52 am
by dsolheid
Hi Mark,

I changed the tag to ...

May be, the problem come from the structure of my template ?
Actually, I place the bookmark code here : (inside the content area)

Code: Select all

</__body>
<div id="pagewrapper">


<!-- Start Header -->
<!-- End Header -->
<!-- Start Navigation -->
<!-- End Navigation -->
<!-- Start Search-->
<!-- End Search -->
<!-- Start Content (Navigation and Content columns) -->
<div id="content">
  <!-- Start Sidebar -->
      <div id="sidebar">
       <!-- Start Sub Navigation -->
        <div id="menu_vert">
        </div>
       <!-- End Sub Navigation -->
      </div>
  <!-- End Sidebar -->
  <!-- Start Content Area -->
     <div id="main">         
         <!-- Start relational links -->
	 <!-- End relational links -->
      </div>
   <!-- End Content Area -->   
   <!-- Start Content 2 -->
      <div id="bookmark">         
      </div>
  <!-- End Content 2 -->
</div>
<!-- End Content -->
   <!-- Start Footer. Edit the footer in the Global Content Block called "footer" -->
   <div id="footer">
      {global_content name='footer'}
   </div>   
   <!-- End Footer  -->
</div>
<!-- end pagewrapper -->
<__body>
Regards,
All times are UTC
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited