/    Sign up×
Community /Pin to ProfileBookmark

Alignment gone wrong

Hi

Please can anyone look at my code and tell me why the bottom two images have gone out of sync?

[url]http://www.whizzliz.co.uk/funkreations/gallery.php[/url]

Cheers
Liz

to post a comment
CSS

9 Comments(s)

Copy linkTweet thisAlerts:
@DaveSWFeb 09.2007 — Without looking too closely, I'd guess you've floated all your images, and fairy is slightly shorter than the other three in the row, hence the giraffe has caught on the bottom edge of it...

Now that's one very strange sentence, but I guess you get the drift!

To fix it you just need to make sure the fairy is the same height as the monkey and cow face.
Copy linkTweet thisAlerts:
@DaveSWFeb 09.2007 — yes the fairy is officially 3px shorter ?
Copy linkTweet thisAlerts:
@CentauriFeb 10.2007 — This sort of layout only works properly when the height of all objects are equal, and as Dave has said, the 3px diffence causes the next line to snag.

Apart from that, you need to seriously look at optimising the pictures, as they are far too large byte-wise. As your "thumbnails" are the actual full size pictures reduced in size, the whole page is slow to load on a broadband connection, and would be absolutely painful for people with dialup connections. As an example, the tortoises.gif file is about 115k, but is easily reduced to 30k as an optimised jpg file. Attention to page download times means a lot to visitors to the site.

Cheers

Graeme
Copy linkTweet thisAlerts:
@LizzyBauthorFeb 10.2007 — Thank you both of you. That makes sense. Ive got round it by popping in a BR clear both.

Graeme - thanks for the tip on the image size. I thought i was saving bandwidth on my hosting provider by just using one version of each image but what you say about the page loading would be right. Ill make some thumbnails.

Cheers

Liz
Copy linkTweet thisAlerts:
@CentauriFeb 10.2007 — You don't have to make thumbnails - just optimise the pictures that are there. Convert them all to jpg files, and run them through Photoshop's "Save for Web" feature and play with the quality slider to get a good compromise between file size and visual quality. I usually consider anything bigger than 35k too big.

Cheers

Graeme
Copy linkTweet thisAlerts:
@LizzyBauthorFeb 10.2007 — Thanks Graeme but they all pop up to the larger size so surely I need two different sizes?
Copy linkTweet thisAlerts:
@CentauriFeb 10.2007 — I think you may be getting file size and physical size mixed up. There is no need to vary the displayed sizes of the graphics at all, just optimise the existing graphics to reduce the file size without affecting displayed size. As the thumbnails will most likely be clicked anyway, the existing method of contraining the larger graphic for use as the thumbnail is fine as long as it is not too slow to load.

Cheers

Graeme
Copy linkTweet thisAlerts:
@LizzyBauthorFeb 10.2007 — Thanks Graeme - I understand.

Liz?
Copy linkTweet thisAlerts:
@WebJoelFeb 10.2007 — Yeah, -that site does take awhile to load eh?

[upl-file uuid=25187306-a340-4ab2-9048-cd84030a0d69 size=39kB]ScreenHunter_3.jpg[/upl-file]
×

Success!

Help @LizzyB spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...