W3.CSS Help

Hi ronpat
Apologies I was getting confused between all the different files. It’s definitely original sgdr-rev2.html but with the outline round the focus boxes not just the title. I’ve also kept about-rev3.html (about.html).
I’ve also put danes.html in the rongpat directory. The cards are meant to be on the same row, but I don’t know what I’ve done! I thought cards would be the best way to display photograph and corresponding text? That would be the same layout for sponsors, and success stories.
IE11 is now working properly and I can see the website after deleting recent browsing history which Norton had just done!

The attached file contains two new HTML and one new CSS file. I am writing them using a text editor on a WinXP box; however I have tested them on a Win7 box with IE11 as well as a Win10 box with Edge. They open in those browesers without a problem. It is important that we make it easier for you to open and test the files that I send.

If these files do not open in IE11 or open with garbage, please consider downloading and installing Firefox and try opening the files with Firefox.

Next, consider how you are trying to open the files with they fail. I found that files that I wrote on WinXP (which has Firefox designated as the default browser) have to opened using Edge by right-clicking the file and selecting “Open With…” and choosing Edge, drag and drop into Edge doesn’t work with files that I created on my PC where HTML defaults to Firefox. Who would care but Edge? I guess it rejects it as a foreign document.

The last thing I can think of would be the presence or absence of a byte order marker in the HTML file.

As I said, making it easy for you to open and test the files is important.

How do you read the HTML and CSS code? Do you use a text editor or a WISIWIG editor. I don’t know how you work with the W3 framework. Maybe knowing that would help me.

When you get these two HTML file working, please trash the earlier versions of the HTML and CSS files unless there is something unique in one of them.

I need to make sure that I’m walking the same path that you wish to go and not leading you astray.

EDITING…forgot to prepare the file…

Shona-5.zip (12.7 KB)

Please focus your attention on whatever you like and dislike about these files. Earlier versions can be deleted. Well, you might want to keep the CSS file full of comments even though some of them will no longer apply to the newer CSS.

Remember to notice the change in the position of the “Scottish Great Dane Rescue” title as the page narrows. The code that positions the images in the “carousel” box has changed. They are no longer exactly the same height. Now the behave like background images with {background-size:contain}. This allows the images to appear slightly larger overall.


Hi ronpat
I really can’t thank you enough for all your help. I’ve trashed the other files and now we can continue on from the new files, which are just what I wanted to achieve.

When I edit or build html/css files I used Notepad++ and revert to W3 schools if I want to find something out. If its works then I leave it alone. That’s how I ended up with my website glued together. W3 School’s own platform is w3.css. I find it easier to speak with someone rather than plough though lots of unnecessary code. Although programmers seem to be thin on the ground.

I flit between IE 11 (was happier on version 10) and Chrome. I’ll definitely give Firefox a go.

I actually did consider moving from Windows and change over to X-Ubuntu and have that on my old laptop.

Can we now work on danes.html ? files is in the ronpat directory of the website.

1 Like

I forgot to ask do you think some of the pages could be done with an image or something else?

In post #56 you asked about the space to the sides of the web page… whether it should be white or left as is. That’s really your choice as the designer; however, IMO, I feel that replacing the blue sky with empty white space would be undesirable because in a browser that is open full screen, the white space would glare and detract from the site.

You didn’t address this point, but it is important so you do not become confused or frustrated by having to move files around just to see how the pages behave. Do you still have to install them on the server to view them in your browser or can you open them in your IE browser while they still reside on your PC? I’d rather you spend your energy nit-picking the code and the design rather than doing the donkey work of moving files to and from the server just so you can view them in your browser. Keep your energy focussed on the important stuff.

Yes, I am looking at the Danes file now.

You will probably need to post the URL to any new or modified HTML files that you put on the server. Remember that I cannot see your directory structure nor the contents of any of your directories.

The “index” file that opens in the “ronpat” directory is an older version.

Plus, as our resident wizard, @Gandalf, mentioned about the site, it cannot be opened securely using “https”.

Generally, No. But it depends on what you want to replace with an image. Images cannot be interpreted by screen readers, so replacing textual content with an image is an accessibility fail.

Hi ronpat
Sorry I do miss things or forget. Ignore me I’m leaving the website blue! The co-ordinator likes it!

I had to reinstall IE 11 and then the sgdr website appeared so I’m not sure what went wrong with the browser. I have downloaded Firefox. Your files work in Chrome and Firefox if I open them from my computer, but not IE. I have to upload them to the server. There must be a security setting somewhere that needs changed. I think I’m going to change over to Firefox permantly - currently giving it go.

I’ll delete the files in the ronpat directory so that only current ones are being worked on.

OK. It’s good that you have the ability to view the files on your PC easily. That will save a lot of testing time.

Just to be on the safe side, I am including another copy of the sgdr-rev5.css (just the CSS file with no rev number change). I don’t remember if I changed something temporarily while testing or permanently but please go ahead and replace the one that you have now with this potentially revised one “just in case”.

