W3.CSS Help

I still see the original site online. I’ll look again later. Sometimes these things take awhile to reach the server. Perhaps it’s up with a different name along side the original index page? That way it can use the original resources (images and css, etc)?

How is your attention span? I can explain more about how the code works if you can absorb the concepts, not necessarily all of the details, and if you think it would be helpful.

I do not have a business. I am very retired. Thank you anyway :slight_smile:

3 Likes

Hi
www.sgdr.co.uk/sgdr-rev2.html
I have to leave the original site till I’m ready to implement the new site.
Explanation of the code would be good. What I’ll do is put comments in as a reminder :slight_smile:
Shona

Hi ronpat
How did you get the images to be exactly the same size?
Shona

Hi, Shona,

The images are not exactly the same size, the are exactly the same height, though.

The attached file includes only the carousel image box and a sticky footer. Although not a tutorial, the CSS is full of comments that describe the function of the CSS properties. Hopefully, the comments will help you understaned how the code works.

sgdr-rev3-sticky-footer image-fit.html (5.9 KB)

I’ll send another file that looks more like a finished page later.

Just for fun, I changed the look of the focus boxes a little. See if it appeal to you or not. You may prefer the blue outline around the title only.

PS: There is a framing error in the rev2 code. Please feel free to trash that file.

1 Like

Hi
I like the image layout above as displayed on this page. It looks good with the framed border. I saved an opened the file you sent me - it’s a grey page with a pink square and some text is that right? It’s at www.sgdr.co.uk/sgdr_rev3.html
Regards
Shona

More or less :slight_smile:

The magenta outlines show the rows associated with the “sticky footer”.

The white outline is the slidewrap container. which shows the dimensions of the image container. The images are coded with a height of 100% so they will always fit the height of that container, and a width of “auto” so they will keep their normal aspect ratio. In the demo, you can see that only one image fits the full width of that box.

If you want to see the clouds, just remove the comment mark from the edge to the left of the background-image:

