Spry Menu Problem

HTML & CSS
21

Not quite sure what or where the CSS file would be, well what your asking for anyway, I know it creates a CSS folder with files in there, but what I have done is click on the spry menu CSS tab at the top, and copied the text from in there, is this what you meant for me to do ?

@charset "UTF-8";

/* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/*******************************************************************************

 LAYOUT INFORMATION: describes box model, positioning, z-order

 *******************************************************************************/

/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
ul.MenuBarVertical
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	cursor: pointer;
	width: 140px;
	background-color: #0FF;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
	z-index: 1000;
}
/* Menu item containers, position children relative to this container and are same fixed width as parent */
ul.MenuBarVertical li
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	position: relative;
	text-align: left;
	cursor: pointer;
	width: 140px;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
{
	margin: -5% 0 0 95%;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	position: absolute;
	z-index: 1020;
	cursor: default;
	width: 160px;
	left: -1000em;
	top: 0;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
{
	left: 0;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
{
	width: 150;
}

/*******************************************************************************

 DESIGN INFORMATION: describes color scheme, borders, fonts

 *******************************************************************************/

/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
{
	border: 1px solid #00F;
	outline-color: #00F;
	background-color: #0FF;
	max-width: 25%;
	min-width: 140px;
	word-wrap: normal;
}
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
{
	border: 1px solid #0FF;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
{
	display: block;
	cursor: pointer;
	background-color: #0FF;
	padding: 0.5em 0.75em;
	color: #333;
	text-decoration: none;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
{
	background-color: #33C;
	color: #FFF;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
{
	background-color: #33C;
	color: #FFF;
}

/*******************************************************************************

 SUBMENU INDICATION: styles if there is a submenu under a given menu item

 *******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenu
{
	background-image: url(SpryMenuBarRight.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}

/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
{
	background-image: url(SpryMenuBarRightHover.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}

/*******************************************************************************

 BROWSER HACKS: the hacks below should not be changed unless you are an expert

 *******************************************************************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarVertical iframe
{
	position: absolute;
	z-index: 1010;
	filter:alpha(opacity:0.1);
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
	ul.MenuBarVertical li.MenuBarItemIE
	{
		display: inline;
		f\\loat: left;
		background: #00F;
	}
}
#MainContent {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	background-color: #0FF;
	float: right;
	height: auto;
	position: absolute;
	min-height: 800px;
	left: 238px;
	top: 124px;
	max-width: 75%;
	min-width: 800px;
}
22

Yes, in the code you originally posted there was a link to a CSS file that styles the menu.

Anyhow, you have managed to place the content area presumably where you want it. Because you are using a WYSIWYG editor and not working with code, you kind of have to accept the poor layout practices that those kinds of editors lumber you with. To be honest, it’s a poor way to lay out pages, because the code that’s generated is awkward and not very flexible. It’s OK to do what you’ve done, but it will be a pain to modify the pages if you end up with a footer etc. (anything under than content area).

23

Good morning,

+1 for what Ralph said.
Dreamweaver is a great tool, but only relying on the WYSIWYG editor will almost always lead to trouble.
Maybe it would be worth taking the time to follow a couple of tutorials about HTML or CSS?
Alternatively, I can recommend the folowing book as a great place to start for the beginner: http://www.sitepoint.com/books/html3/

So, to your current problem.
What exactly is it that you are trying to do?
I’ve had a look at your code and you seem to have a banner centred at the top of the page, a title centred at the top of the page below the banner and your Spry menu on the left.
When I resize the window, these elements retain their position.
Is that what you wanted?

24

When I viewed it with the multi screen option, the banner moved to the left, I thought that it would do the same in browsers, but if it doesn’t then I guess I’m worrying about nothing, but I’m still not 100% about the CSS your asking for, I have zipped the whole folder in the hope it has what you need.
But even I know that drag and drop is not a way to do this, but it was the only way I could seem to make it work, when I try adding a div it either gets created in the menu bar, or underneath it, but neither way can I seem to find out how to put it up next to the menu bar, so any pointers to get a div in the exact place I want when there are other div’s\components that won’t automatically let me place the cursor where I want it to be would be great, Thanks.

Hi, yes that’s about right, and I like them all to be centred, but the main content div is not right, but as I just described, I’m currently struggling to understand how to get div’s etc where I want them, without them creating in another element or area, straight adding and positioning the first div is not a problem (for the most part anyway), it’s when I want to add a 2nd, 3rd etc div’s that I am struggling to place them without interfering with the other elements already there, I have set the menu to a min of 140px, and a max of 25%, I don’t know if that is to much or not ?
I’m just trying to set it so it works on all display sizes without being ridiculously sized (small or large), but then I want the main content to go next to that menu, I have set it to 75% and to float right, but due to how I placed the div it’s not quite doing what I want.

Another niggle I have is the menu bar, is there a way to size each expansion from the others ?
Basically due to a large title one box needs to be fairly large, but the others can be much smaller, I can’t stand seeing that much empty space on the shorter menu entries, Thanks.

25

Ok, let’s take a step back.
If you’re serious about making a webpage that works well across browsers then we need to do this differently.
A common technique for laying out a page is to have a container div of 960px in width, which is centred in the middle of the display.
You would do this like so:

<!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>Simple Layout 1</title>
    <style type="text/css">
      body{background:gray;}
      .container {
        width: 960px;
        margin: 0 auto;
        background:white;
        padding:15px;
      }
    </style>
  </head>
  
  <body>
    <div class="container">
      <h1>Your main header</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua....</p>
      <h2>Your sub heading</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua....</p>
    </div><!-- end .container -->
  </body>
</html>

Take a minute to look at that and understand what’s happening.
I’ve created a container div, applied some styling to it and centred it with the declaration margin: 0 auto;

Now, another common layout technique is to divide the centred container into a sidebar for your navigation and a main area for your content.
You do this by creating two new divs within the container div (sidebar and content) and floating them against each other.
Here’s the code to do that:

<!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>Simple Layout 2</title>
    <style>
      body{background:gray;}
      
      .container{
        width:960px;
        margin:0 auto;
        background:white;
        padding:0px;    
        overflow:hidden; /* Diese Deklaration bewirkt, dass .container das Ende der fließenden Spalten erkennt und ihren Inhalt aufnimmt. */
      }
      
      .sidebar{
        float:left;
        width:160px;
        background:#ccc;
      }
      
      .content {
        margin-left:20px;
        width:780px;
        float:left;
      }
      
      .nav{
        padding:15px 0 35px 35px;
        list-style:none;
      }
    </style>
  </head>
  
  <body>
    <div class="container">
      <div class="sidebar">
        <ul class="nav">
          <li><a href="#">Hyperlink 1</a></li>
          <li><a href="#">Hyperlink 2</a></li>
          <li><a href="#">Hyperlink 3</a></li>
          <li><a href="#">Hyperlink 4</a></li>
        </ul>
      </div><!-- end .sidebar -->
      
      <div class="content">
        <h1>Your main header</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua....</p>
        <h2>Your sub heading</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua....</p>
      </div><!-- end .content -->
    </div><!-- end .container -->
  </body>
</html>

You will see that I have used a ul tag to display the navigation menu. You can replace this with your Spry Menu, of course.
Once you have understood what is going on here, you can start adding other elements like headers and footers.

If I were you, I would really take the time to get to grips with this.
Then you will be in a much better position to position and alter the other elements on your page (as opposed to using the WYSIWYG editor).

I hope this is not too overwhelming, but it is the way forward.
If you have any questions to any of this, let me know.

26

Yes it is overwhelming, but that’s my problem not yours, I’m grateful for all the input I have been given, and will do all I can to follow such help, but I learn from playing and breaking things, then building them again, over time it sticks, I’m not a book person, I even tried to do an online site teaching the basics, and I couldn’t even get past the 3rd stage lol, but even within this thread I hope I have made a good step forward from what I started with, and that’s just repetition and your guidance on key points.

I will probably never be as good as you guys, but I hope to be able to produce a respectable finished product so to speak, once I get these kind of probably basic points to you down, I will actually have enough to put up my new site layout, I can worry about learning further tricks once I get to handle the basics a bit more, but to clarify a few points if I may;

The 960px you say for the width, is that like a universal standard in web pages so to speak ?

The div class=“container” title, I take it you call it a container due to having all the other elements in it ? and further div’s would have a different title appropriate to their use ? I get that they are used to apply specific attributes within it, rather than doing every entry on it’s own.

And the overflow:hidden entry, I have seen it listed in the code options, but other than the obvious, I have no idea what it means to the finished page, what does this code actually mean\do ?

Would I put the banner into the header section, or add a further div to do that ?

Thanks again.

27

Good evening,

960px is used because it is divisible by 1, 2, 3, 4, 5, 6, 8, 10, 12, 15, and 16… - allowing designers to have a huge variety of different column widths and possible layouts.
Also, a width of 960px fits the majority of screen resolutions “nicely”.

Yes, but the name is not set in stone, you could just as easily call it “wrapper” or some other name that makes sense to you.

This ensures that the “container” div recognizes the end of the floating column and accommodates all of its content.
Try removing this declaration to see what it does (it should be quite obvious).
I’d also like to point you towards the Sitepoint CSS reference, where you can read more: http://reference.sitepoint.com/css/overflow

You would do this with a further “header” div, inside the “container” div.
Something 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>Simple Layout 3</title>
    <style>
      body{ background:gray; }
      
      .container{
        width:960px;
        margin:0 auto;
        background:white;
        padding:0px;    
        overflow:hidden;
      }
      
      .header {  
        background: #ADB96E;
      }
      
      .header h1{
        margin:0px;
      }
      
      .sidebar{
        float:left;
        width:160px;
        background:#ccc;
      }
      
      .content {
        margin-left:20px;
        width:780px;
        float:left;
      }
      
      .nav{
        padding:15px 0 35px 35px;
        list-style:none;
      }
    </style>
  </head>
  
  <body>
    <div class="container">
      <div class="header">
        <h1>Your main header now goes here, or maybe an image</h1>
      </div><!-- end .header -->

      <div class="sidebar">
        <ul class="nav">
          <li><a href="#">Hyperlink 1</a></li>
          <li><a href="#">Hyperlink 2</a></li>
          <li><a href="#">Hyperlink 3</a></li>
          <li><a href="#">Hyperlink 4</a></li>
        </ul>
      </div><!-- end .sidebar -->
      
      <div class="content">
        <h2>Your sub heading</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua....</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua....</p>
      </div><!-- end .content -->
    </div><!-- end .container -->
  </body>
</html>
28

Hi, that’s what I was guessing about the size, albeit in the most basic concept, just accepting it as a basic universal concept is as much as I need to know at my level, the same with the other bits again, I get the concept which is biggest battle for me usually lol, I will have to try and break the hidden element, then I should get a better understanding there, so I will have a play and see what damage I can do lol.

Many Thanks for this.

29

Well been a while since trying to get my head round this, and I still can’t get the concept of positioning div’s, well more precisely placing div’s where I want them when another div is in the same area, individual div’s are fine, but when I want them side by side I struggle, and I wish I could say that what I have produced is all my own work, it isn’t, what I have managed to do is edit the example you did for me, I’m not happy with the menu colour, but figured I’d see what you guys think before worrying about that, so how is this for an attempt ?

30

Hi there,
Your site is looking good - Well Done!

You normally need to use a float for this. Divs are block-level elements and by default will always be placed below each other.
Here’s a tutorial I can recommend, which explains this really well: http://css-tricks.com/all-about-floats/

If you have any questions regarding this, just let us know.

HTH

31

Hi, surely it can’t be as simple as just changing a float position ?
I have also seen clearing floats in the options, but have no idea what they do, but the link you gave covers that, so will go through that several times and try to break things again, but up to now I thought you always had to float left to keep the page from going too wide, so that everything was distanced using x pixels from the left, thus controlling the max width, at least that’s what I thought until now, but will go through that link and see if it can change my understanding.

Thanks for all the help