Text Align Image

[darude]

Hello All,
I am trying to place an image on the left and then place text to the right of the image. So, the image is a local entertainer and to the right I want to write:

Joe the Magician
Starts at 9PM

The second line shows up below the picture. Help! Below is my code. Thank you in advance.

<blockquote>
<div align="left">
<p><br></p>
<h1 class="style7"> Pride Night - September 12, 2009 </h1>
<p align="left"><img src="../11_06_photos/casella_photo.gif" alt="Photo: Casella" align="top" width="80" height="106" />
<b>Joe the Magician</b><br/>
<br/>Starting at 9
</p>
</div>
</blockquote>

 

[BillyRayPreachersSon]

Quite why you're using a BLOCKQUOTE element when there is no quote, or wrapping a BR inside a P I don't know. Remove the redundant markup, and try something like this:

<h1 class="style7">Pride Night - September 12, 2009</h1>
<p>
	<img src="../11_06_photos/casella_photo.gif" alt="Photo: Casella" align="top" width="80" height="106" align="left" />    
	<b>Joe the Magician</b>
	<br/><br/>
	Starting at 9
</p>

Ultimately, your visual effects (indentation, etc) should be handled by CSS, not by adding unnecessary HTML to your page...

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[cygmorg]

Dan has got the most of it right, your code is a bit messy. Anyway, the problem with Dan's code is that where there is:

<br/><br/>

The "Starting at 9" part is appearing below the image.
So this is what I would do:

<h2 class="style7">Pride Night - September 12, 2009</h1>
<p>
<div class="inline">
 <div class="inline1">
  <img src="../11_06_photos/casella_photo.gif" alt="Photo: Casella" align="top" width="80" height="106" align="left" />    
 </div>
 <div class="inline2">
  <b>Joe the Magician</b>
     Starting at 9
 </div>
</div>
</p>

Then your styles would look like this:

.inline1 {
	position:		absolute;
	width:			10%;
}
.inline2 {
	position:		relative;
	width:			15%;
	margin-left:		125px;

It works fine in Firefox, but I havent tried any other browsers.
With the text "Joe the Magician Starting at 9" I put them on the same line, but forced the div width to be smaller, so the "Joe the Magician" bit appeared to be on the line above "Starting at 9".
Hope this helps

 

[darude]

Thank you for your response. I am new to this and working with code from someone else. When I add the align="left", I lose the picture and it becomes the text of the link.

 

[johnwm]

Why not supply us with a link to the actual live page - it will make it a lot easier for us to see where you've got to.

If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller

 

[cygmorg]

On my previous post, you don't actually need the

<div class="inline">
...
</div>

bit.

As for the align:"left" issue, it seems to work fine on my PC (Windoze XP, Firefox 3.0.13). What OS and browser are you using?

Gareth

 

[BillyRayPreachersSon]

cygmorg,

Why would you want to define a %-based left-hand column when it contains a fixed-width image? Surely the you'd be better off defining this as a fixed width?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[jlockley]

vertical-align?

http://www.w3schools.com/Css/pr_pos_vertical-align.asp

(nifty gizmo)

 

[cygmorg]

Dan,

You're completely right. I usually use % instead of fixed widths and I was just playing about with a bit of code. I didn't notice one was % and one was a fixed width, and in this situation, it would make more sense to have them all as fixed widths.

Gareth

Gareth

 

[darude]

Hi Guys,
I'm new to this and modifying another person's code. I'm using IE. When I try this code in an independent of the website, I get the same issue. The first line appears alongside of the picture, the 'Starting at 9 PM' appears below the picture. Should I use a table?

 

[cygmorg]

Don't use tables. I can't find any other way, but I think we need to float the image:

.inline1 {
[COLOR=red yellow]	float:			left; [/color]
	width:			10%;
}
.inline2 {
	width:			18%;
	margin-left:		10%;
}

And this is the HTML:

<p>
 <div class="inline1">
  <img src="img.jpg" alt="Photo: Casella" align="top" width="80" height="106" align="left" />    
 </div>
 <div class="inline2">
  <b>Joe the Magician</b>
  Starting at 9
 </div>
</p>

I've tried this on numerous browsers including firefox and IE 8 and it works

Hope this helps

Gareth

 

[ChrisHunt]

Even cygmorg's code is a little cumbersome.

I'd suggest marking it up like this:

<div class="event">
  <h2>Pride Night - September 12, 2009</h2>
  <img src="../11_06_photos/casella_photo.gif" alt="Photo: Casella" width="80" height="106" />
  <p>
    <strong>Joe the Magician</strong><br />
    Starting at 9
  </p>
</div>

Then use CSS to apply all the layout and visuals

div.event {
  overflow: auto;
  margin: 30px; /* For example */
}

div.event h2 {
  /* whatever you had in "style7" goes in here! */
}

div.event img {
  float: left;
}

div.event p {
  margin-left: 90px; /*wide enough for the picture plus a bit */
}

Note that I only give the outer div a class, everything else can be derived from it, and that I give it a meaningful name. When you're maintaining the site in 12 months time, names like "style7" or "inline2" won't mean anything to you.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd