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 13 of 13
  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    navigation image problem

    My navigation will not sit right, it is out by 2px on the top. I have tried reducing the image and the padding but no luck. It seems stuck somehow. www.seniors260.org you have to click into the site. Its the black navigation, if you look at it, you will see it is too high opn the top at the right end.
    Code:
    .indentmenu2 ul {
    	float: left;
    	display: inline;
    	width: 100%;
    	height: 37px;
    	background: url('../images/box3.jpg') repeat-x;
    }
    .indentmenu ul li, .indentmenu2 ul li {
    	display: inline;
    }
    .indentmenu2 ul li.first2 a {
        border-right: 0;}
        
    .indentmenu2 ul li a {
    	float: left;
    	display: inline;
    	padding: 8px 13px;
    	color: white;
    	border: 1px solid #fff;
    	font-weight: bold;
    	text-transform: uppercase;
    	text-decoration: none;
    }
    .indentmenu2 ul li a:hover {
    	padding: 7px 13px;
    	color: white;
    	background: #306CFF;
    }
    Last edited by quartzy; 02-24-2011 at 01:18 AM.

  • #2
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    try to make "Seniors Community Venue" image of 106px instead of 101px or add a height: 106px to a img block.

    best regards

  • #3
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    Its the black navigation that is out, not the top navigation

  • #4
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by quartzy View Post
    Its the black navigation that is out, not the top navigation
    sorry,
    i clicked on both, left and right images the black navigations seems to be at the same offset from top but for the page from the left link:

    http://www.seniors260.org/seniors/homepage.html

    Seniors image have hight 106px, 5px more then the other.

    I appologise if i missunderstand again the problem,

    best regards

  • #5
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    Sorry but I dont understand what you are saying, however, I reduced the image size and nothing happened. This is the problem.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    Remove or comment out that border and see what happens.

    Code:
       
    .indentmenu2 ul li a {
    	float: left;
    	display: inline;
    	padding: 8px 13px;
    	color: white;
    /*border: 1px solid #fff;*/
    	font-weight: bold;
    	text-transform: uppercase;
    	text-decoration: none;
    }
    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:

    quartzy (02-24-2011)

  • #7
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    HI excav
    I removed the border and it now is OK, trouble is I do not have a separator, any ideas?

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    Quote Originally Posted by quartzy View Post
    HI excav
    I removed the border and it now is OK, trouble is I do not have a separator, any ideas?
    Does border-right: 2px solid #fff; help?

    CSS border property
    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:

    quartzy (02-24-2011)

  • #9
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by quartzy View Post
    Sorry but I dont understand what you are saying, however, I reduced the image size and nothing happened. This is the problem.
    i apologise, i understand now but i doubt i see same things as you see. See the attachement.

    Quote Originally Posted by Excavator View Post
    Remove or comment out that border and see what happens.

    Code:
       
    .indentmenu2 ul li a {
    	float: left;
    	display: inline;
    	padding: 8px 13px;
    	color: white;
    /*border: 1px solid #fff;*/
    	font-weight: bold;
    	text-transform: uppercase;
    	text-decoration: none;
    }
    this will remove the vertical bar from About Us | Contact Us | ...
    she want to fix the vertical gap between Donation and the background.
    The biggest problem is clearing floats,

    best regards
    Attached Thumbnails Attached Thumbnails navigation image problem-x.jpg  

  • Users who have thanked oesxyl for this post:

    quartzy (02-24-2011)

  • #10
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    Oxse
    You have a line under the black background links, that must mean that my padding is not wide enough I think. Or maybe its clearing floats, I will work on that. Thanks wonder what browser you are using as I dont see it in mine.

    Excav
    I am sickened of making silly mistakes, I get so frustrated I cannot see what is before my eyes, of course I should have a border right instead of a whole border, and yes it has fixed that problem. It was a third party script, and old is my only excuse.

  • #11
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by quartzy View Post
    Oxse
    You have a line under the black background links, that must mean that my padding is not wide enough I think. Or maybe its clearing floats, I will work on that. Thanks wonder what browser you are using as I dont see it in mine.
    you would make your life more easy if you simplify your css. I don't know if you firebug extension for ffox, is useful for both design and fix css problems.

    best regards

  • #12
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    What does simplify your css mean? I do have firefox, and firebug but I dont make any mistakes with the css and it does nothing.

  • #13
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by quartzy View Post
    What does simplify your css mean?
    remove everything is unused, reusing is a good thing can speed up development but also can make you to spend a lot of time with fixing things. I prefere to start with a single empty css file with a minimal reset css like this:
    Code:
    * { margin: 0; padding: 0; }
    and starting from top of the page to add blocks of declaration with a minimal content and reuse the clases.

    I do have firefox, and firebug but I dont make any mistakes with the css and it does nothing.
    can be used also for a lot of other things then checking syntax,
    - inspect the elements in the page, see overwriten rules, find rules for a given element
    - change online, without writing the style file, to see what is better
    - check the height, width, offset, margin, padding border sizes - see layout tab
    - check the computed values

    http://getfirebug.com/html
    http://getfirebug.com/layout

    best regards
    Last edited by oesxyl; 02-24-2011 at 04:22 AM.


  •  

    Posting Permissions

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