|
|
Posted by sevillad on 07/24/06 13:28
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:
> sevillad@gmail.com 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
Navigation:
[Reply to this message]
|