I've noticed that several people have stories with a picture on the same line as the title with the text centered in the remaining space, like Angharad's Easy As Falling Off A Bike. Whenever I try to get a picture on the same line as text the text ends up aligned with the bottom of the picture, and only one line of text; the rest goes above or below it. What am I doing wrong?
Saless
Try tables
You can achieve what you want by using a table structure, with the picture in one table cell, and the text in another.
Positioned Smoothly
Bike Archive
Bike Resources
For example
<div align="center">
<table width="100%">
<td align="center">
Text stuff goes here
</td>
<td align="center">
<img src="picture address" width="xxx" height="xxx" alt="Alternate text" />
</td>
</table>
</div>
<!--break-->
<hr />
HTH
Placed Strategically
Bike Archive
Bike Resources
Thank you!
I'm glad you expanded on your reply, because I wasn't getting anywhere with the tables until you did! I tried using the code from the Compose Tips page linked from the +Fiction page but it gave the same result I get without tables. But I've got it now. Thanks again!
Saless
"But it is also tradition that times *must* and always do change, my friend." - Eddie Murphy, Coming To America
TR elements
Although most user agents will figure out what this means, it's usually advisable to use the <tr> element to define the row.
Cheers,
Puddin'
-
Cheers,
Puddin'
A tender heart is an asset to an editor: it helps us be ruthless in a tactful way.
--- The Chicago Manual of Style
Yup, you need to use tables
It's the same sort of problem you face when you're trying to do the same thing in MS Word. PS is right - you have to use tables.
Also, you might want to check this out?
http://bigclosetr.us/topshelf/blog/16141/topshelf-dumdums
It explains how you can do what you want better than I can here. If you want a copy, PM me an email address I can send it to?
http://bigclosetr.us/topshelf/book/14775/roberta-j-cabot
Tables will do it, but they are evil.
To expand on it:
Yes, the simplest solution for the specific problem you mention is using tables. It doesn't mean you should fall in love with them, though. Table-based layout has a lot of problems -- they aren't semantic, they mix content with presentation, they break the natural flow of the text, they don't resize well if your reader has a much wider or much narrower window than the one you designed for, text inside tables is by default formatted differently from body text... I could go on. That's why most web design gurus nowadays advise you to eschew tables entirely, except for displaying stuff that is really tabular data.
Yet there are things, like the specific question you pose, that are hard to do with other layout techniques. Not impossible -- but hard. One could compromise and use a couple tables here and there for spot layout, while doing the main work using only CSS for layout.
I don't like compromising, though. I try to do standards-compliant, tableless, frameless, "liquid" design as much I can. Sometimes that means giving up on a layout that would be too much trouble to implement without tables. I try finding alternative layouts that are just as effective and will work in a fully "liquid", CSS-based layout.
Standards
Until someone comes up with a clean, universal way to do tableless layouts, tables are here to stay. Saying they should be used only for tabular data is kind of like saying that highways should only be used for travel by the high; it's confusing the label with the use.
Honest, CSS will not work well in this situation without a lot of workarounds and more education than is reasonable to suppose the common users of the internet ought to have.
Standards thought up by committees of highly educated engineers are not always appropriate for real world applications by the common people who merely want to be able to use the internet, not have to take a course in complex mechanics.
I am a highly educated person and the sister of one of the people who designed CSS. I use tables when they are the appropriate tool, that is, when they get the job done with a minimum of fuss and feathers. The ideal of separating content from presentation is just that, an ideal. CSS has it's own problems and badly written CSS (of which there is a MEGATON of it on the 'net) is actually worse than tables.
Hugs,
Erin
= Give everyone the benefit of the doubt because certainty is a fragile thing that can be shattered by one overlooked fact.
= Give everyone the benefit of the doubt because certainty is a fragile thing that can be shattered by one overlooked fact.
One of which problems
is that CSS inheritance and override rules mean that badly-written CSS can infect other things on a page. This web site uses CSS extensively to format the pages as a whole -- which is one of the technologies that allows users have their choice of many layouts and colour schemes -- but the stories are not isolated in a little "sand box" that allows authors to do their own home-grown CSS without consequences.
Most CSS implementations of faux-tables forces the author to define a series of nested containers so the individual columns can be "floated" into position. This is not at all obvious to most authors, and mistakes in the scope of the containers can quickly trash the page as a whole. A simple two-cell table, on the other hand, can be supplied as a template, and text and image values plugged in to suit.
Purity is all very well, but toolkits should include ordinary hammers and nails as well as high-tech three-part chemical bonding fluids. Sometimes, a nail is all you need.
Cheers,
Liobhan
-
Cheers,
Liobhan
Yah
Trying to hang a picture on the wall is a real chore if the only tool you have is a Saturn V three-stage rocket. :)
Hugs,
Erin
= Give everyone the benefit of the doubt because certainty is a fragile thing that can be shattered by one overlooked fact.
= Give everyone the benefit of the doubt because certainty is a fragile thing that can be shattered by one overlooked fact.
Saturn V
On the other hand, once you've got that sucker up, it stays.
Cheers,
Liobhan
-
Cheers,
Liobhan
I ran into something similar
I ran into something similar to this while playing with my new signature earlier. I'm using the "ALIGN" tag to fit the two images together, but it kept borking up everything else on the page until I disocvered the BR CLEAR=LEFT tag.
It's a... unique answer to the problem that using a table would probably accomplish more cleanly. I actually think I just made my square peg fit in the round hole by virtue of a chainsaw, but I love the end result either way. ;-)
Will have to do some more reading on this topic though, now that I've stumbled across it.
Edit:
Didn't notice Charlotte's post until after I posted. That's precisely what I did for mine, after some intensive Googling of HTML tutorials =D
Align=
I always use align="xxxx" in the code for the image,where xxx can be "left", "right" or "center" (UK readers need to use the American spelling). It does exactly that: aligns the picture with the left edge with text on the right, and vice versa. (Center is best used without text around it.)
You can then select the text and click on the C button to centre it in the remaining space.