2 Replies - 4686 Views - Last Post: 21 December 2012 - 03:21 PM

#1 kaymeis  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 30-September 09

css Tags Not Rendering

Posted 21 December 2012 - 05:12 AM

Hi, I have three 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


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



<!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>

This post has been edited by Atli: 21 December 2012 - 05:39 AM
Reason for edit:: Use [code] tags when posting code.


Is This A Good Question/Topic? 0
  • +

Replies To: css Tags Not Rendering

#2 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3719
  • View blog
  • Posts: 5,991
  • Joined: 08-June 10

Re: css Tags Not Rendering

Posted 21 December 2012 - 05:59 AM

Hey.

There are actually two more problems, which you should resolve before you do anything else.

First, your CSS is a complete mess. Code, like CSS and HTML, exist for the developer. It's there to make the instructions easier for you to read and write. (The "read" part is actually a lot more important than the "write" part.) If we wanted to be constantly confused, having to decipher each line of code like it's an ancient, dead language, we'd write this stuff in assembly. - My point being: use a consistent style when writing code. There are a lot of different styles, and which you pick is up to you. Just pick one and stick to it. (I'm kind of partial to the WordPress CSS Coding Standards myself. (Even though I'm not a big fan of WordPress itself.))

And second, your HTML is invalid, and could use some proper indentation applied for readability. The first step to fixing any HTML and CSS appearance issues is to validate your HTML. You seem to be using an XHTML doctype, but are not adhering to the stricter XML rules it implies. - The only reason why XHTML exists in the first place is to allow developers to use the strict syntax rules of XML when developing their code. In proper XHTML documents, the browser will halt the execution of the site on even a single error. Fortunately for you, even though you specify a XHTML doctype, you are using a HTML mime-type, so the browser is going easy on you. But still, if you are not planing to use the XML syntax rules, don't use an XHTML doctype. HTML4 (or just the simple HTML5 doctype) will work fine for 99.9% of pages.
Was This Post Helpful? 0
  • +
  • -

#3 kaymeis  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 30-September 09

Re: css Tags Not Rendering

Posted 21 December 2012 - 03:21 PM

thanks Atli
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1