I sliced a .psd and am writing the html and css to build two pages: home and about us. I'm not very experienced at writing css from the ground up. I've done more with adjusting existing CSS on projects. I've been scouring forums and have made many adjustments, but none has worked.
I can get the top two images to appear in the top header, along with social buttons (twitter, etc.) but can't get the images or background for the bottom header to appear, or the image below that. I've tried replicating what worked with the other images, but to no avail. I don't know if it's a matter of when I should use ID's and when I should use classes in html or not. I've tried switching those around in some areas, then changing the CSS to reflect that. I'm at wit's end.
Can anyone see what's wrong with my code? I'm not sure if it will work without the images. Unfortunately, they belong to a client and I don't think I can attach them. I've validated the CSS and HTML on W3C and they're good. The CSS at the bottom is not finished and I'm sure I'll add more to the HTML. I decided I'd spent too much time trying to figure it out myself and wanted to get something posted here. Remember, I'm not very experienced with from-the-ground-up CSS, so please don't assume I know what you're talking about. Cheers.
My CSS:
Expand|Select|Wrap|Line Numbers
- body
- {
- font-family:Arial;
- font-weight:bold;
- font-size:12px;
- color:#3f4a4e;
- margin:0;
- padding:0;
- }
- /*==============================
- PAGE WRAPPER
- ===============================*/
- #page
- {
- width: 1150px;
- min-height:600px;
- margin-left:auto;
- margin-right:auto;
- }
- /*==============================
- HEADER WRAPPER
- ===============================*/
- #top-header
- {
- width:980px;
- background: url(images/topgraybar.png);
- height: 57px;
- background: #dcdcdc;
- background-image: url(images/logo.png);
- background-repeat: no-repeat;
- margin: 0 auto 0 auto;
- }
- ul
- {
- float:left;
- margin-left: 350px;
- width:100%;
- list-style-type:none;
- height:20px;
- padding-top: 20px;
- position: absolute;
- }
- a
- {
- float:left;
- text-decoration:none;
- color:#808080;
- padding: .6em;
- }
- a:hover
- {
- background-color:#cc3300;
- }
- li
- {
- display:inline;
- padding: 2.2em;
- margin: 0 auto 0 auto;
- }
- /*social buttons*/
- {
- background-image: url(images/twitter.png);
- background-repeat: no-repeat;
- margin:-1px 80px auto 745px;
- padding-top: 80px;
- padding-bottom: 30px;
- position: relative;
- float:right;
- width:8.5%;
- }
- {
- background-image: url(images/facebook.png);
- background-repeat: no-repeat;
- margin:-110px 40px auto auto;
- padding-top: 50px;
- padding-bottom: 30px;
- position: relative;
- float:right;
- clear:right;
- width:9%;
- }
- .rss
- {
- background-image: url(images/rss.png);
- background-repeat: no-repeat;
- margin:-111px 40.5px auto auto;
- padding-top: 100px;
- padding-bottom: 30px;
- position: relative;
- float:right;
- width:5%;
- }
- /*second header (orange bckgrnd, pic of men, etc.)*/
- .btm-background
- {
- background: url(images/orangebckgrnd.png);
- background-repeat: repeat;
- float:left;
- }
- .top-pic
- {
- background-image: url(images/mainpic.png);
- float:left;
- margin-left:75px;
- }
- .btm-block
- {
- background: url(images/blackblock.png);
- float:right;
- margin-right:75px;
- }
- .black-arrow
- {
- background-image: url(images/blackarrow.png);
- float:left;
- margin-left:65px;
- }
- .red-arrow
- {
- background-image: url(images/redarrow.png);
- float:right;
- margin-right:65px;
- }
- /*==============================
- BODY WRAPPER
- ==============================*/
- #body-wrapper
- {
- margin-top:350px;
- float:left;
- width:800px;
- }
- .intro
- {
- margin-top: 250px;
- }
- .tower
- {
- clear:left;
- float:right;
- margin:500px 85px auto auto;
- padding-top: 35px;
- }
- .under-tower
- {
- clear:left;
- float:right;
- margin:800px 85px auto auto;
- }
- .thumbone
- {
- background-image: url(thumbone.png);
- margin: 875px 165px auto auto;
- float:right;
- clear:right;
- }
- .thumbtwo
- {
- background-image: url(thumbtwo.png);
- margin: 875px 150px auto auto;
- float:right;
- clear:right;
- }
- .thumbthree
- {
- background-image: url(thumbthree.png);
- margin: 875px 1115px auto auto;
- float:right;
- clear:right;
- }
- /*==============================
- FOOTER
- ===============================*/
- .serration
- {
- background: url(images/btmgraydot.png);
- float:left;
- position:absolute;
- margin:200px auto 0 auto;
- }
- .first-footer
- {
- background: url(images/blackfooter.png);
- }
- .first-quote
- {
- background: url(images/blackfooterquote.png);
- }
- .second-footer
- {
- background: url(images/grayfooter.png);
- }
- .second-quote
- {
- background: url(images/grayfooterquote.png);
- }
Expand|Select|Wrap|Line Numbers
- My HTML:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <title>Company Name</title>
- <link rel="stylesheet" type="text/css" href = "style.css" media="screen" />
- </head>
- <body>
- <div id="page">
- <div id="header" >
- <div id="top-header">
- <ul class="nav">
- <li><a href="whatwedo.html">What We Do</a></li>
- <li><a href="approach">Our Approach</a></li>
- <li><a href="experience">Our Experience</a></li>
- <li><a href="news">News</a></li>
- <li><a href="about">About Us</a></li>
- <li><a href="careers">Careers</a></li>
- <li><a href="contact">Contact Us</a></li>
- </ul>
- <div id="social">
- <div class="twitter"></div>
- <div class="facebook"></div>
- <div class="rss"></div>
- </div>
- </div>
- <div id="btm-header">
- <div class="btm-background"></div>
- <div class="top-pic"></div>
- <div class="btm-block"></div>
- <div class="black-arrow"></div>
- <div class="red-arrow"></div>
- </div>
- </div>
- <div id="body-wrapper">
- <div class="intro">
- <p>Since 1969, Acme Company has been delivering quality products throughout the greater...</p><br /><br />
- <div class="tower"></div>
- <div class="under-tower"></div>
- <div class="thumbone.png"></div>
- <div class="thumbtwo.png"></div>
- <div class="thumbthree.png"></div>
- </div>
- </div>
- </div>
- <div id="footer">
- <div class="serration"></div>
- <div class="first-footer">
- <div class ="first-quote"></div>
- </div>
- <div class="second-footer">
- <div class="second-quote"></div>
- </div>
- </div>
- </body>
- </html>