chrometweaks.org

iPage web host with 50mysql, 100 emails, etc?

Click Here To View All Answers...


Got a quick question: iPage web host with 50mysql, 100 emails, etc? Thanks for any answer. My other question... OK, I'm trying to create a layout of individual boxes on a page that roughly fits the screen size at whatever resolution the user is at, but without using scripting.. I have it 95% sorted, but I can't work out how to centre the boxes to the page!.

Here's the page in question:.

Polar Bear Gallery.

Any ideas?.

Thanks in advance....

Comments (34)

Good question... I dunno what is the answer to your question. I'll do some poking around and get back to you if I got an useful answer. You should email the people at iPage as they probably can help you..

Comment #1

First off, take the align="center" out of the <tr...>.

Try putting a <div align="center"> before your table tag and </div> after your </table> tag..

Comment #2

Hi Karinne, thanks for the suggestion - duly updated, but (unfortunately) that didn't do it either! Is there something I should add to my stylesheet perhaps? More suggestions welcomed..

Comment #3

Legwon: Are you talking about the <div align="center"> that I just added?..

Comment #4

Lan, can you show us your stylesheet? You may have a style conflicting with another...

Comment #5

Check it out..

HTML:.

Http://validator.w3.org/check?uri=ht...ne=1&verbose=1.

CSS:.

Http://jigsaw.w3.org/css-validator/v...pr ofile=css2.

All valid stuff, but is there a clash somewhere?..

Comment #6

Giz: I knew it validated, but thanks for testing that again.

On the subject of clashing there are no left alignments in the CSS with the exception of the float declarations - and they're required to make the boxes flow next to each other rather than sticking themselves in the middle of the page....

Comment #7

Legwon: Tested it locally, unfortunately removing that div tag made no difference.. Thanks for the suggestion though..

Comment #8

Ummmm....

Try puting:.

<table border=0 align=center width=95%> ( or 100% is you want it to fit the browser window completely horizontally )..

Comment #9

Ucm: Good idea, but although the table is centered the contents still aren't - that float left seems to be the problem.. 95% works beautifully at the resolution I'm using, but it starts to get a bit grim at 640x480!.

More suggestions still wanted! Ideally for fixing this, but if you have any idea how to do the layout differently I'm open to ideas....

Comment #10

Try modifying all tr's and td's like so:.

<tr valign=center>.

<td align=center>..

Comment #11

Ucm: There are only one of each.. Tried it, didn't make any difference! Thanks though..

Comment #12

Also, try making the browser size=1280, then you'll see the 3rd row is missing the first 2x images...I have no idea why either lol....

I've tried d/l'ing your page and css code and playing around with it for a while here and have not yet found a solution for you....

I have a couple ideas and will try them out when I can, I'll try 1 right now and keep you posted.....

Comment #13

There is a simple cure for your problem. You have made problems for your self with your table layout. Will post as soon as I get home in the morning with some markup for you. A bit busy at work right now, hope you can wait..

By the way, are these your photos... they are great...

Comment #14

Ok quite simple when I got home..

You have told the div's to span left in your style sheet. Change this to center to have them arrange that way. You are of course then left with another problem of the pics all being in one column... working on that one now...

Comment #15

A a Okie Dokey... Ignore last post float center is not a valid tag. I had a good butchers at it and think I have come up with what you want..

You already had a table set up in your markup... so I have just edited it a little to get a bit more control. If you intend to use a little text to the right of each image then using all the mages inside one <td> is not a wise idea. If however this isnt your plan then using a table like the one I have done for you is a better idea..

Something else I would suggest is the width setting in css for the DIVS... you have these set at 273px. Now it looks like you planned the design to be viewed at a min res of 800px width. Correct me if I am wrong. The sum of 3 images per line at this would = 819px. Above what is a safe setting for total design concepts by 69px.



I would consider looking at a DIV setting of about of about 220 to 230px. This will still give you a fair bit of border and will allow your iPage site to be viewed across a wider range of platforms the way you intend it to look..

Anyway here is my suggested html for your site. Forgive me for doing a little housework on it but it is the only way I can work with HTML..

Debated this but I have added it as code so you can see the layout clearer. I know it screws up the layout of this page... but here ya go..

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">.

<HTML>.

<HEAD>.

<TITLE>Adrian's Polar bear images page</TITLE>.

<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">.

<LINK href="Adrian's Polar bear images page_files/gallery.css" type=text/css rel=STYLESHEET>.

<META content="MSHTML 6.00.2600.0" name=GENERATOR>.

