css Tags Not Rendering

Page 1 of 1

1 Replies - 4190 Views - Last Post: 21 December 2012 - 05:37 AM

#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:16 AM

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


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>

Is This A Good Question/Topic? 0
  • +

Replies To: css Tags Not Rendering

#2 GunnerInc  Icon User is offline

  • "Hurry up and wait"
  • member icon




Reputation: 858
  • View blog
  • Posts: 2,281
  • Joined: 28-March 11

Re: css Tags Not Rendering

Posted 21 December 2012 - 05:37 AM

please don't open duplicate topics. ... closed
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1