Inner Voice (
inner_v0ice) wrote in
style_system2010-09-13 07:52 am
![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png)
Entry tags:
Help please? (Transmogrified) Wrapping text around userpic
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! ♥
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,
![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)

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! ♥
no subject
no subject
no subject