What's new
  • When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

Help Putting an image and a text div next to each other?(Basically solved)

Carroline

As You Wish
Hey!

I've just started with BBCode today, but I've done some HTML and CSS before - so I get some of the concepts, just no how to execute them in BBCode/+.

I have a few questions I haven't been able to find an answer to by looking through the guides.

1. How do I put my code here, without it executing?

2. How do I put a text with a margin next to an image? (I'll happily provide the code I have so far once I've learnt how to - in the meanwhile I'll put it below in "executed format").

3. Is there a smarter way to do line breaks than having multiple [*br]?


administration-architecture-building-256490.jpg
text text text text text text text text text text text text text text text text text text text text text text text text text

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
 
Last edited:

dogsbeforedudes

New Member
you can put your code by using the [plain][/plain] tags and putting your coding inside that!

for text next to an image, you could use float for each div box, or a flex box if you mean like this:

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text


the code for that is here:

[div=display: flex; flex-direction: row; width: 500px;][div=flex: 1; margin: 10px;][IMG]https://www.rpnation.com/proxy.php?image=https%3A%2F%2Fimages.pexels.com%2Fphotos%2F256490%2Fpexels-photo-256490.jpeg%3Fauto%3Dcompress%26cs%3Dtinysrgb%26dpr%3D2%26h%3D650%26w%3D940&hash=4f39322d543d6c73a2fbf9c1d9d46e36[/IMG][/div][div=flex: 1; margin: 20px; text-align: justify;]text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
[/div][/div]
if you have more questions about flex boxes i'd be happy to answer!


not sure about your last question tho! i don't use the br tag anyway, i just use normal line breaks while typing and pressing enter each time so i'm not totally sure about that.
 

Carroline

As You Wish
you can put your code by using the [plain][/plain] tags and putting your coding inside that!

for text next to an image, you could use float for each div box, or a flex box if you mean like this:

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text


the code for that is here:

[div=display: flex; flex-direction: row; width: 500px;][div=flex: 1; margin: 10px;][IMG]https://www.rpnation.com/proxy.php?image=https%3A%2F%2Fimages.pexels.com%2Fphotos%2F256490%2Fpexels-photo-256490.jpeg%3Fauto%3Dcompress%26cs%3Dtinysrgb%26dpr%3D2%26h%3D650%26w%3D940&hash=4f39322d543d6c73a2fbf9c1d9d46e36[/IMG][/div][div=flex: 1; margin: 20px; text-align: justify;]text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
[/div][/div]
if you have more questions about flex boxes i'd be happy to answer!


not sure about your last question tho! i don't use the br tag anyway, i just use normal line breaks while typing and pressing enter each time so i'm not totally sure about that.
Thank you 🙏 I'll try it out and see if I can get it to work :)
 

Alteras

The Sleepy One
Moderator
Supporter
You can also use the [code] and [icode] tags to display code.

There isn't really a good way, as [br][/br] was implemented to help [nobr] keep codes clean. Without the nobr tag, you can just press the enter button instead
 

Carroline

As You Wish
You can also use the [code] and [icode] tags to display code.

There isn't really a good way, as [br][/br] was implemented to help [nobr] keep codes clean. Without the nobr tag, you can just press the enter button instead
Thank you!! I think I'm staring to get it :D
 

Carroline

As You Wish
you can put your code by using the [plain][/plain] tags and putting your coding inside that!

for text next to an image, you could use float for each div box, or a flex box if you mean like this:

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text


the code for that is here:

[div=display: flex; flex-direction: row; width: 500px;][div=flex: 1; margin: 10px;][IMG]https://www.rpnation.com/proxy.php?image=https%3A%2F%2Fimages.pexels.com%2Fphotos%2F256490%2Fpexels-photo-256490.jpeg%3Fauto%3Dcompress%26cs%3Dtinysrgb%26dpr%3D2%26h%3D650%26w%3D940&hash=4f39322d543d6c73a2fbf9c1d9d46e36[/IMG][/div][div=flex: 1; margin: 20px; text-align: justify;]text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
[/div][/div]
if you have more questions about flex boxes i'd be happy to answer!


not sure about your last question tho! i don't use the br tag anyway, i just use normal line breaks while typing and pressing enter each time so i'm not totally sure about that.
Okay, I'm a little lost again. It kind of works - but there's a really large margin that I don't really understand.

administration-architecture-building-256490.jpg
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text


Code:
[nobr]
[class=main]
display: flex;
flex-direction: row;
[/class]

[class=photo]
[/class]

[class=text]
margin: 10px;
[/class]

[div class="main"]

[div class="photo"]
[IMG align="left" width="50%" alt="administration-architecture-building-256490.jpg"]https://images.pexels.com/photos/256490/pexels-photo-256490.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940[/IMG]
[/div]

[div class="text"]
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
[/div]
[/div]
[/nobr]
 

Carroline

As You Wish
Okay, I might have solved it by using pixels instead of percentages. But, then my next question becomes - how do I do this with percentages?


administration-architecture-building-256490.jpg
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text


Code:
[nobr]
[class=flexBox]
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
[/class]

[class=photo]
margin: 0px;
[/class]

[class=text]
margin-left: 5px;
[/class]

[div class="flexBox"]

[div class="photo"]
[IMG align="left" width="400px" alt="administration-architecture-building-256490.jpg"]https://images.pexels.com/photos/256490/pexels-photo-256490.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940[/IMG]
[/div]

[div class="text"]
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
[/div]
[/div]
[/nobr]
 

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Top