HTML-Code:
@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-color: #FFF;
}
.twoColFixRtHdr #container {
width: 885px;
text-align: left; /* this overrides the text-align: center on the body element. */
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #088702;
border-right-color: #088702;
border-bottom-color: #088702;
border-left-color: #088702;
background-color: #FFFFFF;
background-image: url(Pictures/fauxcolumn.gif);
background-repeat: repeat-y;
background-position: right top;
}
.twoColFixRtHdr #header {
background: #DDDDDD; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
margin-right: auto;
margin-left: auto;
width: 889px;
padding: 0;
}
.twoColFixRtHdr #sidebar1 {
width: 280px;
padding-top: 15px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 20px;
background-color: #B2E298;
float: right;
font-size: 0.9375em;
}
#transfernavi {
width: 889px;
margin-right: auto;
margin-left: auto;
visibility: visible;
background-image: url(grasabc.jpg);
background-repeat: no-repeat;
height: 31px;
background-position: center top;
}
#mainContent {
background-color: #d8fbc5;
width: 533px;
padding-top: 15px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
border-right-width: 1px;
border-top-style: none;
border-right-style: dashed;
border-bottom-style: none;
border-left-style: none;
border-right-color: #088702;
float: none;
margin-right: 310px;
font-size: 0.9375em;
}
#mainnavi {
background-color: #FFF;
width: 889px;
margin-right: auto;
margin-left: auto;
}
#breadcrumbs {
width: 879px;
margin-right: auto;
margin-left: auto;
background-color: #FFF;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 0px;
text-align: left;
font-size: 0.875em;
}
.twoColFixRtHdr #footer {
background:#DDDDDD;
width: 889px;
margin-right: auto;
margin-left: auto;
padding: 0;
}
.twoColFixRtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
Hier der html code:
HTML-Code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<link href="../transferstylesnew2.css" rel="stylesheet" type="text/css" /><!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixRtHdr #sidebar1 { width: 220px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixRtHdr #sidebar1 { padding-top: 30px; }
.twoColFixRtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<style type="text/css">
<!--
#transfernavimenu {
margin-left: 178px;
}
#grasleft {
float: left;
width: 11.1875em;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%;}
/* End */
/*removes the indents and bullets from the unordered list and defines the width*/
ul {
margin: 0;
padding: 0;
cursor: default;
width: auto;
list-style: none;
font-family: Calibri, Arial, sans-serif;
font-weight: bold;
}
/* position of list items; set the position as relative, because we will need to position the sub-menus absolutely within them*/
li {
position: relative;
margin: 0;
padding: 0;
width: 133.008px;
font-size: 16px;
list-style-type: none;
position: relative;
text-align: center;
cursor: pointer;
float: left;
}
/*sub-menus. We want each sub-menu to appear to the right of its parent menu item when that item is hovered over; Using the “left” and “top” attributes, we can absolutely position each sub-menu within its parent menu item. You will notice I have set the “left” property to 149px (1px less than the width of the menu items), which allows the sub-menus to overlap the main menu and not produce a double border*/
li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
left: -1000em;
}
li > ul {
top: auto;
left: auto;
}
/*submenu width, text*/
ul ul li {
text-align: left;
font-weight: normal;
font-size: 0.875em;
width: 9.55em;
}
/*-------------------------------
STYLING
---------------------------------
*/
ul li a {
display: block;
text-decoration: none;
color: #000;
background: #b2e298;
padding: 0.313em;
border: 1px solid #088702;
border-bottom: 1;
}
ul ul li a{
border: 1px solid #088702;
background: #c5ffa5;
}
ul a:hover, ul a:focus {
background-color: #d8fbc5;
}
li:hover ul, li.over ul {
display: block; }
body,td,th {
font-family: Calibri, Arial, sans-serif;
}
-->
</style>
<script type="text/javascript">
<!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<body link="#068400" vlink="#088702" class="twoColFixRtHdr" onload="MM_preloadImages('../Pictures/Transfer/mainnavi_grassnetinfo_rollover.jpg','../Pictures/Transfer/mainnavi_research_rollover.jpg','../Pictures/Transfer/mainnavi_transfer_rollover.jpg','../Pictures/Transfer/mainnavi_wiki_over.jpg')">
<div id="header"><img src="../Pictures/Transfer/header_transfer.jpg" width="889" height="156" alt="header transfer" />
<!-- end #header -->
</div>
<div id="mainnavi"><a href="../info.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('main navi','','../Pictures/Transfer/mainnavi_grassnetinfo_rollover.jpg',1)"><img src="../Pictures/Transfer/mainnavi_grassnetinfo.jpg" name="main navi" width="129" height="38" border="0" id="main navi" /></a><a href="../research.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('research','','../Pictures/Transfer/mainnavi_research_rollover.jpg',1)"><img src="../Pictures/Transfer/mainnavi_research.jpg" name="research" width="108" height="38" border="0" id="research" /></a><a href="../transfer.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('transfer','','../Pictures/Transfer/mainnavi_transfer_rollover.jpg',1)"><img src="../Pictures/Transfer/mainnavi_transfer.jpg" name="transfer" width="212" height="38" border="0" id="transfer" /></a><a href="../wiki.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('wiki','','../Pictures/Transfer/mainnavi_wiki_over.jpg',1)"><img src="../Pictures/Transfer/mainnavi_wiki.jpg" name="wiki" width="146" height="38" border="0" id="wiki" /></a></div>
<!-- TemplateBeginEditable name="breadcrumbs" -->
<div id="breadcrumbs">Content for id "breadcrumbs" Goes Here</div>
<!-- TemplateEndEditable -->
<div id="transfernavi">
<div id="transfernavimenu">
<ul id="nav">
<li><a href="#">Grassnet Daad</a>
<ul>
<li><a href="#">Background</a></li>
<li><a href="#">Scope</a></li>
<li><a href="#">Objectives</a></li>
</ul>
</li>
<li><a href="#">Partners</a></li>
<li><a href="#">Scholarships</a>
<ul>
<li><a href="#">Post Doc</a></li>
<li><a href="#">Ph D</a></li>
<li><a href="#">M.Sc.</a></li>
</ul>
</li>
<li><a href="#">Summerschools</a></li>
</ul>
</div>
</div>
<!-- TemplateBeginEditable name="container" -->
<div id="container">
<div id="sidebar1">Sidebar1 Content
<p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if it will always contain more content. ahdlaskhlkfahslkfhaslfhshflfd aslaskdh fasd lasd sd afsd lksdf</p>
<p> </p>
<p> </p>
<p>asdfhlasd fasdlhflasdf s</p>
<!-- end #sidebar1 -->
</div>
<div id="mainContent"> Content for id "mainContent" Goes Here
The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if it will always contain more content.
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if it will always contain more content. </p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero. </p>
<p>safaöslk jföasdf</p>
<p>asdlkjfas jf</p>
</div>
<br class="clearfloat" />
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
<!-- end #container -->
</div>
<!-- TemplateEndEditable -->
<div id="footer">
<p>Footer</p>
<!-- end #footer --></div>
<p>
</body>
</html>
Das hintergrunbild grasabc.jpg ist bei mir im root verzeichnis auf dem server.
LinkBack URL
About LinkBacks
Hintergrundbild im div wird nicht dargestellt
Zitieren
