10 {{ upvoteCount | shortNum }}
10 {{ upvoteCount | shortNum }}

site redesign: need css help

by Witchie
8 replies
  • WEB DESIGN
    • |
I'm re-designing a store site and need some help getting the design to work correctly. I'm not the best at css so what's happening is the products are bunching up together. There must be away to set some space between them through margins, padding, or something. I guess I could setup tables again if need be ... :confused:

wiccanwardrobe dot com / pendulums dot php

Also, I'm using php includes on this site. I've divided up the header, left, content, and footer areas, making it easier to update those sections as need be later. It seems like there should be away to change the page title, keywords, and description (seo) for each product page without having to change the main header include. Can anyone point me in the right direction for what I'm missing here?
#css #redesign #site
  • Profile picture of the author RichKent
    The products are bunching because you're using floats on the images. To create separation you need to clear the floats using a clear div. You can either create a clear class, or simply create an empty div like this: <div style="clear:both;"></div> and that will fix your problem. You'll want to put that at the bottom of the product - after the text and buy now button.

    As an aside, I noticed you're using <H1> tags on all the product names. There should really be only 1 <h1> per page that describes what the entire page is about. I'd recommend using <h2> instead. If you had only 1 product per page, then an <h1> would make sense.
    Signature
    Learn more about Wordpress and SEO
    {{ DiscussionBoard.errors[3156506].message }}
    • Profile picture of the author Witchie
      Originally Posted by RichKent View Post

      clear the floats using a clear div -- I noticed you're using <H1> tags on all the product names
      Thank you for noticing the h1 tags, all fixed. Thanx again for the help with the floats and advice on the includes. I was able to fix up all three issues.

      {{ DiscussionBoard.errors[3159603].message }}
  • Profile picture of the author RichKent
    Regarding the includes, one of the ways you can deal with that is to just include the part of the header from the <body> tag on down, and have each page have it's own meta info at the top.

    Otherwise you'll need to create a database driven meta-tag table or something like that.
    Signature
    Learn more about Wordpress and SEO
    {{ DiscussionBoard.errors[3156529].message }}
  • Profile picture of the author Witchie
    Hiya RichKent, I wanted to ask you something about that css suggestion you made for:

    wiccanwardrobe dot com / pendulums dot php

    The css Im using was written by a friend of mine for a different project we share so I admit I don't understand all of it. She's going through a personal crisis right now so I can't ask her for help. However I noticed she has a clear class included (I pasted it below) so how would I use that instead of the clear div? Can you write it out as a example, I'm a have to see it to understand it kinda gal =)

    .clear {
    clear: both;
    background: none;
    }

    Also I want the Price to stand out by using another font color if possible. Seems like the old standard <font color="#89BD43">Price:41.95</font> would be out-dated and unnecessary especially with the site using css. So I ask what would the specific css code be and how would I attach it to the text Price: 41.95 in the html?
    {{ DiscussionBoard.errors[3163773].message }}
    • Profile picture of the author Jahnold
      if you've got a class defined in your CSS (in this case it's .clear) you add that to the page by putting class="clear" into the html tag you want to assign it to.

      In your case you want to clear the float after each image. The next tag is the <h3> tags for the headings so you'd just change those to:

      <h3 class="clear">Heading Here</h3>

      for the price colour you can create a new class in your CSS like:


      .prices {
      color: #89BD43;
      }


      and then surround the price in a span with that class assigned. ie:

      <h3 class="clear">BRASS PENDULUM WITH PENTAGRAM >> <span class="price">PRICE: 19.95</span></h3>
      {{ DiscussionBoard.errors[3163838].message }}
      • Profile picture of the author Witchie
        Thank you (both) looks like both the span and class clear are working now =)
        {{ DiscussionBoard.errors[3165004].message }}
  • Profile picture of the author RichKent
    What Jahnold said.
    Signature
    Learn more about Wordpress and SEO
    {{ DiscussionBoard.errors[3163993].message }}

Trending Topics