C
Comenius
Guten Abend,
Ich habe zwar schon ein Thema angefangen, in dem es auch um meine Css-Problemchen ging, aber diesmal ist es ein neues Problem *nerv*
Ich habe mit css 4 Boxen gemacht.
eine fürs Logo, 2 Navigationen (links - rechts) und der Mittelteil.
Nun habe ich als logo ein Bild genommen es reingesetzt und angepasst.
Die linke Navigation ist auch soweit fertig - also auch mit in der Box.
Der Mittelteil besitzt nur eine Überschirft (in einen farbigen HTML-Balken geschrieben).
Und die linke Navigation ist noch leer.
soweit kein Problem... nur habe ich mich gewundert, dass die linke Navigationsbox 5px von links, 850px von rechts und 50px von oben steht und die linke Box, um auf genau der selben Höhe zu sein 5px von rechts, 850px von links und -38px von oben benötigt.
das -38px von oben, konnte ich irgendwie nicht richtig einortnen.
Natürlich sieht es so im IE 1A aus.
In Netscape, Opera und Firefox hingegen, ist es halt -38 von der linken Navigationsbox entfernt (So wie es ja normalerweise auch sein sollte!)
Dann frage ich mich nur, warum diese -38 auf der rechten seite genauso viel sind wie 50 auf der linken ...
Ich habe dann mal alle Boxen geleert und nur mit <br> gefüllt um zu sehen was passiert.
Naja, wenn ich es so mache, passt überhaupt nichts mehr.
Irgendwie gibt das alles für mich keinen sinn.
Ich packe mal den Code von der index.php und der style.css hier mit rein.
Eigentlich recht simpel.
In der ersten div-box sind Logo-Bild-Uhrzeit.
in der linken Navaigations-Box sind Login und Navigation.
Die Mitte hat nur eine Überschrift und die rechte Box besitzt nur
ein paar Zeilenumbrüche, damit man die Umrisse erkennen kann.
Nun habe ich mal alle Logos und Bilder etc. entfernt:
Warum ist nun alles total verzerrt ?
Wie kann ich es (mit Inhalt, also Logo etc.) machen, damit es in allen hier erwähnten Browsern (IE, Netscape, Mozilla, Opera) einigermaßen gleich aussieht ?
Ich Hoffe das sich jemand die mühe macht, den Code mal ein bisschen zu durchstöbern, denn ich weiss einfach nicht mehr weiter.
Danke
Gruss
Commi
Ich habe zwar schon ein Thema angefangen, in dem es auch um meine Css-Problemchen ging, aber diesmal ist es ein neues Problem *nerv*
Ich habe mit css 4 Boxen gemacht.
eine fürs Logo, 2 Navigationen (links - rechts) und der Mittelteil.
Nun habe ich als logo ein Bild genommen es reingesetzt und angepasst.
Die linke Navigation ist auch soweit fertig - also auch mit in der Box.
Der Mittelteil besitzt nur eine Überschirft (in einen farbigen HTML-Balken geschrieben).
Und die linke Navigation ist noch leer.
soweit kein Problem... nur habe ich mich gewundert, dass die linke Navigationsbox 5px von links, 850px von rechts und 50px von oben steht und die linke Box, um auf genau der selben Höhe zu sein 5px von rechts, 850px von links und -38px von oben benötigt.
das -38px von oben, konnte ich irgendwie nicht richtig einortnen.
Natürlich sieht es so im IE 1A aus.
In Netscape, Opera und Firefox hingegen, ist es halt -38 von der linken Navigationsbox entfernt (So wie es ja normalerweise auch sein sollte!)
Dann frage ich mich nur, warum diese -38 auf der rechten seite genauso viel sind wie 50 auf der linken ...
Ich habe dann mal alle Boxen geleert und nur mit <br> gefüllt um zu sehen was passiert.
Naja, wenn ich es so mache, passt überhaupt nichts mehr.
Irgendwie gibt das alles für mich keinen sinn.
Ich packe mal den Code von der index.php und der style.css hier mit rein.
Code:
<html>
<head>
<title>Home</title>
<LINK REL="stylesheet" TYPE="text/css" HREF="style.css">
</head>
<body>
<div class="box1">
<img src="logo.jpg" width="189" height="46" alt="xxxx logo" border="0">
<img src="logo2.jpg" width="397" height="48" alt="xxxx logo" border="0">
<?php
$timestamp = time();
$datum = date("d.m.Y",$timestamp);
$uhrzeit = date("H:i",$timestamp);
?>
<font face="Arial,Helvetica,Geneva,sans-serif" color="#7484af" size="2">
<B>
<?
echo $datum," - ",$uhrzeit," Uhr";
?>
</B>
</font>
</div>
<div class="box2">
<table cellpadding="0" cellspacing="0" width="130" style="border-style:outset; border-bottom-width:thin; border-left-width:thin;border-right-width:thin;border-top-width:thin; border-color:#FFFFFF;">
<tr>
<td bgcolor="#708090" align="middle" border="0"></td>
<td bgcolor="#708090" valign="middle" border="0">
<font face="Arial,Helvetica,Geneva,sans-serif" color="#F2F2F2" size="2">
<b>Login</b>
</font>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" colspan="2">
<font face="Arial,Helvetica,Geneva,sans-serif" color="#7484af" size="2">
<br>
<?echo "$status";?>
<form name="actionlogin" method="post" action="<?=$_SERVER[PHP_SELF]?>">
<label class="leftkurz"> <b>Nick:</b></label>
<input name="Nickname" type="text" size="30" id="Nick" class="loginform" value=""> <br>
<label class="leftkurz"> <b>Pass.:</b></label>
<input name="Pass" type="password" size="30" id="Pass" class="loginform" value=""> <br>
<input type="hidden" name="login" value="1">
<input type="submit" name="actionlogin" class="loginbutton" value="Login"><br>
<a href="forget.php" class="text3u">Passwort vergessen?</a><br>
<a href="registrieren.php" class="text3u">registrieren</a><br>
<br>
</font>
</td>
</tr>
</table>
</form>
<table cellpadding="0" cellspacing="0" width="130" style="border-style:outset; border-bottom-width:thin; border-left-width:thin;border-right-width:thin;border-top-width:thin; border-color:#FFFFFF;">
<tr>
<td bgcolor="#708090" align="middle" border="0"></td>
<td bgcolor="#708090" valign="middle" border="0">
<font face="Arial,Helvetica,Geneva,sans-serif" color="#F2F2F2" size="2">
<b>Navigation</b>
</font>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" colspan="2">
<font face="Arial,Helvetica,Geneva,sans-serif" size="2" color="#000000">
<br>
<a href="Home.php" class="navitext">Home</a><br>
<a href="Hardware.php" class="navitext">Hardware</a><br>
<a href="Software.php" class="navitext">Software</a><br>
<a href="Zubehoer.php" class="navitext">Zubehör</a><br>
<a href="Gaestebuch.php" class="navitext">Gästebuch</a><br>
<a href="Forum.php" class="navitext">Forum</a><br>
<a href="Chat.php" class="navitext">Chat</a><br>
<a href="Download.php" class="navitext">Download</a><br>
<br>
</font>
</td>
</tr>
</table>
</div>
<div class="box3">
<table cellpadding="0" cellspacing="0" width="685px" style="border-style:outset; border-bottom-width:thin; border-left-width:thin;border-right-width:thin;border-top-width:thin; border-color:#FFFFFF;">
<tr>
<td bgcolor="#708090" align="middle" border="0"></td>
<td bgcolor="#708090" valign="middle" border="0">
<font face="Arial,Helvetica,Geneva,sans-serif" color="#F2F2F2" size=3">
<center><b>Home</b></center>
</font>
</td>
</tr>
</table>
<br>
</div>
<div class="box4">
<br>
<br>
<br>
</div>
</body>
</html>
Eigentlich recht simpel.
In der ersten div-box sind Logo-Bild-Uhrzeit.
in der linken Navaigations-Box sind Login und Navigation.
Die Mitte hat nur eine Überschrift und die rechte Box besitzt nur
ein paar Zeilenumbrüche, damit man die Umrisse erkennen kann.
Nun habe ich mal alle Logos und Bilder etc. entfernt:
Code:
<html>
<head>
<title></title>
<LINK REL="stylesheet" TYPE="text/css" HREF="style.css">
</head>
<body>
<div class="box1">
<br>
<br>
<br>
<br>
<br>
</div>
<div class="box2">
<br>
<br>
<br>
<br>
<br>
</div>
<div class="box3">
<br>
<br>
<br>
<br>
<br>
</div>
<div class="box4">
<br>
<br>
<br>
<br>
<br>
</div>
</body>
</html>
Warum ist nun alles total verzerrt ?
Wie kann ich es (mit Inhalt, also Logo etc.) machen, damit es in allen hier erwähnten Browsern (IE, Netscape, Mozilla, Opera) einigermaßen gleich aussieht ?
Ich Hoffe das sich jemand die mühe macht, den Code mal ein bisschen zu durchstöbern, denn ich weiss einfach nicht mehr weiter.
Danke
Gruss
Commi