sgdr-rev5.css (1.7 KB)

I’m including two versions of the Available Danes page. You can pick the one you prefer, or we can try again :slight_smile:

The first version, danes-rev2, uses modified “focus” style boxes. The images are all the same width but the height of the boxes in one row can vary depending on image height and length of paragraphs.

danes-rev2.html (5.5 KB)

The second version, danes-rev3, should look very similar to rev2 but the code is very different. The images are the same width AND the height of the boxes in one row is the same as the tallest box in that row. Looks nicer overall.

danes-rev3.html (7.2 KB)

Both files require the same W3.css and sgdr-rev5.css files and the images.

I have not tested danes-rev3 in IE. Please test it and don’t be surprised if it fails. IE is funny like that.

Have fun.

Hi ronpat
I love danes-rev3.html. I prefer things to look uniformed and the same size. You have no idea how long I spend dreaming up extra text to make things appear that way. I like danes-rev2.html as well, but definitely prefer version 3.

1 Like

I have managed to muck up the footer on the danes-rev3.html, now called success.html as the page will have the same layout. All I did was change the title and comment out the main layout whilst I wait for the pictures. I was hoping to upload the new pages today. news.html (3.9 KB)
success.html (7.3 KB)

Do you think the news.html page could be a little more interesting?

Ignore success.htlm as I’ve managed to sort it.

Hi ronpat
Is it possible to use a contact form on the contact page? I couldn’t get the one I downloaded and help with working due to the php. Please advise. contact.html (4.5 KB)
Many thanks.

I have a couple of requests to ask of you, if I may.

(1) If you can, please put the revised/new pages on the server so I can access them and see how they look and how they are coded. I have been setting them up as demo pages to see if they appeal to you and some of the HTML needs to be changed so the HTML is more consistent across the pages and the CSS needs to be consolidated into a CSS file that will be common to all of the pages.

(2) The “contact” page does not have any code on it that I recognize as a form. You will need to explain in detail exactly how a form would be used on that page and show your attempt to make one work. I can help with a form layout, but not the PHP (I am not a programmer), We have people in the php category who are excellent and would be happy to assist but they need a basis from which to work, too. A drawing (GIMP or Photoshop) might help. You might describe the form that you downloaded and why it doesn’t work.

(3) How proficiently can you read and write HTML and CSS “by hand” without using a framework? I ask because my initial impression was that you could if you had to but w3.css was easier for you. All of the work that I have been doing is outside of that framework; as such, I may be doing you a disservice if you are not able to understand and maintain the code that I am writing. How do you feel about your ability to maintain my HTML and CSS? It may be worth considering that the version of w3.css that you are using is an older version, not the current version and they are not faultlessly interchangable.

(4) Do you know how to use PHP calls to import files, such as the menu and footer? If not, try reading this step-by-step and see if it might be something you would consider.
How To Call a menu file with PHP

Hi ronpat
The website will your code is up and running. I have also put all the files in the directory www.sgdr.co.uk/ronpat
I cannot write much css by hand and hence the use of w3.css
I gave up with the contact form that I had as one of the mentors helped me put all my wee errors right, only to be told by my ISP that I can’t use PHP server (they withdrew access when Plusnet became bigger!).
I don’t think I’ll have any problems with your CSS as I just won’t fiddle it! And if I break anything I always keep my files well backed up :smiley:

Thank you for publishing the dev pages.

If not PHP, what does Plusnet recommend that you use for a server side programming language?

@Puzzle1: are you using Plusnet’s free webspace? If so, you should probably think about paying for less-restrictive hosting. I understand the site is for a charity with limited resources, but you should be able to get decent shared hosting at a reasonable price. (£24 per annum, including VAT, at the company I use.)

Hi TechnoBear
I’ve been with Plusnet (also Force9) since the late 90’s. They allocated 250 MB of website, with lots of additional goodies, unfortunately those are gone. I’m paying £26.44 per year to host the website on that webspace.
SGDR is not a registered charity. That also allows me to configue multiple emails addresses.
I’m also currently hosting www.scottishgreatdaneclub.co.uk for £1 per month on the same space.
Thanks for your input and help.

Hi Ronpat
Good point - I didn’t actually think to ask to them. I will now!

1 Like

If you’re happy with your hosting, then that’s fine. FWIW, the £24 package I mentioned would allow you to host 2 sites, with 2 MySQL databases and unlimited e-mail addresses, and does support PHP (along with everything else you’d expect to find in fairly standard shared hosting).

Just a thought that it might be easier to look around at other options than to try to fit in with the current limitations.

1 Like

Hi TechnoBear
I’m really grateful for all advice given.I’ll ask the question about available options. I do have more than one site. I’m just a lackie and my knowledge is in the distant past. I feel very strong about rescue, hence me trying to help them :slight_smile:


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.