header overlapping

[8BaLL]

Hi I am pretty new to web design I actually started uni last month and I am now going through a assignment and have a question my tutor is kind of useless and couldn't answer so Overclockers was my first choice,

So down to it I am creating two extra pages on a site we have been working on it is a Italian restaurant we are adding two new pages Staff and Functions my functions page is perfect but my staff page is not there yet actually after this is fixed I just need to validate and I am done we have a screenshot of the page we need to replicate it is split in to paragraphs with a image with the css float property to the left of each paragraph but for each paragraph there is a header <h4> to be exact but the header shifts up overlapping the previous paragraph why is this?
You only see this on a higher resolution monitor also it is perfect on my laptop with 1440x900 and my ipad mini but on my desktop which is 1920x1080 resoltion this happens any ideas? Thankyou

 

[8BaLL]

Am I right to believe I have the <p> tag positioned wrong that is why it is seeing the header as not part of the current paragraph?

<h4>Head Waiter - Rudolfo Giacometti</h4>
<p><img src="waiter.jpg" alt="Head Waiter - Rudolfo Giacometti" height="71" width="80">Rudolfo comes from a long line of Italians dedicated to providing good service. His grandfather was head waiter at the Imperial Hotel in Rome and his father was head waiter at the Dorchester in central London. Rudolfo is the cousin of Guillermo and was invited to manage the team at the Via Roma in 1986. Since then he has overseen a transformation in the quality of service.</p>

 

[Randomface74]

negative margin or negative relative positioning on h4 in css?

 

[8BaLL]

Yes I found this mentioned by doing research but this is a introductory module which fixed positioning in css has not been covered yet and closest to margin is padding so im trying stick to what we have just covered so far thanks for your input billy.

 

[davetherave2]

ok. I know this is a homework assignment but it is difficult to tell what exactly is going off without some images or even a bit more source code.

Anyway here is a jsfiddle with a solution that should be working http://jsfiddle.net/h1na09fh/2/


if you have something overlapping then I am guessing you have some css which is floating something incorrectly which is why you are getting the overlapping.

You could try to clear the floats between the paragraphs and the headers eg clear:both

in your css.

Hopefully this is off some use to you.