homepage Welcome to WebmasterWorld Guest from 54.167.41.199
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved