November 22, 201213 yr This is my first big project and I am looking for some advice on why my images will not work. (in addition if anyone wants to help me as far as the amount of html5 i should be implementing) Here is the html <!DOCTYPE html> <html> <head> <title>Content</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="content" /> <meta name="robots" content="noodp, noydir" /> <!-- SEO fix: MSNbot, Googleboy, Yahooslurp--> <link rel="stylesheet" type="text/css" media="all" href="main.css" /> </head> <body> <div id="top" class="wrapper"> <div class="masthead"> <div class="logo"><a href="/"></a></div> </div> <div class="navbar"> <ul id="nav-one" class="dropmenu"> <li><a href="/">Home</a></li> <li id="properties"><a href="/content1/">content1</a> <ul> <li><a href="/content1/content1a/">content1a</a></li> <li><a href="/content1/content1b/">content1b</a></li> <li><a href="/content1/content1c/">content1c</a></li> </ul> <li><a href="/about/">About</a></li> <li><a href="/contact/">Contact</a></li> </ul> </div> <h1>content</h1> <div class="map"></div> <p></p> </div> <div class="clear"></div> <div class="footer"> <li><a href="/">Home</a></li> <li id="properties"><a href="/content1/">content1</a> <li><a href="/about/">About</a></li> <li><a href="/contact/">Contact</a></li> </div> </div> </body> </html> Here is the CSS /* ------------------------------- ------------ Flow ---------------- ---------------------------------- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0 none; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0 none; padding: 0; } table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } ul, li { list-style: none; } em { font-style: italic; } strong { font-weight: bold; } /* ------------------------------- ------------ Document ------------ ---------------------------------- */ body { background: #191970; color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: 14px; } h1 { color: #fff; font: 25px Condensed; line-height: 100%; text-transform: uppercase; } h2 { color: #c00315; font: 18px Bold; line-height: 100%; margin-bottom: 30px; text-transform: uppercase; } h3 { color: #eee; font: 18px Bold; line-height: 100%; margin-bottom: 20px; text-transform: uppercase; } h4 { color: #c00315; font: 14px Bold; line-height: 100%; margin-bottom: 10px; text-transform: uppercase; } a { color: #fff; text-decoration: underline; } a:hover { color: #c00315; } p { line-height: 140%; margin-bottom: 20px; text-align: justify; } .wrapper { margin: 0 auto; width: 960px; } /* ------------------------------- -------------- Header ------------ ---------------------------------- */ .masthead { height: 70px; padding: 25px 0 20px 0; background-color: white; } .logo { background: url(/images/logo.jpg); height: 70px; width: 173px; } .logo a { display: block; height: 70px; width: 173px; } .map { background: url(/images/map.jpg); height: 439px; width: 391px; display: block; } .navbar { border-top: 1px solid #fff; border-bottom: 1px solid #fff; height: 45px; margin-bottom: 1px; background: #4169E1; } .navbar a { color: #fff; } .navbar ul.dropmenu { display: block; position: relative; width: 100%; opacity: .9; filter: alpha(opacity=90); z-index: 1000; } .navbar ul.dropmenu li { font: 22px Condensed, Arial, Helvetica, sans-serif; float: left; height: 45px; line-height: 45px; position: relative; opacity: .9; filter: alpha(opacity=90); z-index: 1000; } .navbar ul.dropmenu li:hover { background-color: grey; } .navbar ul.dropmenu li a { padding: 0 25px; text-decoration: none; text-transform: uppercase; } .navbar ul.dropmenu li:hover ul { display: block; width: 250px; } .navbar ul.dropmenu li ul { background:#191970; border: 1px solid #262626; display: none; padding: 10px 0; position: absolute; width: 250px; z-index: 9999; } .navbar ul.dropmenu li ul li { background: url(/images/ui/arrow.png) no-repeat 225px 15px; font: 18px Arial, Helvetica, sans-serif; float: none; height: 35px; line-height: 35px; opacity: 1; filter: alpha(opacity=100); width: 250px; z-index: 9999; } .navbar ul.dropmenu li ul li a { background: url(/images/ui/arrow.png) no-repeat 225px 15px; opacity: 1; filter: alpha(opacity=100); text-transform: none; } /* ------------------------------- ------------ Footers ------------- ---------------------------------- */ .footer { height: 100px; border-top: 1px white; font-size: 11px; margin-top: 60px; padding-top: 10px; } .footer ul { margin: 0 -10px; width: 980px; } .footer li { float: left; padding: 0 10px; } .footer li.copy { float: right; text-align: right; padding-right: none; } .footer a { color: #999; text-decoration: none; } .footer a:hover { color: #fff; } Edited November 22, 201213 yr by zrosenb
November 22, 201213 yr try replacing background: url(/images/ui/arrow.png) no-repeat 225px 15px; with background-image: url(/images/ui/arrow.png) no-repeat 225px 15px; same on all the images
November 22, 201213 yr try replacing background: url(/images/ui/arrow.png) no-repeat 225px 15px; with background-image: url(/images/ui/arrow.png) no-repeat 225px 15px; same on all the images Why??
November 22, 201213 yr Author Thanks guys, figured it out...as simple as just the location of the folder was accidently changed when I transferred it to my computer. /images/example.jpg = did not work images/example.jpg = working fine! Thanks for the help!!
Create an account or sign in to comment