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/
