anpera.net

Guten Abend,

Ich habe mich vor kurzem daran gemacht, den LoGD-Skin yar2 etwas zu "erneuern", sprich Tabellen weg und CSS rein. Klappte bisher auch ganz gut, nur die absoulte Positionierung des Abschluss-Divs inklusive Copyright, Seitengenerierungszeit, ...

Es kommt einfach nicht dahin, wo ich es haben will. Bisher sieht das so aus:

$this->bbcode_second_pass_code('', '
body {

background-color: #000000;
color: #CCCCCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;

}

h1.pagetitle {

font-family: "Old English Text MT", "Times New Roman";
font-size: 20px;
color: #FFFFFF;
font-weight: normal;
}

a.nav {


text-decoration: none;
width: 135px;
height: auto;
padding: 1px;
float: left;
clear: none;
background-color: #000033;
border: 1px solid #000033;
}

a:hover.nav {
background-color: #003366;
border-top: 1px solid #0364A3;
border-left: 1px solid #0364A3;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
}

.navhelp {
text-decoration: none;
width: 135px;
height: auto;
padding: 1px;
float: left;
clear: none;
background-color: #000033;
border: 1px solid #000033;
}

.navhead {
text-decoration: none;
width: 137px;
height: auto;
padding: 1px;
line-height: 18px;
float: left;
clear: none;
background-color: #000099;
font-weight: bold;
color: #FFFF00;
cursor: default;
text-align: center;
}

.navhi {
color: #00FF00;
text-decoration: underline;
}

a.motd {
text-decoration: none;
color:#FF9900;
}

a:hover.motd {
font-weight: bold;
}

a.hotmotd {
font-weight: bold;
}

input {
background-color: #433828;
border: 1px solid #806B4D;
color: #CCCCCC;
}
.button {
font-family: verdana,arial,helvetica,sans-serif;
font-size: 12px;
color: #F8DB83;
background-color: #6b563f;
border-top: 1px solid #947356;
border-left: 1px solid #947356;
border-right: 1px solid #403225;
border-bottom: 1px solid #403225;
}
.input {
background-color: #433828;
border: 1px solid #806B4D;
color: #CCCCCC;
}

a {
color: #0099FF;
text-decoration: none;
}

td.charinfo {
border-top-width: 1px;
border-top-style: solid;
border-top-color: #009900;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
cursor: default;
}
td.charhead {
background-color: #009900;
border: none;
cursor: default;
color: #FFFF00;
}
table.charinfo {
border: none;
width: 140px;
background-color: #003300;
border: 1px solid #000000;
}

select {
background-color: #433828;
border: 1px solid #806B4D;
color: #CCCCCC;
}

.navs {

position: absolute;
left: 8px;
width: 138px;
top: 81px;
bottom: 0px;
vertical-align: middle;
background-color: #433828;
padding-left: 5px;
padding-right: 7px;

}

.stats {

position: absolute;
right: 8px;
top: 81px;
bottom: 0px;
background-color: #352D20;
vertical-align: middle;
padding-right: 4px;
padding-top: 10px;

}

.content {

position: absolute;
left: 158px;
right: 188px;
padding-left: 6px;
top: 81px;
bottom: 0px;
background-color: #352D20;

}

.footer {

position: absoulte;
left: 0px;
right: 0px;
width: 100%;
bottom: 0px;
background-color: black;

}

.head {

background-image: url('../images/headbkg.GIF');
height: 69px;

}

.colDkBlue { color: #0000B0; }
.colDkGreen { color: #00B000; }
.colDkCyan { color: #00B0B0; }
.colDkRed { color: #B00000; }
.colDkMagenta { color: #B000CC; }
.colDkYellow { color: #B0B000; }
.colDkWhite { color: #B0B0B0; }
.colLtBlue { color: #0000FF; }
.colLtGreen { color: #00FF00; }
.colLtCyan { color: #00FFFF; }
.colLtRed { color: #FF0000; }
.colLtMagenta { color: #FF00FF; }
.colLtYellow { color: #FFFF00; }
.colLtWhite { color: #FFFFFF; }
.colLtBlack { color: #999999; }
.colOrange { color: #FF9900; }
.colDkOrange { color: #FF6600; }
.colBlue { color: #0070FF; }
.colLime { color: #DDFFBB; }
.colBlack { color: #000000; }
.colRose { color: #EEBBEE; }
.colblueviolet { color: #9A5BEE; }
.coliceviolet { color: #AABBEE; }
.colLtBrown { color: #F8DB83; }
.colDkBrown { color: #6b563f; }
.colXLtGreen { color: #aaff99; }
.colAttention { color: #FF0000; background-color: #00FF00; }
.colWhiteBlack { color: #000000; background-color: #FFFFFF; }
.colBack { color: #000000; background-color: #00FFFF; }
.trhead { color: #FFFFFF; background-color: #990000; }
.trlight { background-color: #330000; }
.trdark { background-color: #000000; }
')

und dazu

$this->bbcode_second_pass_code('', '
<!--!header-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//DE">
<html>
<head>
<title>{title}</title>
<link href='templates/yar2css.css' rel='stylesheet' type='text/css'>
{headscript}{script}
</head>
<body

<div class="head">
<h1 class="pagetitle">{title}</h1><img src='images/title.gif' align='right' alt='Legend of the Green Dragon' style="position: absolute; top: 20px; right: 15px;">
{motd} &#149; {mail} &#149; {petition} &#149; {forum} &#149; {chat}</div

<div class="stats">
{stats}
<!--{paypal}-->
</div>

<div class="navs">
<img src='images/uscroll.GIF' width='139' height='11' alt=''><br />
{nav}
<img src='images/lscroll.GIF' width='139' height='11' alt=''>
</div>

<div class="content">
<!--!footer-->
<div class="footer">
{copyright}, Design: Chris Yarbrough, Re-Design: Montekar <br />({pagegen}) {source}
</div>
</div>

<!--!statstart-->
<table cellpadding="2" cellspacing="0" class="charinfo" width="150">

<!--!stathead-->
<tr><td class="charhead" colspan="2"><b>{title}</b></td></tr>

<!--!statrow-->
<tr><td class='charinfo'><b>{title}</b></td><td class='charinfo'>`^{value}</td></tr>

<!--!statbuff-->
<tr><td class='charinfo' colspan='2'><b>{title}:</b>`n{value}</td></tr>

<!--!statend-->
</table>

<!--!navhead-->
<span class="navhead">&#151;{title}&#151;<br></span><br>

<!--!navhelp-->
<span class="navhelp">{text}</span><br>

<!--!navitem-->
<a href="{link}"{accesskey}class='nav' {popup}>{text}</a><br>

<!--!login-->
<table width='212' height='234' border='0' cellpadding='0' cellspacing='0' background='images/logindragon.gif' class='noborder'>
<tr>
<td valign='bottom' align='center' class='noborder'>
{username}: <br><input name='name' accesskey='u' size='10'><br>
{password}:<br><input name='password' accesskey='p' type='password' size='10'><br>
<input type='submit' value='{button}' class='button'><br>
<img src='images/trans.gif' width='1' height='37' align='absmiddle' alt=''>
<img src='images/trans.gif' width='1' height='15'>
</td>
</tr>
</table>
')

Was nicht klappt, sollte jeder selbst sehn, wenn er den HTML-Teil in eine yar2css.htm packt und den anderen Teil in yar2css.css.

Über Hilfe (und gleichzeitig natürlich Kritik) würde ich mich freuen

lg, Montekar

_________________
Mal wieder da...

Absolute Position sollte generell nicht verwendet werden. Das verhindert ein relatives Positionieren in Vergrösserungen der Seite. Übrigens gibts das, was du hier machst, schon lange, nur mit leichten IE-Problemen, dafür mit grösstenteils semantischem Code:

http://www.anpera.homeip.net/phpbb3/vie ... CSS#p38142

Deine Lösung überzeugt mich ehrlich gesagt nicht, da ich keine Navs mehr sehen kann ^^ Ich nutze den neusten Firefox...

_________________
Mal wieder da...

Dann ist das da ne alte Version. Silienta hat aktuellere *g* Ich lad sie gleich mal hoch. Die grössere der beiden Dateien.