Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jul 2014
    Posts
    37
    Thanks
    15
    Thanked 1 Time in 1 Post

    Would you help me with a more responsive menu?

    I find myself forced to build my own site. (It doesn't pay to tick the wrong people off, ha.) Actually, this is a good time for me to learn something about HTML and CSS, while I'm recuperating from a little incident. I've been reading about responsive sites and getting them to work cross-browser and on "smart media" and I've downloaded every free zip I thought might help over the weekend. I took the blog example from the PureCss site because I want something really simple and reworked it (only a very little) with the exception of the sidebar navigation. I really didn't want that. I knocked up something, again borrowing from tutorials and what advice I could find that suited me cosmetically but, of course, it's certainly not responsive design! I'm sure the CSS for it is bloated and probably half of it unnecessary. That's where you guys come in. Would you please take a look at my example (I used PIE to get the rounded corners on hover) and advise as to what I've done wrong and perhaps point me in the right direction to make this nav section responsive? I'm sorry it's a bit "girly" but I'm a girl, so there you have it.

    The part for my menu is the last bit on the style sheet, under /* NAVIGATION ================================= */

    (I avoided using "button" or "nav" so that I wouldn't conflict with any other style sheet content.)

    It does okay on Firefox and Safari, as far as function and looks okay on Netrender down to IE 7. After that it wouldn't render. I think I broke it, ha! I don't have IE, so I don't know if it functions on IE or not. My issue is that if a browser is zoomed or dragged smaller (or pinched on my iPhone, etc.) it goes wonky. So, non-responsive, right? I guess it can't be, when you so specifically place things with margins and padding, etc. It's only the shell of a menu, very fragile and badly built, I'm afraid. So, I'm here to learn.

    TEST PAGE

    CSS from the stylesheet for the menu:

    Code:
    /*  NAVIGATION ====================================================================== */
    #theme {
    background: #575f74;
    }
    
    <!--
    *|*:-moz-any-link:focus {
    outline-width: 0 !important;
    }
    -->
    #clickon {
    background-image: url(../images/navdiv_bg.png);
    width: 202px;
    height: 50px;;
    margin-bottom: 10px ;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    }
    a.menuclickon,a.menuclickon:visited,a.menuclickon-tut, a.menuclickon-tut:visited {
    color:#575f74;
    cursor:pointer;
    display: inline-block;
    *display: inline;
    zoom: 1;
    font-size:0.875em;
    font-weight:bold;
    line-height:1.500em;
    text-align:center;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    text-decoration:none;
    padding: 6 px 10px 6px 10px; 
    behavior: url(PIE.htc);
    }
    
    a.menuclickon:hover,a.menuclickon-tut:hover {
    background:#575f74;
    color:#d7c4b7;
    -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;
    }
    a.menuclickon-tut, a.menuclickon-tut:visited {
    text-align:center;
    font-size:1.000em;
    margin: 20px auto;
    color:#d7c4b7;
    }

    HTML:

    Code:
    <div id="layout" class="pure-g">
        <div class="sidebar pure-u-1 pure-u-md-1-4">
            <div class="header">
               <img alt="Future Logo" class="pure-img-responsive flogo" src="images/FLogo.png"  /><br /><br /><br />
            
            <!-- container two starts -->  
    <div id="clickon"><a href="index.html" class="menuclickon">&nbsp;&nbsp;Home&nbsp;&nbsp;</a></div>
    <div id="clickon">
    <a href="bio.html" class="menuclickon">&nbsp;&nbsp;Bio&nbsp;&nbsp;</a></div>
    <div id="clickon">
    <a href="music.html" class="menuclickon">&nbsp;&nbsp;Music&nbsp;&nbsp;</a></div>
    <div id="clickon">
    <a href="book.html" class="menuclickon">&nbsp;&nbsp;Books&nbsp;&nbsp;</a></div>
    <div id="clickon">
    <a href="" class="menuclickon">&nbsp;&nbsp;Links&nbsp;&nbsp;</a></div>
    <div id="clickon">
    <a href="" class="menuclickon">&nbsp;&nbsp;Booking&nbsp;&nbsp;</a></div>
    <div id="clickon">
    <a href="" class="menuclickon">&nbsp;&nbsp;Responses&nbsp;&nbsp;</a></div>
    <div id="clickon">
    <a href="" class="menuclickon">&nbsp;&nbsp;Interviews&nbsp;&nbsp;</a></div>
    <div id="clickon">
    <a href="" class="menuclickon">&nbsp;&nbsp;Contact&nbsp;&nbsp;</a></div>
        
        <!-- container two ends -->  
           </div>
        </div>
     </div>
    Attached: stylesheets

    Thank you for taking the time to help me learn.
    Attached Files Attached Files

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,652
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    Well, just for starters, IDs must be UNIQUE on each page. You have MANY usages of id="clickon"!!! ILLEGAL.

    Maybe you could use <div class="clickon"> and then use .clickon in your CSS in place of #clickon

    As an alternative, just get rid of id="clickon" from all those <div>s and insted of #clickon { in the CSS, use div.header div {

    That assumes you have only one <div class="header">
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Izzy-B (07-29-2014)

  • #3
    New Coder
    Join Date
    Jul 2014
    Posts
    37
    Thanks
    15
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Old Pedant View Post
    Well, just for starters, IDs must be UNIQUE on each page. You have MANY usages of id="clickon"!!! ILLEGAL.

    Maybe you could use <div class="clickon"> and then use .clickon in your CSS in place of #clickon

    As an alternative, just get rid of id="clickon" from all those <div>s and insted of #clickon { in the CSS, use div.header div {

    That assumes you have only one <div class="header">


    I so did not know that; that IDs must be unique on each page. Thank you so much for the heads up and I have made the changes:

    Code:
    .clickon {
    background-image: url(../images/navdiv_bg.png);
    width: 202px;
    height: 50px;;
    margin-bottom: 10px ;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    }
    and each div tag in the html now has a class, rather than an id.

    Ex:
    Code:
    <div class="clickon"></div>
    I'm afraid the issue still exists for me, however. I do note that the entire sidebar and menu are contained in these div tags.
    pure-u-1 is called for by pure-min.css:

    Code:
    <div id="layout" class="pure-g">
        <div class="sidebar pure-u-1 pure-u-md-1-4">
            <div class="header">
            </div>
        </div>
    </div>
    Layout is simply:

    Code:
    /* LAYOUT CSS */
    .pure-img-responsive {
        max-width: 100%;
        height: auto;
        border: 0px;
    }
    
    #layout {
    	
    	background: rgb(87,95,116);
        padding: 0;
    }

    pure-u-1 is called for in pure-min.css:

    Code:
    .pure-u-1 {
    display:inline-block;
    *display:inline;
    zoom:1;
    letter-spacing:normal;
    word-spacing:normal;
    vertical-align:top;
    text-rendering:auto
    }
    Code:
    .pure-u-1 {
    width:100%
    }
    and pure-u-md-1-4 is found in grids-responsive-min.css:

    Code:
    @media screen and (min-width:48em){.pure-u-md-1-4 {
    display:inline-block;
    *display:inline;
    zoom:1;
    letter-spacing:normal;
    word-spacing:normal;
    vertical-align:top;
    text-rendering:auto
    }
    Code:
    .pure-u-md-1-4{width:25%;*width:24.969%}
    I'm just stumped as to why the content isn't being confined within those parameters but, again, I guess I have "margined" and "padded" the menu to death, which, I suppose, defeats the purpose of the entire responsive grid theory.

    There is a header in each of the two columns; one in the sidebar column and one will be in the blue field to the right (and the grid for that section is min-width:48em and width:75%;*width:74.969%.

    I'll keep tinkering and if my muck-up becomes glaringly clear, I'd appreciate your shining a light on it. I don't mind being embarrassed, if I learn something.

    Thanks!

  • #4
    New Coder
    Join Date
    Jul 2014
    Posts
    37
    Thanks
    15
    Thanked 1 Time in 1 Post
    Hi, I don't mean to bump the thread but I just wanted to add: I just kept hammering away at it and staring at it and finally, I created a wrapper for the sidebar called "restraint".... heh heh ......

    Code:
    .restraint {
    float: left;
    margin-left: auto;
    margin-right: auto;
    width: 320px;
    }
    It didn't quite clean up the look, so I also added the same width to the sidebar:

    Code:
    .sidebar {	
        background: rgb(192,162,142) url(../images/side_all.jpg) no-repeat top left;
        color: #fff;
        width: 320px;
    }

    and the HTML:

    Code:
    <div id="layout" class="pure-g">	
    	<div class="sidebar pure-u-1 pure-u-md-1-4">
    		<div class="restraint">
        		<div class="header">
               <img alt="Future Logo" class="pure-img-responsive flogo" src="images/FLogo.png" />
               <br /><br /><br /> 
            <!-- container two starts -->  
    <div class="clickon"><a href="index.html" class="menuclickon">&nbsp;&nbsp;Home&nbsp;&nbsp;</a></div>
    <div class="clickon">
    <a href="bio.html" class="menuclickon">&nbsp;&nbsp;Bio&nbsp;&nbsp;</a></div>
    <div class="clickon">
    <a href="music.html" class="menuclickon">&nbsp;&nbsp;Music&nbsp;&nbsp;</a></div>
    <div class="clickon">
    <a href="book.html" class="menuclickon">&nbsp;&nbsp;Books&nbsp;&nbsp;</a></div>
    <div class="clickon">
    <a href="" class="menuclickon">&nbsp;&nbsp;Links&nbsp;&nbsp;</a></div>
    <div class="clickon">
    <a href="" class="menuclickon">&nbsp;&nbsp;Booking&nbsp;&nbsp;</a></div>
    <div class="clickon">
    <a href="" class="menuclickon">&nbsp;&nbsp;Responses&nbsp;&nbsp;</a></div>
    <div class="clickon">
    <a href="" class="menuclickon">&nbsp;&nbsp;Interviews&nbsp;&nbsp;</a></div>
    <div class="clickon">
    <a href="" class="menuclickon">&nbsp;&nbsp;Contact&nbsp;&nbsp;</a></div>
        
        <!-- container two ends -->  
              </div>
           </div>
        </div>
    </div>
    And it kind of looks okay to me, now. I checked it on an app I have called Responsive Resize and a site called amiresponsive.com and I think it's okay. Does it look okay to you guys? And also, I wanted to ask... is this "bloated" css? Is the wrapper necessary, do you think, or could I have just added width to the sidebar? (I guess I could have tested that out before I started posting this.)

    I'll test that theory elsewhere but leave this for you guys to look at. I'd appreciate your input. Thanks!

  • #5
    New Coder
    Join Date
    Jul 2014
    Posts
    37
    Thanks
    15
    Thanked 1 Time in 1 Post

    Macintosh

    I guess I'll take the long, deafening silence to mean it's okay? (I don't have access to IE browsers and Netrenderer screenshots don't tell me anything about whether the layout breaks if the screen is resized, so I thought I'd ask.) So.... are we supposed to mark threads as "resolved" or something when we're done, then? Just trying to learn the ropes around here. And Thank You to Old Pedant who did stop by the thread and offered help.



  •  

    Posting Permissions

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