Shape-outside help, please?
Replies
OKAY SO. I thought I could figure this out by myself, but I can't. I can't tell what I'm doing wrong and why the image won't show up and wrap around it. I've tried a number of things I could think of but I'm at my wit's end and I just wanna' figure it out so I can cry with relief.
SPOILER (click to toggle)
<style>
, , , , , , , , , , a, .pet_like, .statbar, .weapon_item, .pet_name, .pet_color_info, .pet_wco_info_date, .pet_age_info_date {display: none}
, {background: none; height:525px !important; border:0px;}
h2 {display:none}
, {display:none}
::-webkit-scrollbar {width:0px; height:0px}
{position:absolute; top:1px; left: 400px; opacity: .7;}
{position:absolute; top:300px; left: 1050px; opacity: .7;}
html {background-image: url(http://i.imgur.com/KRr23u6.png); background-color:; background-repeat: y-repeat;}
;){kind=link}
body {background-image: url(http://i.imgur.com/AFspj02.png); background-repeat: no-repeat; width: 1600px; height: 574px}
;){kind=link}
body, html, div, li, a {color: ; font-family: candara; font-size: 15px; line-height: 18px;}
a:link, a:visited{color:; font-size:15px; font-family: garamond; text-transform: none;} a:hover{color:; font-size:15px; font-family: garamond; text-transform: none;}
b {color: ; font-family: garamond; font-size: 15px; font-weight: bold}
i {color: ; font-family: garamond; font-size: 15px}
u {color: ; font-family: garamond; font-size: 15px; text-decoration: underline}
.owner {position:absolute; top:130px; left: 1030px; text-align:center; font-size:16px; font-family: garamond; text-transform: lowercase;}
.pet_spotlight {position:absolute; top: 550px; left: 1000px; text-align:center; font-size:18px; font-family: garamond; text-transform: none;}
{position:absolute; top: 490px; left: 667px; width: 220px; height: 50px; overflow:auto; background: ; opacity: .7;}
.treasure_item {padding-right: 7px; padding-bottom: 5px; width: 50px; height: 50px;}
{ width: 400px; height: 400px; -webkit-shape-outside: url("http://i.imgur.com/tdNhHvl.png"); }
.pet_story { float: right; } </style>
Aenean in nisl volutpat, dignissim dui sit amet, pretium mi. Etiam id rhoncus mi. Nunc viverra tortor vitae sapien viverra porta. Quisque vitae diam a velit rutrum laoreet. Etiam at tellus sed nisl luctus maximus. Morbi et nulla sed nulla lacinia venenatis. Vivamus tincidunt ligula vitae dignissim efficitur. Phasellus dignissim sed ante a convallis. Mauris auctor euismod luctus. Vestibulum mauris ante, mollis et lectus in, ultricies rhoncus quam. Donec volutpat risus at sem vestibulum tincidunt. Sed turpis tortor, vulputate eget porta quis, condimentum in augue. Cras porta rutrum lacus, nec fringilla lectus tincidunt et. Praesent sed nulla ipsum. Integer eget sapien non leo convallis ultricies.
Nulla ac mauris at enim blandit eleifend quis ac diam. Etiam mattis lobortis velit sed laoreet. Pellentesque facilisis bibendum aliquet. Donec tristique varius turpis, sit amet mollis sapien rutrum vulputate. Nulla facilisi. Nullam congue mi ligula, id vulputate tellus porta non. Cras rutrum pellentesque tempus. Cras purus tortor, tempus ac mollis sed, efficitur vel elit.
Maecenas volutpat odio sem, varius lobortis purus euismod nec. Cras id orci felis. Nulla pretium blandit nulla, quis efficitur augue pretium sed. Cras nec orci ac neque semper semper non a diam. Fusce finibus libero pulvinar condimentum bibendum. Ut non massa libero. Curabitur arcu nulla, bibendum eget leo in, tristique cursus ante. Maecenas bibendum tempor consectetur. Integer lacinia neque justo, sit amet placerat tortor tincidunt quis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin velit nisl, dignissim nec nulla at, pretium consequat dui. Fusce porta aliquam ex, et gravida augue blandit mattis. Sed eget congue magna.
Curabitur ornare est sed tortor ornare, eu aliquet erat cursus. Maecenas facilisis, sapien in malesuada luctus, elit lorem pretium magna, eu tincidunt nisl dolor sit amet metus. Ut luctus turpis non aliquam pellentesque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent ullamcorper lectus sed est feugiat convallis. Vestibulum eu urna ac ante tempus ultricies. Etiam placerat imperdiet sollicitudin. Donec non arcu ornare, condimentum sapien ut, hendrerit nisl. Praesent urna tellus, pharetra sed malesuada et, dapibus ut leo. Aliquam facilisis volutpat metus non mattis. Sed sed gravida sapien. Donec efficitur metus in neque lobortis, in luctus lectus varius.
Sed eget est vel odio consequat sagittis. Nam urna nisl, tincidunt sed placerat vitae, aliquam sed augue. Aenean facilisis arcu nec faucibus consectetur. Nullam ac convallis ante. Cras facilisis vitae ligula et laoreet. Cras molestie tellus orci, quis luctus felis tristique sit amet. Praesent sollicitudin metus at tempor dapibus. Aenean imperdiet volutpat dolor, sit amet porttitor velit. In et lacinia tellus. Cras condimentum sollicitudin maximus.
Nam pharetra varius dui nec sollicitudin. Praesent suscipit erat non nibh euismod volutpat. Suspendisse malesuada dui diam, non luctus sapien ultricies ac. Nunc pretium, purus sed lacinia pharetra, diam libero tincidunt dui, at pharetra neque lectus sit amet enim. Phasellus non ligula lacinia, finibus urna at, rhoncus justo. Curabitur tortor metus, malesuada at feugiat nec, vehicula sed lorem. Ut blandit tempus ornare. Morbi vehicula ante nisl, eget pharetra arcu tincidunt at. Aliquam cursus mattis maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc efficitur mi non commodo malesuada.
quitting - non-cw version. sp and csc accepted. - it&;s finally happening: the ufa-ening.
not sure if you've figured this out yet since it's been a few days, but:
remove the -webkit-shape-outside from
at the top of the petstory div, add this:
then add this to the CSS:
.pic{-webkit-shape-outside: url("http://i.imgur.com/tdNhHvl.png");shape-outside: url("http://i.imgur.com/tdNhHvl.png");float:left;width:500px;}
i hope that's what you wanted? note that with being 400px wide, the text won't actually wrap around the pic unless you make it smaller (or the box bigger), but if you do one of those things it should work properly!
edit: idk why the code tags added all the random backslashes, i'm not good at this lol :' (
No, I haven't figured it out. XD; But uh, I tried to follow what you said and the image appeared! But it's still not doing the thing... all signs point to me fucking something up but idk what. Also I removed the slashes, the forums just added them back.
{
top: 600px; left: 400px;
}
.pic{-webkit-shape-outside: url("http://i.imgur.com/tdNhHvl.png");shape-outside: url("http://i.imgur.com/tdNhHvl.png");float:left;width:500px;}
</style>
quitting - non-cw version. sp and csc accepted. - it&;s finally happening: the ufa-ening.
oh sorry, totally my fault, i didn't explain myself well! i meant the image needs to go inside the div.
content will go here doot doot
Okay, it's doing the thing, but the pet story div isn't responding to my attempts to resize it, move it, or put it into a scrolling box.
Nothing else is using these IDs so I'm not sure why it's ignoring my attempts, since they aren't being overridden. I also added a # to the div just in case (since code can be finicky) but it didn't change anything. XD;
{
height: 700px; width: 700px;
}
.pic{-webkit-shape-outside: url("http://i.imgur.com/tdNhHvl.png");shape-outside: url("http://i.imgur.com/tdNhHvl.png"); float:left;}
</style>thar be lorem ipsum herequitting - non-cw version. sp and csc accepted. - it&;s finally happening: the ufa-ening.
i'm having no issue editing . could you do all those things (add in the CSS to resize it, move it, and make it scroll) and then show me your testing page?
Here you go! greojogeriojgeo Sorry I'm so incompetent.
quitting - non-cw version. sp and csc accepted. - it&;s finally happening: the ufa-ening.
Whoops, I left that there by accident. It doesn't matter whether or not the # is there, it still won't do.
quitting - non-cw version. sp and csc accepted. - it&;s finally happening: the ufa-ening.
you haven't changed the CSS for pet_story, so can you put something in so i can see the problem you're having? the only CSS you have is to make it 700x700, and with that change it's that size now. try to adjust to what you want it to look like so i can view the page and see what's mucking it up!!
To get shape-outside working, you need to add the pic class to your image, like purring suggested. Secondly, remove all quotation marks from the CSS or replace with single quotes because quotation marks behave weirdly due to Subeta's filtering.
As for the pet_story div adding
overflow: auto; to the pet_story ID in the CSS will restrict it to your declared width and height so that it will scroll.
I'm not sure what you mean? Lorem ipsum is the text in the text box.
Ah, it worked, but now the image is in the scroll with it?
quitting - non-cw version. sp and csc accepted. - it&;s finally happening: the ufa-ening.
i meant adding stuff like overflow:auto like kushinada said! sorry, i probably should have suggested CSS to stick in.
you can't keep the picture fixed and have the text flow around it using shape-outside, though, unfortunately
@ purring OHHHH okay, I see how it works now. It's fine that I can't fix the image it just took me a second to understand how that worked, heheh
HI sorry to bug you two again but I'm still having a problem. I'm working on this page to be able to see more clearly what my editing will do. Now, the image is just a black circle with a transparent background, but the shape outside is reading it as a box as opposed to a circle? What?
quitting - non-cw version. sp and csc accepted. - it&;s finally happening: the ufa-ening.
No worries. n_n
You still need to add the .pic class to the image to actually apply the shape-outside. It's styled in the CSS but has to be assigned in the HTML too. Like this:
Wait, I don't understand... the class=pic IS in the code?
SPOILER (click to toggle)
<style> {
text-align:right;
}
.pic{-webkit-shape-outside: url(http://i.imgur.com/1JDs6NS.png); shape-outside: url(http://i.imgur.com/1JDs6NS.png); float:left;}
</style>;){kind=link}
Suspendisse sit amet ex nisl. Vestibulum sodales lorem non ante pellentesque convallis. Phasellus ornare rhoncus dolor, ut placerat orci sagittis rhoncus. Fusce lorem purus, tincidunt in odio at, mollis gravida lectus. Cras vehicula venenatis efficitur. Suspendisse eleifend sodales cursus. Pellentesque laoreet sem eu nibh rutrum, ut feugiat mauris viverra. Ut tincidunt a turpis a ornare. Vivamus non eros vel dolor imperdiet scelerisque. Nunc viverra semper felis vel congue. Sed consequat, nulla ut interdum finibus, nibh lacus pharetra libero, ac lobortis orci ipsum ut elit. Fusce porta erat erat, efficitur aliquet mauris sagittis nec. Proin mollis bibendum ultrices.
quitting - non-cw version. sp and csc accepted. - it&;s finally happening: the ufa-ening.
Huh, it doesn't come up when you view the pet page though; classes aren't applying to images for some reason. In any case we can work around it by putting some kind of wrapper around the image and giving it the class.
THAT WORKED, THANK YOU
New issue, the pet_story won't move. I've tried changing the tag name, adding quotations, moving the editor code closer to the div, removing the image and this all happened before I organized my code;
SPOILER (click to toggle)
<style>
html {background-image: url(http://i.imgur.com/KRr23u6.png); background-color:; background-repeat: y-repeat;}
body {background-image: url(http://i.imgur.com/AFspj02.png); background-repeat: no-repeat; width: 1600px; height: 574px}
body, html, div, li, a {color: ; font-family: candara; font-size: 15px; line-height: 18px;}
h2 {display:none}
, , , , , , , , , , a, .pet_like, .statbar, .weapon_item, .pet_name, .pet_color_info, .pet_wco_info_date, .pet_age_info_date {display: none}
, {background: none; height:525px !important; border:0px;}
, {display:none}
{position:absolute; top:1px; left: 400px; opacity: .7;}
{position:absolute; top:300px; left: 1050px; opacity: .7;}
{height: 500px; width: 500px; top: 100px; left: 700px; overflow: auto;}
{position:absolute; top: 490px; left: 667px; width: 220px; height: 50px; overflow:auto; background: ; opacity: .7;}
.owner {position:absolute; top:130px; left: 1030px; text-align:center; font-size:16px; font-family: garamond; text-transform: lowercase;}
.pet_spotlight {position:absolute; top: 550px; left: 1000px; text-align:center; font-size:18px; font-family: garamond; text-transform: none;}
.treasure_item {padding-right: 7px; padding-bottom: 5px; width: 50px; height: 50px;}
.pic{-webkit-shape-outside: url(http://i.imgur.com/1JDs6NS.png);shape-outside: url(http://i.imgur.com/1JDs6NS.png); float:left;}
;shape-outside){kind=link}
::-webkit-scrollbar {width:0px; height:0px}
a:link, a:visited{color:; font-size:15px; font-family: garamond; text-transform: none;} a:hover{color:; font-size:15px; font-family: garamond; text-transform: none;}
b {color: ; font-family: garamond; font-size: 15px; font-weight: bold}
i {color: ; font-family: garamond; font-size: 15px}
u {color: ; font-family: garamond; font-size: 15px; text-decoration: underline}
</style>Aenean in nisl volutpat, dignissim dui sit amet, pretium mi. Etiam id rhoncus mi. Nunc viverra tortor vitae sapien viverra porta. Quisque vitae diam a velit rutrum laoreet. Etiam at tellus sed nisl luctus maximus. Morbi et nulla sed nulla lacinia venenatis. Vivamus tincidunt ligula vitae dignissim efficitur. Phasellus dignissim sed ante a convallis. Mauris auctor euismod luctus. Vestibulum mauris ante, mollis et lectus in, ultricies rhoncus quam. Donec volutpat risus at sem vestibulum tincidunt. Sed turpis tortor, vulputate eget porta quis, condimentum in augue. Cras porta rutrum lacus, nec fringilla lectus tincidunt et. Praesent sed nulla ipsum. Integer eget sapien non leo convallis ultricies.
Nulla ac mauris at enim blandit eleifend quis ac diam. Etiam mattis lobortis velit sed laoreet. Pellentesque facilisis bibendum aliquet. Donec tristique varius turpis, sit amet mollis sapien rutrum vulputate. Nulla facilisi. Nullam congue mi ligula, id vulputate tellus porta non. Cras rutrum pellentesque tempus. Cras purus tortor, tempus ac mollis sed, efficitur vel elit.
Curabitur ornare est sed tortor ornare, eu aliquet erat cursus. Maecenas facilisis, sapien in malesuada luctus, elit lorem pretium magna, eu tincidunt nisl dolor sit amet metus. Ut luctus turpis non aliquam pellentesque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent ullamcorper lectus sed est feugiat convallis. Vestibulum eu urna ac ante tempus ultricies. Etiam placerat imperdiet sollicitudin. Donec non arcu ornare, condimentum sapien ut, hendrerit nisl. Praesent urna tellus, pharetra sed malesuada et, dapibus ut leo. Aliquam facilisis volutpat metus non mattis. Sed sed gravida sapien. Donec efficitur metus in neque lobortis, in luctus lectus varius.
Sed eget est vel odio consequat sagittis. Nam urna nisl, tincidunt sed placerat vitae, aliquam sed augue. Aenean facilisis arcu nec faucibus consectetur. Nullam ac convallis ante. Cras facilisis vitae ligula et laoreet. Cras molestie tellus orci, quis luctus felis tristique sit amet. Praesent sollicitudin metus at tempor dapibus. Aenean imperdiet volutpat dolor, sit amet porttitor velit. In et lacinia tellus. Cras condimentum sollicitudin maximus.
Nam pharetra varius dui nec sollicitudin. Praesent suscipit erat non nibh euismod volutpat. Suspendisse malesuada dui diam, non luctus sapien ultricies ac. Nunc pretium, purus sed lacinia pharetra, diam libero tincidunt dui, at pharetra neque lectus sit amet enim. Phasellus non ligula lacinia, finibus urna at, rhoncus justo. Curabitur tortor metus, malesuada at feugiat nec, vehicula sed lorem. Ut blandit tempus ornare. Morbi vehicula ante nisl, eget pharetra arcu tincidunt at. Aliquam cursus mattis maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc efficitur mi non commodo malesuada.
quitting - non-cw version. sp and csc accepted. - it&;s finally happening: the ufa-ening.
You need to declare some kind of positioning for it to move, e.g. position: relative; if you want to move it from where it is currently or position: absolute; if you want to to move it in reference to its parent container.
Oh, duh, how could I miss that? Thank you!
quitting - non-cw version. sp and csc accepted. - it&;s finally happening: the ufa-ening.