SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Threaded View

  1. #1
    SitePoint Member
    Join Date
    Dec 2012
    0 Post(s)
    0 Thread(s)

    CSS Tags Not Rendering

    Hi, I have four problems I need solved on an ecommerce stie I'm designing. First, When I try to center the copywrite statement it ends up at the bottom left hand corner. Also, I want the product, product price and product code underneath the prodcut pic, but Instead they're all veering left. Thirdly,, I have an "Order Now Button which I also want in the center but it's also positioned left. And Lastly, My 'Contact Us Page' is not rendering the way I want it. The contact information is stuck in the left corner instead of the center and the width is not rendering as reflected in the code itslef. Please help as I have a deadline to meet. Sorry for bombarding you with so much information. Below is the CSS and also the HTML code for one of the pages :


    Code CSS:
    img{padding:1px;border:1px solid #000000;} 
    #roundedcorners{width:900px;height:800px-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;border:5px solid #FFFFFF; margin-left: auto ; 
    margin-right: auto ;background-color:#ffffff;} 
    #store{width:500px;height:400px;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;border:5px solid #FFFFFF; margin-left: auto ; 
    margin-right: auto;background-color:#ffffff;} 
    img.display{ display: block; 
    margin-left: auto; 
    margin-right: auto;} 
    .hovergallery img 
    {-webkit-transform:scale(0.8); /Webkit: Scale down image to 0.8x original size*/ 
    -moz-transform:scale(0.8); /*Mozilla scale version*/ 
    -o-transform:scale(0.8); /*Opera scale version*/ 
    -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/ 
    -moz-transition-duration: 0.5s; /*Mozilla duration version*/ 
    -o-transition-duration: 0.5s; /*Opera duration version*/ 
    opacity: 0.7; /*initial opacity of images*/ 
    margin: 0 10px 5px 0; /*margin between images*/ 
    .hovergallery img:hover{ 
    -webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/ 
    -moz-transform:scale(1.1); /*Mozilla scale version*/ 
    -o-transform:scale(1.1); /*Opera scale version*/ 
    box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/ 
    -webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/ 
    -moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/ 
    opacity: 1;} 
    font-weight: bold; 
    font-size: 85%; 
    width: 100%; 
    .shadowblockmenu ul{ 
    border: 1px solid #BBB; 
    border-width: 1px 0; /* Show only top and bottom border for main menu container */ 
    padding: 0; 
    margin: 0; 
    overflow: hidden; 
    .shadowblockmenu ul li{ 
    display: inline; 
    .shadowblockmenu ul li a{ 
    text-transform: uppercase; 
    color: #494949; 
    padding: 8px 15px 8px 9px; 
    margin: 0; 
    text-decoration: none; 
    border-right: 1px solid #BBB; /*right border between menu items*/ 
    -moz-box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4); /* Add inset shadow to each menu item. First 3 values in (114,114,114, 0.4) specifies rgb values, last specifies opacity */ 
    -webkit-box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4); 
    box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4); 
    text-shadow: 0 -1px 1px #cfcfcf; /* CSS text shadow to give text some depth */ 
    -moz-transition: all 0.2s ease-in-out; /* Enable CSS transition between property changes */ 
    -webkit-transition: all 0.2s ease-in-out; 
    -o-transition: all 0.2s ease-in-out; 
    -ms-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out; 
    .shadowblockmenu li:nth-of-type(1) a{ /* Extra style for first menu link */ 
    border-left: 1px solid #BBB; /* add border to left side of first menu link */ 
    background: url(media/onebit_home.png) 1px center no-repeat; /* Add icon */ 
    .shadowblockmenu li:nth-of-type(2) a{ /* Extra style for 2nd menu link */ 
    background: url(media/onebit_bulb.png) 1px center no-repeat; /* Add icon */ 
    .shadowblockmenu ul li a:hover{ 
    color: black; 
    -moz-box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6); /* Add 2 inset shadows to each menu item */ 
    -webkit-box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6); 
    box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6); 
    #contactus{margin-left: auto;margin-right: auto;width:500px;height:400px; background-color:#ffffff;border-top-left-radius:20px;border-top-right-radius:20px;border-bottom-left-radius:20px;border-bottom-right-radius:20px;} 
    .gallery li { 
    display: inline; 
    list-style: none; 
    width: 150px; 
    min-height: 175px; 
    float: left; 
    margin: 0 10px 10px 0; 
    text-align: center; 
    .button { 
    /*Step 2: Basic Button Styles*/ 
    display: block; 
    height: 100px; 
    width: 300px; 
    background: #34696f; 
    border: 2px solid rgba(33, 68, 72, 0.59); 
    /*Step 3: Text Styles*/ 
    color: rgba(0, 0, 0, 0.55); 
    text-align: center; 
    font: bold 3.2em/100px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; 
    /*Step 4: Fancy CSS3 Styles*/ 
    background: -webkit-linear-gradient(top, #34696f, #2f5f63); 
    background: -moz-linear-gradient(top, #34696f, #2f5f63); 
    background: -o-linear-gradient(top, #34696f, #2f5f63); 
    background: -ms-linear-gradient(top, #34696f, #2f5f63); 
    background: linear-gradient(top, #34696f, #2f5f63); 
    -webkit-border-radius: 50px; 
    -khtml-border-radius: 50px; 
    -moz-border-radius: 50px; 
    border-radius: 50px; 
    -webkit-box-shadow: 0 8px 0 #1b383b; 
    -moz-box-shadow: 0 8px 0 #1b383b; 
    box-shadow: 0 8px 0 #1b383b; 
    text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2); 
    /*Step 3: Link Styling*/ 
    a.button { 
    text-decoration: none; 


    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> 
    <html xmlns=""> 
    <title> Hatbox Painted Large</title> 
    <link rel="stylesheet" type="text/css" href="grandstore.css" > 
    <meta name="Generator" content="Alleycode HTML Editor"> 
    <meta name="Description" content=""Vintage and Antique Steamer Trunks, Leather Suitcases, Vintage Metal Hat Boxes/Chests, Art Deco, Vintage and Antique Mirrors, Antique Indentures,....." > 
    <meta name="Keywords" content="none."> 
    <div class="shadowblockmenu"> 
    <li><a href="about.html">about us</a></li> 
    <li><a href="contact.html">contact us</a></li> 
    <div class="img"> 
    <h1 id ="grandstore"><a href="index.html"><img src="H:/Vintage Antiques/Vintage Antiques Graphics/Glass-Mannequin-Head28-1.jpg" width="800" height="503" alt="Glass Mannequin Head"></a></h1> 
    <div id="store"> 
    <img src="H:/Vintage Antiques/Vintage Antiques Graphics/GSH102_1930's_Hat_box_painted_large_105x.jpg" width="170" height="227" class="center"alt="Hatbox Painted Large"> 
    <p class="price">Hatbox Painted Large</p> 
    <p class="price">Price:105</p> 
    <p class="price">Product Code:GSH102</p> 
    <a href=""class="button"> Order Now!</a> 
    Last edited by Mittineague; Dec 21, 2012 at 14:02. Reason: reformatting bbcode tags


Posting Permissions

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