</HEAD>.

<BODY vLink=#0000dd aLink=#0000dd link=#0000dd>.

<SCRIPT language=JavaScript.

Src="Adrian's Polar bear images page_files/images.js".

Type=text/javascript></SCRIPT>.

<P><IMG height=70 alt="Polar bear gallery, by Adrian J Warren - images need to be turned on to view" src="Adrian's Polar bear images page_files/polarbear.png" width=537 border=0></P>.

<P><EM>Please left-click on any image to enlarge it</EM></P>.

<table width="100%" border="0">.

<tr>.

<td><DIV class=vthumb><a href="javascript.

:openImage('rtwlarge/lg2n1PBtrek33_26.jpg',700,465,'Polar%20bears%20walking%20across%20the%20tundra,%20Churchill,%20Manit oba,%20Canada')"><img height=133 alt="Left-click to enlarge" src="Adrian's Polar bear images page_files/sm2n1PBtrek33_26.jpg" width=200 border=3></a></DIV></td>.

<td><DIV class=hthumb><a href="javascript.

:openImage('rtwlarge/lgPBS33_1.jpg',365,550,'What%20are%20you%20looking%20at? Polar bears, Churchill, Manitoba, Canada')"><img height=200 alt="Left-click to enlarge" src="Adrian's Polar bear images page_files/smPBS33_1.jpg" width=133 border=3></a></DIV></td>.

<td><DIV class=hthumb><a href="javascript.

:openImage('rtwlarge/lgPBnBuggy29_34.jpg',364,550,'Is%20this%20lunch? Churchill, Manitoba, Canada')"><img height=200 alt="Left-click to enlarge" src="Adrian's Polar bear images page_files/smPBnBuggy29_34.jpg" width=132 border=3></a></DIV></td>.

</tr>.

<tr>.

<td><DIV class=hthumb><a href="javascript.

:openImage('rtwlarge/lg2PBS36_7.jpg',365,550,'Polar%20bears,%20Churchill,%20Manitoba,%20Canada')"><img height=200 alt="Left-click to enlarge" src="Adrian's Polar bear images page_files/sm2PBS36_7.jpg" width=133 border=3></a></DIV></td>.

<td><DIV class=hthumb><a href="javascript.

:openImage('rtwlarge/lgPB32_31.jpg',365,550,'Polar%20bear%20stretching,%20Churchill,%20Manitoba,%20Canada')"><img height=200 alt="Left-click to enlarge" src="Adrian's Polar bear images page_files/smPB32_31.jpg" width=133 border=3></a></DIV></td>.

<td><DIV class=hthumb><a href="javascript.

:openImage('rtwlarge/lgPB32_17.jpg',365,550,'Polar%20bear,%20Churchill,%20Manitoba,%20Canada')"><img height=200 alt="Left-click to enlarge" src="Adrian's Polar bear images page_files/smPB32_17.jpg" width=133 border=3></a></DIV></td>.

</tr>.

<tr>.

<td><DIV class=vthumb><a href="javascript.

:openImage('rtwlarge/lgPBfamilyTrudge34_16.jpg',700,464,'Are%20we%20there%20yet? Polar bears, Churchill, Manitoba, Canada')"><img height=133 alt="Left-click to enlarge" src="Adrian's Polar bear images page_files/smPBfamilyTrudge34_16.jpg" width=200 border=3></a></DIV></td>.

<td><DIV class=vthumb><a href="javascript.

:openImage('rtwlarge/lgPBfamilyPeek37_26.jpg',700,466,'Polar%20bear%20cub%20peeks%20out%20from%20under%20mother.%20Church ill,%20Manitoba,%20Canada')"><img height=133 alt="Left-click to enlarge" src="Adrian's Polar bear images page_files/smPBfamilyPeek37_26.jpg" width=200 border=3></a></DIV></td>.

<td><DIV class=vthumb><a href="javascript.

:openImage('rtwlarge/lgPBfamilyHC37_28.jpg',700,466,'Polar%20bears,%20Churchill,%20Manitoba,%20Canada')"><img height=133 alt="Left-click to enlarge" src="Adrian's Polar bear images page_files/smPBfamilyHC37_28.jpg" width=200 border=3></a></DIV></td>.

</tr>.

<tr>.

<td><DIV class=vthumb><a href="javascript.

