Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies


Tags Not Rendering



12:43 pm on Dec 21, 2012 (gmt 0)

5+ Year Member

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 :



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;


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


<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="mailto:email@example.com"class="button"> Order Now!</a>


[edited by: bill at 1:18 am (utc) on Dec 23, 2012]
[edit reason] removed e-mail address [/edit]


6:41 pm on Dec 21, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

1) What copyright statement?

2) For the image, didn't look to see why it's set to inline-block but change it to display:block and add margin:0 auto;

3) Do the same for the order now button.

4) Remove the float from the a. Float the li left. Give them a width of 50%. Add 'text-align:center'


6:57 pm on Dec 21, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

1) Get rid of the useless generator and keyword meta stuff.

2) Transitional doctypes were deprecated in 1999. New web pages have no reason to use it.


9:21 pm on Dec 21, 2012 (gmt 0)

5+ Year Member

Sorry drhoward, I meant copyright symbol, not copyright statement.


9:19 am on Dec 22, 2012 (gmt 0)

HTML is the language that uses to add content like paragraphs, tables, headers, horizontal bars, images, and lots more. CSS is a use to stylize that content like give the width of a table, choose colors, background color, background image, etc. CSS builds the HTML look well. Every single website, in one way or another, ultimately uses HTML.

Featured Threads

Hot Threads This Week

Hot Threads This Month