![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
inner_v0ice posting in ![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png){kind=small}
style_systemHi, 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,
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! ♥
no subject
Date: 2010-09-13 02:39 pm (UTC)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.
no subject
Date: 2010-09-13 05:45 pm (UTC)