Basic Question: Positioning Text Above Image

[Planet13]

I am sure this is incredibly basic question, but my CSS skills are horrific.

Using CSS How do I place the text ABOVE an image?

I DON'T want to overly text on top of (covering part of) the image.

What I want is:

SOME TEXT HERE

SOME SPACE HERE

Top Edge Of Image Here.

If I were doing it in HTML, I would probably do:

SOME TEXT HERE;
<br><br>
IMAGE TAG HERE.

The CSS I am using works on a DESKTOP, but once you start to resize smaller / view on a mobile device, the text aligns to the SIDE of the image.

<div class="123"><a href="somepage.html">SOME TEXT HERE<img src="/image.jpg"></a>
</div>

Thanks in advance.

[edited by: Planet13 at 9:42 pm (utc) on Aug 2, 2014]

[not2easy]

Only two questions:
1. Is there a reason for the closing </a> before the text without an <a href before it? Is there 'supposed' to be a link that uses the text and image as an anchor? If so, see below.

2. Is there a reason why you can't use <br> after the text to put the image below the text? If not, see below.

<div class="123"><a href="example.com">SOME TEXT HERE<br><img src="/image.jpg"></a>
</div>

If defaults don't give you the space you want between the text and image, you could give create an img class with an upper margin that looks like what you want.
img.123 {margin: .3em auto;}

[Planet13]

@ not2easy:

Thanks for the input.

" Is there a reason for the closing </a> before the text without an <a href before it? "

Yes, the reason is I screwed up ;)
Firstly, I corrected the closing a tag. It should have been an opening a tag.

2. Is there a reason why you can't use <br> after the text to put the image below the text? If not, see below.

I will be delighted to use a <br> tag, if they are still allowed. For some reason, I thought it was bad to use a <br> tag for positioning. I thought they were obsolete...

I will try your suggestion for an image class with margins first, and if that doesn't work, will try the <br> tag. Thanks.

[Planet13]

Well...

I guess I PROBABLY have it working...

I basically had to add a

display:block;

to the img css that you gave me, so it looked like this:

img.123 {

display: block;
margin: .3em auto;
}

and it SEEMS to be working now.

[lucy24]

If I were doing it in HTML

CSS and HTML are not mutually exclusive.

The absolute no-no is using <br> <br>
to force line breaks within a <br>
paragraph, instead of letting <br>
text flow naturally based on <br>
viewport width. There is absolutely nothing wrong with using <br> when your intention is "No matter what else is happening, I want to be sure there's a line break here."

But why can't you simply make your figure caption a <p> paragraph? You will have to give it a class name so you can set things like size, alignment and lower margin. Unfortunately CSS currently doesn't let you define styles based on what the following element is. Preceding element, yes, absolutely, meaning that you could give your pictures a different top margin if they're preceded by <p class = "caption"> or whatever you end up calling it.

If an image (inherently an inline element) is both preceded and followed by block-level elements such as paragraphs, the image too will be forced to become block-level. Or, at, least, to look block-level-- which here amounts to the same thing.

Personally I always shove images inside a <p class = "illustration"> just so I don't have to think about them.

[Planet13]

@ lucy24

"Personally I always shove images inside a <p class = "illustration"> just so I don't have to think about them."

Can you give me an example of what that would look like?

My grasp of CSS is tenuous at best. I admit that up until last year, I thought that "CSS" was a cop show on TV that my parents watch...

So an example would go a long way to helping me out.

Thanks in advance.

[lucy24]

My boilerplate CSS says among other things (direct cut-and-paste here):

p, li {line-height: 1.2; text-align: left;
margin: .5em 0 0; padding: 0;}

p.illustration {text-align: center; margin: 1em 0;}

Nothing about font or size, because p.illustration is reserved for pictures alone. Margins in CSS overlap, so a larger value will always override a smaller value. For an analogy, think of two people with different "personal space" talking to each other. The distance between them will be determined by which of you sets a larger personal space.

