1 reply [Last post]
adelyn85
adelyn85's picture
Offline
newbie
Sweden
Last seen: 6 years 6 weeks ago
Sweden
Timezone: GMT+2
Joined: 2014-07-03
Posts: 1
Points: 2

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>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 14 hours 43 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Includes

Investigate includes and server side includes.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.