Jump to content

RHayabusa

Members
  • Posts

    4
  • Joined

  • Last visited

Everything posted by RHayabusa

  1. Thanks for your help, am trying to change what you've suggested. To re-explain my problem, I wish to have one image slider that animates ands shows the next image, however I've got four images each on a new line animating, as opposed to one that slides to each image. Here is a link to the Winrar file, including images,CSS etc (3mb) if anyone is unsure: https://www.mediafire.com/?svcvn6cco9yz0fz
  2. Hey Everyone,I've been doing this Responsive CSS3 Image Slider tutorial for a website (using four exactly same sized images) but want it to be responsive for mobile phones except that when at 100% zoom in Firefox it shows this four mangledimages and at 30% zoom shows one image perfectly acting as a slider (please see attached) - note each image is 3000px width by 1200px length: HTML <!DOCTYPE html><html><meta charset="UTF-8"><title></title><head><link rel="stylesheet" type="text/css" href="Layout/Styles/Layout.css"></head><body><div id="slider"><figure><img src="Images/Edited/Engineer1.jpg" alt="Engineer1"><img src="Images/Edited/Engineer2.jpg" alt="Engineer2"><img src="Images/Edited/Engineer3.jpg" alt="Engineer3"><img src="Images/Edited/Engineer4.jpg" alt="Engineer4"></figure></div>This is my website!</body></html> CSS3div#slider { width: 80%; max-width: 3000px; }div#slider figure {position: relative; width: 400%;margin: 0; padding: 0; font-size: 0; text-align: left;}figure#imagestrip img {width: 25%; height: auto; float: left;}div#slider {width: 80%; max-width: 3000px; overflow: hidden}@keyframes slidy {0% { left: 0%; }20% { left: 0%; }25% { left: -100%; }45% { left: -100%; }50% { left: -200%; }70% { left: -200%; }75% { left: -300%; }95% { left: -300%; }100% { left: -400%; }}div#slider figure {position: relative; width: 400%;margin: 0; padding: 0; font-size: 0; left: 0; text-align: left;animation: 30s slidy infinite;}</div> Please help - thanks
  3. Oops, solved it! Please delete!
  4. Hey everyone,Trying to make a website for learning purposes and I am totally lost. I'm teaching myself CSS3.0 and HTML 5.0 having learnt CSS2 and HMTL4 many years ago. None and no CSS I write is ever applied to the HTML5 webpage despite being referenced and both the HTML and CSS files being in the same folder together. And yes, I've Googled a lot and looked up my old textbooks and am still super stuck...see attached or look below for the code:PS: Using Microsoft Expression Web 4 (trial) OxfordEngineering.html<!DOCTYPE html><html><meta charset="UTF-8"><title></title><head><link rel="stylesheet" type="text/css" href="Oxford_engineering_CSS.css"></head><body>This is my website!</body></html>Oxford_engineering_CSS.css<div id="slider">div#slider { width: 80%; max-width: 3000px; }<figure><img src="Images/Edited/Engineer1.jpg" alt="Engineer1"><img src="Images/Edited/Engineer2.jpg" alt="Engineer2"><img src="Images/Edited/Engineer3.jpg" alt="Engineer3"><img src="Images/Edited/Engineer4.jpg" alt="Engineer4"></figure>div#slider figure {position: relative; width: 500%;margin: 0; padding: 0; font-size: 0; text-align: left;}figure#imagestrip img {width: 25%; height: auto; float: left;}div#slider {width: 80%; max-width: 3000px; overflow: hidden}</div>body {background-color: #b0c4de;}
×
×
  • Create New...