CSS problem with dynamic banner

Discussion in 'HTML' started by sevillad@gmail.com, Jul 24, 2006.

  1. Guest

    Hi,

    I've started to add CSS to my webpage, and I thought I'd be able to add
    a nice dynamic title, with one image on the left, another on the right,
    and some plain background in the middle (to allow for windows resize).
    Well, it doesn't work well and I don't know why... see four yourselves
    (css code included in the file):

    http://www.cs.concordia.ca/~dsevilla/test.html

    With IE6, the image on the right is displaced down, as if there was an
    extra end of line somewhere; there shouldn't be, I've tried removing
    every space and line end in the code. With Firefox it's even worse, as
    the images are not included in the box (see the border?). I'm ready to
    give up on such a complicated goal, but first I'd like to see if
    someone can help, I'm pretty sure there's something silly I overlooked.
    Or maybe some bug I haven't heard of (I've spent many hours looking for
    info online).

    Thanks in advance,

    David
     
    , Jul 24, 2006
    #1
    1. Advertising

  2. wrote:
    > Hi,
    >
    > I've started to add CSS to my webpage, and I thought I'd be able to add
    > a nice dynamic title, with one image on the left, another on the right,
    > and some plain background in the middle (to allow for windows resize).
    > Well, it doesn't work well and I don't know why... see four yourselves
    > (css code included in the file):
    >
    > http://www.cs.concordia.ca/~dsevilla/test.html
    >
    > With IE6, the image on the right is displaced down, as if there was an
    > extra end of line somewhere; there shouldn't be, I've tried removing
    > every space and line end in the code. With Firefox it's even worse, as
    > the images are not included in the box (see the border?). I'm ready to
    > give up on such a complicated goal, but first I'd like to see if
    > someone can help, I'm pretty sure there's something silly I overlooked.
    > Or maybe some bug I haven't heard of (I've spent many hours looking for
    > info online).


    Not a bug, you are not implementing your floats correctly. Put the
    right-floated image *before* the regular flow text "Personal Page" in
    the markup.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jul 24, 2006
    #2
    1. Advertising

  3. Guest

    Hi,

    > Not a bug, you are not implementing your floats correctly. Put the
    > right-floated image *before* the regular flow text "Personal Page" in
    > the markup.
    >
    > --
    > Take care,
    >
    > Jonathan
    > -------------------
    > LITTLE WORKS STUDIO
    > http://www.LittleWorksStudio.com


    Thanks a lot, it works perfectly in IE. On the other hand, in Firefox
    the extra line is gone but the text+bg does not extend all the way and
    is not centered (the orange box doesn't include the images). Is that
    also solvable in a simple way? I'd be more than satisfied if those two
    browsers can see my page well.

    Thanks,

    David
     
    , Jul 24, 2006
    #3
  4. wrote:
    > Hi,
    >
    >> Not a bug, you are not implementing your floats correctly. Put the
    >> right-floated image *before* the regular flow text "Personal Page" in
    >> the markup.
    >>
    >> --
    >> Take care,
    >>
    >> Jonathan
    >> -------------------
    >> LITTLE WORKS STUDIO
    >> http://www.LittleWorksStudio.com

    >
    > Thanks a lot, it works perfectly in IE. On the other hand, in Firefox
    > the extra line is gone but the text+bg does not extend all the way and
    > is not centered (the orange box doesn't include the images). Is that
    > also solvable in a simple way? I'd be more than satisfied if those two
    > browsers can see my page well.


    Well David you have a number of errors that is the cause of your
    problems. One of which is your in quirks mode without the doctype and a
    few others.

    Why are your making DIV title display inline? Removing that helps. Now
    to get your title DIV to wrap around the floated images your have three
    options I can think of:

    1) Explicitly define the 'height' of 'title'
    2) Use a clearing element (as you are doing but you are missing the
    definition of your 'clearer' class)
    3) Make overflow of 'title' DIV auto


    CODE try it and see:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html><head><title>CSS test</title>

    <style type="text/css">
    #main {width: 100%;}
    body {background-color: #999999; margin: 0; padding: 0; }
    #bannerleft {float: left; }
    #bannerright {float: right; }

    #title {
    border: 3px coral solid;
    width: 100%;
    color: blue;
    background: #000000 url(arn.gif) repeat-x;
    font-size: 35px;
    text-align: center;
    overflow: auto;
    }
    </style>

    </head>
    <body>

    <div id="main">
    <div id="title">
    <img src="test_files/b-l.gif" id="bannerleft" height="90" width="60">
    <img src="test_files/b-r.gif" id="bannerright" height="90" width="60">
    Personal Page

    </div>

    </div>

    </body></html>

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jul 24, 2006
    #4
  5. Guest

    Hi,

    I didn't add a doctype because I didn't know which version would be the
    one I'm using. I'll read about that (my pages are simple so probably
    the one you provide is best anyway).

    Yes, I had the code for the clearer but I didn't paste it in the
    example... that and the change of order above are exactly what I
    needed.

    Thanks!!

    David


    Jonathan N. Little wrote:
    > wrote:
    > > Hi,
    > >
    > >> Not a bug, you are not implementing your floats correctly. Put the
    > >> right-floated image *before* the regular flow text "Personal Page" in
    > >> the markup.
    > >>
    > >> --
    > >> Take care,
    > >>
    > >> Jonathan
    > >> -------------------
    > >> LITTLE WORKS STUDIO
    > >> http://www.LittleWorksStudio.com

    > >
    > > Thanks a lot, it works perfectly in IE. On the other hand, in Firefox
    > > the extra line is gone but the text+bg does not extend all the way and
    > > is not centered (the orange box doesn't include the images). Is that
    > > also solvable in a simple way? I'd be more than satisfied if those two
    > > browsers can see my page well.

    >
    > Well David you have a number of errors that is the cause of your
    > problems. One of which is your in quirks mode without the doctype and a
    > few others.
    >
    > Why are your making DIV title display inline? Removing that helps. Now
    > to get your title DIV to wrap around the floated images your have three
    > options I can think of:
    >
    > 1) Explicitly define the 'height' of 'title'
    > 2) Use a clearing element (as you are doing but you are missing the
    > definition of your 'clearer' class)
    > 3) Make overflow of 'title' DIV auto
    >
    >
    > CODE try it and see:
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    > <html><head><title>CSS test</title>
    >
    > <style type="text/css">
    > #main {width: 100%;}
    > body {background-color: #999999; margin: 0; padding: 0; }
    > #bannerleft {float: left; }
    > #bannerright {float: right; }
    >
    > #title {
    > border: 3px coral solid;
    > width: 100%;
    > color: blue;
    > background: #000000 url(arn.gif) repeat-x;
    > font-size: 35px;
    > text-align: center;
    > overflow: auto;
    > }
    > </style>
    >
    > </head>
    > <body>
    >
    > <div id="main">
    > <div id="title">
    > <img src="test_files/b-l.gif" id="bannerleft" height="90" width="60">
    > <img src="test_files/b-r.gif" id="bannerright" height="90" width="60">
    > Personal Page
    >
    > </div>
    >
    > </div>
    >
    > </body></html>
    >
    > --
    > Take care,
    >
    > Jonathan
    > -------------------
    > LITTLE WORKS STUDIO
    > http://www.LittleWorksStudio.com
     
    , Jul 24, 2006
    #5
  6. jojo Guest

    wrote:

    > I didn't add a doctype because I didn't know which version would be the
    > one I'm using. I'll read about that (my pages are simple so probably
    > the one you provide is best anyway).


    Depends on how close your code is to specs. There are a few HTML
    elements and attributes you aren't allowed to use with HTML 4.1 *STRICT*.
    One example is the definition of the "target" attribute in hyperlinks.
    This attribute is part of HTML 4.1 TRANSITIONAL, but not allowed in
    STRICT, which means you cannot use frames or open links in new
    windows/tabs (target="_blank").
    So I don't know if TRANSITIONAL or STRICT is better for you - you decide.

    BTW: please don't "top-post", write your own text *below* the quote.
    This improves the readability of a thread - top to bottom and not the
    way round.
     
    jojo, Jul 24, 2006
    #6
  7. jojo wrote:
    > wrote:
    >
    >> I didn't add a doctype because I didn't know which version would be the
    >> one I'm using. I'll read about that (my pages are simple so probably
    >> the one you provide is best anyway).

    >
    > Depends on how close your code is to specs. There are a few HTML
    > elements and attributes you aren't allowed to use with HTML 4.1 *STRICT*.
    > One example is the definition of the "target" attribute in hyperlinks.
    > This attribute is part of HTML 4.1 TRANSITIONAL, but not allowed in
    > STRICT, which means you cannot use frames or open links in new
    > windows/tabs (target="_blank").
    > So I don't know if TRANSITIONAL or STRICT is better for you - you decide.


    Since this is a new webpage and David is a newbie I thought it best to
    steer hit towards *strict*. Learn to do it the right way from the start
    and reserved '*transitional* for preexisting sites where resources to
    not allow for a full overhaul.


    >
    > BTW: please don't "top-post", write your own text *below* the quote.
    > This improves the readability of a thread - top to bottom and not the
    > way round.


    Ditto on the top-posting.


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jul 24, 2006
    #7
    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. DDK

    Adrotator and flash banner?

    DDK, Jun 25, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    3,333
    akino
    Oct 25, 2007
  2. Simple Simon

    Inject Ad Banner in DataList

    Simple Simon, Dec 20, 2003, in forum: ASP .Net
    Replies:
    2
    Views:
    496
    Simple Simon
    Dec 20, 2003
  3. Craig Buchanan

    banner usercontrol and relative references

    Craig Buchanan, Feb 24, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    277
    Craig Buchanan
    Feb 24, 2004
  4. Decadre

    Problem with banner

    Decadre, Feb 27, 2006, in forum: HTML
    Replies:
    5
    Views:
    487
    Decadre
    Feb 27, 2006
  5. S.Hoitinga

    dynamic banner text

    S.Hoitinga, Jun 11, 2004, in forum: Javascript
    Replies:
    8
    Views:
    148
Loading...

Share This Page