Then whenever I'm throwing a free-standing illustration into the mix, it's

<p class = "illustration">
<img src = "images/blahblah.jpg" width = 123" height = "123"
alt = "real description of this specific picture"></p>

[not2easy]

My grasp of CSS is tenuous at best. I admit that up until last year, I thought that "CSS" was a cop show on TV that my parents watch...

OK, that was funny enough to deserve some background..
Back in the olden days, people used to tell each element what to do, every time they used it. So you would see things like <p align="center"><font face="arial, times new roman, sans serif" size="3" color="#000000" background color="FF0000"> at the start of a paragraph's coding. That was in-line styling at its crudest.

Then browser advances came along and people started putting styles for the whole page on a different page and it was called a Cascading Style Sheet (css) because elements were instructed how to look and all the elements on the page would inherit the instructions given just once in this css. If you wanted another of the same element to have different properties, you could add "classes" so all the links on a page did not need to look the same or all the <p> on a page could have different appearances by using a different class.

Big deal, huh? Yes, it was - because from then on, the appearance was not stuck in each separate page and a little editing could change the appearance of every page on the site at once. It was an amazing breakthrough at the time. Since you probably never had to edit 40 or 50 pages by hand, you might not appreciate it so much as some of us do.

[lucy24]

Incidentally, planet13, you are not so far behind me. I never heard of CSS until I started doing ebooks in 2004/2005. The first time I fed an html file into the validator, it politely said that (a) it couldn't find any DTD (another thing I'd never heard of) so it would try HTML 4.01 Transitional, and (b) I might perhaps like to use a stylesheet in future.

Even within a single page, CSS is a great leap forward. An external stylesheet for multiple pages is just a slight extension. Obviously I didn't need to do this with ebooks, as they rarely span multiple files; an external stylesheet really only becomes essential when you've got a whole website that's all supposed to look the same. And then you start using Include files so you don't have to hand-code every page's navigation, and one thing leads to another.

Incidentally, the phrase "type = 'text/css'" is a legacy of a time when they thought there might be other kinds of stylesheets. As it happens, nothing else ever came into general use, so <style> alone really should be enough. (I have not personally tried leaving out these few syllables, mainly because the longer form has become automatic with me anyway.)

[Planet13]

"Since you probably never had to edit 40 or 50 pages by hand, you might not appreciate it so much as some of us do."

Ha! Ye of little faith!

I actually did the front end for a shopping cart that had about 200 products and about three variations (size / color) for each product.

That shopping cart had great functionality and a fine backend, but I really didn't like how the front end pages looked. (Actually, I think it used frames, and those were a no-no for SEO, which is why I did the front end myself.)

I actually did it in php. I think I maintained it that way for a year and a half. They finally came out with an update version of the shopping cart without frames (that was around 2003)

Looking back at it, that was ONE of the stupidest things I ever did (and that is saying a lot since I have done a LOT of REALLY stupid things).

[edited by: Planet13 at 11:04 pm (utc) on Aug 3, 2014]

[Planet13]

Thanks so much for the code example, Lucy!

I guess my confusionment comes from where you would put the "caption" for the photo.

Would it be:

<p class = "illustration">
Caption Text Here
<img src = "images/blahblah.jpg" width = 123" height = "123"
alt = "real description of this specific picture"></p>

Or does it have to be like this:
<p>
Caption Text Here</p>
<p class = "illustration">
Caption Text Here
<img src = "images/blahblah.jpg" width = 123" height = "123"
alt = "real description of this specific picture"></p>

[lucy24]

Personally I'd make picture and caption each a separate paragraph. In some situations it may be a good idea to wrap the both of them inside a div, probably with styles of its own.

In HTML 5 there are all sorts of newfangled elements with semantic names. But for the time being there's not a thing wrong with

<p class = "caption">
blahblah</p>

<p class = "illustration">
<img etcetera
</p>

or

