| Css
Tags Not Rendering |
kaymeis
msg:4530151 | 12:43 pm on Dec 21, 2012 (gmt 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]
|
drhowarddrfine
msg:4530215 | 6:41 pm on Dec 21, 2012 (gmt 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'
|
drhowarddrfine
msg:4530221 | 6:57 pm on Dec 21, 2012 (gmt 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.
|
kaymeis
msg:4530273 | 9:21 pm on Dec 21, 2012 (gmt 0) |
Sorry drhoward, I meant copyright symbol, not copyright statement.
|
ericlewis107
msg:4530395 | 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.
|
|
|
