menu problem...

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
wcms
New Member
New Member
Posts: 6
Joined: Mon Jun 30, 2008 4:31 pm

menu problem...

Post by wcms »

Hey!

I have problem with my css menu... It doesen't stay at line and when you push it css style disappear and text change to bold and font size increases.
Here is my menu's css style it's not my code its just for testing i have taken it from tutorialized.com but it does happen with every menus I put.

Code: Select all

#navigointi { 
	white-space: nowrap;
	margin-top: 80px;
}
#navigointi ul{
list-style-type:none;
}
#navigointi li{
display:inline;
}
#navigointi a{
float:left;
width:100px;
text-decoration:none;
color:white;
font-weight:bold;
background:#999900;
padding:5px;
border-right:1px solid #FFFFFF;
}
#navigointi a:hover{
background:#CCCC00;
}
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: menu problem...

Post by Dr.CSS »

Unless we have more info like some html etc. it's hard to figure out, we don't have the menu item li etc....

A link is most times the best way...
wcms
New Member
New Member
Posts: 6
Joined: Mon Jun 30, 2008 4:31 pm

Re: menu problem...

Post by wcms »

Now my css code look like this I changed #navigointi li to #navigointi a:link like you said.

Code: Select all

#navigointi { 
	white-space: nowrap;
	margin-top: 80px;
}
#navigointi ul{
list-style-type:none;
}
#navigointi a:link{
display:inline;
}
#navigointi a{
float:left;
width:100px;
text-decoration:none;
color:white;
font-weight:bold;
background:#999900;
padding:5px;
border-right:1px solid #FFFFFF;
}
#navigointi a:hover{
background:#CCCC00;
}
and this is menu's html code...

Code: Select all

<__html>
<head>
<title> sivut </title>
{stylesheet}
{metadata}
</head>
</__body>
<table border="0" cellspacing="0" align="center" >
<tr>
<td  id="yla">
<div id="navigointi">
{menu}
</div>
</td>
</tr>
<tr>........
Last edited by wcms on Tue Jul 01, 2008 6:41 am, edited 1 time in total.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: menu problem...

Post by Dr.CSS »

I meant a link to the site/page you are working on, and the html I was looking for is what it looks like in the rendered page...

Like so...


2.1: About Us


2.3: Testimonials


2.4: Merchandise


2.5: Donations

wcms
New Member
New Member
Posts: 6
Joined: Mon Jun 30, 2008 4:31 pm

Re: menu problem...

Post by wcms »

Code: Select all

<div id="navigointi">
 

<ul>

<li class="currentpage"><h3><dfn>Current page is 1: </dfn>Home</h3>


</li>

<li><a href="http://localhost/lol/madesimple/cmsmadesimple-1.3.1/cmsmadesimple/index.php?page=lol"><dfn>2: </dfn>lol</a>


</li>

<li><a href="http://localhost/lol/madesimple/cmsmadesimple-1.3.1/cmsmadesimple/index.php?page=ko"><dfn>3: </dfn>ko</a>


</li>
</ul>

</div>
I have also attach Accessibility and cross-browser tools css to my layout...
wcms
New Member
New Member
Posts: 6
Joined: Mon Jun 30, 2008 4:31 pm

Re: menu problem...

Post by wcms »

It would be nice if I get answer  :P... sorry I'm impatient
wcms
New Member
New Member
Posts: 6
Joined: Mon Jun 30, 2008 4:31 pm

Re: menu problem...

Post by wcms »

Do you know other cms witch is like cmsmadesimple?
I have to change cms because its seems that i dont get help here!
I'm VERY disappointed!
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: menu problem...

Post by Dr.CSS »

Can you give me all your CSS and the HTML from a rendered page, not html from template but from source view?...

That little bit of code isn't quite enuf to work it out...
wcms
New Member
New Member
Posts: 6
Joined: Mon Jun 30, 2008 4:31 pm

Re: menu problem...

Post by wcms »

Here is my HTML

Code: Select all

	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
   "http://www.w3.org/TR/html4/strict.dtd">
<__html>
<head>
<title> sivut </title>

<base href="http://localhost/sivupalvelu/madesimple/cmsmadesimple-1.3.1/cmsmadesimple/" />
<meta name="Generator" content="CMS Made Simple - Copyright (C) 2004-6 Ted Kulp. All rights reserved." />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<link rel="stylesheet" type="text/css" media="screen" href="http://localhost/sivupalvelu/madesimple/cmsmadesimple-1.3.1/cmsmadesimple/stylesheet.php?templateid=22&mediatype=screen" />
<link rel="stylesheet" type="text/css" media="all" href="http://localhost/sivupalvelu/madesimple/cmsmadesimple-1.3.1/cmsmadesimple/stylesheet.php?templateid=22&mediatype=all" />

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://localhost/sivupalvelu/madesimple/cmsmadesimple-1.3.1/cmsmadesimple/index.php?mact=News,cntnt01,rss&cntnt01showtemplate=false&cntnt01category=&cntnt01number=20&cntnt01returnid=15" /></head>
</__body>
<table border="0" cellspacing="0" align="center" >

<tr>
<td  id="yla">
<div id="navigointi">
  

<ul>

<li class="currentpage"><h3><dfn>Current page is 1: </dfn>Home</h3>


</li>

<li><a href="http://localhost/sivupalvelu/madesimple/cmsmadesimple-1.3.1/cmsmadesimple/index.php?page=ddddddddddd"><dfn>2: </dfn>ddddddddddd</a>

</li>

<li><a href="http://localhost/sivupalvelu/madesimple/cmsmadesimple-1.3.1/cmsmadesimple/index.php?page=dddddeee"><dfn>3: </dfn>dddddeee</a>


</li>
</ul>

</div>
</td>
</tr>
<tr>
<td id="keski" cellspacing="0" >
<table id="box">

<tr>
<td>
 <table id="sivuyla" >
     <tr>
     <td valign="top" >
<div id="boxyla">
<p>Congratulations! You now have a fully functional installation of CMS Made Simple and you are <em>almost</em> ready to start building your site. First thing though, you should click <a href="install/upgrade.php" title="Check if your CMSMS system needs upgrading">here</a> to check if your site requires a database upgrade. After you have confirmed you are up to date, then we can get cracking on the site development! </p>

<p>These default pages are devoted to showing you the basics of how to get your site up with CMS Made Simple. </p>

<p>To get to the Administration Panel you have to login as the administrator (with the username/password you mentioned during the installation process) on your site at http://yourwebsite.com/cmsmspath/admin. </p>

<p>If you are right now on your own default install, you can probably just click <a title="CMSMS Demo Admin Panel" href="admin/">this link</a>. </p>

<h3>Learning CMS Made Simple </h3>

<p>On these example pages many of the features of the default installation of CMS Made Simple are described and demonstrated. You can learn about how to use different kinds of menus, templates, stylesheets and extensions. </p>

<p>Read about how to use CMS Made Simple in the <a class="external" href="http://wiki.cmsmadesimple.org/"  title="CMS Made Simple Documentation"  target="_blank" >documentation<span>(external link)</span></a>. In case you need any help the community is always at your service, in the 
<a class="external" href="http://forum.cmsmadesimple.org"  title="CMS Made Simple Forum"  target="_blank" >forum<span>(external link)</span></a> or the <a class="external" href="http://www.cmsmadesimple.org/IRC.shtml"  title="Information about the CMS Made Simple IRC channel"  target="_blank" >IRC<span>(external link)</span></a>. </p>

<h3>License </h3>

<p>CMS Made Simple is released under the <a class="external" href="http://www.gnu.org/licenses/licenses.html#GPL"  title="General Public License"  target="_blank" >GPL<span>(external link)</span></a> license </p>
</div>
	 </td>
	 </tr>
     <tr>
	 <td id="boxyla3" valign="top" >	 
	 <img src="uploads/images/kuva.jpg" width="500" height="200" />
	 
	 </td>

     </tr>
     </table>

</td>
<td id="box2" valign="top">
     <table cellspacing="0" id="sivusijoitus">
     <tr>
     <td  id="sivu">  
     </td>
     </tr>
	 <tr>

     <td id="jatke">
	<!-- Displaying News Module -->
<!-- News Categories: '' -->
<!-- Start News Display Template -->
<div class="NewsSummary">

	<div class="NewsSummaryPostdate">
		06/26/08
	</div>

<div class="NewsSummaryLink">
	<a href="http://localhost/sivupalvelu/madesimple/cmsmadesimple-1.3.1/cmsmadesimple/index.php?mact=News,cntnt01,detail,0&cntnt01articleid=1&cntnt01returnid=15">News Module Installed</a>

</div>

<div class="NewsSummaryCategory">
	Category: General
</div>

	<div class="NewsSummaryAuthor">
		Posted by: admin
	</div>


	<div class="NewsSummaryContent">
		The news module was installed.  Exciting. This news article is not using the Summary field and therefore there is no link to read more. But you can click on the news heading to read only this article.
	</div>

  
</div>
<!-- End News Display Template -->
     </td>
     </tr>
     </table> 
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td id="ala">

</td>
</tr>
</table>
<__body>
</__html>
<!-- 0.188517 / 14 -->

and here is my CSS

Code: Select all

body  {
background-color: #e1e1e1;
margin-top: 50px;
}

#navigointi { 
	white-space: nowrap;
	margin-top: 80px;
}
#navigointi ul{
list-style-type:none;
}
#navigointi a:link{
display:inline;
}
#navigointi a{
float:left;
width:100px;
text-decoration:none;
color:white;
font-weight:bold;
background:#999900;
padding:5px;
border-right:1px solid #FFFFFF;
}
#navigointi a:hover{
background:#CCCC00;
}
#yla {
background-image: url(uploads/images/yla.gif);
width: 939px;
height:170px;
background-repeat: no-repeat;
}
#keski {
background-image: url(uploads/images/taustasuunta.gif);
background-repeat: repeat-y;
}
#box {
width: 500px;
}
#box2{
width: 439px;
}
#sivuyla {
margin-left: 15px;
margin-top: 50px;
}
#boxyla {
width: 500px;
}
#boxyla3 {
width: 500px;
padding-top: 50px;
padding-bottom: 30px;
}
#ala {
background-image: url(uploads/images/taustaala.gif);
background-repeat: no-repeat;
width: 939px;
height: 22px;
}
#sivusijoitus {
margin-left: 100px;
margin-top: 50px;
width: 277px;
height: 19px;
}
#sivu{
background-image: url(uploads/images/sivuyla.gif);
background-repeat: no-repeat;
height: 19px;
}
#jatke {
background-image: url(uploads/images/sivutausta.gif);
background-repeat: repeat-y;
height: 19px;
}
I have attach my css and Accessibility and cross-browser tools css to my layout.

The problem is with my menu it doesen't stay at line and when you push it css style disappear and text change to bold and
font size increases.

This is the problem
Image

This is all that i can tell...
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: menu problem...

Post by Dr.CSS »

A picture is worth a thousand words...

OK here is what's going on...

2: ddddddddddd

Turns into this...

Current page is 1: Home

So you can make a new menu template and take the current page h3 out of it or use CSS to style the #navigointi h3 the same as  the a, allowing for some variance seeing as it's an h3, if you look at the default install CSS for Left simple navigation + 1 column you will see calls for this...
Post Reply

Return to “Layout and Design (CSS & HTML)”