[SOLVED] Positioning of news items

[stuarty80]

Hi, I am new to cmsmadesimple, so please be patient. Ok, the problem i am having is with the positioning of my news items. My site can be viewed here: http://www.stuartbogle.com/cmsmadesimple/index.php

As you can see the news at the bottom is positioned over my main text. All i want to do is send the news items to the right hand side

Below is the code i have used for my template:






{sitename} - {title}



{stylesheet}
{metadata}












{menu}












{content}




created by: stuartbogle.com  





{cms_module module="news"}

             
 





And the following is the css:

a:link {
color:#8297A7;
text-decoration:underline;
}

a:visited {
color:#A082A7;
}

a:hover {
text-decoration:none;
}

body {
font:x-small/1.4 Tahoma, Verdana, Helvetica, Arial, sans-serif;
background:#FFF url(images/bg.gif) repeat top left;
color:#555040;
margin:0;
padding:0;
text-align: center;
}

#container {
margin:0 0 0 45px;
background:#FFF;
width: 780px !important;
width /**/:790px; /* IE5/Win */
padding:0 0px;
position:relative;
font-size:110%;
text-align: left;
}

#pageHeader {
width:780px;
height:42px;
background:#FFF url(images/header.gif) no-repeat top left;
}

#menuBack {
height:300px;
width:780px;
background-color:#FFF;
position:relative;
}

#menuBack p {
margin:0;
padding:0;
}

#menuBack .p1 {
position:absolute;
top:0;
left:0;
width:260px;
height:300px;
background:#FFF;
}

#menuBack .p1 span { display:none; }

#menuBack .p2 {
position:absolute;
top:0;
left:260px;
width:520px;
height:300px;
background:#FFF url(images/main_pict.jpg) no-repeat top left;
overflow:hidden;
}

#menuBack .p2 span {
visibility:hidden;
white-space:nowrap;
}


#pageHeader h1, #pageHeader h2 {
display:none;
}

#colorButtons {
height:92px;
width:780px;
background-color:#FFF;
position:relative;
}

#colorButtons p {
margin:0;
padding:0;
}

#colorButtons .p1 {
position:absolute;
top:0;
left:0;
width:260px;
height:92px;
background:#FFF url(images/button_orange.gif) no-repeat top left;
}

#colorButtons .p1 span { display:none; }

#colorButtons .p2 {
position:absolute;
top:0;
left:260px;
width:260px;
height:92px;
background:#FFF url(images/button_green.gif) no-repeat top left;
overflow:hidden;
}

#colorButtons .p2 span {
visibility:hidden;
white-space:nowrap;
}

#colorButtons .p3 {
position:absolute;
top:0;
left:520px;
width:260px;
height:92px;
background:#FFF url(images/button_blue.gif) no-repeat top left;
overflow:hidden;
}


#supportingText {
margin-right:260px;
padding:5px;
}

#linkList {
position:absolute;
top:434px;
left:520px;
width:260px;
}

#footer {
margin:0 -265px -5px -5px;
border-top:5px solid #FFF;
background-color:#555040;
padding:10px;
text-transform:uppercase;
}

#footer a {
color:#FFF;
text-decoration:underline;
}

#footer a:hover {
color:#D2DBE2;
text-decoration:none;
}

#explanation h3, #participation h3, #benefits h3, #requirements h3 {
margin:10px 0 5px;
padding:0;
width:238px;
height:24px;
}

#explanation h3 { background:transparent url(images/title_so_what.gif) no-repeat top left; }
#participation h3 { background:transparent url(images/title_participation.gif) no-repeat top left; }
#benefits h3 { background:transparent url(images/title_benefits.gif) no-repeat top left; }
#requirements h3 { background:transparent url(images/title_requirements.gif) no-repeat top left; }

#preamble h3 span,
#explanation h3 span,
#participation h3 span,
#benefits h3 span,
#requirements h3 span {
display:none;
}

#lselect li a, #lfavorites li a {display: block; margin-left:-10px; font-weight:bold;}
#linkList li a.c, #lfavorites li a.c {float:none; display:inline; margin-left:0; font-weight:normal; font-size:100%;}

#supportingText p {
margin:0 10px 10px;
padding:0;
}

#linkList ul {
width:210px;
margin:0 0 10px 15px;
padding:0;
}

#linkList li {
padding: 0 0 0 20px;
margin:0 0 5px;
list-style-type:none;
white-space:nowrap;
background: transparent url(images/bullet_normal.gif) no-repeat 0 1px;
}

#lselect ul, #lfavorites ul {
width:210px;
margin:0 0 10px 15px;
padding:0;
}

#lselect li, #lfavorites li {
padding: 0 0 0 25px;
margin:0 0 5px;
list-style-type:none;
clear:left;
white-space:nowrap;
background: transparent url(images/bullet_styles.gif) no-repeat 0 3px;
}

#linkList h3 {
margin:0 0 10px;
background:#6E6855 url(images/link_list_h3.gif) repeat-y top left;
padding:5px 5px 5px 15px;
font-weight:bold;
color:#E9E6D9;
font-size:100%;
}

acronym {
border-bottom:1px dotted #555040;
cursor:help;
}

a acronym {
border-bottom:1px dotted #8297A7;
}

#lfavorites, #larchives, #lresources {
border-top:5px solid #FFF;
}


