Little Coding Help, please? - Resolved

Started by Jag, January 01, 2010, 11:34:43 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Jag

I'm making a profile type thing and I can't figure out (or remember how to) put a picture on one side and the words right next to it.

Ex:

Image Here
Image Here
Image Here               Text over here.
Image Here


That might be a bad example, but I think someone might get it. >.<
Ons/Offs // Request Thread (Updated 6/13/24) // Slow to Reply at the Moment

Caeli

[float=left]Image[/float]Text here.[/float]

I think that's what you want? :-)
ʙᴜᴛᴛᴇʀғʟɪᴇs ᴀʀᴇ ɢᴏᴅ's ᴘʀᴏᴏғ ᴛʜᴀᴛ ᴡᴇ ᴄᴀɴ ʜᴀᴠᴇ ᴀ sᴇᴄᴏɴᴅ ᴄʜᴀɴᴄᴇ ᴀᴛ ʟɪғᴇ
ᴠᴇʀʏ sᴇʟᴇᴄᴛɪᴠᴇʟʏ ᴀᴠᴀɪʟᴀʙʟᴇ ғᴏʀ ɴᴇᴡ ʀᴏʟᴇᴘʟᴀʏs

ᴄʜᴇᴄᴋ ❋ ғᴏʀ ɪᴅᴇᴀs; 'ø' ғᴏʀ ᴏɴs&ᴏғғs, ᴏʀ ᴘᴍ ᴍᴇ.
{ø 𝕨 
  𝕒 }
»  ᴇʟʟɪᴡʀɪᴍᴏ
»  ᴄʜᴏᴏsᴇ ʏᴏᴜʀ ᴏᴡɴ ᴀᴅᴠᴇɴᴛᴜʀᴇ: ᴛʜᴇ ғɪғᴛʜ sᴄʜᴏʟᴀʀʟʏ ᴀʀᴛ
»  ひらひらと舞い散る桜に 手を伸ばすよ
»  ᴘʟᴏᴛ ʙᴜɴɴɪᴇs × sᴛᴏʀʏ sᴇᴇᴅs × ᴄʜᴀʀᴀᴄᴛᴇʀ ɪɴsᴘɪʀᴀᴛɪᴏɴs

Zeitgeist

[table]
[tr]
[td][img]https://elliquiy.com/forums/avs/avatar_4190_1262359135.jpg[/img][/td]
[td]Like this?[/td]
[td][img]https://elliquiy.com/forums/avs/avatar_4190_1262359135.jpg[/img][/td]
[td]Or this?[/td]
[/tr]
[/table]




Like this?Or this?

Caeli

Tables are, in my opinion, only needed for grids (like above), but if you only want two columns, and the rest of the text to continue as normal...

If you're talking about something like this, floating definitely makes it look nicer, since it'll force your text to wrap around the image (which will be floating on the left or the right, depending on which float tag you use).
ʙᴜᴛᴛᴇʀғʟɪᴇs ᴀʀᴇ ɢᴏᴅ's ᴘʀᴏᴏғ ᴛʜᴀᴛ ᴡᴇ ᴄᴀɴ ʜᴀᴠᴇ ᴀ sᴇᴄᴏɴᴅ ᴄʜᴀɴᴄᴇ ᴀᴛ ʟɪғᴇ
ᴠᴇʀʏ sᴇʟᴇᴄᴛɪᴠᴇʟʏ ᴀᴠᴀɪʟᴀʙʟᴇ ғᴏʀ ɴᴇᴡ ʀᴏʟᴇᴘʟᴀʏs

ᴄʜᴇᴄᴋ ❋ ғᴏʀ ɪᴅᴇᴀs; 'ø' ғᴏʀ ᴏɴs&ᴏғғs, ᴏʀ ᴘᴍ ᴍᴇ.
{ø 𝕨 
  𝕒 }
»  ᴇʟʟɪᴡʀɪᴍᴏ
»  ᴄʜᴏᴏsᴇ ʏᴏᴜʀ ᴏᴡɴ ᴀᴅᴠᴇɴᴛᴜʀᴇ: ᴛʜᴇ ғɪғᴛʜ sᴄʜᴏʟᴀʀʟʏ ᴀʀᴛ
»  ひらひらと舞い散る桜に 手を伸ばすよ
»  ᴘʟᴏᴛ ʙᴜɴɴɪᴇs × sᴛᴏʀʏ sᴇᴇᴅs × ᴄʜᴀʀᴀᴄᴛᴇʀ ɪɴsᴘɪʀᴀᴛɪᴏɴs

Jag

Yup, Caeli. That's what I needed. Thank you both so much. ^^
Ons/Offs // Request Thread (Updated 6/13/24) // Slow to Reply at the Moment

