Clear, p and h-tags

[benbob]

To avoid my text, h-tags and pics jumping all over the place when the screen is zoomed in or out, I changed my <p> to <p style="clear:left;"> and included the h-tag in the paragraph. Works a treat in terms of fluid positioning, but it cancels out my paragraph definition in the css-file.


CSS-style code

p {
font-family: verdana, arial, helvetica, geneva; font-style: normal; font-size: 12pt; text-align:justify;
}

HTML page code

<p style="clear:left;">
<h3>Emergency plumber in Dulwich with guaranteed repairs</h3>

<img src="http://www.boiler-breakdown-repair-london.co.uk/pics/modern brass stopcock.jpg" alt="repaired modern brass stopcock" width="225" height="225" style="float: left; margin: 1em 2em 1em 1em; ">      	    
            <BR>Do you know anyone in <em>south east London</em> who finally managed to get a plumber to come, but had to pay a lot of money even though the 
            problem was not solved? I guarantee that I can find the problem. That's right: guarantee, not think, try, expect, or hope. 

            <BR>If I tell you over the phone that I can find 
            the problem, I will, or you don't pay a penny!
            <BR>If these are the kind of things that you 
            expect from <strong>emergency plumbers in Dulwich</strong>, stop searching, and put me to the test. 
            <BR>Have you ever had it where a plumber (car 
            mechanic, electrician or any other kind of technical chap) talked to 
            you for 5 minutes, and you had no idea what he was on about? 
            
            <BR>I know that some people are more technically 
            minded than others, and ask frequently if things are completely 
            clear. If they are not, I simply word them in a different way. It is 
            your house, you should be happy with what I am doing.
		
</p>

I can think of some makeshift ways of sorting this, but that would probably not quite considered to be neat.
What would be considered to be the correct way of doing things?

[ralph.m]

To avoid my text, h-tags and pics jumping all over the place when the screen is zoomed in or out ...

Sounds like something is wrong if that is happening. They should keep their positions without you having to do anything like this. Do you have a link we could look at? If not, post an example (wihtout the clear: left ...

[benbob]

This is my second test page where I am trying to make it more fluid by making the it into 5 blocks, each consisting of an h-tag, image and a paragraph. fluid test page

This is the first test page that works ok apart from the pics and paragraphs jumping all over the place when you zoom in or out by quite a bit (simulating large desk top screens or tablet screens) old jumpy test page

I know the links at the bottom look horrible, but that is left for later as I haven't decided what I want to do with them.

[Stevie D]

To avoid my text, h-tags and pics jumping all over the place when the screen is zoomed in or out, I changed my <p> to <p style="clear:left;"> and included the h-tag in the paragraph. Works a treat in terms of fluid positioning, but it cancels out my paragraph definition in the css-file.

That isn't allowed. A <p>aragraph can only contain loose text or inline elements (such as <a>, <em>, <img> etc), it can not contain any block elements.

As Ralph says, things shouldn't be jumping around, but if they are and you need that wrapper around the heading and the paragraph then you should use a <div> with clear:left; and then have the <h*> and <p> one after the other inside it.

[benbob]

That did the trick, merci beaucoup.
No idea why it does jump when I zoom in and out, but it did; past tense thanks to the div solution.

[benbob]

Just when I finally thought I'd had it licked, I noticed that my phone numbers don't center.
But why not? I wrapped a div around it to make it act like one block, but it doesn't. I validate the page, and it shows up fine.
Tried a whole load of alternatives e.g. class, id, margin:auto and so on, but no joy. The id.code is found as it changes the font color, size and weight.

<div id="phone">
	Mon-Fri 08.30-20.30 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 0208 265 8822
	<br>Emergencies out of hours &nbsp;&nbsp; 07852 736 626
</div>

	
.phone 
{ font-size: 2em; font-family: verdana, arial, helvetica, geneva; font-style: normal; color:red; font-weight: 800; text-align: center ;
}

Both links in this thread have the problem, but in different ways. It is a lot more obvious when you zoom in or out.

[ralph.m]

If you want the text centered, you'd need something like

#phone {
  text-align: center;
}

At the moment, the only reason why the text isn't hard left is because of the floated sidebar pushing it slightly to the right, like the text above.

If you want to do this purely with margin: 0 auto, you need to give the div a set width. E.g.

#phone {
  width: 800px;
  margin: 0 auto;
}

[TechnoBear]

Just when I finally thought I'd had it licked, I noticed that my phone numbers don't center.
But why not? I wrapped a div around it to make it act like one block, but it doesn't.

It does really. Add a border to the div and you'll see. You've set a width of 90% on the div, and margin: auto, so that centres the div on your page. However, the text doesn't extend the full width of your div, and as it's left-aligned (by default) it sits at the left side of the div. Adding text-align: center will centre it. (And I'm sure you know that using &nbsp; to align text is not a good idea. )

[benbob]

If you want the text centered, you'd need something like

#phone {
  text-align: center;
}

At the moment, the only reason why the text isn't hard left is because of the floated sidebar pushing it slightly to the right, like the text above.

I don't want it hard left, I want it horizontally in the middle. What is the difference in functon between your #phone and my .phone, apart from id/class?
Both page-links in post#3 do different things, and neither of them is what I try to do: horizontal middle of the page regardless of screensize or zoom setting, following the principle of fluid design.

.phone {
 font-size: 2em; font-family: verdana, arial, helvetica, geneva; font-style: normal; color:red; font-weight: 800;
 text-align: center ;
}

[ralph.m]

I'm not sure which page you are on now, but the ones I see above both have

<div id="phone">

I want it horizontally in the middle.

If I interpret that correctly, you want something like this:

#phone {
  width: 800px;
  margin: 0 auto;
}

... as I posted above. You could make the width fluid if you want with something like this instead:

#phone {
  width: 70%;
  margin: 0 auto;
}

[benbob]

... as I posted above. You could make the width fluid if you want with something like this instead:

#phone {
  width: 70%;
  margin: 0 auto;
}

Copy/pasted that into the style sheet, and it still doesn't quite perform as it should. When I zoom in/out, the 2 lines move compared to each other with width at 70 or 80. If I make the width smaller, it doesn't fit into 1 line each.

Why do the 2 not hold position relative to each other even though I wrapped them in a div?

[ralph.m]

Why do the 2 not hold position relative to each other even though I wrapped them in a div?

Not sure which "two" yea mean, but the div is not sitting the full width of the page because of the sidebar pushing it to the right. (The div is floating around the sidebar.) as you zoom text, part of the text falls below the sidebar. There's not much you can do about this, given the position of everything.

[benbob]

The "two" refers to the 2 lines with phone numbers; landline top, mobile below that.
It seems I was mistaken in thinking that if I wrap a something in a div, it moves as a block. Guess I'll have to stick the two lines in a box and stop it from shifting realtive position that way, unless there is a more elegant way to achieve that.

[TechnoBear]

Did you read my post above? If you put a (temporary) border on your #phone and a border on .nav, you'll see where the boundaries of the two overlap. As ralph.m says, the .nav is interfering with the layout of #phone. You need to adjust them so there's no overlap.

[ralph.m]

An alternative would be to do something like this:

.nav {
float: left;
margin: 0 16px 4em 16px;
padding: 0;
list-style: none;
width: 240px;
}


#phone {
font-size: 2em;
font-family: verdana, arial, helvetica, geneva;
font-style: normal;
color: red;
font-weight: 800;
margin: 0 272px;
}