Relative p messing up h1 alignment

[scottybwoy]

Hi Peeps,

 

I have a p element that sits relative in the top left hand corner within my main content.  The problem is that it is usually followed by a h1 header that sits in normal flow.  The h1 element has text-align centre assigned to it, that appears to be skewed by the presence of the relative p element.

 

This occurs in both ff & ie so is probably down to something I have not learned yet and would like some help/advice thanks.

 

[link=http://www.mri.co.uk/support/downloads.php]Here's the link[/link]

 

Here's the css:

<?php

#content {
margin: 0px 0px 0px 180px;
padding: 15px 210px 10px 30px;
background: #fff;
text-align: justify;
}

#content p {
margin: 0px 0px 0px 0px;
padding: 20px 10px 10px 10px;
}

#content h1 {
margin: 20px 0px;
padding: 10px;
border-top: solid 2px #000080;
border-bottom: solid 2px #000080;
color: #000080;
font-size: 1.4em;
text-align: center;
}

p.path {
position: relative;
float: left;
top: -30px;
left: -35px;
padding: 0px 15px 0px 5px;
font-size: 0.8em;
color: #adadad;
z-index: 40;
}
?>

 

Thanks in advance

[GameYin]

First of all, why in the WORLD are you using PHP to parse your CSS code.

 

<style>
#content {
margin: 0px 0px 0px 180px;
padding: 15px 210px 10px 30px;
background: #fff;
text-align: justify;
}

#content p {
margin: 0px 0px 0px 0px;
padding: 20px 10px 10px 10px;
}

#content h1 {
margin: 20px 0px;
padding: 10px;
border-top: solid 2px #000080;
border-bottom: solid 2px #000080;
color: #000080;
font-size: 1.4em;
text-align: center;
}

p.path {
position: relative;
float: left;
top: -30px;
left: -35px;
padding: 0px 15px 0px 5px;
font-size: 0.8em;
color: #adadad;
z-index: 40;
}
</style>

[scottybwoy]

lol, constructive answers please, it was just for the visual aesthetics.  Had you have taken the time to look at my site and problem you would have noticed that its not the case in my parsing.

 

Wouldn't my script just die and fall over if I done it the way you thought?

[GameYin]

If you did it the way you posted, none of the CSS would even be in-use. Sorry for the "Why in the WORLD..." lol.

[joannaFloyd]

Why do you need to make p.path float? p.path and h1 flow in normal vertical order, one after the other (moreover, float is the disturbing factor).

If you delete the property "float: left" from p.path you'll have h1 centered correctly.

Then decrease h1's top margin, as much as you need.

Here's the code modified:

p.path {

position: relative;

top: -30px;

left: -35px;

padding: 0px 15px 0px 5px;

font-size: 0.8em;

color: #adadad;

z-index: 40;

}

#content h1 {

margin: -20px 0 20px 0;

padding: 10px;

border-top: solid 2px #000080;

border-bottom: solid 2px #000080;

color: #000080;

font-size: 1.4em;

text-align: center;

}

 

joanna

[scottybwoy]

Thanks joanna,

 

That did tidy it up some, however, the reason I was using float is because what I am trying to achieve is a hidden :hover area on the element that I want to be in front of my heading.  So when a user hovers over this space the colour of the text changes to make it more visible.

 

Please follow this link to see how this works.

 

As it is you have to point the mouse quite close to the element for it to change.  With normal vertical order you do not have so much control over the shape of the element.  Is there a way around this?

[dbrimlow]

First, scottybwoy, you have three errors in your css - 2 related to typos in the css floats. You should fix these before trying to spend hours debugging actual element settings.

 

And, just an aside on the advice from Game Yin about the css style tag, it MUST have the designated media type associated to it (except for IE, of course).

 

so:

<style type="text/css">

 

Without the media type it is not a valid css designation.

 

[GameYin]

Yes yes I know. After I made that mistake (4:30 in morning) It was too late to change back and yea...I knew about the mistake though.

[scottybwoy]

Thanks, the typos corrected, I have ust one necessary error in my css, your aside was not relevant as it was already in place.

 

However it seems no one here has addressed my real problem, I'd be greatful if someone would, thanks.