February 23, 20215 yr Good Morning All, Firstly, I am not a web designer by trade (self taught HTML & CSS), so please be gentle!! I have just uploaded my company website and I have found an issue that I can seem to fix! This is the site: www.elastothane.com You will see that there is a large image across the top of every page. Is the CSS at the top of the page I added: #stage2 a { width:100% } #stage2 a img { width: 100% } This makes the image resize according to the browser/screen size, however on a larger screen the image starts to cover over the small orange banner underneath it and some of the text in the white area below. How do I make sure everything stays below the image when it is resized? May Thanks
February 24, 20215 yr Author I have now experimented with: overflow: hidden; but still cant fix it... anybody out there who can help?
February 25, 20215 yr The image is 1200px wide. When the window is greater than this the image stretches to fill the space. This means the height increases as well. Make the image a background and set the background size: https://css-tricks.com/almanac/properties/b/background-size/ Better still, don't have the image changer thing at all. It adds no value. Use your homepage to display the sectors/products instead. Visitors will only ever be on your site becasue they want what you sell. You don't need to market the products - that how you got them on the site in the first place. Use the warm lead to direct them to the right place. There are loads of other things you need to fix as well. One of which are proper calls to action. Internal linking, categorisation, related products and so on.
February 25, 20215 yr Author Thanks Fisicx. I see what you are saying, but I want to keep the changing image. I will carry on experimenting.
February 25, 20215 yr If you want the image changer you still set a background image. But you are being driven by your preferences not your marketing plan. Image changers are dying - mainly because they are almost always ineffective and can reduce conversions.
February 25, 20215 yr Hey Dan. Have a look through the source code, there's a lot of broken structure. Some examples; There's no <head> section!! All html documents require the following; <!DOCTYPE html> <html> <head> <title>Elastothane Ltd - UK manufacturer of Polyurea</title> <!-- other head stuff --> </head> <body> <h1>Here's the body</h1> </body> </html> Also you've a lot of miss match and stray elements; so taking say the area you're asking about (line 281 - 356), I've indented and added a few notes. <div> <div> <section id="ctb" class="wrapper style1"> <div id="stage2" style="max-width:100%"> <a title="Elastothane - British Manufacturers of Polyurea & Polyurethane Coatings" href="index.html"> <img src="images/chinook.jpg"> </a> <a title="Elastothane - British Manufacturers of Polyurea & Polyurethane Coatings" href="index.html"> <img src="images/wind.jpg"> </a> <a title="Elastothane - British Manufacturers of Polyurea & Polyurethane Coatings" href="index.html"> <img src="images/bund.jpg"> </a> <a title="Elastothane - British Manufacturers of Polyurea & Polyurethane Coatings" href="index.html"> <img src="images/ship.jpg"> </a> <a title="Elastothane - British Manufacturers of Polyurea & Polyurethane Coatings" href="index.html"> <img src="images/tanks.jpg"> </a> <a title="Elastothane - British Manufacturers of Polyurea & Polyurethane Coatings" href="index.html"> <img src="images/wicker.jpg"> </a> <a title="Elastothane - British Manufacturers of Polyurea & Polyurethane Coatings" href="index.html"> <img src="images/disney.jpg"> </a> <a title="Elastothane - British Manufacturers of Polyurea & Polyurethane Coatings" href=""> <img src="images/speakers.jpg"> </a> </div> </section> </header> <!-- You're closing a header that isn't open, should be closing </div> --> </section> <!-- You're closing a section whic is not open, should be </div> --> <!-- CTA --> <section id="ctb" class="wrapper style5"> <div class="container"> <!-- You open the container div --> <!-- Banner --> <header> <h1>Market leaders in 1:1 spray applied polyurea, polyurethane and hybrid coatings and linings, formulated to offer unrivalled performance in the most extreme applications and demanding environments. Proudly manufactured in Great Britain.</h1> </header> </div><!-- You were missing the closing </div> on the open container --> </section> <!-- Highlights --> By straitening out the basics I'm guessing it'll be easier to work out why it's breaking, but for the examples here what you're seeing is Chrome trying to fix your code. Edit: Also forgot to say that you're using two instances of the same id="ctb", IDs must be unique, is you use it twice the a simple class will do. Edited February 25, 20215 yr by BrowserBugs
February 25, 20215 yr 4 hours ago, Dan Mackman said: Thanks Fisicx. I see what you are saying, but I want to keep the changing image. I will carry on experimenting. OK. But setting the image as a background gives you far more control. HTML stacks up in layers. The body is right at the back and your content right at the front. You have a 2 nested divs where you set the height but then add a new layer with the image. The image is bigger than the div so will always overlap the previous layer. But setting the image as a background for the the div means it won't overflow.
Create an account or sign in to comment