15 replies [Last post]
andarts
Offline
Regular
Last seen: 15 years 29 weeks ago
Joined: 2005-07-07
Posts: 16
Points: 0

Hi,

I have a problem with my navigation text, its enclosed in its own nav div, and has padding of 5px on it.

This padding is causing the image below to be pushed down. I've tried loads of different margain/padding variations but to no avail.

The padding is needed to put the text in position.

Hope some one can help me out!

URL as follows:

http://www.roystonsimpson.co.uk/clients/newsite/

Thanks again for any help!

binarywebs
Offline
Regular
Sheffield
Last seen: 15 years 20 weeks ago
Sheffield
Joined: 2005-09-12
Posts: 20
Points: 0

Padding causing image below to screw up

Instead of using padding or margin on the text you could you css positioning e.g.;

#navbanner
{
position: relative;
top: 5px;
left: 0;
}

udi
Offline
Regular
London
Last seen: 12 years 29 weeks ago
London
Joined: 2005-09-20
Posts: 38
Points: 0

Padding causing image below to screw up

Try padding {0px 5px;}

This will remove the top and bottom padding, and keep the left and right padding.

Hope this helps Wink

udi
Offline
Regular
London
Last seen: 12 years 29 weeks ago
London
Joined: 2005-09-20
Posts: 38
Points: 0

Padding causing image below to screw up

oops :idea:

Sorry I meant

#navbanner {padding:0px 5px;}

Anonymous
Anonymous's picture
Guru

Padding causing image below to screw up

udi wrote:
oops :idea:

Sorry I meant

#navbanner {padding:0px 5px;}See that little "edit" button up above your posts? Laughing out loud

andarts
Offline
Regular
Last seen: 15 years 29 weeks ago
Joined: 2005-07-07
Posts: 16
Points: 0

Padding causing image below to screw up

Thanks for the help all!

I've made progress, but now the problem has moved upward!?

Would do you think?

(Same URL as before)

udi
Offline
Regular
London
Last seen: 12 years 29 weeks ago
London
Joined: 2005-09-20
Posts: 38
Points: 0

Padding causing image below to screw up

wow...

I never saw that edit button

Thanks Triumph Smile

udi
Offline
Regular
London
Last seen: 12 years 29 weeks ago
London
Joined: 2005-09-20
Posts: 38
Points: 0

Padding causing image below to screw up

Quote:

andarts wrote:
I've made progress, but now the problem has moved upward!?

Can you show the CSS for the following class and id's

class="navtext"
id="navbanner"

andarts
Offline
Regular
Last seen: 15 years 29 weeks ago
Joined: 2005-07-07
Posts: 16
Points: 0

Padding causing image below to screw up

Sure, as follows:

#navbanner{

width:798px;
height:27px;
background-image:url(../img/navbg.gif);
margin-left:17px;
background-repeat:no-repeat;
position: relative;
top: 5px;
left: 0;
}

.navtext {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:60%;
color:#FFFFFF;
text-decoration:none;
text-align:right;
padding-top:5px;
}

.navtext a{
font-family:Verdana, Arial, Helvetica, sans-serif;
text-decoration:none;
color:#FFFFFF;
margin-left:12px;
}

.navtext a:hover{
font-family:Verdana, Arial, Helvetica, sans-serif;
text-decoration:underline;
color:#FFFFFF;
}

:?

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Padding causing image below to screw up

Those using screen readers won't like this page. It reads:
New Office Units - THE DEVELOPMENT
THE DEVELOPMENT
THE DEVELOPMENT
Lorem ipsum...

You're missing a closing div tag. i'm curious as to why you're slicing the image up anyway.

andarts
Offline
Regular
Last seen: 15 years 29 weeks ago
Joined: 2005-07-07
Posts: 16
Points: 0

Padding causing image below to screw up

Why wouldn't I slice the image up?

andarts
Offline
Regular
Last seen: 15 years 29 weeks ago
Joined: 2005-07-07
Posts: 16
Points: 0

Padding causing image below to screw up

Now have it looking like this:

http://www.roystonsimpson.co.uk/clients/newsite/

kinda getting there?! The nav text needs dropping though really?

Thanks for the help so far everyone

Anonymous
Anonymous's picture
Guru

Padding causing image below to screw up

udi wrote:
wow...

I never saw that edit button

Thanks Triumph SmileI'm here to help. Laughing out loud

Anonymous
Anonymous's picture
Guru

Padding causing image below to screw up

andarts wrote:
Why wouldn't I slice the image up?
Are you saying that you are doing it "just because you can"? :?

andarts
Offline
Regular
Last seen: 15 years 29 weeks ago
Joined: 2005-07-07
Posts: 16
Points: 0

Padding causing image below to screw up

Quote:
Are you saying that you are doing it "just because you can"?

No, I thought this way was the norm. What are the other ways?

udi
Offline
Regular
London
Last seen: 12 years 29 weeks ago
London
Joined: 2005-09-20
Posts: 38
Points: 0

Padding causing image below to screw up

Try this for CSS

#navbanner{width:798px; height:27px; background-image:url(../img/navbg.gif); background-repeat:no-repeat; text-align:right; padding:5px;} 
.navtext { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:60%; color:#FFFFFF; text-decoration:none; text-align:right;} 
.navtext a{ font-family:Verdana, Arial, Helvetica, sans-serif; text-decoration:none; color:#FFFFFF; } 
.navtext a:hover{font-family:Verdana, Arial, Helvetica, sans-serif; text-decoration:underline; color:#FFFFFF; } 

And this for the HTML

<div class="navtext" id="navbanner"><a href="#" title="The Development">THE DEVELOPMENT</a> <a href="#" title="Specification">SPECIFICATION</a><a href="#" title="Location">LOCATION</a><a href="#" title="Suffolk Business Park">SUFFOLK BP</a><a href="#"title="Site plans">PLANS</a><a href="#" title="Agents">AGENTS</a></div>

Note:- I have removed the margins in the CSS
and the spacer image from the HTML cos you don't need those

Hope this helps Wink