...

View Full Version : navigation image problem



quartzy
02-24-2011, 12:04 AM
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.


.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;
}

oesxyl
02-24-2011, 12:11 AM
try to make "Seniors Community Venue" image of 106px instead of 101px or add a height: 106px to a img block.

best regards

quartzy
02-24-2011, 12:17 AM
Its the black navigation that is out, not the top navigation

oesxyl
02-24-2011, 12:32 AM
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

quartzy
02-24-2011, 01:03 AM
Sorry but I dont understand what you are saying, however, I reduced the image size and nothing happened. This is the problem. http://www.seniors260.org/screen.jpg

Excavator
02-24-2011, 01:21 AM
Remove or comment out that border and see what happens.



.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;
}

quartzy
02-24-2011, 01:36 AM
HI excav
I removed the border and it now is OK, trouble is I do not have a separator, any ideas?

Excavator
02-24-2011, 01:41 AM
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 (http://www.w3schools.com/css/pr_border.asp)

oesxyl
02-24-2011, 01:43 AM
Sorry but I dont understand what you are saying, however, I reduced the image size and nothing happened. This is the problem. http://www.seniors260.org/screen.jpg
i apologise, i understand now but i doubt i see same things as you see. See the attachement.


Remove or comment out that border and see what happens.



.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

quartzy
02-24-2011, 01:58 AM
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.

oesxyl
02-24-2011, 02:16 AM
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

quartzy
02-24-2011, 02:50 AM
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.

oesxyl
02-24-2011, 03:20 AM
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:


* { 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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum