/    Sign up×
Community /Pin to ProfileBookmark

Help with image/text URL

Copy linkTweet thisAlerts:
Jan 23.2005

hi.

[code]<a href=”index.html” target=”_self”><img src=”img/tn_sample.jpg” alt=”link description” width=”140″ height=”125″ border=”1″>sample text</a>[/code]

Here’s my question with this code what i get is the image and text right next to it on the side.

Is there a way to have this text apper right under the image and wrapped (using the same width as the image)?

thx in advance

to post a comment
HTML

13 Comments(s) ↴

Copy linkTweet thisAlerts:
@PeOfEoJan 23.2005 — To have it wrap you will need to put the link in some sort of block element with a fixed width that will be the same as the image. My suggestion would be a div.

To get that text on the next line use <br />
Copy linkTweet thisAlerts:
@relaxzoolanderJan 23.2005 — yep...a div will do it.

here the simplest version:

<div style="width:140px; height:250px;"><a href="index.html" target="_self"><img src="img/tn_sample.jpg" alt="link description" width="140" height="125" border="1"><br>some sample text that wraps at the width of the image goes here.</a></div>

you can get more control by adding more css if desired.

it all depends on the web design layout style you prefer.

?
Copy linkTweet thisAlerts:
@cogumeloauthorJan 23.2005 — actually i only told half the problem.

using a div tag gets the text under the image, but what i'm trying to do is get 4 images side by side, 4 other images under them and so on.

using the div you posted i do get the text under but i can't get the images side by side, any ideas how?

the idea is getting thumbs side by side with text under

thx
Copy linkTweet thisAlerts:
@cogumeloauthorJan 23.2005 — <i>
</i>#filmes {
padding: 0 0 0 10px;
display: block;
}


<i>
</i>&lt;div id="filmes"&gt;&lt;ul&gt;
&lt;li&gt;&lt;div style="width:140px; height:200px;"&gt;&lt;a href="index.html" target="_self"&gt;&lt;img src="img/tn_sample.jpg" alt="link description" width="140" height="125" border="1"&gt;&lt;br /&gt;some sample text that wraps at the width of the image goes here.&lt;/a&gt;&lt;/div&gt;&lt;/li&gt;
&lt;li&gt;&lt;div style="width:140px; height:200«0px;"&gt;&lt;a href="index.html" target="_self"&gt;&lt;img src="img/tn_sample.jpg" alt="link description" width="140" height="125" border="1"&gt;&lt;br /&gt;some sample text that wraps at the width of the image goes here.&lt;/a&gt;&lt;/div&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;


here's what i have so far. i thought adding "display: block" would get the divs side by side, but it didn't work. can anyone help out?

thx in advance
Copy linkTweet thisAlerts:
@PeOfEoJan 23.2005 — display: inline;
Copy linkTweet thisAlerts:
@CarolWJan 24.2005 — I am very, very new to HTML (and CSS, which I am using also). I have a few questions arising out of this thread.

1) what does target="_self" do?

I'm so new to it all that I've forgotten my other questions, because my mind won't track, but I'll be back to ask them later.

Mon, 24 Jan 2005 07:41:17 (PST)
Copy linkTweet thisAlerts:
@MstrBobJan 24.2005 — When in doubt, refer to the specs, eh?

[URL=http://www.w3.org/TR/html4/present/frames.html#adef-target]The Target Attribute[/URL]

[URL=http://www.w3.org/TR/html4/types.html#type-frame-target]Target Names[/URL]

The _self name states that the document being linked to should load in the same frame as the current document.
Copy linkTweet thisAlerts:
@CarolWJan 24.2005 — MstrBob,

[i]Originally posted by MstrBob [/i]

[B]When in doubt, refer to the specs, eh?



[URL=http://www.w3.org/TR/html4/present/frames.html#adef-target]The Target Attribute[/URL]



[URL=http://www.w3.org/TR/html4/types.html#type-frame-target]Target Names[/URL]



The _self name states that the document being linked to should load in the same frame as the current document. [/B][/QUOTE]

Thanks for your patience with me. I followed the links you provided. I'm so disoriented that even having seen stuff like that before, I don't know how to find them - how to search, how to explore; it's probably partly because I'm so old, and partly because I'm learning from scratch with very little other resource to help me learn - so I tend to learn all out of order! And dis-order would be a good description of the state of my knowledge <g>.

Then when I do find the information, there's the matter of trying to udnerstand it. I'll get there, though, if I just keep working at it. And people like you keep helping me find things! <g>

Sorry to interrupt the thread; I think I did.

Ummm, there's something else about this thread - hope it's the thread, and not the whole forum.

If I leave this forum and go to, say, CSS, I have no horizontal scrolling. But if I come back to this forum, maybe it's only this thread - I'm suddenly faced with having to scroll horizontally. It looks as thought the left pane has grown horizontally. And, as I look, the right pane also has greatly expanded horizontally, though as I write this, I don't see anything but blank space to the right of this message-entry box.

Is there something in particular that would cause that?

(Sorry if that's more thread-interruption.)

Mon, 24 Jan 2005 09:48:57 (PST)
Copy linkTweet thisAlerts:
@PeOfEoJan 24.2005 — it is not the forum, it is cogumelo's post in this thread that is streaching it. He used a bunch of code that did not have line breaks in it.
Copy linkTweet thisAlerts:
@CarolWJan 24.2005 — [i]Originally posted by PeOfEo [/i]

[B]it is not the forum, it is cogumelo's post in this thread that is streaching it. He used a bunch of code that did not have line breaks in it. [/B][/QUOTE]

Oh. Relief! Thanks for the information! I did try some

other threads, and they're not doing the horizontal

scrolling.

Yet - when I post here, the forum sofware seems

to put in line breaks, if I don't do it, so I'm

not sure why cogumelo's code didn't get line-broken,

so to speak. Maybe because it's code, and I know

there is code where breaking a line would break the code!

I'll shut my mouth now on such topics, and just read with

interest and hope I learn something <g>. Thanks for your

patience!

(leaving my lines unbroken, and I

suppose that if cogumelo

doesn't edit his original post, this too will

cause horizontal scrolling?) (Cogumelo, can you

edit your post, or would that break the code?)

Now shutting mouth (fingers)

On second thought, editing my post to force

line-breaks, if I can figure out how to do it!

Well, it's not pretty, but neither am I sure it

will work; I just used my Enter key.

Mon, 24 Jan 2005 14:05:14 (PST)
Copy linkTweet thisAlerts:
@MstrBobJan 24.2005 — &#091;code] and &#091;PHP] brackets parse it as preformatted text. Basically, when browsers have long spans of text, they'll escape it as the last line break to make it all fit. But with preformatted text, the browsers doesn't insert any line breaks at spaces, so the container stretches to fit the content, resulting in a horizontal scroll.
Copy linkTweet thisAlerts:
@CarolWJan 24.2005 — [i]Originally posted by MstrBob [/i]

[B]&#091;code] and &#091;PHP] brackets parse it as

preformatted text. Basically, when browsers have long spans

of text, they'll escape it as the last line break to make it

all fit. But with preformatted text, the browsers doesn't

insert any line breaks at spaces, so the container stretches

to fit the content, resulting in a horizontal scroll.

[/B][/QUOTE]

(Experimenting with the Enter key again, but I don't think

it helps much <g>)

(And it seems I haven't shut my mouth [fingers] yet; typical

me. )

Thanks, Mstr Bob. By the way, your lead was very helpful.

It can be quite agonizing, when I keep losing my way, just

because I'm so unfamliar with eerything. Yet - I found the

Basic Data Types you led me to. Then also, I found a section

on links and anchors, which, I believe, is going to answer

other questions I had, so I don't have to struggle to find

out how to ask my question!

A friend suggested I shouldn't bother to try to read the

complex W#C recommendations and such stuff, saying I would

only get very confused, but what he wasn't allowing for is

that I'm so confused anyway, that doesn't make any

difference, and there are many places where I can begin

to understand something, and that, gradually, allows me

to begin to understand more, especially if I manage to try

it out in an HTML document (or CSS style sheet).

So, it takes me a very long time, but I can assure you, I

wouldn't get anywhere without the help of people on these

forums, and because of the help, I am gradually getting

somewhere!

So thanks to all of you! And, Mstr Bob, your posts are

particulary helpful; how you manage to understand what I'm

asking, I'm not sure, but the help is wonderfully effective.

Mon, 24 Jan 2005 14:55:00
Copy linkTweet thisAlerts:
@CharlesJan 24.2005 — [i]Originally posted by MstrBob [/i]

[B]&#091;code] and &#091;PHP] brackets parse it as preformatted text. Basically, when browsers have long spans of text, they'll escape it as the last line break to make it all fit. But with preformatted text, the browsers doesn't insert any line breaks at spaces, so the container stretches to fit the content, resulting in a horizontal scroll. [/B][/QUOTE] Which I put my code inside &#91;font=monospace&#93;&#91;/font&#93; tag like things.
×

Success!

Help @cogumelo spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...