SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    www
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is this best done in CSS or Photoshop?

    I am trying to achieve this style design, and I am trying to figure out the best way to approach achieving it.

    Is best done using CSS or Photoshop?
    Attached Images Attached Images

  2. #2
    He's No Good To Me Dead silver trophybronze trophy stymiee's Avatar
    Join Date
    Feb 2003
    Location
    Slave I
    Posts
    23,424
    Mentioned
    2 Post(s)
    Tagged
    1 Thread(s)
    Well, first you can design it in Photoshop and then create the layout using CSS.

  3. #3
    SitePoint Addict
    Join Date
    Mar 2005
    Location
    Toronto
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree with John miso, that is the best approach
    In search of the clouds...and maybe some work

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, you can do that with CSS.

    You have four basic page elements in that design. A header, a left column, a content area, and a footer.

    Starting with those four, you can style the sections to your heart's content, using the shopping bag as either the actual page background, or a div that holds nothing, but has a declared width and height for the background image to show.

    The left column holds the menu, email offers and gift ideas sections. Each one would get its own <div> container inside the parent "leftCol" <div> tag.

    The content area in turn contains four sub sections, which I would style as two main container <div>s, containing two child <div> containers which would hold the actual content that you see on the page.

    Of course, the menu would be a list of links styled to my heart's content.

    Here's an example of the markup involved (please forgive the placeholder image sizes and text field lengths; they should be replaced with the actual values when the page is actually built. The forms also need to be given proper actions as well):
    HTML Code:
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
     <head>
     	<title>Web Page Title</title>
     	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     	<link rel="stylesheet" href="/styles/stylesheet.css" media="screen" />
     </head>
     <body>
     <div id="header">
     	<a href="/"><img src="logo.jpg" width="300" height="200" alt="Company Logo" title="" /></a>
     	<ul>
     		<li><a href="#">Customer Service</a></li>
     		<li><a href="#">My Account</a></li>
     		<li><a href="#">Shopping Cart</a></li>
     	</ul>
     	<div id="search">
     		<form method="get" action="">
     			<input type="text" name="p" size="30" />
     			<input type="submit" value="Browse" />
     		</form>
     	</div>
     </div>
     <div id="sideColumn">
     	<div id="menu">
     		<a href="#content" id="skip"><strong>Skip to Content</strong></a>
     		<ul>
     			<li><a href="#">Camera and Photos</a></li>
     		    <li><a href="#">Clothing and Accessories</a></li>
     			<li><a href="#">Cell Phones</a></li>
     			<li><a href="#">DVDs &amp; Movies</a></li>
     		    <li><a href="#">Jewelry &amp; Watches</a></li>
     		    <li><a href="#">Health &amp; Beauty</a></li>
     			<li><a href="#">Home &amp; Garden</a></li>
     		    <li><a href="#">Outdoor &amp; Travel</a></li>
     			<li><a href="#">Sporting Goods</a></li>
     			<li><a href="#">Video Games</a></li>
     		</ul>
     	</div>
     	<div id="emailOffers">
     		<p><span>Sign Up</span> for special email offers!</p>
     		<form method="get" action="">
     			<input type="text" name="eOffer" size="30" />
     			<input type="submit" value="Submit" />
     		</form>
     		<p><a href="#">Unsubscribe Me</a></p>
     	</div>
     	<div id="giftIdeas">
     		<p>Discover our <span>Gift Ideas</span></p>
     		<form method="get" action="">
     			<input type="text" name="gifts" size="30" />
     			<input type="submit" value="Go" />
     		</form>
     	</div>
     </div>
     <div id="content">
     	<a href="#menu"><strong>Return to the menu</strong></a>
     	<h1><span>Welcome</span> to online shopping!</h1>
     	<div id="welcome">
     		<p>Dummy text here.  Nothing to read here.  Move along now.  Dummy text here.  Nothing to read here.  Move along now.  Dummy text here.  Nothing to read here.  Move along now.  Dummy text here.  Nothing to read here.  Move along now.</p>
     	</div>
     	<div class="offerings">
     		<div id="offer1">
     			<h2>Featured Offer<span>*</span></h2>
     			<p>Lorem ipsum dolar sit emit...</p>
     			<p>price | add to cart</p>
     			<p><span>*</span> Free shipping included</p>
     		</div>
     		<div id="offer2">
     			<h2>Featured Offer<span>*</span></h2>
     			<p>Lorem ipsum dolar sit emit...</p>
     			<p>price | add to cart</p>
     			<p><span>*</span> Free shipping included</p>
     		</div>
     	</div>
     	<div class="offerings">
     		<div id="offer3">
     			<h2>Featured Offer<span>*</span></h2>
     			<p>Lorem ipsum dolar sit emit...</p>
     			<p>price | add to cart</p>
     			<p><span>*</span> Free shipping included</p>
     		</div>
     		<div id="offer4">
     			<h2>Featured Offer<span>*</span></h2>
     			<p>Lorem ipsum dolar sit emit...</p>
     			<p>price | add to cart</p>
     			<p><span>*</span> Free shipping included</p>
     		</div>
     	</div>
     </div>
     <div id="footer">
     	<img src="payment-types.jpg" width="300" height="50" alt="We accept PayPal, Visa, Mastercard, and Discover" />
     	<ul>
     		<li><a href="#">Home</a></li>
     		<li><a href="#">Product Directory</a></li>
     		<li><a href="#">My Account</a></li>
     		<li><a href="#">Easy Returns</a></li>
     		<li><a href="#">Affiliate Program</a></li>
     	</ul>
     	<p>Copyright &copy; Companyname, 2006. All Rights Reserved</p>
     </div>
     <div id="handbag">&nbsp;</div>
     </body>
     </html>
    Notice the <div id="handbag">&nbsp;</div> setup? That's an empty container for the handbag that you can position absolutely on the page which will hold the handbag image; since it's a presentational image, there's no need to actually call it via an image tag.

    Have fun playing around with the markup I gave you for the image you made. Play around with the CSS and try to come up with a stylesheet that will render the page similarly to the image, but that wlll also work cross-browser on multiple operating systems. Don't forget to add titles, alt attributes, accesskeys, and tab orders to the markup. I left them out because I didn't know what order you would want your visitors to (hopefully) navigate through the site.
    Last edited by Dan Schulz; Jul 18, 2006 at 00:32.

  5. #5
    Livin' the dream.. ThreeD!'s Avatar
    Join Date
    Oct 2004
    Location
    Online
    Posts
    258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm with Stymiee use PS for the images and general layout, then use CSS to put the puzzle together!
    * Losers make excuses - winners make it happen *
    Your dream can come true - if you have the courage to pursue it!

  6. #6
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,417
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    You don't 'have' to use Photoshop specifically, you can create graphics in any decent image editor

  7. #7
    SitePoint Addict
    Join Date
    May 2006
    Posts
    399
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can?

  8. #8
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,417
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Blue Sky
    you can?
    Of course. Any image editor capable of creating .jpg, .gif or .png files can be used :wink:

  9. #9
    SitePoint Member
    Join Date
    May 2006
    Location
    Swansboro, NC, USA
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    dream on bluedreamer

    Mr. Bluedreamer,

    I think that these kids (!!!just kidding!!!) never heard of a sketch pad and #2 pencil like you and I have. Why do something for free when you can spend all your (??) money on a robotic wysiwyg piece of software like phoboslop!?!

    Mr. BlueSky wuz jist pullin' ur legg.

    Mr. Bluedreamer brings up an excellent point, however.

    Many job listings and learning graphic/web designers use "phoboslop" and "art" graphics interchangeably. The two are as far apart as far apart can be.

    It's simply a tool that some dude developed to make tons of money (off of its users).

    It's the same with DreamCleaver. It's almost universally used interchangeably with web design. It's okay if it's being used by a professional who actually learned web design from wonderful resources such as Site Point.

    However, check and see for yourself across the W.W.W. the web-NOT-compliant, poorly designed, INVALID web sites created by DreamCleaver users.

    When you learn web design, then, buy a copy of Dream Cleaver or Phoboslop.

    I'll now duck-n-hide for expressing my 2 cents worth, heh, heh, heh!
    Al Toman

  10. #10
    Non-Member abelz22's Avatar
    Join Date
    May 2006
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,friends

    Two kinds of method:

    One: You may design the effect picture with Photoshop first,then use CSS realization according to the effect picture.This method is suit a person which is not good at CSS.

    Another:The another method is you realization the whole webpage with CSS(also is you write CSS code in whole process except for some product picture such as the vanity which is show on you page you provide),This method is suit a person which is good at CSS code.

    IMO,for webpage newbie,I suggest the first method,but if you are a person touch design vocation for a long time,and you are very familiar in code write, you can choose the second method.

    Those are my shallow point,reference only,please don't hit me if I have some error in above text.

    Best wishes!
    abelz


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •