SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 31
  1. #1
    SitePoint Enthusiast 8210GUY's Avatar
    Join Date
    Jan 2011
    Location
    UK
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Spry Menu Problem

    Hi all, been a while since I have attempted anything like this, and I'm a stumbler, I have very little knowledge about this, but can throw things together to look how I want, but not the way you guys can, so I am trying to create a better site than I can manage normally, so all pointers are welcome.

    I dare say I will be having numerous issues as I get deeper, but for the moment it's a menu I am struggling with, I have got so far with this, but now can't seem to see whats wrong, not sure if there is a limit to how many sub menu's you can have, I added some just fine, but using the same method I am failing.

    I have a vertical Spry menu, within that I have sub menus, and even some of those have sub menu's, I got this far by copying the succesful parts of the menu, but now I am trying to add more sub menu's, but am failing miserably, instead of creating the new sub menu, it is making it dissapear, the code is what I have, hopefully you will see what I'm trying to do, and be able to guide me as to whats wrong.
    Code:
    <ul id="MenuBar1" class="MenuBarVertical">
      <li>
        <a class="MenuBarItemSubmenu" href="#">Maintenance</a>
          <ul>
            <li><a href="#">Junk File Cleaners</a>
            <ul><li><a href="#">ATF-Cleaner</a>
            <li><a href="#">CCleaner</a>
            <li><a href="#">Disk Cleaner</a>
            </ul>
          <ul>
            <li>
        <a class="MenuBarItemSubmenu" href="#">Defragging</a></>
            
            <li><a href="#">IObit SmartDefrag</a>
            </ul>
            <li><a href="#">Secunia PSI</a></li>
          </ul>
        </div>

  2. #2
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi,
    Maybe it's a typo, but in the code snippet you provided, this:
    HTML Code:
    <a class="MenuBarItemSubmenu" href="#">Defragging</a></>
    should be this:
    HTML Code:
    <a class="MenuBarItemSubmenu" href="#">Defragging</a></li>
    i.e. you weren't closing the li tag properly.

  3. #3
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    In fact, on closer inspection, your complete markup looks pretty shot.
    It should be more like this:

    HTML Code:
    <ul id="MenuBar1" class="MenuBarVertical">
      <li><a class="MenuBarItemSubmenu" href="#">Maintenance</a>
        <ul>
          <li><a href="#">Junk File Cleaners</a>
            <ul>
              <li><a href="#">ATF-Cleaner</a></li>
              <li><a href="#">CCleaner</a></li>
              <li><a href="#">Disk Cleaner</a></li>
            </ul>
          </li>
        </ul>
      </li>
      
      <li><a class="MenuBarItemSubmenu" href="#">Defragging</a>
        <ul>
          <li><a href="#">IObit SmartDefrag</a></li>
          <li><a href="#">Secunia PSI</a></li>
        </ul>
      </li>
    </ul>

  4. #4
    SitePoint Enthusiast 8210GUY's Avatar
    Join Date
    Jan 2011
    Location
    UK
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool

    Sorry for a slow reply, never got a notification of one, anyway it doesn't surprise me to hear that, I was simply using the original code, duplicating it to create the same thing in further menu's, got a working result up to half way, but then it simply stopped allowing any kind of editing without making the layout mess up etc.

    But to cover things a bit at a time, you comment on the </li> tag(s) missing, in that instance it was a typo, but in the final attempts (not shown here) I had done that on purpose, I'm sure when I was last helped here on a different project that it was said that in using CSS you didn't need to close every time, a single close could act for all of them, or am I getting mixed up somewhere ?

    Now just to get this sorted in my head, am I right in thinking that the following code is used once only (each main menu anyway), to tell it there is a menu ?
    Code:
    <ul id="MenuBar1" class="MenuBarVertical">
    And that the following code is used when you want to have another menu options part come out ? And this needs to be used on every heading you want further menu options to appear from ?
    Code:
    <a class="MenuBarItemSubmenu" href="#">
    eg I am looking at opening Maintenance to Junk File Cleaners to 3 specific cleaners, would I need that code by each of the preceding headings ?

    I had tried adding the second code with some success, but I found it only worked so many times, is there a limit for the amount of times you can use such codes in a menu ?
    Basically I'm looking (currently anyway) to have 4 menu options, each opening to between 3 and 5 options, and some of those to open out yet again to another say 3 or so options, is there a technical wouldn't be achievable ?

    I am going to have a play with this to see if I can get on better than my last attempt, but I take it all items under a menu have to be set as <ul> ?
    Just wondering what different code would mean.

    Thanks for the help.

  5. #5
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by 8210GUY View Post
    Sorry for a slow reply, never got a notification of one
    No problem, you can set your Default Thread Subscription Mode in your profile > Settings > General Settings.
    Alternatively, you can use the Thread Tools dropdown at the top of each thread to subscribe or unsubscribe from it.

    Quote Originally Posted by 8210GUY View Post
    I'm sure when I was last helped here on a different project that it was said that in using CSS you didn't need to close every time, a single close could act for all of them, or am I getting mixed up somewhere ?
    You're getting mixed up. There are certain HTML tags which don't need closing under certain circumstances, e.g. <img> in HTML (as opposed to XHTML), but in general if you open a tag, you have to close it.

    Quote Originally Posted by 8210GUY View Post
    Now just to get this sorted in my head, am I right in thinking that the following code is used once only (each main menu anyway), to tell it there is a menu ?
    Code:
    <ul id="MenuBar1" class="MenuBarVertical">
    Exactly! In it's basic form, the menu is nothing more than an unordered list (<ul>), with a unique id, in this case "MenuBar1".

    Quote Originally Posted by 8210GUY View Post
    And that the following code is used when you want to have another menu options part come out ? And this needs to be used on every heading you want further menu options to appear from ?
    Code:
    <a class="MenuBarItemSubmenu" href="#">
    Not quite. A <li> tag is used to create a top-level menu item. E.g.:
    Code:
    <li><a href="#">Element 1</a></li>
    The class of "MenuBarItemSubmenu" denotes that this menu item has further sub-menu points and is used to add some CSS styling as such.

    Perhaps it would help to walk through a simple example and build it up to something more complicated:

    Your basic vertical Spry menu with four top-level menu points looks like this:
    HTML Code:
    <ul id="MenuBar1" class="MenuBarVertical">
      <li><a href="#">Element 1</a></li>
      <li><a href="#">Element 2</a></li>
      <li><a href="#">Element 3</a></li>
      <li><a href="#">Element 4</a></li>
    </ul>
    So, let's add a second layer of navigation to point two:
    HTML Code:
    <ul id="MenuBar1" class="MenuBarVertical">
      <li><a href="#">Element 1</a></li>
      <li>
        <a class="MenuBarItemSubmenu" href="#">Element 2</a>
        <ul>
          <li><a href="#">Element 2.1</a></li>
          <li><a href="#">Element 2.2</a></li>
          <li><a href="#">Element 2.3</a></li>
        </ul>
      </li>
      <li><a href="#">Element 3</a></li>
      <li><a href="#">Element 4</a></li>
    </ul>
    Can you see what's gone on there?
    Within the second top-level <li> element, I have added a <ul> element, which itself has three <li> elements.
    This represents the second layer of your navigation.

    So, let's build on this and a second and a third layer of navigation to point four:
    HTML Code:
    <ul id="MenuBar1" class="MenuBarVertical">
      <li><a href="#">Element 1</a></li>
      <li>
        <a class="MenuBarItemSubmenu" href="#">Element 2</a>
        <ul>
          <li><a href="#">Element 2.1</a></li>
          <li><a href="#">Element 2.2</a></li>
          <li><a href="#">Element 2.3</a></li>
        </ul>
      </li>
      <li><a href="#">Element 3</a></li>
      <li>
        <a class="MenuBarItemSubmenu" href="#">Element 4</a>
        <ul>
          <li>
            <a href="#">Element 4.1</a>
            <ul>
              <li><a href="#">Element 4.1.1</a></li>
              <li><a href="#">Element 4.1.2</a></li>
            </ul>
          </li>
          <li><a href="#">Element 4.2</a></li>
          <li><a href="#">Element 4.3</a></li>
        </ul>
      </li>
    </ul>
    Here I have done the same as above. Within the fourth top-level <li> element, I have added a <ul> element.
    Within this <ul> element's first <li> element, I have added a further <ul> element. This represents the third layer of navigation.

    Hopefully, this gives you some insight into what's going on.
    If you have any more questions, just let me know.

  6. #6
    SitePoint Enthusiast 8210GUY's Avatar
    Join Date
    Jan 2011
    Location
    UK
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool

    Yes I know about subscribing, and by default when you post you are subscribed, but I will double check under your guide (Thanks for that), but again no notification of this one, but the thread tag shows me as subscribed (only offers to unsubscribe).

    I'm not surprised I'm mixing things up, I have the attention span of a goldfish at times but as with anything the more you do it the more it sticks, but I am a long way from understanding, but I can follow some things and apply logic (it works sometimes) to get kinds of results, but no where near what you guys could do.

    Now the <li> tag, I was way off with that, I thought it simply meant it was a new line, nothing to do with menus, not directly anyway.
    The <ul> tag I understand is in relation to a specific type of list (unordered), and the href part, well I'd be lying if I said I understood, but I see it's use\need in mentioning a specific point to get it showing on a web page.

    The html examples you give I see very clearly whats going on, and thats what I was trying to emulate, but kept failing, each time I got so far, adding the next bit either put the page out, or made other bits of the menu disappear, and I just couldn't see what I was doing wrong, probably just a mass of text making me go blind lol, but that was exactly wheat I was trying to do, albeit badly.

    Now the sub menu heading, I think I am right in my thinking, but probably didn't say it clearly, bit without that the menu wont show the parts you want to show within that sub heading, so from what I can draw from this, I wasn't to far off the mark in my understanding, although I probably didn't come across clearly enough with it, but somewhere between my brain and my typing something kept going wrong lol.

    Anyway, I came across an automated way to do what I was trying to do, I found showing the right tab made it's elements visible, then I was able to just change headings etc in there, and it came out a treat, for me anyway, not sure if you'd agree but it does what I wanted now, I just have to mess around with colours and text size now, fortunately thats much easier than this was, but here is my current list:-
    Code:
    <ul id="MenuBar1" class="MenuBarVertical">
      <li><a class="MenuBarItemSubmenu" href="#">Maintenance</a>
        <ul>
          <li><a href="#" class="MenuBarItemSubmenu">Junk File Cleaners</a>
            <ul>
              <li><a href="#">ATF-Cleaner</a></li>
              <li><a href="#">CCleaner</a></li>
              <li><a href="#">Disk Cleaner</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Defragging</a>
            <ul>
              <li><a href="#">Auslogics Disk Defrag</a></li>
              <li><a href="#">IObit SmartDefrag</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Updating</a>
            <ul>
              <li><a href="#">Secunia PSI</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Protection</a>
        <ul>
          <li><a href="#" class="MenuBarItemSubmenu">Antivirus</a>
            <ul>
              <li><a href="#">Avast! Free Antivirus</a></li>
              <li><a href="#">Microsoft Security Essentials</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Anti-Spyware</a>
            <ul>
              <li><a href="#">Emsisoft Anti-Malware</a></li>
              <li><a href="#">Malwarebytes Anti-Malware</a></li>
              <li><a href="#">SUPERAntiSpyware</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Hosts</a>
            <ul>
              <li><a href="#">Hosts File</a></li>
              <li><a href="#">SpywareBlaster</a></li>
            </ul>
          </li>
          <li><a href="#">WinPatrol</a></li>
        </ul>
      </li>
      <li><a class="MenuBarItemSubmenu" href="#">Safe Surfing</a>
        <ul>
          <li><a href="#">General Tips</a>      </li>
          <li><a href="#">SiteAdvisor</a></li>
          <li><a href="#">WOT</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Extra Tools</a>
        <ul>
          <li><a href="#">Belarc Advisor</a></li>
          <li><a href="#">Flash Disinfector</a></li>
          <li><a href="#">Iconix</a></li>
        </ul>
      </li>
    </ul>
    Many Thanks for this, I was on the right kind of track, I just got a bit lost, now comes the bigger battle, adding the main content and have it place where I want it.

  7. #7
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    I'm glad you got it working. Your code looks pretty spot on now. Well done!

    Quote Originally Posted by 8210GUY View Post
    Yes I know about subscribing, and by default when you post you are subscribed, but I will double check under your guide (Thanks for that), but again no notification of this one, but the thread tag shows me as subscribed (only offers to unsubscribe).
    The only thing I can think of here, is that if you get one email notification, you won't get any more until you click on the link in that email, that takes you to the thread. Could that maybe be the problem?

    Quote Originally Posted by 8210GUY View Post
    ... the href part, well I'd be lying if I said I understood, but I see it's use\need in mentioning a specific point to get it showing on a web page.
    This is important. Contained within the <li> tag is an <a> tag (anchor tag). The href attribute of the <a> tag specifies the address of the page the link goes to.
    It can either be absolute, e.g.:
    HTML Code:
    <a href="http://www.sitepoint.com">Click here to visit Sitepoint</a>
    Or it can be a relative path to another page on your site, e.g.:
    HTML Code:
    <a href="./contact/contact.html">Click here to visit our contact page</a>
    There are other variations on this, but in your case, the second version will probably be most useful.

    If you want to read more about the humble <a> tag, check this out: http://reference.sitepoint.com/html/a

  8. #8
    SitePoint Enthusiast 8210GUY's Avatar
    Join Date
    Jan 2011
    Location
    UK
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool

    Still no notification, will try logging out then back in, got a vague memory of that working on occasions for some forum issues, but it's set to instant notifications in my settings, currently all I get is the top of the web page saying I have got x notifications.

    I wish I could say I did that coding, but alas, I simply found a way to expose a menu to allow me to do that easily, but it took me a few hours to find how to change the text area size so it fitted inside the text areas, yet earlier I stumbled on it easily lol, but another few dozen more rebuilds of this so far, and I will get to see what certain functions can do to change parts of it.
    But your html examples (the latter of them) is exactly what I will be doing, and I'm glad to say thats the one bit I can manage easily lol.

    My next battle is to make the page so it shows that way on ALL other pages, from memory you can make it so only the content of the main body changes, speeding up load times, or am I getting mixed up again ?

    Many Thanks for this, 1 battle down, several more to go lol.

  9. #9
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by 8210GUY View Post
    My next battle is to make the page so it shows that way on ALL other pages, from memory you can make it so only the content of the main body changes, speeding up load times, or am I getting mixed up again ?
    Although this is technically possibly, it's normal for you to repeat the navigation code on each page of your site.
    There are (at least) two reasons for this:
    1. You normally want to give the user some idea of where they find themselves within the menu hierarchy, e.g. by highlighting the currently selected menu item.
    2. If you are using relative paths (e.g. ../contact/contact.html), then the paths to the various pages from within the navigation will be different from every page.

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Pullo View Post
    If you are using relative paths (e.g. ../contact/contact.html), then the paths to the various pages from within the navigation will be different from every page.
    Yes, it's better to use "root relative" paths, such as href="/contact/" so that the same menu code will work on all pages. And the ideal is to store the menu code in one place and "include" it onto each page via a PHP include or similar.

  11. #11
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,145
    Mentioned
    261 Post(s)
    Tagged
    5 Thread(s)
    Off Topic:

    Quote Originally Posted by 8210GUY View Post
    Still no notification, will try logging out then back in, got a vague memory of that working on occasions for some forum issues, but it's set to instant notifications in my settings, currently all I get is the top of the web page saying I have got x notifications.
    For some reason, the notification system occasionally stops sending e-mails to a particular address. It's nothing personal (I hope - because it's doing it to me for the second time ). If you send a PM to @HAWK , she should be able to sort it out for you.

  12. #12
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi Ralph,

    I have two questions to what you wrote:
    Quote Originally Posted by ralph.m View Post
    Yes, it's better to use "root relative" paths, such as href="/contact/" so that the same menu code will work on all pages.
    This is untenable on your local machine, as Windows at least, will consider your document root to be C:/ and not whatever folder you are actually working in. Therefore <a href="/contact/"> will always lead you to file:///C:/contact/. Do you know of any way around this problem (apart from obviously working in C:/)?

    Quote Originally Posted by ralph.m View Post
    And the ideal is to store the menu code in one place and "include" it onto each page via a PHP include or similar.
    In this case how would you go about highlighting the page within the current navigation hierarchy upon which the user currently finds themselves?

  13. #13
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,145
    Mentioned
    261 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by Pullo View Post
    In this case how would you go about highlighting the page within the current navigation hierarchy upon which the user currently finds themselves?
    Something like this, perhaps:
    Code PHP:
    <?php $currentPage =  basename($_SERVER['SCRIPT_NAME']); ?>
    <ul>
    	<li <?php if ($currentPage == 'index.php') {echo 'class="selected"';} ?>><a href="index.php">Home</a></li>
    	<li <?php if ($currentPage == 'prog.php') {echo 'class="selected"';} ?>><a href="prog.php">Festival Programme</a></li>
    	<li <?php if ($currentPage == 'events.php') {echo 'class="selected"';} ?>><a href="events.php">Other Events</a></li>
    	<li <?php if ($currentPage == 'reports.php') {echo 'class="selected"';} ?>><a href="reports.php">Past Events</a></li>
    	<li <?php if ($currentPage == 'info.php') {echo 'class="selected"';} ?>><a href="info.php">Useful Information</a></li>
    	<li <?php if ($currentPage == 'contact.php') {echo 'class="selected"';} ?>><a href="contact.php">Contact</a></li>
    </ul>

  14. #14
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Ah, with you. That makes sense.
    Thanks!

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Pullo View Post
    This is untenable on your local machine, as Windows at least, will consider your document root to be C:/ and not whatever folder you are actually working in. Therefore <a href="/contact/"> will always lead you to file:///C:/contact/. Do you know of any way around this problem (apart from obviously working in C:/)?
    Yes, it's the same on Mac. But the easy way around it is to set up a virtual server on your computer, using XAMPP (PC) or MAMP (Mac). It only takes a few minutes to set up, and then you can set everything up just as you would online.

    In this case how would you go about highlighting the page within the current navigation hierarchy upon which the user currently finds themselves?
    You can do it with PHP in various ways one of which TB posted above), with CSS, or with JavaSCript. Here is a thread listing a few solutions:

    http://www.sitepoint.com/forums/show...-CSS&p=5091887

  16. #16
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Yes, it's the same on Mac. But the easy way around it is to set up a virtual server on your computer, using XAMPP (PC) or MAMP (Mac). It only takes a few minutes to set up, and then you can set everything up just as you would online.
    Thanks Ralph, as obvious as that is, I've never really considered doing that for a project involving just static HTML files (as opposed to a project using say, WordPress)
    I'll give that some thought.

  17. #17
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Pullo View Post
    I've never really considered doing that for a project involving just static HTML files (as opposed to a project using say, WordPress)
    Yep, it works nicely for both static sites and sites using a CMS like WordPress. It's handy because it means you can develop the whole thing locally and then upload when you're ready. Of course, you can just install PHP, Apache, MySQL etc. on your PC as well, but it's much quicker to use a package like those I mentioned.

  18. #18
    SitePoint Enthusiast 8210GUY's Avatar
    Join Date
    Jan 2011
    Location
    UK
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool

    Quote Originally Posted by Pullo View Post
    Although this is technically possibly, it's normal for you to repeat the navigation code on each page of your site.
    There are (at least) two reasons for this:
    1. You normally want to give the user some idea of where they find themselves within the menu hierarchy, e.g. by highlighting the currently selected menu item.
    2. If you are using relative paths (e.g. ../contact/contact.html), then the paths to the various pages from within the navigation will be different from every page.
    I thought it would be worth it as it speeds up loading pages, each page would have a heading on it so they would know what page they are on, but I will just create a page as a template then each new page add the content then save as to save having to do it fresh each time, it's what I used to do anyway, just thought it was worth looking at this possibility.

    Quote Originally Posted by ralph.m View Post
    Yes, it's better to use "root relative" paths, such as href="/contact/" so that the same menu code will work on all pages. And the ideal is to store the menu code in one place and "include" it onto each page via a PHP include or similar.
    I'm struggling to understand up to this point, but your advice (as great as it probably is) is way over my head, I fear I have a way to go before getting even close to the methods you suggest, I just hope one day to be able to use such info, but Thanks for the input.

    Quote Originally Posted by TechnoBear View Post
    Off Topic:

    For some reason, the notification system occasionally stops sending e-mails to a particular address. It's nothing personal (I hope - because it's doing it to me for the second time ). If you send a PM to @HAWK , she should be able to sort it out for you.
    I will try changing email addresses to see if that cures it, if it doesn't then I will follow your advice, Thanks.


    Thanks for the input all, I hope to get to grips with it one day, for now I will do my best to follow the advice.

  19. #19
    SitePoint Enthusiast 8210GUY's Avatar
    Join Date
    Jan 2011
    Location
    UK
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Great stuff I can post again lol, Thanks to Hawk for sorting the account for me.

    Right several dozen rebuilds and I have got what I hope is a good handle on it now, still way off understanding as such, but hopefully I'm starting to pick it up a bit, enough to be moving forward a bit anyway, so I have been trying to get the banner showing correctly, as it seems to move to the left when viewing via different screens, even though I set it to centre, I have also been struggling with adding a main content div, I've managed to get a semi reasonable result after many attempts, but it's still not right.

    The first battle was placing it, the only way I finally got it to position to the right of the menu was to drag and drop it, prior to that it was either adding into the menu, or starting down under the menu, so tips on how to approach placing these things would be great, as I know there is a more correct way to do it, but no matter how I tried to place the cursor on the page to locate the insertion point, it never went where I wanted (to the right of the menu), I just hope I can follow it when you guys explain it lol, but please let me know at what point I should stop pasting code, I totally appreciate it can eat resources, and I can upload it if needed, but here it is so far:-

    Code:
    <!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>Template</title>
    <style type="text/css">
    body,td,th {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	color: #000;
    }
    body {
    	background-color: #0FF;
    	text-align: center;
    	min-width: 800px;
    	max-width: 100%;
    }
    h1,h2,h3,h4,h5,h6 {
    	font-weight: bold;
    }
    h1 {
    	font-size: 36px;
    	color: #000;
    	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    	font-style: italic;
    	font-weight: bolder;
    	text-decoration: underline;
    	letter-spacing: normal;
    	text-align: center;
    	word-spacing: normal;
    }
    </style>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body bgcolor="#00FFFF" text="#000000">
    <div><img src="Home Pic's/Banner.png" alt="Banner" width="412" height="62" align="absmiddle" /></div>
    <p>&nbsp;</p>
    <div class="MainContent" id="MainContent">
      <h1 align="center">Welcome To My Tutorials</h1>
      <p>&nbsp;</p>
    </div>
    <p><div style="width: 140px; auto; margin-right: auto; min-height:200px; height:auto height:500px;&gt;
      &lt;div align=; max-width: 25%;"center">
      <div align="center">
        <ul id="MenuBar1" class="MenuBarVertical">
          <li><a class="MenuBarItemSubmenu" href="#">Maintenance</a>
            <ul>
              <li><a href="#" class="MenuBarItemSubmenu">Junk File Cleaners</a>
                <ul>
                  <li><a href="#">ATF-Cleaner</a></li>
                  <li><a href="#">CCleaner</a></li>
                  <li><a href="#">Disk Cleaner</a></li>
                </ul>
              </li>
              <li><a href="#" class="MenuBarItemSubmenu">Defragging</a>
                <ul>
                  <li><a href="#">Auslogics</a></li>
                  <li><a href="#">IObit SmartDefrag</a></li>
                </ul>
              </li>
              <li><a href="#" class="MenuBarItemSubmenu">Updates</a>
                <ul>
                  <li><a href="#">Secunia PSI</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Protection</a>
            <ul>
              <li><a href="#" class="MenuBarItemSubmenu">Anti-Virus</a>
                <ul>
                  <li><a href="#">Avast!</a></li>
                  <li><a href="#">Microsoft Security Essentials</a></li>
                </ul>
              </li>
              <li><a href="#" class="MenuBarItemSubmenu">Anti-Spyware &amp; Anti-Malware</a>
                <ul>
                  <li><a href="#">Emsisoft Anti-Malware</a></li>
                  <li><a href="#">Malwarebytes Anti-Malware</a></li>
                  <li><a href="#">SUPERAntiSpyware</a></li>
                </ul>
              </li>
              <li><a href="#" class="MenuBarItemSubmenu">Hosts</a>
                <ul>
                  <li><a href="#">Hosts File</a></li>
                  <li><a href="#">SpywareBlaster</a></li>
                  <li><a href="#">WinPatrol</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a class="MenuBarItemSubmenu" href="#">Safe Surfing</a>
            <ul>
              <li><a href="#">General Tips</a> </li>
              <li><a href="#">SiteAdvisor</a></li>
              <li><a href="#">WOT</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Extra Tools</a>
            <ul>
              <li><a href="#">Emsisoft Emergency Kit</a></li>
              <li><a href="#">Flash Disinfector</a></li>
              <li><a href="#">Iconix</a></li>
              <li><a href="#">Stinger</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    
    </p>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    </body>
    </html>

  20. #20
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    There isn't enough CSS there to see how you are going. Could you post the contents of the css file?

  21. #21
    SitePoint Enthusiast 8210GUY's Avatar
    Join Date
    Jan 2011
    Location
    UK
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    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 ?

    Code:
    @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. #22
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    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. #23
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    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. #24
    SitePoint Enthusiast 8210GUY's Avatar
    Join Date
    Jan 2011
    Location
    UK
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool

    Quote Originally Posted by ralph.m View Post
    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).
    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.

    Quote Originally Posted by Pullo View Post
    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?
    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.
    Attached Files Attached Files

  25. #25
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by 8210GUY View Post
    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
    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:

    HTML Code:
    <!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:

    HTML Code:
    <!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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •