Images & Text - HTML / CSS

I am new to web design and I am looking for some advice on putting
images within paragraphs of text. I have determined that sizing the
height of my images to a given number of lines of text seems to work
well, however:

If for example I align the image to the left, I will then put a border
on the top, bottom, and right edges of my image which matches my
background, in order to provide aesthetically pleasing space between
the image and surrounding text, and also keep the left image edge flush
with the adjacent left text margin. I am inclined to leave my
cellpadding/cellspacing settings alone because I like the way
everything else looks. But I am inclined to think there is a better
way to do this (either with css or html) and would appreciate a
suggestion.

John

Apr 1 '06 #1

Subscribe Reply

3601

Addendum -- I realize after posting that cellpadding/spacing has
nothing to do with the internal positioning of images within a single
cell. Apologies for that misleading info.

Apr 1 '06 #2

William Hughes

On 31 Mar 2006 19:24:54 -0800, in comp.infosystem s.www.authoring.stylesheets "J"
<sk*********@ya hoo.com> wrote:

I am new to web design and I am looking for some advice on putting
images within paragraphs of text. I have determined that sizing the
height of my images to a given number of lines of text seems to work
well, however:

If for example I align the image to the left, I will then put a border
on the top, bottom, and right edges of my image which matches my
background, in order to provide aesthetically pleasing space between
the image and surrounding text, and also keep the left image edge flush
with the adjacent left text margin. I am inclined to leave my
cellpadding/cellspacing settings alone because I like the way
everything else looks. But I am inclined to think there is a better
way to do this (either with css or html) and would appreciate a
suggestion.

John

I have found the following construction to be useful.

First, make sure your HTML files can find your css file:

<head>
<LINK REL=StyleSheet HREF="./cvproj.css" TYPE="text/css" MEDIA=screen>
</head>

Note: You can name your css file anything you want to; "href="./mycss.file",
"href=./thatdamnedcompl icated.css"...

In your css file:

div.photoleft { float: left;
margin-right: 15px;
margin-top: 15px;
margin-bottom: 15px;
text-align: center; }

div.photoright { float: right;
margin-left: 15px;
margin-top: 15px;
margin-bottom: 15px;
text-align: center; }

Examples for your HTML:

<div class="photorig ht">
<img src="http://www.history.nav y.mil/photos/images/g370000/g373816t.jpg"
alt="USS Essex" title="CV-9 USS Essex, May 1945" width=200 height=158>
<br>
<i>USS Essex</i> (CV-9) underway during<br>the Okinawa campaign, May 1945.<br>
U. S. Navy photo from<br>the U. S. Naval Historical Center
</div>

<div class="photolef t">
<img src="http://www.history.nav y.mil/photos/images/h97000/h97488kt.jpg"
alt="USS Ticonderoga" title="CV-14 USS Ticonderoga, ca. 1970-72" width=200
height=158>
<br>
A post-refit modernised<br>< i>Essex</i>-class carrier.<br>Thi s is CV-14 <i>USS
Ticonderoga</i><br>in the early 70s.<br>
U. S. Navy photo from<br>the U. S. Naval Historical Center
</div>

You mentioned "(putting in) a border on the top, bottom, and right edges of my
image which matches my background, in order to provide aesthetically pleasing
space between the image and surrounding text." The MARGIN-top/bottom/left/right:
99px parameters in the CSS do just that, and they are transparent; your
background will show through.

For detailed explanations of the various elements and parameters used, I
recommend the Web Design Group site at http://www.htmlhelp.com/ .

HTH
--
Money can't buy happiness, but it can let you rent it for a while...

Apr 1 '06 #3

William,

This worked well. Many thanks.

John

Apr 3 '06 #4

Alan Silver

In article <11************ **********@v46g 2000cwv.googleg roups.com>, J
<sk*********@ya hoo.com> writes

I have determined that sizing the height of my images to a given number
of lines of text seems to work well

Based on what? How do you know what size the user will have their text?
How do you know how wide their browser window is? If they change the
width, it may change the way the lines wrap/break, resulting in a
different number of lines from your intention.

Not criticising, just pointing out that you can't make assumptions about
the user's settings.

--
Alan Silver
(anything added below this line is nothing to do with me)

Apr 3 '06 #5

Alan J. Flavell

On Mon, 3 Apr 2006, Alan Silver wrote:

In article <11************ **********@v46g 2000cwv.googleg roups.com>, J
<sk*********@ya hoo.com> writes
I have determined that sizing the height of my images to a given
number of lines of text seems to work well
Based on what? How do you know what size the user will have their
text?