Offline the news sits perfect, but as soon as i bring it into cmsms it ends up sitting in the middle of the screen. Can someone please tell me what i need to change to modify the news items?

Any help with this matter would be much appreciated.

thanks

stu

[Mantlet]

Hey Stuart,

Positioning absolute is always a bit difficult to me, people with different screen widths could get is all different. Since your site has a fixed width, I'd also give your content div and news div a fixed with so they fit next to eachother nicely. Then just float the news section to the right of the site.

So change this:

Code: Select all

   <div id="supportingText">
      
{content}

      </div>

      <div id="footer">
         <a href="http://www.stuartbogle.com" title="stuartbogle.com">created by: stuartbogle.com</a>   </div>
   </div>

   
   <div id="linkList">

   {cms_module module="news"}

             </div>

To this:

Code: Select all

   <div id="linkList">

   {cms_module module="news"}

             </div>

   <div id="supportingText">
      
{content}

      </div>

      <div id="footer">
         <a href="http://www.stuartbogle.com" title="stuartbogle.com">created by: stuartbogle.com</a>   </div>
   </div>

And change this:

Code: Select all

#supportingText {
   margin-right:260px;
   padding:5px;
}

#linkList {
   position:absolute;
   top:434px;
   left:520px;
   width:260px;
}

To something like this:

Code: Select all

#supportingText {
   width: "some width that fits together with the 260 down at the linklist";
   padding:5px;
}

#linkList {
   float: right;
   clear: right; <---- Maybe neccessary, maybe not, try
   width:260px;
}

If the footer goes up and through your content, add clear: both;  to that ID.

Hopefully this helps, otherwise, let us know...

[stuarty80]

That has been a great help thanks. The news now sits nicely on the right hand side of the container.

The only problem now is that the content starts at the end of the news items, instead of along side it. I have included the web address to show you what i mean:

http://www.stuartbogle.com/cmsmadesimple/index.php

Thanks again for your help.

stu

[Nullig]

The #supportingText and #linkList divs overlap. Try reducing the size of one of them.

Nullig

[Mantlet]

As Nullig states, the total width of the two items combined is to high. This is probably because you have some padding. At least the 5 px padding around #supportingtext. Take off at least 10px from the width you used there and it should work. Or start with a very low width and increase it untill it looks alright.

BTW, I noticed that the Footer goes over the news items on page 2 and so. Did you add this to the footer ID:

Code: Select all

#footer {
   margin:0 -265px -5px -5px;
   border-top:5px solid #FFF;
   background-color:#555040;
   padding:10px;
   text-transform:uppercase;   
   clear: both;
}

[stuarty80]

Thankyou so much. That has now set the news to the right and allowed the content to flow alongside the news items. I didn't realise that it was the padding. Also an extra thanks to Mantlet for spotting the footer mistake.

cheers

stu

[Nullig]

I would change your footer div to:

  margin: 0 auto;

so it doesn't go over the edge of the page.

And your container div to:

  margin: 0 auto;

so it centers the page.

Also, you should attach the "Accessibility and cross-browser tools" stylesheet to your template to remove the numbering from the menu.

Nullig

[stuarty80]

Thanks Nullig. I have just changed the footer and the container. I was wondering how to get rid of that numbering. Thanks for that.

Not sure if i should ask here or add a new topic, but do you know how i could change the menu to look a bit more pleasing. I have found a nice tutorial on http://www.projectseven.com/tutorials/c ... /index.htm but i just don't know what to change and where to change it. If you have any ideas that would be great.

cheers

stu

[Nullig]

What template and menu stylesheet are you using? You could experiment with some of the CSS menu stylesheets.

Nullig

[Mantlet]

You have probably based your menu on one of the examples in the CMS. You can go to the layout -> stylesheet menu and select the stylesheet you used as a basis. These stylesheets usualy have some comments in them stating which ID changes which layout.

There are at least the following styles you might want to look at:
- The normal definition of the menu item and hyperlink
- The active definition, that is the style that displays for the page you are currently at
- The hover definition, what does the link look like during mouse over
- The parent definition, how does a item look when you're on a page that is a child of that page. In your current website you don't have any children though.

Most things that are worth changing are defined, so you don't have to create new css styles, just redefine current ones.

[stuarty80]

I have just clicked onMenuManage and clicked the cssmenu.tpl and clicked on the option to 'Import template to database'. Not sure how to attach a stylesheet to it. I cant seem to find the attach stylesheet option on the menumanager page.

cheers stu

[stuarty80]

Sorry, i forgot i had to change my original {menu} tag to {menu template='cssmenu.tpl'}.

Thanks for all your help

stu

[Mantlet]

You're welcome, and BTW, I really like the design on the site. Nice and straight, but not to boring. And off course we hope to get your help back once you've found your complete way around the magic of css and browser compatibility 

Oh, and also, I believe the moderators here like it when you add [SOLVED] at the start of your title now in this forum.

[stuarty80]

Cheers Mantlet, glad you like the site. Once i get the hang of this cmsms i will def be offering help. I think its great the way people like yourself take the time to answer questions. It has really helped me out.

Just one more question to ask, how do i add [SOLVED] to the title now?

cheers
stu

[Nullig]

Just click on the Modify button on your first post, then edit the title.

Nullig