Serveren er tilbake, og jeg har et prima ser-ikke-likt-ut-problem, kombinert med noe jeg rett og slett ikke får til. La oss se:
Siden i FireFox
http://i118.photobucket.com/albums/o108/vardark/FF.png
Siden i Internet Explorer
http://i118.photobucket.com/albums/o108/vardark/IE.png
Siden i Opera
http://i118.photobucket.com/albums/o108/vardark/oPERA.png
Målet er i utgangspunktet at den grå bakgrunnen man ser øverst skal være bakgrunn for alt innholdet på siden (inkludert det grønne sensurerte bilde FireFox ikke dekker). I tillegg vil jeg at knappanelet, som FireFox gjør om til en slags rar liste, skal ligge på bunnen slik som IE og Opera gjør det. Under følger relevant kode:
HTML/PHP
Kode
<?php
echo'<div id="hovedmeny-velkomst">
<p>Dette burde se likt ut i alle nettlesere.</p>
<p>Det ser ikke likt ut i alle nettlesere.</p>
<p>Ingenting er slik jeg vil det skal være heller.</p>
<p>Sukk.</p>
</div>
<div id="hovedmeny-logginn">
<form action="index.php" method="post">
<table>
<tr><td><b>Logg inn:</b></td></tr>
<tr><td>Brukernavn:</td><td><input name="username" class="logtextlong" maxlength="16"></td></tr>
<tr><td>Passord:</td><td><input type="password" name="password" class="logtextlong" maxlength="16"></td></tr>
<tr><td colspan="2"><input type="submit" value="Logg inn!" class="logsubmitlong" name="logginn"></td></tr>
</table>
</form><div id="hovedmeny-svar">'.$loggoutput.'</div>
<img src="bilder/index.bmp" alt=""></div>';
}
?>
<div id="hovedmeny-knapper">
<ul id="liste-knapper">
<li><a href="index.php">logg inn</a></li>
<li class="hovedmeny-knapp"><a href="index.php?meny=registrer">opprett bruker</a></li>
<li class="hovedmeny-knapp"><a href="index.php?meny=regler">regelverk</a></li>
<li><a href="index.php?meny=om">om <i>test</i></a></li>
</ul>
</div>
CSS
Kode
#hovedmeny-velkomst{
width: 400px;
height: 285px;
float: left;
padding-left: 25px;
}
#hovedmeny-logginn{
width: 400px;
height: 285px;
float: right;
}
#hovedmeny-svar{
height: 20px;
color: #763B3B;
font-weight: bold;
}
#hovedmeny-knapperul{
padding-left: 0;
margin-left: 0;
background-color: #464646;
color: White;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
}
#hovedmeny-knapper ul li{
display: inline;
}
#hovedmeny-knapper ul li a{
padding: 0.2em 1em;
background-color: #464646;
color: White;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
width: 15%;
}
#hovedmeny-knapper ul li a:hover{
background-color: #20A040;
color: #fff;
}
Dette er sikkert et salig rot for dere kjennere, men jeg satser på at jeg kan få noen gode råd for å ordne opp i denne suppa. Bare si ifra hvis det er kode som ser ut til å mangle eller noe slikt.