Welcome to WebmasterWorld Guest from 54.160.249.204

Forum Moderators: not2easy

Message Too Old, No Replies

Css

Tags Not Rendering

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

Junior Member

10+ Year Member

joined:Jan 26, 2006
posts: 198
votes: 0


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


</body>
</html>

[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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:May 23, 2005
posts:742
votes: 0


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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:May 23, 2005
posts:742
votes: 0


More:
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)

Junior Member

10+ Year Member

joined:Jan 26, 2006
posts: 198
votes: 0


Sorry drhoward, I meant copyright symbol, not copyright statement.
9:19 am on Dec 22, 2012 (gmt 0)

New User

joined:Oct 4, 2012
posts: 22
votes: 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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members