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 4 of 4
  1. #1
    Senior Coder
    Join Date
    May 2006
    Posts
    1,877
    Thanks
    31
    Thanked 4 Times in 4 Posts

    Problem with a padding or margin ?

    Hi,
    I have been playing with the margins and padding on this navigation bar.

    I am making it responsive so I want to change the space between the left edge of the bar and the first item as shown circled in the image.

    -marginerror01.jpg


    This is the css I have for it:


    Code:
    .nav-top {
    	background-color: #666;
    	height: 36px;
    	border-radius: 5px;
    	-moz-border-radius: 5px;
    	-webkit-border-radius: 5px;
    }
    
    nav ul{
    	list-style: none;
    	margin: 0 auto;					
    }
    
    nav ul li{
    	float: left;
    	display: inline;			
    }
    
    nav a:link, nav a:visited {
    	color: #FFF;
    	display: inline-block;
    	padding: 8px 25px;
    	height: 20px;
    	font-size: 12pt;
    }
    
    nav a:hover, nav a:active,
    nav .active a:link, nav .active a:visited {
    	background-color: #CF5C3F;
    	text-shadow: none;
    	/* add height: ; */					
    }
    
    nav ul li a {
    	border-radius: 5px;
    	-moz-border-radius: 5px;
    	-webkit-border-radius: 5px;
    }
    The site is live on https and then ukncsa (dot) org

    The css file is /a_style.css

    I am using Website Responsive Testing Tool
    to look at the responsiveness and am able to change all except this front gap size.

    On the screen width less than 700px I want to reduce that gap to half - but can't find the parameter

    Would appreciate some help.

    Many thanks.
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  2. #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,594
    Thanks
    3
    Thanked 641 Times in 627 Posts
    Hi there jeddi,


    try adding this...

    Code:
    
    @media (max-width: 43.75em ) {
    nav ul {
        padding-left: 1.25em; /* adjust value to suit */
      }
     }
    to your stylesheet.

    coothead
    ~ the original bald headed old fart ~

  3. #3
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,736
    Thanks
    5
    Thanked 535 Times in 521 Posts
    1) don't declare things in pixels or even think in pixels. It's a fixed metric that's bad for usability and accesibility. Use EM instead.

    2) don't mix and match your font-size metrics. Points do not have a fixed relationship to pixels, so mixing and matching pt font sizes and px container sizes is guaranteed to be broken for some users -- like ME... since 12pt can be anywhere from 12px to -- well, I'm not even sure there is an upper limit -- depending on the user's preference. (much like EM). Good rule of thumb? EM for screen, PT (points, 1/72th of an inch) for print, PX for "eye cans haz teh intarwebs"

    3) do NOT declare fixed heights on elements when it can be avoided. You don't know how tall "flow" is going to make anything, so let flow do its JOB of having the content determine how big things should be.

    4) avoid using classes like "active", it's too easy to confuse with the psuedo-state of the same name.

    5) That whole menu has some serious issues, the multiple separate sub-menus looking like a rendering error, the "bar" giving uneven spacing, the use of floats causing content to "jump around" at different window sizes... It's not really what I'd call a "viable layout concept" in the first place. I'd actually suggest axing the background from it entirely.

    6) Your lack of proper semantics, <p>aragraphs and <img> doing numbered heading's (H1..H6) job, double-<br>eaks doing <p>aragraph's jpb, gibberish use of tags like <b>, broken/incomplete forms, abuse of <dl> in form where you have <dt> doing <label>'s job and <dd> for nothing, two decades out of date usage of <a name="">, and nonsensical willy-nilly use of (the already pointlessly redundant) HTML 5 "structural" tags really means this whole thing REALLY needs to go back to the drawing board LONG before CSS is even thrown at it.

    Layout aside, there's VERY little I would salvage from that codebase. There's SO MUCH to fix before you even THINK about being responsive you'd be better off tossing it and starting over from scratch. It would be faster to fix that way!

    But I think I've mentioned all this before. You need to learn more HTML basics before you start worrying about what things look like.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  4. #4
    Senior Coder
    Join Date
    May 2006
    Posts
    1,877
    Thanks
    31
    Thanked 4 Times in 4 Posts
    PX for "eye cans haz teh intarwebs"
    What does that mean?
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.


 

Tags for this Thread

Posting Permissions

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