How can I recreate this

  • grinch2171
  • Moderator
  • Genius
  • User avatar
  • Posts: 6810
  • Loc: Martinsburg, WV

Post 3+ Months Ago

I was reading through the XenDesktop evaluation guide in PDF format and absolutely love how they did the steps with the screenshots. I want to recreate this for a website I am working on and am wondering what would be the best way to do it. I know creating tables would probably work but I would much rather avoid tables and do something with CSS. I am a bit rusty on CSS so am posting this here to get some tips while I bang on my keyboard trying to figure this out. Attached is what I am trying to achieve.

Attachments:
layout.png
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9092
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

You might need to be a bit more specific here. First just to clarify, the red circle is what you added to the screenshot, correct? Or does it circle what screenshot is showing at the top on the part below?

Are you wanting advice on how to do the general layout of the entire screenshot? Or just the 3 columns in the #2 spot? Or what is in the red circle specifically? At this point I feel like I am guessing, so once I get clarification would be easier to help you :)
  • grinch2171
  • Moderator
  • Genius
  • User avatar
  • Posts: 6810
  • Loc: Martinsburg, WV

Post 3+ Months Ago

I want to recreate the whole screenshot, the red circle is there for the XenDesktop walkthrough and irrelevant to what I am looking to do.

So basically it would be a three column table with varying number of rows. Column 1 would be step number, Column 2 the screenshot, and Column 3 the written out steps or explanation of screenshot.
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9092
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

You could generally use a mixture of elements, but you could do the entire thing using divs and floating them. If you need a refresher, digitalMedia had created a tutorial which illustrates this.

So overall the HTML structure might look like:

HTML Code: [ Select ]
<div class="container">
   <div class="step">
      <div class="col1">
     
      </div>
      <div class="col2">
     
      </div>
      <div class="col3">
     
      </div>   
   </div>
   <div class="step">
      <div class="col1">
     
      </div>
      <div class="col2">
     
      </div>
      <div class="col3">
     
      </div>   
   </div>
</div>
  1. <div class="container">
  2.    <div class="step">
  3.       <div class="col1">
  4.      
  5.       </div>
  6.       <div class="col2">
  7.      
  8.       </div>
  9.       <div class="col3">
  10.      
  11.       </div>   
  12.    </div>
  13.    <div class="step">
  14.       <div class="col1">
  15.      
  16.       </div>
  17.       <div class="col2">
  18.      
  19.       </div>
  20.       <div class="col3">
  21.      
  22.       </div>   
  23.    </div>
  24. </div>


If you are using HTML 5 for each step's container you might consider using an article element instead of a div to more semantically separate each step. Hopefully that gives you a starting point.

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 63 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.