Regular text? It'll be 1.0em. Line *height* is typically somewhat
larger - but if you size the image in em units, you'll be aiming at
some approximation to the intended size. The quality of the result
may be less than ideal, though, since browsers can be a bit rough and
ready when resizing images on the fly. Avoid indexed image formats
when doing this (jpeg may be a good choice - of course the flip side
is that jpeg can't do transparency).
How do you know how wide their browser window is?
Don't know - don't want to know. Design should be chosen for its
ability to adapt well across a good range of user settings.
If they change the width, it may change the way the lines
wrap/break, resulting in a different number of lines from your
intention.

That's what flexible design is all about. The image can still be
sized in em units to be consonant with the text.

Apr 3 '06 #6

William Hughes

On 3 Apr 2006 07:54:10 -0700, in
comp.infosystem s.www.authoring.stylesheets "J" <sk*********@ya hoo.com>
wrote:

William,

This worked well. Many thanks.

John

de nada. Always happy to help.

Money can't buy happiness, but it can let you rent it for a while...

Apr 4 '06 #7

Alan Silver

In article <Pi************ *************** ****@ppepc55.ph .gla.ac.uk>,
Alan J. Flavell <fl*****@physic s.gla.ac.uk> writes
<snip>

I think we are saying the same thing here. My point was that the OP
implied (although that may have been incorrect) that images were to be
sized based on how large (ie pixel size) the text was. I was merely
pointing out that you don't know that. I didn't get the impression that
he was referring to sizing in the browser, more to sizing them to a
specific number of pixels in Photoshop (or whatever).

You are right in that you can resize the images in the browser, and
choose ems as units, but the impression I got from the OP's post was
that this was *not* what was being suggested. If it was, then nothing
more to add.

Ta ra

--
Alan Silver
(anything added below this line is nothing to do with me)

Apr 4 '06 #8

Similar topics

2365

Creating Dynamic Images

by: K | last post by:

I have found a script online that I want to use (I am new to PHP). It creates dynamic images based on the text that you pass it. However, no matter how I try, I can't get anything other than a blank white image. Can one of you knowledgeable people please have a look at the code below and help please.

PHP

14135

images & justify

by: The Plankmeister | last post by:

Ello... Is there a way to recreate the "text-align : justify" behaviour with images? (add to wish list: "image-align : justify") I have a gallery page and would like all the images to properly justify in their containing <div>. I'm currently centering them, which looks ok, but if there is a method of faking justify with CSS I'd love to hear it! :) P.

HTML / CSS

3893

Borderline around non fixed-width images?

by: Michael Kalina | last post by:

Hi! On my website (http://michaelsremarks.blogspot.com) I use a so called flickr-badge. That is some sourcecode that takes a picture out of my flickr-gallery and puts it onto my website. Now I would like the picture to have a border with a 3px (or so) padding all around. The problems are: a. If I do not input a fixed-width, like now 100px, the image is on

HTML / CSS

5698

positioning images in left, center & right floated formation

by: sylvian stone | last post by:

Hi, I'm trying to do something that has always been easy with tables - namely use a three column layout, and above the main layout, show three images - one on the absolute left, one on the absolute right, and one in the middle. The one in the middle needs to be centered, as various browsers display slightly differently. However, using the CSS and code below, either the first image is not shown (IE) or the right image is shown below...

HTML / CSS

2332

Images inline with blog contents - HOW??

by: Neo Geshel | last post by:

I am seeking to hand-roll my own blog in ASP.NET 2.0 and SQLExpress 2005. Why? Because I can. Because I will gain experience. The one thing that has me stumped at square one is inline images. That is, images inline with the actual content of the blog itself. Is there an example that I can be pointed to, where I can examine some code and figure out how to do this? Frankly I haven't got a clue, aside from breaking the content up into...

ASP.NET

3141

Vertical center on images and text at the same line

by: Egil Helland | last post by:

I am trying to create a breadcrumb with both icons and text, looking like: Home > Trail > Trail Now, how on earth do I get the images and text to vertically align so that the vertical center of the text is identical to the vertical center of the images, with margins top and bottom as well as borders top and bottom? And retain cross-browser compability?

HTML / CSS

3734

Load images into flash map points via xml using .text equivalent??

by: elamberdor | last post by:

Hi All! Well, i'm modifying a dynamic map, with lat and long datapoints, my problem is it loads in text perfectly onto exact points I specify on the map, ..well now I want to load in icons(images) instead of text. (yes i'm being difficult) and i'd like the text to load into a static placeholder symbol instead. Problem is, I can get images to load in a separate file, text to load in a separate file, and text to appear in a static...

XML

2433

Images & Alt tags

by: UKuser | last post by:

Hi Folks, Is there a way, I can hide images through CSS and then display the alt tags? I want to create a Javascript free CSS/Cookies approach to doing text- only. I've set the style for images display:none (I know it still requires CSS) and then don't display my main stylesheet. But is there a way to display the alt tags if a certain attribute is applied to images?

HTML / CSS

13363

trouble with tinyMCE images

by: matheussousuke | last post by:

Hello, I'm using tiny MCE plugin on my oscommerce and it is inserting my website URL when I use insert image function in the emails. The goal is: Make it send the email with the URL http://mghospedagem.com/images/controlpanel.jpg instead of http://mghospedagem.comhttp://mghospedagem.com/images/controlpanel.jpg As u see, there's the website URL before the image URL.

Javascript

8618

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

9035

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

8916

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

8885

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

7752

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

6534

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

4376

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

3058

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

2010

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General