Skip navigation
davidhelp
davidhelp
Currently Being Moderated

Align image with h1 header

Sep 9, 2012 1:32 AM

Problem with align image with h1 header. I want an image on the same line as the H1 tag or any Header tag.

I managed to do so but what if I do not want middle but say 10px from top or bottom from the image.

Any place along with left and right position.

I am tied into the image as the H1 tag wraps around it and only have top, middle, bottom or similiar as options.

 

If it wasn't for the image being on the same line then it would be easy to position the text.

 

Question: Is there anyway that the Header tags can be position precisely with an image on the same line?

** I have search and search but it seems not but prove me wrong   : )

 

I tried to post the code but it won't display correctly here.

Go here then view source to my 1st attempt where I wrap the image inside a H1 tag: http://davidswebsite.com/test/test_page1.html

 

Update - Possible solution:

After spending yet more time I came up with this other solution where I can move the Header to any position. It looks the same using Adobe BrowserLab in IE7 & IE8 and Chrome 18

I had to use VMWare where I have XP installed with IE6 as Adobe BrowserLab is not showing IE6 right now.

Many complaints over the months about problems with it.

http://forums.adobe.com/community/cslive/browserlab

 

Here is the 2nd attempt using a wrapper with 2 divs inside the main container.

http://davidswebsite.com/test/test_page2.html

 

Here is a screenshot of IE6 using test_page2.html that shows a "t" in the .container for some reason - any ideas?

Shows fine in IE7 & 8 and Firefox 8 and Chrome 18

ie6.gif

 

 

 

David

 

924 Views   6 Replies   Latest reply: davidhelp, Sep 10, 2012 7:34 PM
 
