SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)

    Clear, p and h-tags

    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
    Code:
    p {
    font-family: verdana, arial, helvetica, geneva; font-style: normal; font-size: 12pt; text-align:justify;
    }


    HTML page code
    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?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by benbob View Post
    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 ...

  3. #3
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by benbob View Post
    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.

  5. #5
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    <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>
    Code:
    	
    .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.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    If you want the text centered, you'd need something like

    Code:
    #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.

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

  8. #8
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,214
    Mentioned
    264 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by benbob View Post
    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. )

  9. #9
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    If you want the text centered, you'd need something like
    Code:
    #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.


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

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    I'm not sure which page you are on now, but the ones I see above both have

    Code:
    <div id="phone">
    I want it horizontally in the middle.
    If I interpret that correctly, you want something like this:

    Code:
    #phone {
      width: 800px;
      margin: 0 auto;
    }
    ... as I posted above. You could make the width fluid if you want with something like this instead:

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

  11. #11
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    ... as I posted above. You could make the width fluid if you want with something like this instead:

    Code:
    #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?

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by benbob View Post
    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.

  13. #13
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    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.

  14. #14
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,214
    Mentioned
    264 Post(s)
    Tagged
    5 Thread(s)
    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.

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    An alternative would be to do something like this:

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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •