Clemo-Layout

Da ich viele auf mein layout angesprochen haben, habe ich mir überlegt ein Partner-layout zu machen.

Es unterscheidet sich in wenigen Punkten von meinem Layout, aber man erkennt sofort, dass sie zusammen gehören.

Det HTML-Teil:

<center>
<div id="main">
<div id="head">
<div class="h-text">HEAD</div>
</div>
<table class="tbl">
<tr>
<td id="links"><var>navigation[1|2|3]</var><br />
<div id="side"><var>sidebar</var></div>
</td>
<td id="mitte"></td>
<td id="rechts"><br />
<br />
<var>content</var></td>
</tr>
</table>
<div id="footer">
<div id="c_footer"><var>footer</var></div>
</div>
</div>
</center>

Der CSS-Teil:

                            #main{width:1006px; border-width:3px; border-color:#88009F; border-style:solid; }
#links{min-width:200px; background-color: #E4D315; margin-left:-10px; font-size:16px; vertical-align:top;}
#rechts{width:800px; overflow:scroll; vertical-align:top;}
.tbl{border-spacing:0px;}        

#head{background-image: url(emotionheader.gif);}
.h-text{color:#0015FF; font-size:40px;position: relative; top:20px;height:50px}   
#c_footer{padding:4px; vertical-align:middle;}
#footer{background-color:#666; height:26px; color: #FFFFFF;}
#footer a{color:#FFFABF;}
/*
Elemente
-----------------------------------------------*/
h1{color:#0015FF !important; font-size:24px !important;}
h2{color:#6E00BF !important; font-size:18px !important;}
h3{color:#BF0008 !important; font-size:15px !important;}
p{font-size:14px !important; color:#08004F !important;}

#links h2{text-align: center !important;}
#links p{text-align: text-align: justify !important;}

div.hr {border-bottom:3px solid #CCCCCC !important;border-color:#E4D315 !important;height:5px !important;}

#links div.hr {border-bottom:3px solid #FF630F !important;border-color:#FF630F !important;height:5px !important;}

/*
Jimdo-Veränderungen
-----------------------------------------------*/
#side div.tool{margin-left:170px !important;} 
#site-admin-sidebar{position:fixed !important; right:0px !important; top:0px !important;}
#side div.hover_n{min-height: 80px !important;}

/*  Navigation
----------------------------------------------- */
#links a{color:#0015FF;}

ul.mainNav1
{
    text-align: left;
    margin:15px 0 0 0;
    padding:0;
}

ul.mainNav2,
ul.mainNav3
{
    margin:0;
    padding: 0;
}


ul.mainNav1 li,
ul.mainNav2 li,
ul.mainNav3 li
{
    display: inline;
    margin: 0;   
    padding: 0;
}


ul.mainNav1 li a,
ul.mainNav1 li a:visited,
ul.mainNav2 li a,
ul.mainNav2 li a:visited,
ul.mainNav3 li a,
ul.mainNav3 li a:visited
{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    line-height:140%;
    font-style:normal;
    text-decoration: none;
    display: block;
    border-bottom:1px solid #CCC;
}


ul.mainNav1 li a, ul.mainNav1 li a:visited { padding:4px 4px 4px 25px; }
ul.mainNav2 li a, ul.mainNav2 li a:visited { padding:3px 3px 3px 33px; }
ul.mainNav3 li a, ul.mainNav3 li a:visited { padding:3px 3px 3px 41px; }


ul.mainNav1 li a:hover,
ul.mainNav2 li a:hover,
ul.mainNav3 li a:hover
{
    background:#EEE;
    color:black;
}

ul.mainNav1 li a.current,
ul.mainNav2 li a.current,
ul.mainNav3 li a.current
{
    background:#FEFF8F;
    color:black;
    font-weight:bold;
}