homepage Welcome to WebmasterWorld Guest from 54.167.174.90
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / Content Management
Forum Library, Charter, Moderators: ergophobe

Content Management Forum

    
Problems with Typolight CMS
Typolight CMS problems, CMS, CSS
galahad2

5+ Year Member



 
Msg#: 3887335 posted 6:02 pm on Apr 7, 2009 (gmt 0)

Hi all,

I'm trying to get my head around using custom templates and CSS within the Typolight CMS. I would try and use the Typolight template but the project I'm working on is quite complex and requires the main section to be split into various teaser articles. I thought I had the layout pretty much sorted but for some reason the main navigation menu that should display under the header image is not displaying properly in IE. It looks fine in Firefox and Chrome but in IE it seems to completely ignore the layout and places the menu outside of the template. There is also the need for a rollover image shaped like a tab which I have sort of put in place apart from the fact that it doesn't quite cover the whole menu text but that is a whole other issue.

Here's the CSS:

css:
.mod_navigation
{
width:1000px;
top:180px;
position:absolute;
background-color:#23648C;
}

.mod_navigation ul
{
margin:0px;
padding-top:10px;
border-bottom:1px solid #fff;
border-top:1px solid #FFF;
list-style-type:none;
}

.mod_navigation li
{
margin:0px;
padding:0px 10px;
list-style-type:none;
width:100px;
}

* html .mod_navigation ul, * html .mod_navigation li
{
height:1px;
}

*:first-child+html .mod_navigation .parent
{
height:3px;
}

.mod_navigation p
{
margin:0px;
padding:0px;

}

.mod_navigation a, .mod_navigation li, .mod_navigation p
{
font-weight:bold;
font-size:12px;
color:#ffffff;
display:inline;
text-decoration:none;
height:30px;
}

.mod_navigation p
{
font-weight:bold;
font-size:12px;
color:#ffffff;
display:inline;
text-decoration:none;
height:30px;
background-image:url(images/tab.png);
background-repeat:no-repeat;
}

.mod_navigation a:hover
{
background-color:#DAE5EB;
background-image:url(images/tab.png);
background-repeat:no-repeat;
text-decoration:none;
color:#ffffff;
}

As well as the main menu, I need a side navigation with the same links as the main menu but placed in the left column above the bookers toolkit. But, when I tried previously to add the side navigation it wouldn't position properly and placed itself on top of the other items in the left column. I have created modules for the items in the left column and positioned them in the left column but how can I make sure the sidenav is placed above them?

If all of that isn't enough, I also need a search bar to display under the main navigation. Again, I have sort of created one but the position is not quite right. I'm not sure if this is an issue with my CSS or the layout itself.

This is the CSS for the various custom sections:

css:
.thrColFixHdr #sidebar1 {
float: left;
width: 200px;
height:auto;
background: #D8E5EB;
padding: 15px 0px 0px 0px;
}
.thrColFixHdr #sidebar2 {
float: right;
width: 120px;
height:auto;
background: #D8E5EB;
padding: 15px 5px 0px 0px;
}
.thrColFixHdr #mainContent {
padding-left:20px;
}

.verticalbanner { width:122px; height: auto; float:right;}

.toolkit { width:200px; height:auto; float:left; margin-top:10px; border:thin #999 solid}

.sidenav {width:200px; height:auto; float:left; margin-top:10px; background-color:#FFF; border:thin #999 solid}

.competitions { width:200px; height:auto; float:left; margin-top:10px;}

.hotelofthewk {width:200px; height:auto; float:left; margin-top:10px; padding-left:10px; padding-top:10px; background-color:#adc7c4}

.expotelbox {width:200px; height:auto; float:left; margin-top:10px; border:thin #999 solid;}

.leftcolumnpic {width:200px; height:auto; float:left; margin-top:10px;}

#searchbar { width:850px; height:35px; top:200px; background-image:url(images/searchbar.png); background-repeat:no-repeat; background-color:#D8E5EB; float:left; margin:0; }

Any help would be much appreciated.

[edited by: coopster at 6:32 pm (utc) on April 7, 2009]
[edit reason] no personal urls please TOS [webmasterworld.com] [/edit]

 

ergophobe

WebmasterWorld Administrator ergophobe us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3887335 posted 4:08 pm on Apr 8, 2009 (gmt 0)

Galahad,

I'm going to give the advice I used to give when I moderated the PHP forum - you're not likely to get an answer to your question when you post all your code. You need to do your due diligence first.

So what that means is you need to boil this down to the simplest case and then see where the problem comes from. Then ask why.

The way I do this with CSS is I will go to a page that is having the problem, and save the page as a static HTML file. Then you make sure that it's calling the CSS correctly until your static page looks just like the live page does.

Now you go through and start deleting content until it's the simplest case that still shows the problem.

Then you add a background color to each of the boxes that might be involved in the problem.

Next, you start getting rid of any CSS rules that are irrelevant to the problem - ones affecting other areas of the page, ones only affecting things like font style.

Finally, you get to the heart of it - you just start deleting CSS rules until 1) the problem goes away in the problem browser or 2) you break the layout in the good browser.

Now you should be able to start doing some serious debugging and figure out where the problem actually comes from. At that point it will be a lot easier to help you.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / Content Management
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved