#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    4
    Rep Power
    0

    H2/h3 to float like text?


    Hi there.

    I'm new here and new to HTML and CSS. We had to learn basic HTML and CSS for a project at University and my site can be found here:

    playground(dot)ace(dot)ed(dot)ac(dot)uk/~s1035202/

    the css is here:

    playground(dot)ace(dot)ed(dot)ac(dot)uk/~s1035202/cascade(dot)css

    I'm wanting to have my h3/h2 headings float to the side of my images in the same way that text in a <p> paragraph does. The text itself does do this, but I want the same thing to happen with the orange background. I'm looking specifically at the "Sound Walk" and "General Cycling Sounds" headers you see on my home page (and all headers of this sort on all pages ). At the moment the orange background color actually hides behind the image but I want it move out of the way like the text does - i.e. there should be a small gap between the orange bar and the image.

    I've looked around but nothing I have tried seems to address this exact issue. Any help would be greatly appreciated.

    Thanks for reading,
    Garry
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    33
    If you put the img elements before your h2 / h3 elements than that should resolve things for you.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    4
    Rep Power
    0
    Hi simplypixie,

    Thanks for your reply. I tried switching them round (which I've now uploaded) but it hasn't made any difference, the same thing happens.

    Garry
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    33
    OK, the better way to do this is to put your collection of elements that you want floated to the left in their own containing div floated to the left (unless you need the paragraph text to wrap around the bottom of the image.

    Otherwise you need to set a specific or maximum width on your header elements.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    4
    Rep Power
    0
    Originally Posted by simplypixie
    OK, the better way to do this is to put your collection of elements that you want floated to the left in their own containing div floated to the left (unless you need the paragraph text to wrap around the bottom of the image.

    Otherwise you need to set a specific or maximum width on your header elements.
    Sorry, there might be a slight confusion in terms that I'm not conveying properly. The image at the top needs to float to the right, and the <p> and <h3> elements need to wrap around them. The text in the h3 element does wrap nicely, put I'm wanting the entire container (including background colour) to also wrap around the image.

    I'll try putting the headers inside their own div and seeing if that helps. Another semi-fix is to set display: inline for h3, but this isn't really ideal.

    Making it a fixed or maximum width is something I would prefer not to do. My lecturer is keen that we have websites that are adaptable to all screen/window sizes and look pretty much the same no matter what.
  10. #6
  11. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    33
    You can't wrap background colours around images I am afraid so your only option is to have it as is (with regard to the background colour) and instead of using a max-width, change your margin on images to padding and set the bacground colour of images to match your main background.

    I have set up a Fiddle here for you - http://jsfiddle.net/mht8p/
  12. #7
  13. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,129
    Rep Power
    4304
    Originally Posted by simplypixie
    change your margin on images to padding and set the bacground colour of images to match your main background.
    That's a good idea for how to do this. However, there is another way.

    Besides certain values of the "display" property, two other properties allow an element to interact with a floated element, those are the "clear" and "overflow" properties. The interesting thing about the overflow property is that it can make an element expand in height to contain floated descendants and it can also cause it to reduce in width if an element is floated beside it. (I should mention that some browsers, e.g. Safari 5.x, have a bug where when a floated element is beside an element with the "overflow" property set to a value other than "visible", the margin on the side of the element adjacent to the floated element will be doubled.)

    Code:
    h3,h4,h5,h6 {
    	font-size: 100%;
    	background-color: orange;
    	width: auto; /* feel free to remove this, I left it in to show the change in value */
    	overflow: auto;
    	margin-left: 1.5%;
    	margin-right: 1.5%;
    	padding-left: 10pt;
    	}

    Comments on this post

    • simplypixie agrees
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    4
    Rep Power
    0
    Brilliant! That seems to have fixed it. Thank you very much!

IMN logo majestic logo threadwatch logo seochat tools logo