[LINUX.ORG.MT] xhtml and css

[Anton Xuereb]

index (copy).xhtml
Description: application/xhtml

* {
  /* This is the universal selector: It allows us to style every element
      on a page. In this case, we remove the default browser padding 
      and margin on every element */
  margin: 0;
  padding: 0;
  }
 
body {
  /* Styles applying to the entire page */
  font: 11px/1.5 Verdana, Sans;
  color: #f8f8f8;
  background: #292929;
  text-align: center;
  }
 
#header {
  /* To the header we apply a background image which tiles horizontally */
  height: 164px;
  margin: 0% 25% 5px 25%;
  /* width: 50%; */
  text-align:center;
/*   background: url('../images/headerBG.png') repeat-x top left; */
  }
  
#buttons {
  /* To the header we apply a background image which tiles horizontally */
  height: 60px;
  margin: 0% 25% 5px 25%;
  /* width: 50%; */
  /* text-align:center;
/*   background: url('../images/headerBG.png') repeat-x top left; */
  }
 
#wrapper {
  /* The wrpper contains the content area, navigation and footer.
    It's positioned in the center of the page using auto margins */
  /* width: 800px; */
  margin: 0% 25% 0% 25%;
  /* margin: 0 auto; */
  text-align: left;
  }
  
ul {
	position: relative;
	/* background: url(../images/test_pressed.png) no-repeat; */
	background: url(../images/test.png) repeat-x;
	width: 480px;
	height: 60px;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

li#bu1 a, li#bu2 a, li#bu3 a, li#bu4 a {
	background: transparent;
	position: absolute;
	width: 120px;
	height: 60px;
	bottom: 0;
	text-decoration: none;
}

li#bu1 a { left: 0px; background: url(../images/test_pressed.png) 0 0 no-repeat;}
li#bu2 a { left: 120px; background: url(../images/test_pressed.png) 0 0 no-repeat; }
li#bu3 a { left: 240px; background: url(../images/test_pressed.png) 0 0 no-repeat; }
li#bu4 a { left: 360px; background: url(../images/test_pressed.png) 0 0 no-repeat; }

li#bu1 a:hover, li#bu2 a:hover, li#bu3 a:hover, li#bu4 a:hover { background-position: 0 -120px; }

 
#content, #subContent {
  /* Both the content area and navigation share background: url(../images/test.png) 0 0 no-repeat;the same background color */
  background: #3c4040;
  }  
 
#content h2, #subContent h2 {
  /* Section headers share the same tiled background image and font */
  background: #0290fc url('../images/smallheaderBG.png') repeat-x top left;  
  font: bold 14px/28px Sans;
  text-indent: 1em;
  }  
 
#content {
  /* The content area is positioned to the right using a right float */
  float: right;
  width: 71.42%;
  }
 
#subContent {
  /* The navigation is positioned to the left using a left float */
  float: left;
  width: 26.19%;
  }
 
  /* The following styles apply to lists and links within the navigation */ 
#subContent ul {
  list-style: none;
  margin: 1em;
  }
 
#subContent a {
  color: #ccc;
  font: bold 1.1em Sans-Serif;
  text-decoration: none;
  }
 
#subContent a:hover {
  color: #f0f0f0;
  text-decoration: underline;
  }
 
  /* The following styles apply to the footer and it's contents */
#footer {
  clear: both;
  text-align: center;
  padding: 10px;
  font: 0.8em Sans-Serif;
  }  
 
#footer a {
  color: #27aefe;
  }
 
#footer a:hover {
  color: #FFF;
  }    
 
  /* General styles */  
img {
  border: none;
  }
 
img.left {
  float: left;
  margin: 1em 1em 1em 0;
  }
 
img.right {
  float: right;  
  margin: 1em 0 1em 1em;
  }  
 
p, h3, h4 {
  margin: 11px;
  }
_______________________________________________
MLUG-list mailing list
MLUG-list@linux.org.mt
http://linux.org.mt/cgi-bin/mailman/listinfo/mlug-list