Caeli

Remember to use the 'padding' property unless your image has some transparency around its edges! :-)
ʙᴜᴛᴛᴇʀғʟɪᴇs ᴀʀᴇ ɢᴏᴅ's ᴘʀᴏᴏғ ᴛʜᴀᴛ ᴡᴇ ᴄᴀɴ ʜᴀᴠᴇ ᴀ sᴇᴄᴏɴᴅ ᴄʜᴀɴᴄᴇ ᴀᴛ ʟɪғᴇ
ᴠᴇʀʏ sᴇʟᴇᴄᴛɪᴠᴇʟʏ ᴀᴠᴀɪʟᴀʙʟᴇ ғᴏʀ ɴᴇᴡ ʀᴏʟᴇᴘʟᴀʏs

ᴄʜᴇᴄᴋ ❋ ғᴏʀ ɪᴅᴇᴀs; 'ø' ғᴏʀ ᴏɴs&ᴏғғs, ᴏʀ ᴘᴍ ᴍᴇ.
{ø 𝕨 
  𝕒 }
»  ᴇʟʟɪᴡʀɪᴍᴏ
»  ᴄʜᴏᴏsᴇ ʏᴏᴜʀ ᴏᴡɴ ᴀᴅᴠᴇɴᴛᴜʀᴇ: ᴛʜᴇ ғɪғᴛʜ sᴄʜᴏʟᴀʀʟʏ ᴀʀᴛ
»  ひらひらと舞い散る桜に 手を伸ばすよ
»  ᴘʟᴏᴛ ʙᴜɴɴɪᴇs × sᴛᴏʀʏ sᴇᴇᴅs × ᴄʜᴀʀᴀᴄᴛᴇʀ ɪɴsᴘɪʀᴀᴛɪᴏɴs

Jag

Padding?

You mean the [/] thing at the end and beginning?

O_o

* Michi No Sora only knows the very basics of any coding.
Ons/Offs // Request Thread (Updated 6/13/24) // Slow to Reply at the Moment

Caeli

Oh! I will explain. Pay attention to the inside of the IMG tag. The padding=# is the space around the edges of the image (like a buffer area), with # being the number of pixels.




Without Padding

[float=left][img]https://elliquiy.com/elluiki/images/c/ca/Caeli.png[/img][/float]Lorem ipsum dolor sit amet, consectetur adipiscing elit...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In luctus auctor urna, quis mollis nisl commodo a. Nullam blandit vulputate diam, nec egestas arcu rhoncus vitae. Fusce eget urna neque. Cras quis libero ut libero egestas mattis. Duis ut consequat tellus. Nullam tristique consequat dolor, at mollis elit laoreet ac. Vestibulum urna ligula, aliquet eu gravida et, ullamcorper non neque. Praesent quam nisl, eleifend et semper commodo, molestie in eros. Sed interdum tortor eget nunc ultrices hendrerit. Praesent mollis orci libero. Fusce non dui quis nisl blandit sodales sed eu lacus. Sed elementum fringilla sem, nec fringilla lectus vehicula in. Ut adipiscing blandit nisi id condimentum. Fusce nulla elit, gravida ac laoreet vel, volutpat a mi. Nullam sagittis accumsan sem id cursus. Duis et lectus eget turpis iaculis sodales a at leo.

Pellentesque at leo elit. Aenean porta augue nec lorem hendrerit pellentesque. Duis nunc neque, egestas vel facilisis eget, consectetur in elit. Phasellus magna enim, tincidunt et varius ultrices, commodo non diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tristique ornare urna non eleifend. Donec turpis metus, laoreet vel sagittis ac, tincidunt vel orci. Cras vehicula ornare luctus. Aliquam consequat, quam nec dignissim sagittis, ante metus ultricies nunc, ac feugiat eros neque a nisl. Aenean eget augue orci, non tincidunt metus.

Ut sed diam risus, nec tempus dui. Mauris egestas, leo nec feugiat auctor, tellus nibh elementum libero, sit amet laoreet leo nisi semper magna. Praesent feugiat mattis turpis sed consectetur. Morbi quam erat, egestas ac adipiscing nec, commodo in nisl. Aliquam cursus dapibus velit, vitae iaculis dui dignissim eu. Cras feugiat quam sit amet turpis porta ac faucibus sapien accumsan. Quisque at fermentum justo. Nam viverra justo vitae velit luctus sed commodo risus consequat. Aliquam vel metus elit, et feugiat nunc. Phasellus dignissim pulvinar enim, tincidunt laoreet metus tincidunt at. Nulla adipiscing bibendum leo, egestas sagittis dolor pulvinar sed. Nulla facilisi. Duis euismod arcu id odio tristique euismod. Curabitur porttitor faucibus arcu laoreet laoreet. Morbi varius luctus porttitor. Nullam varius pretium tellus, sed blandit risus iaculis ac.




