i've seen following issue discussed on site, none of suggested fixes worked me. i'll paste in text of of files , directory structure. it's nothing more linking .html file external stylesheet. result should - when lounge.html runs, lounge.css should applied style sheet styles specified shown in elixer.html , directions.html. these styles not show up.
i've seen suggestions indicate can't run locally on computer, can run on web server, can't imagine that's case. ideas? in advance. here's directory structure:
c:/hfhtmlcss/chapter2/lounge/lounge.css c:/hfhtmlcss/chapter2/lounge/lounge.html c:/hfhtmlcss/chapter2/lounge/elixer.html c:/hfhtmlcss/chapter2/lounge/directions.html when run lounge.html, lounge.css: h1, h2 { font-family: sans-serif; color: gray; } h1 { border-bottom: 1px solid black; } p { color: maroon; } lounge.html: <!doctype html> <html> <head> <meta charset="utf-8"> <title>head first lounge</title> <link type="text.css" rel = "stylesheet" href="lounge.css"> </head> <body> <h1>welcome head first lounge</h1> <p> <img src="c:/hfhtmlcss/chapter2/lounge/images/drinks.gif" alt="drinks"> </p> <p> join evening refreshing <a href="c:/hfhtmlcss/chapter2/lounge/elixir.html">elixers</a> conversation , maybe game or 2 of <em>dance dance revolution</em>. wireless access provided; byows (bring own web server). </p> <h2>directions</h2> <p> you'll find right in center of downtown webville. if need finding us, check out our <a href="c:/hfhtmlcss/chapter2/lounge/directions.html">detailed directions</a>. come join us! </p> </body> </html> elixer.html: <!doctype html> <html> <head> <meta charset="utf-8"> <title>head first lounge elixirs</title> <link type="text/css" rel="stylesheet" href=lounge.css"> </head> <body> <h1>our elixirs</h1> <h2>green tea cooler</h2> <p> <img src="images/green.jpg"> chock full of vitamins , minerals, elixir combines healthful benefits of green tea twist of chamomile blossoms , ginger root. </p> <h2>raspberry ice concentration</h2> <p> <img src="images/lightblue.jpg"> combining raspberry juice lemon grass, citrus peel , rosehips, icy drink make mind feel clear , crisp. </p> <h2>blueberry bliss elixir</h2> <p> <img src="images/blue.jpg"> blueberries , cherry essence mixed base of elderflower herb tea put in relaxed state of bliss in no time. </p> <h2>cranberry antioxidant blast</h2> <p> <img src="images/red.jpg"> wake flavors of cranberry , hibiscus in vitamin c rich elixir. </p> <p> <a href="beverages/lounge.html">back lounge</a> </p> </body> </html> directions.html: <!doctype html> <html> <head> <meta charset="utf-8"> <title>head first lounge directions</title> <link type="text/css" rel="stylesheet" href="lounge.css"> </head> <body> <h1>directions</h1> <p>take 305 s exit webville - go 0.4 mi</p> <p>continue on 305 - go 12 mi</p> <p>turn right @ structure ave n - go 0.6 mi</p> <p>turn right , head toward structure ave n - go 0.0 mi</p> <p>turn right @ structure ave n - go 0.7 mi</p> <p>continue on structure ave s - go 0.2 mi</p> <p>turn right @ sw presentation way - go 0.0 mi</p> </body> </html>
html not run. it's document format, comparable word processor's, web browser can render layout. syntax of html requires using uri (a universal resource identifier) src attribute of various elements images or style sheets, , it's important quote attributes correctly. elixer.html missing double quote before css file name.
by way, links , images bound break on real web server well. put in there half-unix, half-windows syntax unixish forward slashes , windows' drive letter. won't work. make them relative uris like
<img src="images/drinks.gif" alt="drinks"> <a href="elixir.html"> that way they'll work on local box on web server.
Comments
Post a Comment