Maybe I should be putting the gif in the background?
This looks sort of like what I am after: http://tinyurl.com/3ty2hs
--- do you think this is the best approach and will be stable across
browser?
Basically I just added some padding and text alignment on the heading
and tagline and put the image in the background with a little background
positioning and padding.
#masthead .content {
padding: 40px 120px;
text-align: left;
}
#masthead {
padding: 10px;
background-image: url(../Images/pawn_anm2.gif) ;
background-repeat: no-repeat;
background-position: 10px;
}
Robert Lane wrote:
> My example page is at: http://tinyurl.com/3r8rhu
>
> I seem to be a bit rusty here and am struggling with positioning an
> image and some text in the mast head.
>
> I have a div named masthead. A div within that named content. In the
> content div I want an image (yes I hate animated gifs too!) to the
> left side of the masthead. Then I would like the Main Heading <h1>
> LeChess Club</h1> followed by the tag line of <p>A Society for Better
> Chess </p>
>
> So basically --- Image --- Heading
> tag line
> I may want to be able to play with the padding around the image for
> best placement, But I want both lines of text to line up to the right
> of the image rather than below it.
>
> What is generally the best and/or easiest way to do this? Do I need
> to use position, float, or what?
>
> The Html is as follows: ( I have tried the image both in the H1 tag
> and before the H1 tag. )
>
> <div id="masthead">
> <div class="content"> <h1> <img id="mast_img"
> src="../Images/pawn_anm2.gif" alt="LeChess Club, A Society for Better
> Chess" />
> LeChess Club</h1>
> <p>A Society for Better Chess </p>
> </div>
> </div>
>
> The CSS that seems to effect things in this div is:
> #masthead {
> color: #f4a460;
> background-color: #d2eff7;
> padding: 0px;
> margin: 0 0 36px 0;
> }
>
> #mast_img {display: block;
> border: 1px solid red;}
>
>
> #masthead .content {
> padding: 10px 20px;
> font-size: .8em;
> letter-spacing: .5em;
> }
>
> Thanks for any suggestions!
>
>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
