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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Menubar CSS roadblock

    Hey guys I'm new when it comes to Html and CSS and I have been working on my website for a while now. I usually go look for tutorials on other sites but this time I have hit a roadblock for 2 issues.

    The first issue is with my menu bar. If i lower my screen resolution or make the page smaller I lose my margin on the right.. The bar rests on the rightmost side and the left margin remains.. I want that no matter what the margin on the right stays.

    My second issue is I made a frame for my text but whenever i make the resolution smaller or the page smaller.. The text scale with the total ratio and doesn't stay at the same ratio as the menu bar.

    Those are probably really easy questions but as I'm new there is so much I dont know.. If you could please explain rather than pointing what I'm doing wrong would be a huge plus too.

    CSS code for page : http://www.techno-logic-art.com/themes/5/menubar.css

    Page I want to fix : About

  • #2
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Sorry for the doublepost.. couldn't find the edit button.. note that my site is all tutorials i found around with massive edits.. There is a lot of stuff in my code that i do not understand and a lot of redudancy.

  • #3
    New Coder
    Join Date
    Dec 2013
    Location
    Were my backpack is!
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts
    You just need to set your menu bar so that it is a certain width of your screen.

    #menu {
    width: 80%;
    }

    You will notice that as you zoom in now and your menu items get squished, they will go to the next row (witch is good) but your menu box is not resizing to fix them. I think you can probably figure it out from there (hint it looks like your menu border is not truly bordering your list)

  • #4
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Adrian888 View Post
    You will notice that as you zoom in now and your menu items get squished, they will go to the next row (witch is good)
    I view this as an even bigger issue... Not as something that is good. A menu that will expand on 2 rows looks even more odd. I just want the margin to be applied on the right.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello Gisben,
    Your CSS is applying that 6% left and right margin to body, ul and li. You also set a width on your ul#menu.

    See what this does for you -
    Code:
    body /*, ul, li*/ {  {  
        font-size:14px;   
        font-family:Arial, Helvetica, sans-serif;  
        line-height:21px;  
        text-align:left;  
        margin-left:6%;
    	margin-right:6%;
    }  
      
    /* Navigation Bar */  
      
    #menu {  
        list-style:none;  
        /*width:940px;*/
    min-width: 562px; 
        margin:30px auto 0px auto;  
        height:43px;  
        padding:0px 20px 0px 20px;  
      
        /* Rounded Corners */  
          
        -moz-border-radius: 10px;  
        -webkit-border-radius: 10px;  
        border-radius: 10px;  
      
        /* Background color and gradients */  
          
        background: #014464;  
        background: -moz-linear-gradient(top, #0272a7, #013953);  
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));  
          
        /* Borders */  
          
        border: 1px solid #002232;
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Or this -
    Code:
    body, ul, li {  
        font-size:14px;   
        font-family:Arial, Helvetica, sans-serif;  
        line-height:21px;  
        text-align:left;   
        /*margin-left:6%;
    	margin-right:6%; */
    margin: 0;}
    body {
    min-width: 600px;
    }  
    #menu {  
        list-style:none;  
        /*width:940px;  */
        margin:30px auto 0px auto;  
        height:43px;  
        padding:0px 20px 0px 20px;  
      
        /* Rounded Corners */  
          
        -moz-border-radius: 10px;
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Gisben (04-06-2014)

  • #7
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Or this -
    Code:
    body, ul, li {  
        font-size:14px;   
        font-family:Arial, Helvetica, sans-serif;  
        line-height:21px;  
        text-align:left;   
        /*margin-left:6%;
    	margin-right:6%; */
    margin: 0;}
    body {
    min-width: 600px;
    }  
    #menu {  
        list-style:none;  
        /*width:940px;  */
        margin:30px auto 0px auto;  
        height:43px;  
        padding:0px 20px 0px 20px;  
      
        /* Rounded Corners */  
          
        -moz-border-radius: 10px;
    Using this method.. My menu bar completly dissepear but it does fix the issue of the text fields not scaling with the menu bar.. I'm still trying to have my menu bar at the top with equal spacing and with a margin to the right when im completly scrolled right on a smaller window.. And for it to not be a second row when the page is small.


    Thanks a lot to everyone for the help too


  •  

    Posting Permissions

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