Help please? (Transmogrified) Wrapping text around userpic

[inner_v0ice]

Hi, all!
I know absolutely nothing about CSS (I'm sure you all love to hear that phrase...XD), and in a fit of insanity decided to make a CSS layout anyway, by engaging in extreme amounts of trial-and-error. You can see the layout on my journal now; it's basically Transmogrified with some superficial changes. (stylesheet, in case it helps)

I think I've finally reached the limit of what I can do with trial-and-error, so I turn to you kind folks now for help!


1) I managed to move the userpics down into the box with the text of the entry, but I don't know how to make the entry text wrap around the userpic instead of the userpic overlapping it.

Here's how the code for the userpic currently looks:

.entry-title, .comment-title { margin: 0; }
.has-userpic .entry-title, .has-userpic .comment-title { margin-right: 120px; }
.entry .userpic a, .comment .userpic a { right: 10px; left: auto; }
.entry .userpic a, .comment .userpic a {
display: table-cell;
position: absolute;
top: 10px;
width: 114px;
height: 114px;
text-align: center;
vertical-align: middle;
padding: 7px;
}
.entry .userpic img, .comment .userpic img {
border: none;
}


OLD PROBLEM SOLVED, NEW PROBLEM ACQUIRED:
changing the userpic from position: absolute to float: right gets the text to wrap around the userpic--thanks, sam_gardener!--but the userpic is now oddly low:



adding a float: left to the entry title like so:
.has-userpic .entry-title, .has-userpic .comment-title {float: left; margin-right: 120px; }
lets the userpic move up but the date & name of the poster interact with the two floating elements in a variety of bizarre ways:




...Halp?

Thanks in advance for any and all help that you can offer! ♥

Comments

Re: userpic

[arobynsung]

Maybe a margin around that userpic, so that it doesn't interfere with the text.
margin: 10px; should probably work.

Re: userpic

[inner_v0ice]

Umm, it doesn't seem to be working, sorry! (one possibility is that I just haven't figured out where in the code to put the margin: 10px; --I tried putting it in several places, but with no results.)

[sam_gardener]

Because the element is position: absolute putting a margin in won't help. Off the top of my head I don't know the best way to make this work - probably someone else will tell you before I figure it out. :)

If not I'll get back to you.

[matgb]

in a fit of insanity decided to make a CSS layout anyway, by engaging in extreme amounts of trial-and-error

I like you. That's what I did, learnt loads.

However, for me the challenge was to get the userpic out of the entry and into the header, in the end I edited the layer code.

Putting a margin around the image should work. If not, it'll need a bit more trial-and-error. I had a similar problem when I started, but I cannot remember if or how I resolved it, I think I went for a different solution as it was a symptom of a different problem anyway.

[sam_gardener]

Probably this will work:

change "position: absolute;" to "float: right;"

and then adjust margins to position it where you like best.

[inner_v0ice]

Thanks a lot, changing to float was definitely the key! I'm still having problems with the positioning--it's displaying oddly low now, ack!--but at least the text is now wrapping around it. *goes off to work on the positioning*

[inner_v0ice]

As I suspected, the entry title is somehow pushing down the userpic, which is why it's displaying so low. Here's what a change to "float: right" does in standard Transmogrified, where I can actually see what's going on with the boxes:



Any ideas? D:

[sam_gardener]

two things you could try:

change the margin-right to 0px below
.has-userpic .entry-title, .has-userpic .comment-title {float: left; margin-right: 120px; }

add the following margin
margin: -35px 10px 10px 10px;
to this
.entry .userpic a, .comment .userpic a {

[inner_v0ice]

Okay, the best results so far are from undoing the float: left; that I did to the entry title (going back to the original { margin-right: 120px; }) and adding the margin: -35px 10px 10px 10px; to the userpic.



It's not quite fixed yet, but from the way it looks now, a little more fiddling with that margin might do the trick. Thanks!! :D

[sam_gardener]

Yay! I wasn't sure the negative margin thing would work there.

In case you don't know this: (please don't be offended if you do)

the numbers stand for margin: top right left bottom; so a higher negative number like -50px should force it higher.

[sam_gardener]

the numbers stand for margin: top right left bottom;

ARGGH...
That should be: top right bottom left!

Sorry! noticed that was wrong right after I hit submit.

[inner_v0ice]

Whoops! Okay, I'll remember that that's the correct order. XD

Well, I just made the changes to the stylesheet, and my layout is working fine now! Thanks a lot, you've been super helpful in finding ways to fix my problems! :D

[sam_gardener]

Whoops! Okay, I'll remember that that's the correct order. XD

'Cause you never know when you might want to change your text margin another 10px to the left. *g*

You're welcome! I'm glad that was helpful since I'm mostly just fumbling around. I went and looked at your journal and the layout looks really nice, I'm impressed. :)

[matgb]

Despite knowing it's clockwise from top, I can never remember it when I'm actually coding, several of my styles end up with margin-top, margin-left, etc just because I can't get it wrong. Waste of code bandwidth, but at least it's right...

But yeah, that works, I should've twigged the absolute issue, that's exactly what I did wrong initially, but it was a year ago.

[sam_gardener]

Yeah, I have difficulty remembering things from a day ago, never mind a year. :)

[inner_v0ice]

Yay indeed! Thanks for your help! :D

I'm not offended at all; I did not know that "top right left bottom" was the syntax of those numbers. I sort of guessed that upping it from -35px to -50px would drive it higher, but that's just from my experience with the trial-and-error method of working with CSS. XD So thanks for explaining the actual technicalities behind what I'm fiddling with. ♥

[sam_gardener]

adding a float: left to the entry title like so:
.has-userpic .entry-title, .has-userpic .comment-title {float: left; margin-right: 120px; }
lets the userpic move up but the date & name of the poster interact with the two floating elements in a variety of bizarre ways:

I didn't notice that you had put that up! (I'm not very observant)
try changing the "float:left;" to "clear:both;"

[inner_v0ice]

Hmm, nope, the "clear:both;" doesn't seem to have any effect, it looks the same as if it were just {margin-right:120px;}.

[baggyeyes]

I like what you did with your journal style.

[matgb]

I also, if the background and stuff is original, would be nice to see that available within the style brower. Wouldn't suit me, but would suit some friends I think.