body {
    background-color:#bbb;
/*    background-image:url("images/clouds.jpg");  /* clouds are temporarily commented out */

If you want a white background, comment out the background-color above the clouds background-image. You will also need to change the color of the outline around .slidewrap from white to something visible on a white background.

I did not elaborate about using percent padding-top to set the height - thus the aspect ratio - of the box. Vertical padding in percent is related to the width of the parent container. If the inner container and the parent container have the same width, then the padding-top is easy to calculate. When originally created, this percent-height technique was used to put videos on a responsive page so the video would keep its aspect ratio as the width of the page changed. It’s quite a useful technique. Here, I am fitting different sized images into a vertically padded box and giving the images a height of “100%” and a width of “auto” to prevent the images with different heights from causing the page to “jump” when they are shown. The vertical-padding assigned is that of the image with the widest aspect ratio (not widest width).

1 Like

Hi
Thanks for the explanation that’s me well and truly confused.
I’ve spend some of the morning, trying things out (offline) and end up with things all over the place. Can you please look at www.sgdr.co.uk/aboutus.html and tell me how toI make the rest of the pages the same size (having the website centred)? with the light blue behind them?
Many thanks
Shona

Sorry for the delay, Shona. You must have posted just seconds after I went to sleep.

The URL in your post is “Not Found”. Can you please verify the URL and post again?

Hi, Shona.

Just in case you are experimenting with the “about” page, I have three examples for you to examine and toy with. In addition, I am including rev4 of the index page and a CSS file. The sgdr-rev4.CSS file should go in your CSS directory/folder so it can be read by these demo files. The CSS at the top of the sgdr-rev4.html index page is unique to that page as is any CSS that appears at the top of other pages.

sgdr-rev4.zip (3.5 KB)

Please notice the HTML code for the menu on these pages. It is almost unchanged from your code, except for one line… the “Scottish Great Dane Rescue” item has been moved from the bottom anchor position to the top anchor position. This allows it to stay in the top right corner while the menu wraps. It seemed like a small improvement since you have not yet declared whether the menu is satisfactory or not.

OK, back to the files. You sounded frustrated trying to fit your content into a “sticky footer” page so I am using the “about” page as a demo. I have already sent you a very slimmed down “sticky footer” example… the page with the magenta lines and the carousel on it. If you cut out everything inside the “content” div in the center section (the carousel), what remains is a CSS table based “sticky footer” structure.

about-rev1: Copies and pastes the content portion of your HTML - w3 styles and all - into the “main” section of a sticky footer page. Try it in your browser. It is centered just as you have it and the “extra” columns disappear when the width is less than 600px.

about-rev1.html (5.0 KB)

about-rev2: I replaced the w3-classed HTML code with one “aboutus” box whose primary purpose is to allow you set a narrower width for some content and center it. The CSS at the top of the page is minimal. Comments describe what the properties do. The collapsing columns were not carried over in this demo. They can be added if desired.

about-rev2.html (5.2 KB)

about-rev3: You casually mentioned that you might consider using a “focus” style box from the index page elsewhere. This version does just that… it adds “focus” style boxes around the three groups of information on the page.

about-rev3.html (5.9 KB)

Many people come to these forums because the expectation of being able to easily create a web site using a framework doesn’t allow them to make small adjustments to the layout without a knowledge of HTML and CSS. I hope these demos help you see how a little basic HTML and CSS can make those changes and eliminate a bundle of unnecessary CSS in the process.

You can trash previous pages EXCEPT for the sticky footer and image box demo.

2 Likes

Hi
Thank you so much for all your hard work and for providing me with different pages as example layouts.
I definitely prefer the original layout of http://www.sgdr.co.uk/sgdr-rev2.html
I really like http://www.sgdr.co.uk/about-rev3.html with the use of the focus boxes, particularly with the cloud background, although I am unsure as to whether I should break it up a little as it makes the website very blue.
I’ve not spent any time on the website over the last couple of days due to tired and hope to look at it again this afternoon - here was me thinking I had nearly finished it!
There must be something on my computer stopping me viewing the files offline. I can only view them properly once I have uploaded them. I downgraded my new computer from Windows 8.1 back to Windows 7. (There was a lot to be said for XP!)
Many thanks once again for your help. I’ll get back to you later.
Shona

Hi, Shona.

The sgdr-rev2 code puts the blue border around the title only… It also does not have the sticky footer. Perhaps you can make a screen shot and draw arrows to the characteristics that you prefer and I can transfer them to a rev5 version of the sgdr (index) page. The “about” and “sgdr” pages should use the same common CSS file.

All of the pages except the one that focuses on how the carousel box works have a cloud background, including the one on your site. Are you thinking of softening (lightening) that image or replacing it? I’m attaching a .jpg with a faintly cloudy sky for you to compare and contrast to your present choice. Also, a lightened version of your present background image “just in case”. Of course, you may be considering a different color and pattern altogether… if so, you can file these away in your “spare images” box.

HI
I’ll answer properly later today. I’ve been up since 2am with one of my dogs and back off to the vets this morning. Hope you cat didn’t rouse you too early.
Shona

1 Like

Hi
I like the centred layout very much with the footer - I am wondering if the badly drawn white box outlines should be solid white? What do you think or should I leave well alone? I definitely like the focus boxes around the text on the ‘about us’ page as I think it give the text definition and is very pleasing to the eye.
I have chased up the coordinator for the rest of the website material but she has gone off to Romania!
Dane available page - I had thought to use cards as it would mean I could display text and picture together which would make it easier? or not?
It would be the same layout for the ‘memorial’ and ‘fun pages’.
The contact page (after spending time getting with php experts) isn’t working due to my internet provider saying I can’t host php scripts (PlusNet). I have the club website and rescue with same provider. Is there anyway round this? or should I look for a different contact form? I need 2 forms on this page - one for the coordinator and the other for me.
I’ll make a start tomorrow on changing things over and see where I am from there!
Shona


I forgot the picture!

Hi
I have a major problem this morning - the website can’t be view by (my?) IE. Can you tell me if you have problems. I get a security message about the sites certificate. Thanks.
Shona

I can see the site using http, Shona, but not using https - if that helps any.

1 Like

Hi gandalf458
Unfortunately I can’t. I’ve tried uninstalling and reinstalling IE 11. Must be something in my IE even though I have reset security setting to default.
Shona

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!
Shona

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.

2 Likes

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.
Thanks.
Shona

1 Like