Help with css style sheets

M

Mineer

Expert Member
Joined
Apr 30, 2008
Messages
3,190
Reaction score
4
Location
/\/¯¯¯¯¯\/\
Hi all

Hope some can help. basically I am try out website design this is what I got so far. My question tho is instead of repeating all of the code for each pages could I somehow put what is in the "<div id="rightside">" tag in a separate file, and then just pull up the required pages as required when the client clicks on the links on the leftside?, hope I am making sense. :o

also any tips and advise would be also be welcomed, thanks in advance, (I know I am referencing the same page in the links, think of is as just place holders )
Code: 
* {margin:0px;padding:0px;top:0px;left:0px;}
body{
	text-align: center;
	background-color: #fff;
}
#central{
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
	position: relative;
	width: 1000px;
	text-align: left;
}
#leftside{float: left;
	width:200px;
	height:900px;
	background-color: #c95202;
}
#rightside{
	margin-top: 250px;
	float: right;
	width:800px;
	height:650px;
	background-color:#cc6700;
	position: relative;
	color:#fff;
}
#header{
	background-image: url(images/header.jpg);
	height: 250px;
	width: 1000px;
	position: relative;
}
#middle{
	position: absolute;
	top: 250px;
	
}
#leftside img{
	margin-top:2px;}
#menu{
	position: absolute;
	height: 306px;
	width: 137px;
	left: 50px;
	top: 0px;
	background-color: #c95202;
	margin-top:2px;
}
#leftside ul{
	list-style-position: outside;
	list-style-type: none;
	margin-top: 40px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #c95202;
	
}
#leftside li{
	height: 50px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;	
	list-style-position: outside;
	list-style-type: none;
}
#leftside ul a{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bolder;
	color: #FFFFFF;
	text-decoration: none;
	height: 50px;
	width: 117px;
	padding-left: 20px;
	padding-top: 10px;
	display: block;
}
#leftside a:hover{background-color:#ff6600;}
#rightside h1{
	color:#fff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	padding: 20px;
	text-align:center;
}
#rightside p{
	color:#fff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	padding: 20px;
}
#rightside a{color:#fff;}
#rightside a:hover{background-color:#ff6600;}
#footer{
	position: absolute;
	height: 58px;
	width: 388px;
	top: 560px;
	background-color: #c95202;
	text-align:center;
}
#footer p{	
	color:#fff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	padding: 20px;
}
#footer a{color:#fff;}

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Thathani primary school</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="central">
	<div id="leftside">
		<div id="header"></div>
		<div id="middle">
			<div id="menu">
				<ul>
					<li><a href="index.htm">School History</a></li>
					<li><a href="index.htm">Sports & Culture</a></li>
					<li><a href="index.htm">Academic Achievements </a></li>
					<li><a href="index.htm">School News</a></li>
					<li><a href="index.htm">School Year Calander</a></li>
					<li><a href="index.htm">Academic Allocation</a></li>
					<li><a href="index.htm">Headmaster Message</a></li>
					<li><a href="index.htm">Chairman/lady SGB Message</a></li>
				</ul>
			</div>
		</div>

	</div>
	<div id="rightside">
		<h1>Thathani Primary School <br />Rise and shine.</h1>
		<h1>HISTORY OF SCHOOL</h1>
		<p>
		Thathani Primary School was built in 1960. Various principals have led the school. It had its great moments well as low moments. Mrs.IN.Mbhekeni has led the school in the ‘80s and the school reached its high levels through her leadership, winning competitions in music, athletics, soccer and netball. The girl guide movement was one of the school passions. Thathani was formerly a lower primary but changed that in the early ‘90s to become a high primary starting from Grade 1 to Grade 7. She retired in 1994.
		</p>
		<p>
		Mr.Z.E. Zwane took over in July 1997. The school managed to get a sponsor “ Adopt-A-School” which built a science Lab, a library and Administration block.MR. Zwane retired in 30 March 2011. Mrs I.N.Madiba took reign in 01 August 2011. The School is promising to reclaim its former glory. The upgrades of the school environment and renovations of classes have been done. The school has won one of the best competitions and won R25 000.00 to mentioned few from “CAN DO”.
		</p>

	</div>
</div>
</body>
</html>
 
Last edited:
If I understand what you want, you want to have that existing code in a page. When clicking a link, the "rightside" div content is replaced with some other content.

This is possible using AJAX. I suggest you look into jquery's "load" method which will do what you want.

However: doing it this way is not a good idea for search engines. It is much better to have each piece of content on its own page.

The way I would approach this would be to have a template system - the template would contain the HTML that is unchanged on each page. Then, assuming you have some kind of server-side language, adding the content that changes (eg, page title, content) to that template and showing the combined HTML.

With PHP (which I assume your server will give you, it is common) one way to do this would be to use includes
 
firstly thanks

After googling your suggestions, I somehow came across Iframes and Iframe targetting, is using Iframes frowned upon ?
if not then I think will use that, feeling lazy to learn PHP or AJAX, but is they are best options then I suppose I would have to
 
