Horizontonal SPrymeny

vkchaitu82
vkchaitu82 used Ask the Experts™
on
I am creating a horizontal SpryMenu Bar. here are my questions.

1) How can I create a sprymeny bar before the Image? the starting of the page. that follows the logo image.

2) When I am trying to create  a SPrymeny after the image it is not covering the complete template.

Its giving "DReam weaver does not allow you to insert a menu bar with in a list Please select another location" which is fine...
But How can I create that ? so that it will be on the top followed by the image

3) As shown in figure question 3. can I expand the image on both sides. bottom will be padded with blue. only the image will expand.?
horizontalspry1.bmp
temp.txt
css.txt
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Jason C. LevineDon't talk to me.

Commented:
>> 1) How can I create a sprymeny bar before the Image? the starting of the page. that follows the
>> logo image.

Make a new div above the image and place the cursor in it.  Then insert the Spry menu.

>> 2) When I am trying to create  a SPrymeny after the image it is not covering the complete
>> template.

Explain in more detail, please.

>> "DReam weaver does not allow you to insert a menu bar with in a list Please select another
>> location"

Since a Spry menu is an unordered list, you cannot insert it in another list.

>> 3) As shown in figure question 3. can I expand the image on both sides. bottom will be padded
>> with blue. only the image will expand.?

Not without some gymnastics.  Your current page looks like everything is inside of a container div and that container has a set width.  To have the image be larger than the container, you would need to move it outside of that div and set new CSS codes to place it properly so it fits in with the rest of your design or set your container to be wider to fit the desired width of the image and set the content div (which should be there) to be narrower and that will get the effect you want.

A slightly off-topic piece of advice for you:

It would be better to not ask multiple questions on different topics in one thread here.  Dealing with the two related Spry questions is one thing, but your third question has nothing to do with Spry and it means we Experts have to conduct two different operations in a single thread.  It can be confusing for both you and us.

Author

Commented:
Thanks Jason. I wil make have separate questions for different operations from now.

>>Not without some gymnastics.  Your current page looks like everything is inside of a container div and >>that container has a set width....
I got this..can you help me with a sample code for this.

Don't talk to me.
Commented:
Like this:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background: #42413C;
	margin: 0;
	padding: 0;
	color: #000;
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { 
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 
	padding-right: 15px;
	padding-left: 15px; 
}
a img { 
	border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
	color: #42413C;
	text-decoration: underline; 
}
a:visited {
	color: #6E6C64;
	text-decoration: underline;
}
a:hover, a:active, a:focus { 
	text-decoration: none;
}

/* ~~ this fixed width container surrounds the other divs ~~ */
.container {
	width: 960px;
	background: #FFF;
	margin: 0 auto; 
}

/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
	background: #ADB96E;
}

.content {
	padding: 10px 0;
	width: 600px;
	margin: auto;
	background-color: #FFC;
}

/* ~~ The footer ~~ */
.footer {
	padding: 10px 0;
	background: #CCC49F;
	width: 600px;
	margin: auto;
}

/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {  
	float: right;
	margin-left: 8px;
}
.fltlft { 
	float: left;
	margin-right: 8px;
}
.clearfloat { 
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
-->
</style></head>

<body>

<div class="container">
  <div class="header">Insert image here<!-- end .header --></div>
  <div class="content">
    <h1>Blah</h1>
    <p>Blah blah</p>
    <!-- end .content --></div>
  <div class="footer">
    <p>Footer</p>
  <!-- end .footer --></div>
  <!-- end .container --></div>
</body>
</html>

Open in new window

Author

Commented:
Good solution

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial