Making headers honor images?

Discussion in 'HTML' started by Jan Danielsson, Jul 25, 2005.

  1. Hello all,

    Please take a look at http://user.it.uu.se/~jada3673/. As you can
    see, the header stretches too far, and is "behind" the image - which I
    don't want. How do I make the header tag honor the width of the image?

    Thankful for any pointers.
     
    Jan Danielsson, Jul 25, 2005
    #1
    1. Advertising

  2. In article <42e442f9$>,
    Jan Danielsson <> wrote:

    > http://user.it.uu.se/~jada3673/


    It looks fine in Safari. The rabbit is below the header and slightly to
    the left of the menu. The header doesn't encroach on the menu. Now let's
    reduce the viewport. It really looks good.

    leo

    --
    <http://web0.greatbasin.net/~leo/
     
    Leonard Blaisdell, Jul 25, 2005
    #2
    1. Advertising

  3. Jan Danielsson

    saz Guest

    In article <42e442f9$>,
    says...
    > Hello all,
    >
    > Please take a look at http://user.it.uu.se/~jada3673/. As you can
    > see, the header stretches too far, and is "behind" the image - which I
    > don't want. How do I make the header tag honor the width of the image?
    >
    > Thankful for any pointers.
    >

    I'm not quite sure what you are asking, but I don't see any problem. I
    think it looks good they way I see it in IE6 and FireFox.
     
    saz, Jul 25, 2005
    #3
  4. Jan Danielsson

    Arne Guest

    Once upon a time *Jan Danielsson* wrote:
    > Hello all,
    >
    > Please take a look at http://user.it.uu.se/~jada3673/. As you can
    > see, the header stretches too far, and is "behind" the image - which I
    > don't want. How do I make the header tag honor the width of the image?
    >
    > Thankful for any pointers.


    Hej Jan, I guess your "complaint" is about the h2 header with the text
    "Browsers"? You can add a right margin for that header, e.g. 200px to
    make it stop at the left of the rabbit image.

    BTW, You have some fixing to to before the page validates.

    --
    /Arne

    Top posters will be ignored. Quote the part you
    are replying to, no more and no less! And don't
    quote signatures, thank you.
     
    Arne, Jul 25, 2005
    #4
  5. Jan Danielsson

    Rincewind Guest

    On Mon, 25 Jul 2005 03:46:14 +0200, Jan Danielsson wrote:

    > Hello all,
    >
    > Please take a look at http://user.it.uu.se/~jada3673/. As you can
    > see, the header stretches too far, and is "behind" the image - which I
    > don't want. How do I make the header tag honor the width of the image?
    >
    > Thankful for any pointers.


    In your css file you could add: width: ???px;
    which will work in Firefox and IE.
     
    Rincewind, Jul 25, 2005
    #5
  6. saz wrote:
    >>Hello all,
    >>
    >> Please take a look at http://user.it.uu.se/~jada3673/. As you can
    >>see, the header stretches too far, and is "behind" the image - which I
    >>don't want. How do I make the header tag honor the width of the image?
    >>
    >>Thankful for any pointers.

    >
    > I'm not quite sure what you are asking, but I don't see any problem. I
    > think it looks good they way I see it in IE6 and FireFox.


    When I watch it, it looks like this:


    Blah blah blah +--------------+
    blah blah blah | Rabbit |
    Blah blah blah | |
    | |
    +---------------| |+
    | Blah | || <- Notice the header sticking out
    +---------------| |+ here
    | |
    +--------------+

    While I want this:


    Blah blah blah +--------------+
    blah blah blah | Rabbit |
    Blah blah blah | |
    | |
    +-------------+ | |
    | Blah | | |
    +-------------+ | |
    | |
    +--------------+

    So, I want the header box to "flow around the image", in the same the
    paragraph does.
     
    Jan Danielsson, Jul 25, 2005
    #6
  7. Arne wrote:
    >> Please take a look at http://user.it.uu.se/~jada3673/. As you can
    >>see, the header stretches too far, and is "behind" the image - which I
    >>don't want. How do I make the header tag honor the width of the image?
    >>
    >>Thankful for any pointers.

    >
    > Hej Jan, I guess your "complaint" is about the h2 header with the text
    > "Browsers"? You can add a right margin for that header, e.g. 200px to
    > make it stop at the left of the rabbit image.


    Hmm.. Isn't there some other way? I mean, internally, the paragraph
    block must be obeying some rule since it flows properly around the
    image. I assumed that there was a way to make the h2 header do the same?
    I guess this falls into more of an css issue than html..

    Am I asking in the wrong group, btw?

    > BTW, You have some fixing to to before the page validates.


    Yeah, I know - it's a priority, just not the highest one right now.
     
    Jan Danielsson, Jul 25, 2005
    #7
  8. Jan Danielsson

    Arne Guest

    Once upon a time *Jan Danielsson* wrote:

    > Arne wrote:
    >>> Please take a look at http://user.it.uu.se/~jada3673/. As you can
    >>>see, the header stretches too far, and is "behind" the image - which I
    >>>don't want. How do I make the header tag honor the width of the image?
    >>>
    >>>Thankful for any pointers.

    >>
    >> Hej Jan, I guess your "complaint" is about the h2 header with the text
    >> "Browsers"? You can add a right margin for that header, e.g. 200px to
    >> make it stop at the left of the rabbit image.

    >
    > Hmm.. Isn't there some other way? I mean, internally, the paragraph
    > block must be obeying some rule since it flows properly around the
    > image. I assumed that there was a way to make the h2 header do the same?
    > I guess this falls into more of an css issue than html..


    I'm afraid there is no other way than add a width or right margin to
    the block element, as it is now. It's not the <p> block that flows,
    it's the text within the block that flows. The same will happend for
    the header text if you make it long enough to reach past the image.

    If you set the content left of the image within a parent div block
    with a specific width that don't reach to the image, then the child
    blocks gets as wide as the parent block.

    > Am I asking in the wrong group, btw?


    Well, this is more about CSS than HTML, so the issue would be more on
    topic on groups like comp.infosystems.www.authoring.stylesheets :)

    --
    /Arne

    Top posters will be ignored. Quote the part you
    are replying to, no more and no less! And don't
    quote signatures, thank you.
     
    Arne, Jul 25, 2005
    #8
  9. Jan Danielsson wrote:
    <snip>
    >
    > When I watch it, it looks like this:
    >
    >
    > Blah blah blah +--------------+
    > blah blah blah | Rabbit |
    > Blah blah blah | |
    > | |
    > +---------------| |+
    > | Blah | || <- Notice the header sticking out
    > +---------------| |+ here
    > | |
    > +--------------+
    >
    > While I want this:
    >
    >
    > Blah blah blah +--------------+
    > blah blah blah | Rabbit |
    > Blah blah blah | |
    > | |
    > +-------------+ | |
    > | Blah | | |
    > +-------------+ | |
    > | |
    > +--------------+
    >
    > So, I want the header box to "flow around the image", in the same the
    > paragraph does.


    The only way I know of, add in *bold* in your document

    <h2 *style="margin-right: 195px;"*>Browsers</h2>

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jul 25, 2005
    #9
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Benton
    Replies:
    4
    Views:
    1,147
    Mr Newbie
    Nov 26, 2005
  2. Jure Erznoznik
    Replies:
    3
    Views:
    1,174
    Neredbojias
    Aug 10, 2005
  3. Replies:
    0
    Views:
    383
  4. =?Utf-8?B?Sm9zaHVhQmlhZ2lv?=

    aspnet_regiis -pc operation does not honor -size argument (.NET 2.

    =?Utf-8?B?Sm9zaHVhQmlhZ2lv?=, Apr 13, 2007, in forum: ASP .Net
    Replies:
    2
    Views:
    461
    =?Utf-8?B?Sm9zaHVhQmlhZ2lv?=
    Apr 13, 2007
  5. Jerry Fleming

    ctypes in python failed to honor c_int

    Jerry Fleming, Mar 18, 2008, in forum: Python
    Replies:
    4
    Views:
    417
    Jerry Fleming
    Mar 19, 2008
Loading...

Share This Page