Replies
  • Ken Binney
    Currently Being Moderated
    1. Ken Binney,
    Sep 9, 2012 3:48 AM   in reply to davidhelp
    Report

    Hi David -

     

    Try floating your image left and  playing with the margins.

     

    You can lose the stray "t" in IE6 by adding a space in front of the link closing tag like this

     

      <p><a href="test_page1.html">Link to 1st attempt </a></p>

     
    |
    Mark as:
  • davidhelp
    Currently Being Moderated
    2. davidhelp,
    Sep 9, 2012 10:13 AM   in reply to Ken Binney
    Report

    Thanks, removing the extra </p> in test_page2.html I had was the fix to get rid of the extra "t" in IE6.

     

    I am not sure what you mean to float the image left? Is that in link test_page1.html?

    I tried that but the sidebar would come up to the top on the rightside while the header comes down to a 2nd line

    If I float left the header it will stay on the same line as the image but the sidebar comes up to the rightside.

    If I use padding and margins on the image it will also move around the header which stays ties to it so does not move relative to it. If I use it on the .header div the image and header will move as one too.

     

    In test_page2.html

    The .header and #header_container and #image1 divs are already floated left. It all works in that test but it was a bit complicated.......

     

    You would think this committee who decides the standards would have made the change to make this much easier. I answered my own question. It is a committee.

     

    Both test pages use a fixed width.

    If I use % the whole thing breaks down so I will look at that another day.

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    3. Nancy O.,
    Sep 9, 2012 10:47 AM   in reply to davidhelp
    Report

    Try these changes to your CSS:

     

    .header {

    background-color: #FFDC93;

    padding: 0;

    margin: 0;

    float: left; /**REMOVE THIS**/

    width: auto;

    overflow:hidden; /**for float containment**/

    }

     

    h1 {

    font-size: 3em;

    font-family: Georgia, "Times New Roman", Times, serif;

    color: #000;

    padding: 0;

    margin: 1.08em 0 0 0.12em;

    float:right;

    }

     

    I wouldn't be too concerned about IE6 as it is an obsolete browser used by fewer than 1% of internet users.

     

     

    Nancy O.

     
    |
    Mark as:
  • davidhelp
    Currently Being Moderated
    4. davidhelp,
    Sep 9, 2012 6:15 PM   in reply to Nancy O.
    Report

    Thanks for the reply.

    I left the float:right; off as I found I did not need it.

    This would push it to the rightside. By leaving it off it is on the left and I can use padding to move the header around. I can change the wild colors I used in .header_title to blend it in with the .header or container.

     

    I had to lookup what overflow:hidden does as I never used it before.

    http://css-tricks.com/all-about-floats/

    http://css-tricks.com/the-css-overflow-property/

    http://colinaarts.com/articles/the-magic-of-overflow-hidden/

     

    From:

    h1 {

    font-size: 3em;

    font-family: Georgia, "Times New Roman", Times, serif;

    color: #000000;

    padding: 0px;

    margin-top: 45px;

    margin-right: 0px;

    margin-bottom: 0px;

    margin-left: 10px;

    ----------------------------

     

    .header {

    background-color: #FFDC93;

    padding: 0px;

    margin: 0px;

    float: left;

    width: auto;

     

    To:

    h1 {

    font-size: 3em;

    font-family: Georgia, "Times New Roman", Times, serif;

    color: #000000;

    margin: 0px;

    padding-top: 40px;

    padding-right: 0px;

    padding-bottom: 0px;

    padding-left: 20px;

    --------------------------------

     

    .header {

    background-color: #FFDC93;

    padding: 0px;

    margin: 0px;

    width: auto;

    overflow:hidden; /**for float containment**/

     
    |
    Mark as:
  • mytaxsite.co.uk
    Currently Being Moderated
    5. mytaxsite.co.uk,
    Sep 9, 2012 7:52 PM   in reply to davidhelp
    Report

    The easiest way to do this is something like this:

     

    1) First your HTML code:

     

     

    <div id="masthead">

        <div id="logo"><img alt="pc,gif" src="http://davidswebsite.com/test/pc.gif" />

        </div>

        <div id="header">

    <h1> Web Page Title</h1>

        </div>

    </div>

    <div id="container">

        <div id="left_col">This is your left side bar

        </div>

        <div id="page_content">This is your page content

        </div>

    </div>

    <div id="footer">This is your footer

    </div>

     

    2) Now your relevant CSS without any formatting:

     

     

    body {

        margin: 0;

        padding: 0;

    }

     

    #masthead {

        min-width: 600px;

    }

     

    #logo {

        float: left;

        width: 200px;

    }

     

    #header {

        margin-left: 200px;

    }

     

    #container {

        clear: both;

        min-width: 600px;

    }

     

    #left_col {

        float: left;

        width: 200px;

    }

     

    #page_content {

        margin-left: 200px;

    }

     

    #footer {

        clear: both;

    }

     

    3) Now all you need to do is enter your background color and all that in the CSS given above.

     
    |
    Mark as:
  • davidhelp
    Currently Being Moderated
    6. davidhelp,
    Sep 10, 2012 7:34 PM   in reply to mytaxsite.co.uk
    Report

    Thanks to all. mytaxsite helped alot. I added a wrapper div around all the others and centered it on the page and added a % to around 60% (any % will do, just an example) so it now expands and contracts depending on the screen or browser size but not too wide. It also looks the same from IE6 to IE9 and in Safari and Firefox.

     

    Nancy O - I received this reply about IE6 disappearing from Adobe BrowserLab. It short it is not to worried about as you indicated:

    ------------------------------------

    We’re (finally) removing Internet Explorer 6 from BrowserLab. Fortunately, we don’t need to include it in the set of browsers any more due to its final decline of usage.  http://www.ie6countdown.com

    We’ve all been waiting for this day.

    I wish I could say that we’re removing IE6 exclusively due to its utter and complete lack of relevance. While that’s mostly true, the fact of the matter is that we have an issue with continuing to support IE6, that in combination with its decline of use, made it an easy decision to terminate it. And, I must admit, it feels pretty good to have the last word in this long, painful, protracted battle.

    So, IE6, I say to you – You’re out of my life for good. Adieu, au revoir, ciao, adios, sayonara! Good riddance. I will not miss you.

     

    Bruce Bowman

    Adobe BrowserLab product manager

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Incoming Links

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points