:openImage('rtwlarge/lgPBfamilyDrink37_35.jpg',700,465,'Polar%20bear%20family%20drinking,%20Churchill,%20Manitoba,%20Cana da')"><img height=133 alt="Left-click to enlarge" src="Adrian's Polar bear images page_files/smPBfamilyDrink37_35.jpg" width=200 border=3></a></DIV></td>.

<td><DIV class=vthumb><a href="javascript.

:openImage('rtwlarge/lgPBfamilyConga34_15.jpg',700,464,'Polar%20bears%20doing%20the%20conga!%20Churchill,%20Manitoba,%20C anada')"><img height=133 alt="Left-click to enlarge" src="Adrian's Polar bear images page_files/smPBfamilyConga34_15.jpg" width=200 border=3></a></DIV></td>.

<td><DIV class=vthumb><a href="javascript.

:openImage('rtwlarge/lgPBfamily37_9.jpg',700,464,'Polar%20bears,%20Churchill,%20Manitoba,%20Canada')"><img height=133 alt="Left-click to enlarge" src="Adrian's Polar bear images page_files/smPBfamily37_9.jpg" width=200 border=3></a></DIV></td>.

</tr>.

<tr>.

<td><DIV class=vthumb><a href="javascript.

:openImage('rtwlarge/lgPBfamily36_34.jpg',700,464,'Did%20you%20see%20that?! Polar bears, Churchill, Manitoba, Canada')"><img height=133 alt="Left-click to enlarge" src="Adrian's Polar bear images page_files/smPBfamily36_34.jpg" width=200 border=3></a></DIV></td>.

<td><DIV class=vthumb><a href="javascript.

:openImage('rtwlarge/lgPBcub35_27.jpg',700,464,'1yr%20old%20Polar%20bear%20cub,%20Churchill,%20Manitoba,%20Canada')"><img height=133 alt="Left-click to enlarge" src="Adrian's Polar bear images page_files/smPBcub35_27.jpg" width=200 border=3></a></DIV></td>.

<td><DIV class=vthumb><a href="javascript.

:openImage('rtwlarge/lgPBcloseup34_3.jpg',700,465,'Polar%20bear%20closeup,%20Churchill,%20Manitoba,%20Canada')"><img height=133 alt="Left-click to enlarge" src="Adrian's Polar bear images page_files/smPBcloseup34_3.jpg" width=200 border=3></a></DIV></td>.

</tr>.

<tr>.

<td><DIV class=vthumb><a href="javascript.

:openImage('rtwlarge/lgPB33_36.jpg',700,465,'Polar%20bear%20going%20for%20a%20walk,%20Churchill,%20Manitoba,%20Canada')"> <img height=133 alt="Left-click to enlarge" src="Adrian's Polar bear images page_files/smPB33_36.jpg" width=200 border=3></a></DIV></td>.

<td><DIV class=vthumb><a href="javascript.

:openImage('rtwlarge/lg3PBfamily34_25.jpg',700,465,'Polar%20bears%20resting,%20Churchill,%20Manitoba,%20Canada')"><img height=133 alt="Left-click to enlarge" src="Adrian's Polar bear images page_files/sm3PBfamily34_25.jpg" width=200 border=3></a></DIV></td>.

<td><DIV class=vthumb><a href="javascript.

:openImage('rtwlarge/lg2PBsLookatBuggy30_27.jpg',700,464,'Does%20that%20look%20flat%20to%20you? Polar bears and buggy, Churchill, Manitoba, Canada')"><img height=133 alt="Left-click to enlarge" src="Adrian's Polar bear images page_files/sm2PBsLookatBuggy30_27.jpg" width=200 border=3></a></DIV></td>.

</tr>.

</table>.

<P>&nbsp;</P>.

<P><EM>Please left-click on any image to enlarge it</EM> </P>.

<P><A href="http://www.fluffygryphlets.btinternet.co.uk/lan/images.htm"><IMG height=34 alt="Return to Main Gallery" src="Adrian's Polar bear images page_files/back.png" width=282 border=4> </A></P>.

<P>All images and content Adrian J Warren 2001-2003,<BR><SMALL>no reproduction without the prior written authorization of the copyright holder..</SMALL></P>.

</BODY>.

</HTML>.

Any questions then just fire away. Hope that helps.an..

Comment #16

Ucm: Thanks, let me know if you find a solution.

The missing images are due to some of the pictures not being exactly the same size - if I set the image properties to 200x133 then they move to the bottom as expected! No idea why though...

Entimp: Thanks for your hard work! Glad you like my photos.

