/    Sign up×
Community /Pin to ProfileBookmark

images and text?

um….. How can I have an image be placed by pixles from the left and top.. and then have text dodge the image?

to post a comment
CSS

13 Comments(s)

Copy linkTweet thisAlerts:
@rsdAug 20.2004 — To make text dodge an image you need to set the image CSS to float:left; or something like that.

To have an image (or a div for that matter) placed at a specific spot so many px down and so many px across you need to specify it as position:absolute; in your CSS.

The drawback here is that it takes that image out of the main flow of the document so any text in the main flow will be hidden by the image.

One thing you could try is to include the image inside a div that also contains the text you want and absolutely position the div itself.

Hope this helps.
Copy linkTweet thisAlerts:
@Kyleva2204authorAug 25.2004 — either I did it wrong... or it doesnt work... lemme tell you what im trying to do.... u know like on the news articles they have images smack dab in the text.. like off the left or right.. but they arent at the top and bottom.. they are liike in the middle.. I dont want to have to add a table in the middle.. i want it to be automated in CSS..... :-)

[i]Originally posted by rsd [/i]

[B]To make text dodge an image you need to set the image CSS to float:left; or something like that.

To have an image (or a div for that matter) placed at a specific spot so many px down and so many px across you need to specify it as position:absolute; in your CSS.

The drawback here is that it takes that image out of the main flow of the document so any text in the main flow will be hidden by the image.

One thing you could try is to include the image inside a div that also contains the text you want and absolutely position the div itself.

Hope this helps. [/B]
[/QUOTE]
Copy linkTweet thisAlerts:
@Paul_JrAug 25.2004 — [i]Originally posted by Kyleva2204 [/i]

[B]either I did it wrong... or it doesnt work... lemme tell you what im trying to do.... u know like on the news articles they have images smack dab in the text.. like off the left or right.. but they arent at the top and bottom.. they are liike in the middle.. I dont want to have to add a table in the middle.. i want it to be automated in CSS..... :-) [/B][/QUOTE]

Do you want the text going down on both sides of the centered image? If so, that'll be hard — but talk to lavalamp (I think it was him), he posted a big long thread about this, and finally figured out a solution (I think).
Copy linkTweet thisAlerts:
@Kyleva2204authorAug 25.2004 — I want the images going down the side... and the text dodging the images... Thanks.. Ill PM him.

[i]Originally posted by Paul Jr [/i]

[B]Do you want the text going down on both sides of the centered image? If so, that'll be hard — but talk to lavalamp (I think it was him), he posted a big long thread about this, and finally figured out a solution (I think). [/B][/QUOTE]
Copy linkTweet thisAlerts:
@ray326Aug 25.2004 — You should be able to just float them left or right inside the div with the text and it will flow around.
Copy linkTweet thisAlerts:
@Kyleva2204authorAug 25.2004 — What i am doing is im having PHP go into MYSql... and set a news article.. then in a template... its going ot grab that text.... But... The text will hit the images on the way down and it wont work... so i want to have all the images at the top of the code and tell the images to go down a certain number of pixels..
[i]Originally posted by ray326 [/i]

[B]You should be able to just float them left or right inside the div with the text and it will flow around. [/B][/QUOTE]
Copy linkTweet thisAlerts:
@David_HarrisonAug 25.2004 — [i]Originally posted by Paul Jr [/i]

[B]Do you want the text going down on both sides of the centered image? If so, that'll be hard — but talk to lavalamp (I think it was him), he posted a big long thread about this, and finally figured out a solution (I think). [/B][/QUOTE]
Indeedy, though I didn't start the thread.

http://www.webdeveloper.com/forum/showthread.php?s=&threadid=31247#post168839

Just put the images at the top (and some "gap" div tags in the second column), then you can probably push them as far down as you want with some top margins.
Copy linkTweet thisAlerts:
@Kyleva2204authorAug 26.2004 — hehe.. could you please send me an example with the usage I want to do with it? LOL SRY
[i]Originally posted by lavalamp [/i]

[B]Indeedy, though I didn't start the thread.



http://www.webdeveloper.com/forum/showthread.php?s=&threadid=31247#post168839



Just put the images at the top (and some "gap" div tags in the second column), then you can probably push them as far down as you want with some top margins. [/B]
[/QUOTE]
Copy linkTweet thisAlerts:
@Kyleva2204authorAug 26.2004 — erm yeah.. I cannot figure this out >_<... please help LOL
Copy linkTweet thisAlerts:
@David_HarrisonAug 27.2004 — Hmm, me neither, I've tried a few things and always ended up with a big gap at the top.

On the plus side though I've lightened the code a little, dumped a couple of <div> tags and such like.

If I come up with something I'll let you know.

[upl-file uuid=65afcc36-6b7a-4239-a19c-dea22382e5d8 size=4kB]cross-column.txt[/upl-file]
Copy linkTweet thisAlerts:
@Kyleva2204authorAug 27.2004 — :-) this is tough.. didn't the creators of CSS ever come across this prob??
[i]Originally posted by lavalamp [/i]

[B]Hmm, me neither, I've tried a few things and always ended up with a big gap at the top.



On the plus side though I've lightened the code a little, dumped a couple of <div> tags and such like.



If I come up with something I'll let you know. [/B]
[/QUOTE]
Copy linkTweet thisAlerts:
@David_HarrisonAug 27.2004 — [i]Originally posted by Kyleva2204 [/i]

[B]:-) this is tough.. didn't the creators of CSS ever come across this prob?? [/B][/QUOTE]Why would they? You were joking though, right?
Copy linkTweet thisAlerts:
@Kyleva2204authorAug 30.2004 — :- no.... why?? Should I of been??
[i]Originally posted by lavalamp [/i]

[B]Why would they? You were joking though, right? [/B][/QUOTE]
×

Success!

Help @Kyleva2204 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.20,
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,
)...