<div class = "picblock">
<p class = "caption">
blahblah</p>

<p class = "illustration">
<img etcetera
</p>
</div>

If you're only just getting started with CSS, keep it conceptually simple. All those new HTML5 elements really don't mean much unless you're prepared to style those, too, in your CSS. The element <div> by itself doesn't mean anything. It's just a holder or armature that you can attach block-level styles to.

If you want to put the caption in the same paragraph (or same any-block-level-element) as the picture, you would have to include an explicit <br>. A paragraph automatically has line breaks before and after unless you specifically say otherwise; an image doesn't unless you et cetera. That's the key difference between a "block-level" and an "inline" element.

[Planet13]

@ lucy24:

Thanks so much for the example and the clarification. I really appreciate it.

I will most likely be going with the second solution you provided (i.e., put everything in a div and use two separate paragraphs).

Thanks again for taking the extra time to explain it so clearly.

[tangor]

(Actually, I think it used frames, and those were a no-no for SEO, which is why I did the front end myself.)

Having no wish to change the topic, or distract from the good advice above, just felt the need to insert that "frame" as in "frameset" not "iframe" which is something different, is totally fine SEO wise, etc. That said, frame and frameset have fallen into disuse due to these SEO myths and a general fear that SE (search engines) can't read them properly. That fear is simply unfounded.

In the instant above, if the text for the image needs be different from the general body text, then by all means create a CSS class for that purpose. Else, ordinary p will suffice. Ultimately, it depends on how often/frequent an expressed "caption" style is required as to whether a CSS statement needs be created.

[Planet13]

@ tangor

When it comes to SEO, one man's myth is another man's prevailing wisdom ;)

But back in the day (2002 - 2003ish) people said NOT to use frames. So I instead decided to use a non-frame front end.

Eventually by about 2004 the shopping cart moved to a non-frame front end, so I was really happy to implement their standard templates.

But anyway, I was really SSSLLLOOOWWWW in learning about CSS... and I still have no idea what HTML 5 is all about. I am not 100% sure that I really WANT to know, either :(

[tangor]

planet13, you and me, both!

I have found that most SEO wisdom is so much farmer's friend, and regret that my website is not farmland where such might be of immense use. (sigh)

A fellow named Dylan once sang about "times a-changin'" and that is very true these days on the web. I, too, am still learning. I am also one to hold to the old ways when it makes sense. :)

Determine of you need a caption, or a caption-like CSS and go from there. Back in the old daze (sic) I did that with table-centric stuff. These days I use CSS, and glad of it!

[numnum]

But anyway, I was really SSSLLLOOOWWWW in learning about CSS... and I still have no idea what HTML 5 is all about. I am not 100% sure that I really WANT to know, either

I checked out an HTML5 book from the library four days ago, intending to get up to speed by way of some bedtime reading. But I still haven't cracked the book. Instead, I've just been playing around with HTML5 tags in my sandbox and finding unexpected default margins and padding on elements such as <nav> and <footer>. Maybe I should crack the book.

My biggest "aha!" moment so far is discovering that I can omit the hashtag before a commonly used id value (e.g., nav instead of #nav and, in the HTML, <nav> instead of <div id="nav">. Big whoop.

[lucy24]

I can omit the hashtag before a commonly used id value (e.g., nav instead of #nav and, in the HTML, <nav> instead of <div id="nav">

Well, sure, if there was only one of it-- but I'll bet most of those id's were never needed in the first place.

Exercise: Make an HTML document with hyper-generic css that says something like

body * {background-color: #CCF; padding: #FCC; border: 1px dotted blue;}

(meaning: apply these styles to all top-level elements)
or, by name,

p, div, table, caption, nav ETCETERA {background-color: #CCF; padding: #FCC; border: 1px dotted blue;}

Now make random chunks of blahblahblah text inside the assorted elements-- p, nav, table, caption, whatnot. Look at it in assorted browsers to see what kinds of values they're making up for all those new elements.