Old 09-10-2019, 09:10 AM   #1
DarkStar
Human being with feelings
 
DarkStar's Avatar
 
Join Date: May 2006
Location: Surrey, UK
Posts: 17,961
Default [Off piste] HTML / CSS

This HTML snippet generates a left-aligned image with the text alongside it:

PHP Code:
    <img src="../images/test1.png" align="left" vspace="10" hspace="10">

     <
div>          <p>This is the text accompanying the imagerepeated a few times to pad things out
This is the text accompanying the imagerepeated a few times to pad things out
This is the text accompanying the imagerepeated a few times to pad things out
This is the text accompanying the imagerepeated a few times to pad things out
</
p><p>
This is the text accompanying the imagerepeated a few times to pad things out
This is the text accompanying the imagerepeated a few times to pad things out.</p>
        </
div
So far, so good.

I have a load of similar image+text sections so I would like to use a CSS class to define this layout. That way I can change them all at once. Can someone let me know how to do it? So far I have this in the CSS file:
.leftimg {MARGIN-TOP: 10px; MARGIN-RIGHT: 10px; VERTICAL-ALIGN: top; BACKGROUND-COLOR: #F8A800;
}
but that does not put the text at the same level as the top of the image; although the background colour is in the correct place..
__________________
DarkStar ... interesting, if true. . . . Inspired by ...
DarkStar is offline   Reply With Quote
Old 09-10-2019, 09:40 AM   #2
cfillion
Human being with feelings
 
cfillion's Avatar
 
Join Date: May 2015
Location: Québec, Canada
Posts: 2,725
Default

https://jsfiddle.net/27pqh9Ls/

Code:
.leftimg {
  float: left;
  padding: 10px;
}
cfillion is online now   Reply With Quote
Old 09-10-2019, 11:42 AM   #3
DarkStar
Human being with feelings
 
DarkStar's Avatar
 
Join Date: May 2006
Location: Surrey, UK
Posts: 17,961
Default

D'uh! Thank you. That was easy,

I had read about "float" but misinterpreted it (or misapplied it).
__________________
DarkStar ... interesting, if true. . . . Inspired by ...
DarkStar is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT -7. The time now is 07:10 PM.


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2019, vBulletin Solutions Inc.