SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member derek-lakin's Avatar
    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

  2. #2
    SitePoint Addict BenANFA's Avatar
    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 adding
    HTML Code:
    clear: left;
    to you blogbody style.

  3. #3
    SitePoint Member derek-lakin's Avatar
    Join Date
    Sep 2003
    Location
    Northampton, UK
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BenANFA
    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 adding
    HTML Code:
    clear: left;
    to you blogbody style.
    I found this whilst debugging and testing and thought I'd got it cracked. Unfortunately, the sidebars use float: left/right, so setting the blogbody style to clear: left causes the blog entries to start at the bottom of the sidebars

    Any other ideas?

  4. #4
    SitePoint Addict BenANFA's Avatar
    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.

  5. #5
    SitePoint Addict BenANFA's Avatar
    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;
    }	
    I have to point out that I have only been able to try this out in IE6 on Win2k so you may wish to test it in other broswers.

    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).

  6. #6
    SitePoint Member derek-lakin's Avatar
    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.

  7. #7
    SitePoint Addict BenANFA's Avatar
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •