holmedwa04

Hi All I am creating a website for my local dive club and I am struggling to position the images on a page correctly. On the committee page I would like to be able to position the text for one member on the left and their image on the right. Then for the next committee member the opposite way around. Now I can think of a really simple way of doing this using tables but I understand that you aren't really supposed to use tables for positioning things and I am trying to get my head around how to use divs correctly. I am sure it is just some really simple code that needs changing. This is the CSS that I am using: /* Left and right images */div.left img{float:left;}div.right img{float:right;}div.left {width:100%px;display:block;text-align:justify;}div.right {width:100%;display:block;text-align:justify;} Then this is the HTML: <div class="main"><h1>The Committee</h1> <div class="left"><h2>David Lymer - Chairman</h2><img src="images/Roland Smith.jpg" width="320" height="240"><p>Donec nisi elit, semper sed luctus vel, porta eu ligula. Vestibulum eget nisi sit amet felis pharetra mattis nec ac ligula. Mauris erat neque, congue non adipiscing at, blandit nec massa. Donec interdum dui ac dui bibendum mattis. Integer pretium ultricies ligula sed tincidunt. Curabitur porttitor pretium laoreet. Aenean viverra libero id erat rhoncus pellentesque. Cras sed turpis vitae sem pretium pulvinar. Suspendisse ac libero sed sapien lacinia suscipit ut non diam. Etiam sit amet diam justo, ac dictum felis. Aenean condimentum rutrum libero, eu varius elit dapibus nec. Donec a nunc in ipsum hendrerit ultricies eu sit amet ipsum.</p></div><div class="right"><h2>Maggie Surrage - Diving Officer</h2><img src="images/Maggie Surrage.jpg" width="320" height="240"><p>Maggie first learnt to dive on holiday in Tobago, but after joining Stafford BSAC in 1995 she became hooked on UK diving. She is an Advanced Diver, an Open Water Instructor and Trimix qualified. She has recently become a re-breather diver.</p><p>She is a keen wreck diver and her favourite sites include; Salsette (Lyme Regis), Somali (Seahouses) and U12 (Eyemouth).</p><p>She also enjoys diving with the seals off the Farne Islands, scenic sites such as Hand Deeps (Plymouth) and scalloping.</p></div><div class="left"><img src="images/Sebastien Danneels.jpg" width="320" height="240"><h2>Sébastien Danneels - Training Officer</h2><p>Seb learnt to dive in France in the early 1990’s whilst at University. He then crossed the channel and also to BSAC in the late 1990’s. He enjoyed diving as a Sports Diver for 10 years and in 2009, he qualified as Dive Leader and became an Open Water Instructor in 2011.</p><p>His favourite UK dive sites include; James Eagle Lane (Plymouth), Kyarra (Swanage), Shuna (Oban) and Dresden (Scapa Flow).</p><p>His favourite international dive sites include; Similan Islands (Thailand), Speyside (Tobago), Tioman Island (Malaysia) and Marsa Shagra (Red Sea).</p><p>Seb is happy with any type of diving, as being underwater makes him happy. He very much enjoys coxing the club’s RHIB.</p></div></div><!-- end .main --> Any help would be greatly appreciated. Looking forward to hearing from someone Kind Regards Edward

Hi Labby, Thanks for your reply. I have temporarily uploaded the site to some different hosting and this seem to of done the trick http://www.goathlandrailway,co.uk Got a custom 404 error page working too Kind Regards Ed

Thanks, I will give that a go when I get home from work this evening. Thinking back a very long time ago I seem to recall someone mentioning something about the .htaccess and a URI maybe?Kind RegardsEd

Hi All I know this seems like a really stupid question, but I am having trouble with relative references. I have a website that I am developing: http://www.staffordscuba.co.uk/test Eventually when the new site is out of test I will move it into the default directory and out of the test folder. I am using php includes for the header, footer and left bar. If I use a reference in a php include like "images/icons/youtube.png" it will work on the index page but not on say... "about_us/faqs.php" If I use a reference like "/images/icons/youtube.png" it won't work one either the site index or the faqs. Any help will be greatly appreciated. Kind Regards Ed

Try using this, my knowledge of CSS is limited but this has worked for me before: p {margin: auto;} This would do it for something in a paragraph but can be done for anything from divs to images etc.

That doesn't work for me either, but I am using IE6. But how come other sites have had them for years whilst IE6 was out and before and never had problems?

No Sorry, not really, I am using 0's as retainers to make sure that the cells that appear to be empty stay the exact size, the only problem is is that it still prints the white text. Andf so I am trying to put a white picture in there to hold it to the right size but stop it from printing.I have just added the border so that I could see where the edge of the image is.

Hi,It is a long time since I have been online but I really need some help and so I must post this!I have been creating Sudokus and it is only now when I have made 28 that I realise when you click on print the white text used as spacers will print! I have tried but this mess' up all of the spacings so it must be a number. So I set it to white but obviousl it still prints. The only way round this that I can think of is using an image that is the correct size. The only problem is I am having trouble making the cell padding work properly.This is a screen shot: This is my stylesheet coding: a:link { color:#0000ff; text-decoration:none; }a:visited { color:#0000ff; text-decoration:none; }a:hover { color:#006633; text-decoration:underline overline; }a.2:link { color:#0000ff; text-decoration:none; font-weight:bold; }a.2:visited { color:#0000ff; text-decoration:none; font-weight:bold; }a.2:hover { color:#006633; text-decoration:underline overline; font-weight:bold; }a.3:link { color:#000000; text-decoration:none; }a.3:visited { color:#000000; text-decoration:none; }a.3:hover { color:#006633; text-decoration:underline overline; }a.4:link { color:#ff0000; text-decoration:none; }a.4:visited { color:#ff0000; text-decoration:none; }a.4:hover { color:#006633; text-decoration:underline overline; }a.5:link { color:#006633; text-decoration:none; }a.5:visited { color:#006633; text-decoration:none; }a.5:hover { color:#006633; text-decoration:underline overline; }body { scrollbar-3dlight-color:#000000;scrollbar-arrow-color:#FFFFFF;scrollbar-base-color:#000033;scrollbar-darkshadow-color:#000000;scrollbar-face-color:#000066;scrollbar-track-color:#000099;scrollbar-shadow-color:#000033; }body {font-family:arial;color:black;font-size:12pt;}td {font-family:arial;color:black;font-size:12pt;}td img {display: block;}#grid{border:3px solid #000;}#grid td{padding:0px; border:1px solid #000; width:120;text-align:center;}#grid td.rcell{border-bottom:0px; padding:0px; width:120px; text-align:center;}#grid td.ncell{border-right:0px;border-bottom:0px; padding:0px; width:120px; text-align:center;}#grid td.bcell{border-right:0px; padding:0px; wodth:120px; text-align:center;}#grid td.xcell{border:0px;padding:0px; padding:0px; width:120px; text-align:center;}p { padding:0; margin:0; }p.n { padding:0; margin:0; color:white; }p.a { color:red; font; } ...And this is my page coding: <html><head><title>Sudoku Puzzle 28 (Hard)</title></head><LINK rel="stylesheet" type="text/css" href="sudokustylesheet.css"><body bgcolor="#000066" link="blue" vlink="blue"><font size="3"><font face="Arial"><font color="black"><center><table border="0" cellpadding="100" cellspacing="0" width="85%" bordercolor="#000000" bgcolor="#FFFFFF"><tr><td><BR><font size="5"> <center><b><u>Sudoku Puzzle 28 (Hard)</u></b><BR><BR></center><font size="2">You know the score, make sure that there is the numbers 1 - 9 in every row, column and 3 x 3 grid! Once you have finished,check your answers by clicking the back button at the bottom of this page and click the small A on the right to theappropiate puzzle.<BR><BR><BR><BR><center><table id="grid" cellspacing="0" cellpadding="0" width="120" height="120"> <tr> <td class="xcell"> <table cellspacing="0" cellpadding="0" width="120" height="120"> <tr> <td class="ncell"><p class="n"><img width="9" border="1" height="9" src="../images/white.gif"></p></td> <td class="ncell"><p class="n">0</p></p></td> <td class="rcell"><p class="">7</p></td> </tr> <tr> <td class="ncell"><p class="">5</p></td> <td class="ncell"><p class="n">0</p></td> <td class="rcell"><p class="n">0</p></td> </tr> <tr> <td class="bcell"><p class="n">0</p></td> <td class="bcell"><p class="">3</p></td> <td><p class="n">0</p></td> </tr> </table> </td> <td class="xcell"> <table cellspacing="0" cellpadding="0" width="120" height="120"> <tr> <td class="ncell"><p class="n">0</p></td> <td class="ncell"><p class="">4</p></td> <td class="rcell"><p class="n">0</p></td> </tr> <tr> <td class="ncell"><p class="n">0</p></td> <td class="ncell"><p class="">2</p></td> <td class="rcell"><p class="n">0</p></td> </tr> <tr> <td class="bcell"><p class="">1</p></td> <td class="bcell"><p class="n">0</p></td> <td><p class="n">0</p></td> </tr> </table> </td> <td class="xcell"> <table cellspacing="0" cellpadding="0" width="120" height="120"> <tr> <td class="ncell"><p class="n">0</p></td> <td class="ncell"><p class="">9</p></td> <td class="rcell"><p class="n">0</p></td> </tr> <tr> <td class="ncell"><p class="n">0</p></td> <td class="ncell"><p class="n">0</p></td> <td class="rcell"><p class="n">0</p></td> </tr> <tr> <td class="bcell"><p class="">8</p></td> <td class="bcell"><p class="n">0</p></td> <td><p class="">4</p></td> </tr> </table> </td> </tr> <tr> <td class="xcell"> <table cellspacing="0" cellpadding="0" width="120" height="120"> <tr> <td class="ncell"><p class="n">0</p></td> <td class="ncell"><p class="n">0</p></td> <td class="rcell"><p class="">6</p></td> </tr> <tr> <td class="ncell"><p class="">9</p></td> <td class="ncell"><p class="">1</p></td> <td class="rcell"><p class="n">0</p></td> </tr> <tr> <td class="bcell"><p class="n">0</p></td> <td class="bcell"><p class="n">0</p></td> <td><p class="n">0</p></td> </tr> </table> </td> <td class="xcell"> <table cellspacing="0" cellpadding="0" width="120" height="120"> <tr> <td class="ncell"><p class="n">0</p></td> <td class="ncell"><p class="n">0</p></td> <td class="rcell"><p class="n">0</p></td> </tr> <tr> <td class="ncell"><p class="n">0</p></td> <td class="ncell"><p class="n">0</p></td> <td class="rcell"><p class="n">0</p></td> </tr> <tr> <td class="bcell"><p class="n">0</p></td> <td class="bcell"><p class="n">0</p></td> <td><p class="n">0</p></td> </tr> </table> </td> <td class="xcell"> <table cellspacing="0" cellpadding="0" width="120" height="120"> <tr> <td class="ncell"><p class="n">0</p></td> <td class="ncell"><p class="n">0</p></td> <td class="rcell"><p class="n">0</p></td> </tr> <tr> <td class="ncell"><p class="n">0</p></td> <td class="ncell"><p class="">6</p></td> <td class="rcell"><p class="">7</p></td> </tr> <tr> <td class="bcell"><p class="">5</p></td> <td class="bcell"><p class="n">0</p></td> <td><p class="n">0</p></td> </tr> </table> </td> </tr> <tr> <td class="xcell"> <table cellspacing="0" cellpadding="0" width="120" height="120"> <tr> <td class="ncell"><p class="">4</p></td> <td class="ncell"><p class="n">0</p></td> <td class="rcell"><p class="">2</p></td> </tr> <tr> <td class="ncell"><p class="n">0</p></td> <td class="ncell"><p class="n">0</p></td> <td class="rcell"><p class="n">0</p></td> </tr> <tr> <td class="bcell"><p class="n">0</p></td> <td class="bcell"><p class="">8</p></td> <td><p class="n">0</p></td> </tr> </table> </td> <td class="xcell"> <table cellspacing="0" cellpadding="0" width="120" height="120"> <tr> <td class="ncell"><p class="n">0</p></td> <td class="ncell"><p class="n">0</p></td> <td class="rcell"><p class="">9</p></td> </tr> <tr> <td class="ncell"><p class="n">0</p></td> <td class="ncell"><p class="">7</p></td> <td class="rcell"><p class="n">0</p></td> </tr> <tr> <td class="bcell"><p class="n">0</p></td> <td class="bcell"><p class="">5</p></td> <td><p class="n">0</p></td> </tr> </table> </td> <td class="xcell"> <table cellspacing="0" cellpadding="0" width="120" height="120"> <tr> <td class="ncell"><p class="n">0</p></td> <td class="ncell"><p class="">1</p></td> <td class="rcell"><p class="n">0</p></td> </tr> <tr> <td class="ncell"><p class="n">0</p></td> <td class="ncell"><p class="n">0</p></td> <td class="rcell"><p class="">3</p></td> </tr> <tr> <td class="bcell"><p class="">6</p></td> <td class="bcell"><p class="n">0</p></td> <td><p class="n">0</p></td> </tr> </table> </td> </tr></table></center><BR><BR><BR><center><BR><form> <input type="Button" value="Back" onclick="history.back()"> </form><BR>______________________________________________________<BR><font size=1>Edward Holmes, SMC @ CCMS, <a href="mailto:shapemakingclub@btconnect.com">shapemakingclub@btconnect.com</a></center></td></tr></table></center></body></html> I would be very grateful if you could help me to get the image seen in the screen shot to worl properly. I have added the border code so that I can see wher the edges of the image are but they can go.

It is good that you have spent a long time trying to work out the colours for your site etc because that is the most important bit, and once you have a deffinned style and layout you wont need to change it. I have sometimes spent days trying to get my layout working how it want it, and although to an outsider something may seem like nothing it is a really good feeling to know that it is right.

You know, it was only the other day that I found that out myself, well shall we say I asked about it, and I never realised how simple it really was!

No, jpegs cannot be transparent, but gifs most certainly can.

Of course a gif can be transparent!

No, that is correct, but what I am saying is that your file path must be wrong, but now thinking of it, I think that PNG is not a supported file type, it is recomended that you stick to gif and jpeg

Not that I can remember, but I am confused by the second line

This is becauase your images are not linking properly next to your headings. It seems that the way FireFox Deals with this and the way IE dels with this are slightly different. The little white box and cross is more noticable in IE than the little picture in FireFox.The only way you can change this is to link to an image or just not have an image there.

No I mean, you have a hotlink on that CBox thing, you should change the border on that picture I think, do you get me?

No, sorry, you do have a page that it needs to link to?

Yep, just play around until you get something that you like, you may spend ages but once you have got one, it really pays off, because you can use it on every page of your site!

Yes, I would change your hotlinks in your images so that they don't have any borders, the code would be...<a href="yourlink"><img border="0" src="yourimage.gif"></a>

I like the idea of using red, but I would [erhaps save that for something like a rollover image for your buttons or just even rollover with normal text.So I would probably use a darker blue, this is one that I like, and that I use on my website:000066You can view my site by following the link in my signature.

Ok, this topic has really become random now, but as for the moon, I say WOO! But building things up there would be very hard, where would we get all of the materials from, unless we relied on things from earth, it would be like sarting from the beginning all over again!

How could they do that, they wouldn't have enough food?

I sopose so, I do have to agree with you there

You cant just edit the code and expect it to work, you need to click the:Edit the text and Click Me...button, before you try click the other one, if you get me?

No, I think that the person is using percentages and they need to use pixels, because there page is squashing and they don't want it to.