[personal profile] inner_v0ice posting in [community profile] style_system
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, [personal profile] 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! ♥

Re: userpic

Date: 2010-09-13 12:50 am (UTC)
arobynsung: (white collar)
From: [personal profile] arobynsung
Maybe a margin around that userpic, so that it doesn't interfere with the text.
margin: 10px; should probably work.

Profile

Dreamwidth style system discussion

October 2025

S M T W T F S
   1 234
567891011
12131415161718
19202122232425
262728293031 

Page Summary

Style Credit

Expand Cut Tags

No cut tags
Page generated Oct. 23rd, 2025 09:31 pm
Powered by Dreamwidth Studios