3 Replies - 446 Views - Last Post: 12 February 2014 - 07:25 PM

#1 insideac  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 09-November 13

Best way to design and implement this type of page?

Posted 12 February 2014 - 07:12 PM

I am having some trouble adding a "How It Works" page to my site, and have tried numerous things to avail. It's basically just a page that explains how everything works, but in an easy to navigate, visually attractive way. These are two examples of what I mean:

https://freshneck.co...w/how-it-works/

https://www.rocksbox.com/howitworks

They have the graphics and page expand to the entire screen, and it's set up in a way that each one is not just an image, but the text is able to be highlighted, and looks great on mobile devices. I tried making three separate graphics and adding them together, but it would either auto-wrap or not show up properly, and the only way I did it was adding the text into the image, but that causes all sorts of problems if the text needs to be changed, resized, or if the computer has low resolution.

Any help would be greatly appreciated, I am honestly very stumped and don't even know which direction to go in. Thank you!

Is This A Good Question/Topic? 0
  • +

Replies To: Best way to design and implement this type of page?

#2 modi123_1  Icon User is online

  • Suitor #2
  • member icon



Reputation: 8937
  • View blog
  • Posts: 33,499
  • Joined: 12-June 08

Re: Best way to design and implement this type of page?

Posted 12 February 2014 - 07:17 PM

I would figure you would have a bunch of divs lined up and set the background of each div to a url.

A quick peek at their CSS and that is certainly what they did.
Was This Post Helpful? 0
  • +
  • -

#3 insideac  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 09-November 13

Re: Best way to design and implement this type of page?

Posted 12 February 2014 - 07:23 PM

Ahhh I see.... so is the wrapper div what makes it expand to the entire width of the screen?


On that note, if I wanted to do 3 or 4 tall rectangular sections side by side extending the whole screen, would that be the same thing? Like:

screen start | [step1] [step1] [step3] [step4] | screen end
Was This Post Helpful? 0
  • +
  • -

#4 modi123_1  Icon User is online

  • Suitor #2
  • member icon



Reputation: 8937
  • View blog
  • Posts: 33,499
  • Joined: 12-June 08

Re: Best way to design and implement this type of page?

Posted 12 February 2014 - 07:25 PM

Sure.. divs can be given a width in CSS.. and told how to position themselves..
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1