SitePoint Sponsor |
|
User Tag List
Results 1 to 7 of 7
Thread: Image Layout for PhotoBlog
-
Sep 26, 2003, 02:13 #1
- Join Date
- Sep 2003
- Location
- Northampton, UK
- Posts
- 2
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Image Layout for PhotoBlog
I am currently developing a PhotoBlog at http://photos.salamandersoftware.biz, which displays an image thumbnail on the left and a description on the right. As a photoblog there are numerous entries one after the other in a list.
Commonly the description will only be one line or so, which leads to the problem: entries do not start themselves below the last image, they are below the last text block, giving a warterfall effect down the page
Can anyone recommend a way to fix this, please?
The CSS is at http://photos.salamandersoftware.biz/styles-site.css
-
Sep 26, 2003, 02:41 #2
- Join Date
- Apr 2003
- Location
- Bath, UK
- Posts
- 353
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
The problem is that the images are floated left and if there is room to fit the next blog entry beside it the it will. (If you make your broswer window narrow enough it will display as intended because there is not enough room to put the next entry beside the picture of the first entry).
What you need is a way of telling it that each entry must start of the left, luckily CSS has a way of doing this with the clear attribute
Try addingHTML Code:clear: left;
-
Sep 26, 2003, 02:46 #3
- Join Date
- Sep 2003
- Location
- Northampton, UK
- Posts
- 2
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by BenANFA
Any other ideas?
-
Sep 26, 2003, 02:55 #4
- Join Date
- Apr 2003
- Location
- Bath, UK
- Posts
- 353
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
OK, I am going to try something here however all is not lost, it just aint so simple
You could use absolute positioning for your left and right side bars, that is an extremely common 3 column layout. Additionally when you float things you are really supposed to specify a width which you don't for the left and right column.
I will post again shortly once I've had a chance to download your code and play.
-
Sep 26, 2003, 03:25 #5
- Join Date
- Apr 2003
- Location
- Bath, UK
- Posts
- 353
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
OK try the following style changes (I've only included styles that I have changed):
HTML Code:body { background: #FFFFFF; color: #111111; font-family: Verdana,Geneva,Lucida,Arial,Helvetica,Sans-Serif; margin: 0px; padding: 0px; font-size: 100%; } .blogbody { background: #FFFFFF; color: #333333; font-family: verdana, arial, sans-serif; font-size: small; font-weight: normal; line-height: 140%; padding-left: 10px; padding-right: 10px; padding-top: 10px; clear: left; } .date { position: relative; border: 1px solid #CCCCCC; color: #666666; font-family: verdana, arial, sans-serif; font-size: small; font-weight: normal; margin-bottom: 10px; padding: 5px; } #left-links { position: absolute; left: 0px; top: 7.8em; border-right: 1px solid #999999; padding-right: 5px; text-align: right; width: 210px; } #right-links { position: absolute; right: 0px; top: 7.8em; background: #FFFFFF; border-left: 1px solid #999999; padding-left: 5px; text-align: left; width: 210px; }
Also I am not sure that your layout is working too well at low screen resolutions (640x480) because very little space is left for the content column in the middle (maybe think about reducing the left hand side bar by half it's width and putting the pictures in there at 1/2 size).
-
Sep 26, 2003, 03:30 #6
- Join Date
- Sep 2003
- Location
- Northampton, UK
- Posts
- 2
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks very much, problem solved.
P.S. Given the target audience is pretty much my family, I'm ok about the low-res issue.
Thanks again.
-
Sep 26, 2003, 03:35 #7
- Join Date
- Apr 2003
- Location
- Bath, UK
- Posts
- 353
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I thought that might be the case
Best wishes to you all and feel free to show your appriciation by press the "Rate" button
Bookmarks