Thu, 2014-07-03 08:49
Hi there,
I just recently began to play around with html & CSS and came across something I didn't manage to solve. I've googled, youtubed and so on... But no luck there.
Is it possible to use div and stylesheet as a way of replacing frames?
In this case I'd like to have my logo displayed on every page by just using a div-tag. Can I do this by adding the image in the stylesheet? And if so, how do I do it?
HTML:
<body> <!-- CONTAINER --> <div id="container"> <!-- HEADER --> <div id="header" <div id="logga">Logga</div> <div id"top_info">Top info</div> <div id="navbar"></div> <ul> <a href="monster.html">Mönster</a> <a href="uppstickat.html">Uppstickat</a> <a href="blogg.html">Blogg</a> <a href="kontakt.html">Kontakt</a> </ul> </div> <!-- CONTENT AREA --> <div id="content_area"> <div id="banner">Banner</div> <div id="left_col">Left col cont</div> <div id="right_col">Right col cont</div> </div> <!-- FOOTER --> <div id="footer">© Emmelie Cedergren 2015</div> </div> <!-- END CONTAINER--> </body> </html>
CSS:
<style type="text/html"> <!-- html { font-family: Verdana, Arial, Helvetica, Sans-serif; color: #333; font-size: 11px; } body { } #container { width: 600px; margin: 0 auto; background: #fff; } #header { width: 100%; height: 60px; border-bottom: 0px solid #FFF; background: #FFF } #logga { float: left; width: 40px; height: 80px; margin: 10px; background: #FFF; } #top_info { float: right; width: 100px; height: 40px; background: #FFF; border: 0px solid #FFF; margin: 10px; } #navbar { height: 20px; clear: both; } #navbar ul { margin: 0; float: left; padding: 0 0 0 20px; list-style-type: no9ne; } #navbar ul a { font-size: 12px; float: left; display: block; padding: 0 0 0 20px:; } #banner { background: #FFF; height: 120px; padding: 20px; clear: both; } #left_col { float:left; width: 290px; height: 200 px; padding: 20px border: 0px solid #FFF; } #right_col { float: right; width: 290px; height: 200px; padding: 20px; border: 0px solid #FFF; } #footer { float: center; padding: 20px; clear: both; } /*unvisited link*/ a:link{ color: #3B0B0B; text-decoration: none; text-transform: uppercase; } /*visited link*/ a:visited{ color: #610B0B; text-decoration: none; text-transform: uppercase; } /*mouse over link*/ a:hover{ color: #6E6E6E; text-decoration: none; text-transform: uppercase; } /*selected link*/ a:active{ color: #6E6E6E; text-decoration: none; text-transform: uppercase; } --> </style> </html>
