SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    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 :

    CSS


    Code CSS:
    body{background-image:url('glass-mannequin-head28-1.jpg');background-repeat:repeat-y;background-color:#c1cdcd;} 
     
    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;} 
     
    #featured{font-family:arial;font-weight:bold;font-size:16px;text-align:center;text-transformation:uppercase;} 
     
    #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;} 
    p.price{font-family:arial;font-size:medium;color:#000000;font-weight:bold;text-align:center;} 
     
    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;} 
     
    a:link{font-family:arial;#color:0000ff;} 
    a:hover{color:#0000ff;} 
    a:visited{color:#0000ff;} 
    a:active:{color:#0000ff;} 
     
    .shadowblockmenu{ 
    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; 
    margin:0; 
    padding:0; 
    } 
     
    .shadowblockmenu ul li a{ 
    display:block; 
    float:left; 
    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 */ 
    padding-left:25px; 
    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 */ 
    padding-left:25px; 
    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); 
    } 
     
    p{font-family:arial;color:#000000;font-size:12px;} 
    h1{font-family:arial;font-weight:bold;color:#000000;font-size:14px;text-align:left;text-transform:uppercase;} 
     
    #contact{font-family:arial;font-weight:bold;color:#000000;font-size:large;text-align:center;text-transform:uppercase;} 
    #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;} 
    p.vintageant{font-family:arial;font-color:#000000;font-size:12px;text-align:center;} 
    p.telephone{font-family:arial;font-color:#000000;font-size:12px;text-align:center;} 
    p.email{font-family:arial;font-color:#000000;font-size:12px;text-align:center;} 
     
    .gallery li { 
    display: inline; 
    list-style: none; 
    width: 150px; 
    min-height: 175px; 
    float: left; 
    margin: 0 10px 10px 0; 
    text-align: center; 
    font-family:arial; 
    font-size:small;} 
     
    .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; 
    }

    HTML



    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml"> 
     
     
    <head> 
     
    <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."> 
     
    </head> 
     
    <body> 
    <div class="shadowblockmenu"> 
     
    <ul> 
    <li><a href="about.html">about us</a></li> 
     
    <li><a href="contact.html">contact us</a></li> 
     
     
     
    </ul> 
    </div> 
     
     
     
    <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="mailto:thegrandstore53@gmail.com"class="button"> Order Now!</a> 
    </div> 
     
     
    </body> 
    </html>
    Last edited by Mittineague; Dec 21, 2012 at 14:02. Reason: reformatting bbcode tags

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Hi kaybozz. Welcome to the forums.

    It's a bit hard to answer your questions from the code you've given. Assembling it as a page does not give a lot away. Can you provide a link to the site?

    When I try to center the copywrite statement it ends up at the bottom left hand corner.
    I can't see a copyright statement in your code anywhere.

    I want the product, product price and product code underneath the prodcut pic, but Instead they're all veering left.
    It's not really clear which item is which in the code you've provided. We can't see the images.

    I have an "Order Now Button which I also want in the center but it's also positioned left.
    Left of what, and center of what. Assembling your code as page doesn't make it clear what you want to see—not to me, anyhow. Perhaps you need this:

    [code].button {
    margin: 0 auto;
    }

    My 'Contact Us Page' is not rendering the way I want it.
    We'd need to see it to help.


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
  •