With Padding

[float=left][img padding=5]https://elliquiy.com/elluiki/images/c/ca/Caeli.png[/img][/float]Lorem ipsum dolor sit amet, consectetur adipiscing elit...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In luctus auctor urna, quis mollis nisl commodo a. Nullam blandit vulputate diam, nec egestas arcu rhoncus vitae. Fusce eget urna neque. Cras quis libero ut libero egestas mattis. Duis ut consequat tellus. Nullam tristique consequat dolor, at mollis elit laoreet ac. Vestibulum urna ligula, aliquet eu gravida et, ullamcorper non neque. Praesent quam nisl, eleifend et semper commodo, molestie in eros. Sed interdum tortor eget nunc ultrices hendrerit. Praesent mollis orci libero. Fusce non dui quis nisl blandit sodales sed eu lacus. Sed elementum fringilla sem, nec fringilla lectus vehicula in. Ut adipiscing blandit nisi id condimentum. Fusce nulla elit, gravida ac laoreet vel, volutpat a mi. Nullam sagittis accumsan sem id cursus. Duis et lectus eget turpis iaculis sodales a at leo.

Pellentesque at leo elit. Aenean porta augue nec lorem hendrerit pellentesque. Duis nunc neque, egestas vel facilisis eget, consectetur in elit. Phasellus magna enim, tincidunt et varius ultrices, commodo non diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tristique ornare urna non eleifend. Donec turpis metus, laoreet vel sagittis ac, tincidunt vel orci. Cras vehicula ornare luctus. Aliquam consequat, quam nec dignissim sagittis, ante metus ultricies nunc, ac feugiat eros neque a nisl. Aenean eget augue orci, non tincidunt metus.

Ut sed diam risus, nec tempus dui. Mauris egestas, leo nec feugiat auctor, tellus nibh elementum libero, sit amet laoreet leo nisi semper magna. Praesent feugiat mattis turpis sed consectetur. Morbi quam erat, egestas ac adipiscing nec, commodo in nisl. Aliquam cursus dapibus velit, vitae iaculis dui dignissim eu. Cras feugiat quam sit amet turpis porta ac faucibus sapien accumsan. Quisque at fermentum justo. Nam viverra justo vitae velit luctus sed commodo risus consequat. Aliquam vel metus elit, et feugiat nunc. Phasellus dignissim pulvinar enim, tincidunt laoreet metus tincidunt at. Nulla adipiscing bibendum leo, egestas sagittis dolor pulvinar sed. Nulla facilisi. Duis euismod arcu id odio tristique euismod. Curabitur porttitor faucibus arcu laoreet laoreet. Morbi varius luctus porttitor. Nullam varius pretium tellus, sed blandit risus iaculis ac.
ʙᴜᴛᴛᴇʀғʟɪᴇs ᴀʀᴇ ɢᴏᴅ's ᴘʀᴏᴏғ ᴛʜᴀᴛ ᴡᴇ ᴄᴀɴ ʜᴀᴠᴇ ᴀ sᴇᴄᴏɴᴅ ᴄʜᴀɴᴄᴇ ᴀᴛ ʟɪғᴇ
ᴠᴇʀʏ sᴇʟᴇᴄᴛɪᴠᴇʟʏ ᴀᴠᴀɪʟᴀʙʟᴇ ғᴏʀ ɴᴇᴡ ʀᴏʟᴇᴘʟᴀʏs

ᴄʜᴇᴄᴋ ❋ ғᴏʀ ɪᴅᴇᴀs; 'ø' ғᴏʀ ᴏɴs&ᴏғғs, ᴏʀ ᴘᴍ ᴍᴇ.
{ø 𝕨 
  𝕒 }
»  ᴇʟʟɪᴡʀɪᴍᴏ
»  ᴄʜᴏᴏsᴇ ʏᴏᴜʀ ᴏᴡɴ ᴀᴅᴠᴇɴᴛᴜʀᴇ: ᴛʜᴇ ғɪғᴛʜ sᴄʜᴏʟᴀʀʟʏ ᴀʀᴛ
»  ひらひらと舞い散る桜に 手を伸ばすよ
»  ᴘʟᴏᴛ ʙᴜɴɴɪᴇs × sᴛᴏʀʏ sᴇᴇᴅs × ᴄʜᴀʀᴀᴄᴛᴇʀ ɪɴsᴘɪʀᴀᴛɪᴏɴs

Jag

Okay. I understand. ^^ Thankies, Caeli. ^^
Ons/Offs // Request Thread (Updated 6/13/24) // Slow to Reply at the Moment