Links dont work (beginner html css only) -
i've had through questions thought similar mine turns out beginner questions advanced me!
for reason links in header , footer work, not in side bar or main body, please explain me why , how can fix it? i've opened html without css , works fine then, dont know how css make link invalid :s
code here: http://codepen.io/anon/pen/gppbmp
im "pretty" sure css thats messing things ive pasted down there, codepen has html :)
(i aware super basic, first try , has start somewhere! :))
body { font-family: "helvetica"; background: #dcdcdc; } header { font-size: 12px; color: black; text-decoration: none; } .side { font-size: 12px; color: gray; text-decoration: none; } .product { font-size: 12px; color: gray; text-decoration: none; text-align: center; } .product p { font-size: 12px; color: gray; text-align: center; } footer { font-size: 12px; color: gray; text-decoration: none; } body a:hover { color: #ff0066; } .nav1 { float: left; position: relative; top: 15px; left:20px; } .nav2 { position: absolute; top: 47px; right: 70px; float: right; } h1 { font-family: 'satisfy', cursive; font-size: 48px; position: relative; left: 420px; } header { background-image: url("http://www.hugohd.com/wp-content/uploads/pink-beach-sunset-wallpaper-android-wallpaper-hugohd.com_.jpeg"); margin: 30px; } .product { background: white; position: relative; float: right; left: -32px; height: 350px; padding: 30px; } .product img { height: 200px; width: 150px; margin: 5px; } .side { margin: 30px; float: left; background-color: white; height: 800px; width: 200px; padding: 10px; position: relative; top: -29px; text-align: center; } .side ul { list-style-type: none; margin: 0; padding: 0; } footer ul { list-style-type: none; margin: 0; padding: 0; } footer ul li { display: inline; padding: 80px; } footer { position: relative; bottom: -40px; right: 100px; }
thanks in advance! x
edit: thank helping, everyone! works :) x
update
what follows below may of use if unsure how set anchor tags (some seem wrong) see tasos k's solution above (and voters @ solution well).
original answer
you seem missing http://
@ start of href=
:
<a href="http://www.google.com">google</a>
^^ that's correct way of doing have:
<a href="www.google.com">google</a>
when leave out http://
browser thinks link relative html page trying display. if @ links try take http://www.example.com/www.google.com
.
that's handy thing use though because means media javascript, css , images on website don't need referenced full url. can use:
<img src="/images/background.png">
(instead of)
<img src="http://www.example.com/images/example.png">
similarly links, can reference other pages on your site with:
<a href="/myotherpage.html">page 2</a>
Comments
Post a Comment