navigation menu instead of earlier buttons(image) menu

14 Posts

vkwd7 Reply #1, 17 years, 5 months ago

I am a newbie.I maintain a site(http://www.airbiopf.org) which uses image buttons -gif files as menu buttons.i donot use any menu lists in the existing site. While using modx, when I added the code [!Wayfinder?&startId=`0`&level=1!] to the div tag -banner2- where the images were earlier placed as menu buttons, I got the menu in block i.e.Home-full width of page one row and then aboutus in 2nd row-full page width and so on till the end.It not only wastes space but looks ridiculous.what I need to know is how I can get all the menu items i.e. Home -aboutus- etc in one horizontal row instead of 10 or so rows.Is it necessary to first code in css the menu navigational bar which I donot require when I use image buttons.What should I read for the navigational menus.use of display:inline is also ineffective.
the code of my css is :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<base href="[(site_url)]"></base>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" media = "screen" href="assets/templates/tutorial/css/airbiopflayout.css"  /> 


<title>[(site_name)] | [*pagetitle*]</title>

</head>
<body>
<div id="container">
<div id ="branding">
<div id = "branding1">
</div>
</div> <!--end of branding-->

<div id="banner2">
<h1><a id="logo" href="[~[(site_start)]~]" title="[(site_name)]">[(site_name)]</a></h1>
<h2>[*longtitle*]</h2>
[!Wayfinder?startId=`0`&level=`1'!]
</div><!--end of banner2-->
<div id = "centre">
[*content*]
</div><!--end of centre-->
<div id="left">

</div> <!----end of left---->
<div id =  "rt">
[*rtext*]
</div><!----end of rt--->
<!----end of rt--->
<div id="footer">
 <p> {{myfooter}}</p>
</div><!----end of footer--->
</div><!----end of container--->
</body>
</html>

the other problem is that when tv [*rtext] which is a rich text box is invoked it starts where the center [*content*]ends,although at the right colum. In my original site left and right columns also contain text and appear adjacent to centre column. i.e in order as left=>center=>right.
what changes are required in my css so that I get all the 3 columns side by side as in my original site; my css is ok in the existing site.
I do not know any php. please help.thanks
vkwd7

241 Posts

bob1000 Reply #2, 17 years, 5 months ago

Wayfinder will output the menu as an unordered list. To style the list into a horizontal menu you could use the following CSS. I’ve just included basic style rules here, you can add colours, padding and other styles to suit your needs.

#banner2 ul {
	list-style: none;
	}

	#banner2 ul li {
		float: left;
		}

		#banner2 ul li a {
			display: block;
			padding: 0.4em;
			}

Can you post your current CSS code so we can see where your columns are going wrong.

14 Posts

vkwd7 Reply #3, 17 years, 5 months ago

thanks! it worked . the menu is in one horizontal line. with a liitle changes in css it can be adjusted.
I am posting my current css code for perusal:

#banner {
	margin: 5px 0 0;
	text-align: center;
	width: 780px;
}
#banner2 {
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	display: inline;
	
}

body {
	margin: 0px auto;
	padding: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	min-height:100%;
	width: 100%;
	background: #FFE2C6;
}
#container{
	width:780px;
	text-align:center;
	margin: 0 auto;
	background: #FFF4EA;
	}

#left {
	text-align: center;
	margin: 5px;
	padding: 10px;
	float: left;
	width: 180px;
}
#rt {
	margin: 5px;
	padding: 10px;
	width: 180px;
	float: right;
}
#centre {
	margin: 5px 210px;
	padding: 16px;
	border-left: 1px solid #666;
	border-right: 1px solid #666;
}
/*==these are divisions between centre for flasing messages==*/
#centre2 {
	padding: 10px;
	margin-left: 210px;
	margin-top: 5px;
	margin-bottom: 5px;
	text-align: left;
	text-indent: 1em;
}

#message {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-align: center;
	color: #FFFFFF;
	background: #0099FF no-repeat center;
	margin: 2px auto;
	padding: 2px;
	width: 330px;
	border: 1px solid #333333;
}
#background {
	background: #FF0000 no-repeat;
	text-align: center;
	margin: 1px;
	padding: 1px;
	font: bold 80% Arial, Helvetica, sans-serif;
	border: 1px outset #000000;}

/*=====message ends here=========*/
#footer {
	background: #FFCA95;
	text-align: center;
	clear: both;
	width: 780px;
	border-top: 1px solid #666;
}

#rt p {
	font: 80% Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
}


p{
	font-size:90%;
	background: #FFCA95;
	border-top: 1px solid #666666;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	text-align: justify;
}
#footer p {
	font: 80% Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	background: #ECE9D8;
	color: #000000;
}
ul {
	list-style: disc inside;
	margin-bottom: 2px;
	margin: 0px;
}
li {
	background: #FFCA95;
	margin: 2px;
	list-style: disc inside;
	font: 90% Verdana, Arial, Helvetica, sans-serif;
	padding-bottom: 0px;
}
h1,h2,h3,h4,h5 {
	background:#ffca95;
	font-size: 90%;

	color:red:
; 	color: #990000;
				}
#centre h2 {
	font-size: 105%;
}
#centre h1 {
	font-size: 110%;
}
/* ===== BRANDING ===== */
div#branding
{	height: 52px;
	background: url(../images/airbopfbannew.gif) no-repeat bottom;
	
	}
/*=======navigation========*/
	#banner2 ul 
	{
	padding:0px 10px 10px  0px;
	list-style:none;
                                        }
	#banner2 ul li
                { 
	float: left;}

	#banner2 ul li a 
                {
	/*display: inline;*/
	padding 0.4em;
	}

Please advise as to how I can see the 3 columns with text next to each other. thanks.
vkwd7

241 Posts

bob1000 Reply #4, 17 years, 5 months ago

If you move the left and right columns so their code comes before the centre column code in the html template, the columns will be level. That causes another problem because the floated elements in the menu disrupt the layout. The content columns need to be cleared so they sit below the menu properly. The best way to do this is to wrap the columns in an inner container. The html template should now look like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<base href="[(site_url)]"></base>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" media = "screen" href="assets/templates/tutorial/css/airbiopflayout.css"  /> 


<title>[(site_name)] | [*pagetitle*]</title>

</head>
<body>
<div id="container">
<div id ="branding">
<div id = "branding1">
</div>
</div> <!--end of branding-->

<div id="banner2">
<h1><a id="logo" href="[~[(site_start)]~]" title="[(site_name)]">[(site_name)]</a></h1>
<h2>[*longtitle*]</h2>
[!Wayfinder?startId=`0`&level=`1'!]
</div><!--end of banner2-->

<div id="inner-container">
<div id="left">

</div> <!----end of left---->

<div id =  "rt">
[*rtext*]
</div><!----end of rt--->
<!----end of rt--->

<div id = "centre">
[*content*]
</div><!--end of centre-->
</div>

<div id="footer">
 <p> {{myfooter}}</p>
</div><!----end of footer--->
</div><!----end of container--->
</body>
</html>

You then need to add the following CSS rule to your stylesheet to clear the inner container:

#inner-container {
	clear: left;
}

14 Posts

vkwd7 Reply #5, 17 years, 5 months ago

thanks!to me you are web guru!
insertion of <div id="inner-container"> along with the css code you gave worked and now my 3 columns are in level.but is this code or change in code and css is restricted for ’modx- only ’site as otherwise without this change in code the css and template work fine?
further my all the 3 cloumns contain text.when I put [*content*] in centre div and edit the code it works but for other 2 coumns I have different text. and I cannot use [*content*] for these 2 columns as any change in text [*content*] affects the other 2 columns.How can I get say [*content1*]/[*content2*] for these 2 columns.
please guide.
vkwd7

241 Posts

bob1000 Reply #6, 17 years, 5 months ago

The code changes have nothing to do with MODx, it’s purely about HTML and CSS. I can’t say why the site worked before without seeing all the changes you made!

If you want extra content areas you can create these easily using Template Variables (TV’s). Create a new TV and give it an appropriate name e.g. content2, use the RichText input type and then under the Template Access section, link the TV to the template you want (See the attached image). You can then do the same for the other content area calling it content3.

14 Posts

vkwd7 Reply #7, 17 years, 5 months ago

thanks! the site’s earlier css/html was made with dreamweaver and is running on a server.i validated its css/html.http://www.airbiopf.org.Am I required to change the css of the running site or should i leave it as it is.moreover what is there any difference between [*content*]and [#*content*]
vkwd7

241 Posts

bob1000 Reply #8, 17 years, 5 months ago

If the current site is working fine I don’t see any reason to change the CSS.

I’ve never seen tags like [#*content*] before so I can’t say if there’s a difference? Maybe that’s an old way of calling variables?

1,390 Posts

kongondo Reply #9, 17 years, 5 months ago

Quote from: bob1000 at Oct 10, 2008, 08:05 PM

[#*content*] before so I can’t say if there’s a difference? Maybe that’s an old way of calling variables?

You use [#*content*] if you want the content area to be editable in the front end using quick edit

/k

Wayfinder Lessons: The (almost) Complete Guide to Creating Menus in MODx Using Wayfinder

50 Posts

dantarifa Reply #10, 17 years, 5 months ago

Quote from: kongondo at Oct 10, 2008, 08:54 PM

Quote from: bob1000 at Oct 10, 2008, 08:05 PM

[#*content*] before so I can’t say if there’s a difference? Maybe that’s an old way of calling variables?

You use [#*content*] if you want the content area to be editable in the front end using quick edit

/k

CORRECTION: it should be [*#content*] and not [#*content*] and as Kongondo said then you will be able to edit from the front end as long as you are logged into the manager (don´t forget it if you log into the manager using www. then view the site using www. before the address or vice versa.... seems obvious but always gets my clients at least once!).
Also any variable can use that format eg. [*longtitle*] can be changed to [*#longtitle*] and also you can do it for template variables that you create yourself.
Good luck.

http://www.valdelama.com