I like your layout, but the fixed width table you've created defeats the reason I was using <div> to do my layout - namely so that the boxes would flow into any browser resolution. I designed it to work two columns at 640, then four at 1280. I could use float left and float right, but that doesn't work with different resolutions either!..

Comment #17

No problem. I was wrong on the css alignment for the float. 3 options exist... left, right, or none..

Still not exactley sure want you want to achieve, but it would seem you want to dynamically align your images depending on the browser res. Being the wider it is the more pics you want to have per row. Thus a fixed table as you point out wont do this..

The only way I can see you getting round this is with a script (but I doubt you will find one) or playing with the alignment. align="justify" might work out with some tweaking might do this for you. I am going to have another play with it in the morning. I want to set up a gallery of my pics at some point down the line..

Thus if you have a moment I would like to ask you about a camera I want to buy. Fuji S2pro, a lot of money and would like some pro advice..

Will get back to when I have a solution anyway...

Comment #18

Thanks entimp! Tried float none and I just get a single column containing one image per row...

You do understand what I'm after.

On the S2pro: Do you have any Nikon lenses already? If so it's a good option, otherwise consider the Canon EOS10d. There's also the Pentax "*ist D". The one I want is the Canon EOS1Ds, but that's so far outside my financial reach at the moment.....

Comment #19

The only thing stopping me from buying a S2 pro is the memory storage. Smart Media will only go to 128, a microdrive to 1 gig... microdrives are a little fragile in the field. So am stuck with the smartmedia card option. Have used a few fuji digi cams and will stay with them due to qual of image..

Whta annoys me is fuji now release XD format which I hear will go as far as 8 gig one day. Why couldn't fuji have included this instead of smart media!!!!!!!.

Not entirely sure yet...

Comment #20

You do realise that you can get 1Gb flash based CF cards already (not just Microdrives), and that 4Gb have been announced? Check that the S2pro supports cards >2Gb.

This is probably going to be useful for you:.

CF cards tested on S2pro..

Comment #21

Good iPage site with loads of info that I have been looking for... thanks for the url. For your Polar Bear pics what did you use if you don't mind me asking?..

Comment #22

All the Polar bear shots were taken with a Canon EOS30 (aka Elan7E), using either Canon 28-135 IS USM, or Canon 200 f2.8 LII (with or without Sigma 1.4x EX teleconverter). Film used was Fuji Provia 100F..

Comment #23

A Have had a few thoughts on the page and will get back to you soon on them... have to catch some z's as I have been working on this thread (.

Http://www.htmlforums.com/showthread...596#post143596.

) and yours. What you want can't be done at CSS level 1. I will elaborate later...

Comment #24

>>.

I knew it validated, but thanks for testing that again.

<<.

It is also the easiest way of posting a link that shows the source code without having to copy the whole code into a forum message...

Comment #25

Giz: What's wrong with doing View/Source? I agree that anything's better than c'n'p.

Ing.

A whole page of source though.

Entimp: Any more thoughts? I tried adding an extra column to the table to see if either an added percentage or fixed pixel column would fix things - unfortunately it didn't....

Comment #26

I will get back to you with 12 hours of this msg... prob around 11am uk time...

Comment #27

Okie... I have played with it some more. What it all boils down to is the floating of the images. By floating the image to the left to force the images to line up the way you want you will never be able to center them. Even by enclosing them inside a dynamic table..

I see what you want to do... but the only way to force them to center is by having a fixed width table. But if you had to do this I would revert to my original layout of a fixed table that I suggested..

I can see ways of doing what you want tho. It is a case of trying to understand how CSS actually affects the browsers ability to lay the stuff out. I tried insrting the images inside individual tables. I can then get the tables to act like inline elements and line up next to each other. But they won't create a line break when reaching the far right of the screen and thus create a horizontal scroll bar..

I am interested in this and am still working on a few ways like this to achieve the desired results. If anything so I can do this in the future..

For the mean time I can only say there is no way of doing what you want... centering these images and having them dynamically layout depending on screen res... with the float attribute..

As mentioned I think it will be a case of making a browser render an element in a way that isn't native to it with some css..

Will let you know if I come up with anything..

Is it really that bad to have a fixed layout table. At the end of the day 80%+ of your punters are going to be viewing at 800*600 or at one step up from that...

Comment #28

Thanks Entimp.

I'll be sure to post if I crack the problem, and I'll check in here occasionally to see if you manage it before me!.

Incidentally the reason I really want to do this is that I'm running at 1280x1024, and yet many sites aren't even taking up half my screen.. I shudder to think what those people running at 1600x1200 think about that kind of design..

