Accordions & Images Not Working

jiminie

jiminie

heaven in hiding
Hi, I'm having some trouble with BBCode. I'm using accordions for a character sheet, and when I try to insert an image float (left), I open the accordion and it shuts it's self leaving the image out.. if that makes sense.


Hard to explain. Here is what I have;


Basic Information
Text Text
kzPaj3F.jpg
Testing 2
Testing
Testing 3
Stuff



I'm really new to BBCode in general and I am still figuring a lot out. :3
 
Last edited by a moderator:
Karaleigh said:
Hi, I'm having some trouble with BBCode. I'm using accordions for a character sheet, and when I try to insert an image float (left), I open the accordion and it shuts it's self leaving the image out.. if that makes sense.
Hard to explain. Here is what I have;


Basic Information
Text Text
kzPaj3F.jpg
Testing 2
Testing
Testing 3
Stuff



I'm really new to BBCode in general and I am still figuring a lot out. :3
Click to expand...
So basically the accordion slide doesn't really get how to handle the image when it's in the imagefloat code, so it sorta pretends it's not there. When you add text that expands beyond the image, it'll look just fine. Examples:


Basic Information
kzPaj3F.jpg
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut fermentum velit convallis ex vulputate fermentum. Praesent tincidunt urna eget ex volutpat feugiat. Praesent mattis bibendum ipsum nec vehicula. Nunc cursus pretium aliquam. Donec ornare sapien ac elit suscipit, a fringilla purus euismod. Phasellus rhoncus pharetra risus. Quisque ipsum lorem, lacinia vel leo et, tincidunt condimentum mauris. Integer id nulla a enim viverra fringilla id quis justo. Aliquam eu orci fermentum, vehicula lacus at, rutrum metus. Suspendisse accumsan volutpat mi vitae facilisis. Integer at rutrum arcu. Mauris sollicitudin vestibulum sagittis. Quisque tristique nunc lacus, vitae scelerisque orci suscipit eget.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut fermentum velit convallis ex vulputate fermentum. Praesent tincidunt urna eget ex volutpat feugiat. Praesent mattis bibendum ipsum nec vehicula. Nunc cursus pretium aliquam. Donec ornare sapien ac elit suscipit, a fringilla purus euismod. Phasellus rhoncus pharetra risus. Quisque ipsum lorem, lacinia vel leo et, tincidunt condimentum mauris. Integer id nulla a enim viverra fringilla id quis justo. Aliquam eu orci fermentum, vehicula lacus at, rutrum metus. Suspendisse accumsan volutpat mi vitae facilisis. Integer at rutrum arcu. Mauris sollicitudin vestibulum sagittis. Quisque tristique nunc lacus, vitae scelerisque orci suscipit eget.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut fermentum velit convallis ex vulputate fermentum. Praesent tincidunt urna eget ex volutpat feugiat. Praesent mattis bibendum ipsum nec vehicula. Nunc cursus pretium aliquam. Donec ornare sapien ac elit suscipit, a fringilla purus euismod. Phasellus rhoncus pharetra risus. Quisque ipsum lorem, lacinia vel leo et, tincidunt condimentum mauris. Integer id nulla a enim viverra fringilla id quis justo. Aliquam eu orci fermentum, vehicula lacus at, rutrum metus. Suspendisse accumsan volutpat mi vitae facilisis. Integer at rutrum arcu. Mauris sollicitudin vestibulum sagittis. Quisque tristique nunc lacus, vitae scelerisque orci suscipit eget.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut fermentum velit convallis ex vulputate fermentum. Praesent tincidunt urna eget ex volutpat feugiat. Praesent mattis bibendum ipsum nec vehicula. Nunc cursus pretium aliquam. Donec ornare sapien ac elit suscipit, a fringilla purus euismod. Phasellus rhoncus pharetra risus. Quisque ipsum lorem, lacinia vel leo et, tincidunt condimentum mauris. Integer id nulla a enim viverra fringilla id quis justo. Aliquam eu orci fermentum, vehicula lacus at, rutrum metus. Suspendisse accumsan volutpat mi vitae facilisis. Integer at rutrum arcu. Mauris sollicitudin vestibulum sagittis. Quisque tristique nunc lacus, vitae scelerisque orci suscipit eget.



If you don't plan to have much text, what you can do is use columns instead of imagefloat. Let me know if you want me to explain that one.
 
Last edited by a moderator:
Oh! And I should add that you need to put the image BEFORE your text to make it work right.
 
Oh! Thank you so much, to be honest, I feel dumb. I should have tried adding in more text. Oops. Ah well, thanks anyway. :)
 
@Anomaly - sorry to bug you again, I don't want to spam the forums with all my questions.


I currently have a border/background colour, an image and my accordions. The image is currently above the accordions (centered) and ideally, I'd like the image to be on the right side of the page with the accordions on the left. Yet currently, when I do this, the border/background stops where the accordions end and so the image overlaps the edges. Is there anyway to stop this/make the border reach around the image too?


Edit: Better way to ask; is there a way to make the border/background static and be a certain height/width?
 
Last edited by a moderator:
Yes! You know that heightrestrict code you can use on images? Well, it works on text and such too.


But... It doesn't always mesh well with every monitor and browser. On mobile, you'll probably end up having a lot of text that disappears.


Let me show you.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut fermentum velit convallis ex vulputate fermentum. Praesent tincidunt urna eget ex volutpat feugiat. Praesent mattis bibendum ipsum nec vehicula. Nunc cursus pretium aliquam. Donec ornare sapien ac elit suscipit, a fringilla purus euismod. Phasellus rhoncus pharetra risus. Quisque ipsum lorem, lacinia vel leo et, tincidunt condimentum mauris. Integer id nulla a enim viverra fringilla id quis justo. Aliquam eu orci fermentum, vehicula lacus at, rutrum metus. Suspendisse accumsan volutpat mi vitae facilisis. Integer at rutrum arcu. Mauris sollicitudin vestibulum sagittis. Quisque tristique nunc lacus, vitae scelerisque orci suscipit eget.



versus:


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut fermentum velit convallis ex vulputate fermentum. Praesent tincidunt urna eget ex volutpat feugiat. Praesent mattis bibendum ipsum nec vehicula. Nunc cursus pretium aliquam. Donec ornare sapien ac elit suscipit, a fringilla purus euismod. Phasellus rhoncus pharetra risus. Quisque ipsum lorem, lacinia vel leo et, tincidunt condimentum mauris. Integer id nulla a enim viverra fringilla id quis justo. Aliquam eu orci fermentum, vehicula lacus at, rutrum metus. Suspendisse accumsan volutpat mi vitae facilisis. Integer at rutrum arcu. Mauris sollicitudin vestibulum sagittis. Quisque tristique nunc lacus, vitae scelerisque orci suscipit eget.



Anyway, the way you would do it would be to place the height restrict code around everything that is inside the border/background.


EDIT: Eek, that borked even more than expected. Yep, that's why it can be an issue. xD
 
Last edited by a moderator:
You must log in or register to reply here.

Users who are viewing this thread

Total: 2 (members: 0, guests: 2)
Back
Top