Re: [css-d] Lost in positioning masthead image
On Sat, 03 May 2008 19:46:25 -0700 Robert Lane wrote: > Maybe I should be putting the gif in the background? > Definitely, text readers don't see background images. -- Michael All shall be well, and all shall be well, and all manner of things shall be well - Julian of Norwich 1342 - 1416 __ 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/
Re: [css-d] Lost in positioning masthead image
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
> LeChess Club followed by the tag line of A Society for Better
> Chess
>
> 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. )
>
>
>src="../Images/pawn_anm2.gif" alt="LeChess Club, A Society for Better
> Chess" />
> LeChess Club
>A Society for Better Chess
>
>
>
> 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/
Re: [css-d] Lost in positioning masthead image
Robert, Here is a demo where the image is floated left and a div containing the text is also floated left: http://www.jimdavis.org/test/chess.html Jim On Sat, May 3, 2008 at 6:54 PM, Robert Lane <[EMAIL PROTECTED]> 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 LeChess > Club followed by the tag line of A Society for Better Chess > > 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? __ 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/
[css-d] Lost in positioning masthead image
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 LeChess
Club followed by the tag line of A Society for Better Chess
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. )
LeChess Club
A Society for Better Chess
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/