Last edited:
Okay i read wrong there, you can use iframes if they work for you, i have never used them, and i dont think they are frowned apon from what iv heard
 
Last edited:
Mineer said:
firstly thanks

After googling your suggestions, I somehow came across Iframes and Iframe targetting, is using Iframes frowned upon ?
if not then I think will use that, feeling lazy to learn PHP or AJAX, but is they are best options then I suppose I would have to
Click to expand...

We frown upon using iframes but for security purposes more than anything else. In your case it should be fine though. Jquery might be your best bet.
 
I would change the files to .php (even if its normal html), you dont need big lines code to include the common file then, say menu.php - just something like <?php include('menu.php') ?>

Not the best solution but it works

Mineer said:
Hi all

Hope some can help. basically I am try out website design this is what I got so far. My question tho is instead of repeating all of the code for each pages could I somehow put what is in the "<div id="rightside">" tag in a separate file, and then just pull up the required pages as required when the client clicks on the links on the leftside?, hope I am making sense. :o

also any tips and advise would be also be welcomed, thanks in advance, (I know I am referencing the same page in the links, think of is as just place holders )
Code: 
* {margin:0px;padding:0px;top:0px;left:0px;}
body{
	text-align: center;
	background-color: #fff;
}
#central{
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
	position: relative;
	width: 1000px;
	text-align: left;
}
#leftside{float: left;
	width:200px;
	height:900px;
	background-color: #c95202;
}
#rightside{
	margin-top: 250px;
	float: right;
	width:800px;
	height:650px;
	background-color:#cc6700;
	position: relative;
	color:#fff;
}
#header{
	background-image: url(images/header.jpg);
	height: 250px;
	width: 1000px;
	position: relative;
}
#middle{
	position: absolute;
	top: 250px;
	
}
#leftside img{
	margin-top:2px;}
#menu{
	position: absolute;
	height: 306px;
	width: 137px;
	left: 50px;
	top: 0px;
	background-color: #c95202;
	margin-top:2px;
}
#leftside ul{
	list-style-position: outside;
	list-style-type: none;
	margin-top: 40px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #c95202;
	
}
#leftside li{
	height: 50px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;	
	list-style-position: outside;
	list-style-type: none;
}
#leftside ul a{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bolder;
	color: #FFFFFF;
	text-decoration: none;
	height: 50px;
	width: 117px;
	padding-left: 20px;
	padding-top: 10px;
	display: block;
}
#leftside a:hover{background-color:#ff6600;}
#rightside h1{
	color:#fff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	padding: 20px;
	text-align:center;
}
#rightside p{
	color:#fff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	padding: 20px;
}
#rightside a{color:#fff;}
#rightside a:hover{background-color:#ff6600;}
#footer{
	position: absolute;
	height: 58px;
	width: 388px;
	top: 560px;
	background-color: #c95202;
	text-align:center;
}
#footer p{	
	color:#fff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	padding: 20px;
}
#footer a{color:#fff;}

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Thathani primary school</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="central">
	<div id="leftside">
		<div id="header"></div>
		<div id="middle">
			<div id="menu">
				<ul>
					<li><a href="index.htm">School History</a></li>
					<li><a href="index.htm">Sports & Culture</a></li>
					<li><a href="index.htm">Academic Achievements </a></li>
					<li><a href="index.htm">School News</a></li>
					<li><a href="index.htm">School Year Calander</a></li>
					<li><a href="index.htm">Academic Allocation</a></li>
					<li><a href="index.htm">Headmaster Message</a></li>
					<li><a href="index.htm">Chairman/lady SGB Message</a></li>
				</ul>
			</div>
		</div>

	</div>
	<div id="rightside">
		<h1>Thathani Primary School <br />Rise and shine.</h1>
		<h1>HISTORY OF SCHOOL</h1>
		<p>
		Thathani Primary School was built in 1960. Various principals have led the school. It had its great moments well as low moments. Mrs.IN.Mbhekeni has led the school in the ‘80s and the school reached its high levels through her leadership, winning competitions in music, athletics, soccer and netball. The girl guide movement was one of the school passions. Thathani was formerly a lower primary but changed that in the early ‘90s to become a high primary starting from Grade 1 to Grade 7. She retired in 1994.
		</p>
		<p>
		Mr.Z.E. Zwane took over in July 1997. The school managed to get a sponsor “ Adopt-A-School” which built a science Lab, a library and Administration block.MR. Zwane retired in 30 March 2011. Mrs I.N.Madiba took reign in 01 August 2011. The School is promising to reclaim its former glory. The upgrades of the school environment and renovations of classes have been done. The school has won one of the best competitions and won R25 000.00 to mentioned few from “CAN DO”.
		</p>

	</div>
</div>
</body>
</html>
Click to expand...
 
You must log in or register to reply here.
Back
Top
Sign up to the MyBroadband newsletter
X