Comment #29

Who's the DADDY I'm the DADDY!!!!!!!!.

Cracked it!!!!!.

Ok. Just sorted your problem out. I was close to it yesterday. So I worked a little more on it...In fact I had it sorted yesterday but something was screwing it up. Will explain and post the markup and CSS..

Ok it all boils down to making tables go inline instead of block level. So I did this and put a parent table (block level) around them. For some reason the parent table would not let the child tables make a return of carriage or break at the far right of the screen. So I removed the parent table and frickin thing now works. Yay... another swig of beer...



Ok when you view the code you will have to change the src for the images. I had to save your web page to test this and it changes the src when you do this..

I have included two new class selectors for your CSS: table.inline and p.thcenter that will need to be included..

Ok I have just fixed all the SRC links so you should be able to just copy and paste all the code over the original. Hopefully I haven't missed any.a.

Ok here is your new CSS... I can't upload css... could do as text but you can copy and paste this:.

Start:.

BODY {.

Font-weight: normal;.

Font-size: 10pt;.

Color: #ffffff;.

Font-style: normal;.

Font-family: Tahoma, Verdana, sans-serif;.

Background-color: #000033;.

Text-align: center;.

}.

DIV.highlight {.

Padding-right: 1em;.

Padding-left: 1em;.

Padding-bottom: 1em;.

Margin-top: 5px;.

Margin-bottom: 5px;.

Margin-right: auto;.

Width: 560px;.

Color: #ffffff;.

Border-top-style: none;.

Border-right-style: none;.

Border-left-style: none;.

Border-bottom-style: none;.

Padding-top: 1em;.

Height: 163px;.

Background-color: #000066;.

Text-align: center;.

}.

DIV.hthumb {.

Padding-bottom: 37px;.

Margin: 8px;.

Width: 273px;.

Color: #ffffff;.

Border-top-style: none;.

Border-right-style: none;.

Border-left-style: none;.

Border-bottom-style: none;.

Padding-top: 37px;.

Background-color: #000066;.

Text-align: center;.

}.

DIV.vthumb {.

Padding-bottom: 70px;.

Margin: 8px;.

Width: 273px;.

Color: #ffffff;.

Border-top-style: none;.

Border-right-style: none;.

Border-left-style: none;.

Border-bottom-style: none;.

Padding-top: 70px;.

Background-color: #000066;.

Text-align: center;.

}.

Table.inline {.

Display: inline;.

}.

P.thcenter {.

Text-align: center;.

}.

DIV.normal {.

Clear: none;.

Display: block;.

Float: none;.

Width: 100%;.

Color: #ffffff;.

Border-top-style: none;.

Border-right-style: none;.

Border-left-style: none;.

Border-bottom-style: none;.

Background-color: #000033;.

Text-align: center;.

}.

EM {.

Font-weight: normal;.

Font-size: 10pt;.

Color: #ffffff;.

Font-style: normal;.

Font-family: Tahoma, Verdana, sans-serif;.

Background-color: #000011;.

Text-align: center;.

}.

P {.

Text-align: center;.

}.

:end.

Ok hope that saves a load of work or you... been a learning curve for me..

Oh the HTML, nearly forgot to post that....

Let me know what you think and if it works...

Comment #30

Sorry the html upload seems to download strange... so here it is in text. Just copy and paste this...

Comment #31

Entimp: You're a god! Thankyou!.

Works perfectly under IE5.5 and Mozilla 1.2.1, but not under Opera7 - I'll have a go and see if I can work out why!.

<looks for a worshipping smiley>.

THANKYOU!!..

Comment #32

Probably because Opera is a little buggy with CSS. What I have done here is not technically valid but it works..

My guess is that you will have to wait for CSS 2.0 to be fully supported for it to work in Opera. CSS 2.0 has a legit function to make Tables act inline..

Another Happy Bunny maybe I should think of a Super Hero name... As I move from forum to forum defending the .... Ummm.

Glad it worked...

Comment #33

Just had a look at your 3 image galleries. They look nice in that format... some great photos as well....

Do you use the forum at robgalbraith? If so what user name? I might have to ask you a question or two in the future over some camera questions..

Anyway... Nice work there...

Comment #34

Thanks Entimp!.

I browse RobGalbraith from time-to-time, but I'm not a regular over there. I've added an email address (graphical form) to the pages now, so feel free to contact me on that.

Thanks again for your help!..

Comment #35


This question was taken from a support group/message board and re-posted here so others can learn from it.