PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Darstellungsfehler

schnaegg
29.11.2006, 19:41:37
hallo

Ich habe da ein Problem und hoffe jemand kann mir da weiterhelfen.

Meine Seite wird im Mozilla Firefox und im Explorer nicht gleich angezeigt.
Irgendwie wird da die tabelle vom unterteil nicht mitvergrössert wenn sich die darin befindenden tabellen vergrössern.

Ich habe folgende dateien.
syle.css
body
{
background-color: #DDDDDD;
font: 14px/20px Arial;
}

.seite
{
width: 752px;
}

.kopf
{
height: 120px;
background-image: url(images/wid-kopf.gif);
background-repeat: no-repeat;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
}

.menucontainer
{
width: 750px;
height: 20px;
margin: 0px;
background-image: url(images/bg_menue.gif);
text-align: left;
border-left: 1px solid black;
border-right: 1px solid black;
}

a.menu
{
display: inline;
margin: 0px;
border-right: 1px solid black;
text-align: left;
text-decoration: none;
}

a.menu:link, a.menu:visited
{
color: #000000;
text-decoration: none;
}

a.menu:active, a.menu:hover
{
color: #000000;
text-decoration: none;
font-weight: 900;
}

#menu_active
{
color: #000000;
text-decoration: none;
font-weight: bold;
}

.unterteil
{
width: 750px;
background-color: #CCCCCC;
border-right: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
}

.hauptteil
{
height: 300px;
border-right: 1px solid black;
float: left;
width: 599px;
padding-top: 10px;
}

.news
{
float: right;
width: 150px;
background-color: #AAAAAA;
}

.letztenews
{
height: 20px;
background-color: #6699CC;
text-align: center;
font-weight: bold;
border-top;1px solid black;
border-left;1px solid black;
border-right;1px solid black;
border-bottom;1px solid black;
}

a.newsbeitraege
{
display: block;
height: 20px;
border-bottom: 1px solid black;
text-align: left;
text-indent: 5px;
}

a.newsbeitraege:link, a.newsbeitraege:visited
{
color: #000000;
text-decoration: none;
}

a.newsbeitraege:active, a.newsbeitraege:hover
{
color: #000000;
text-decoration: none;
font-weight: bold;
}

#newsbeitraege_active
{
color: #000000;
text-decoration: none;
font-weight: bold;
}

und index.php
<?php
session_start();

include ("diverses/seiten.php");
include ("diverses/news.php");

echo "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n";
echo " \"http://www.w3.org/TR/html4/loose.dtd\">\n";
echo "<html>\n";
echo "<head>\n";
echo " <title>Stamm Widehouz - Pfadiabteilung Schekka</title>\n";
echo " <link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\">\n";
echo " <meta http-equiv=\"content-type\" content= \"text/html; windows-1250\">\n";
echo " <meta http-equiv=\"pragma\" content= \"cache\">\n";
echo " <meta name=\"robots\" content= \"INDEX,FOLLOW\">\n";
echo " <meta http-equiv=\"content-language\" content= \"de\">\n";
echo " <meta name=\"description\" content= \"Der Stamm Widehouz gehört zur Pfadiabtteilung Schekka. Wir umfassen alle Jugentlichen der 4. - 9. Klasse.\">\n";
echo " <meta name=\"abstract\" content= \"Der Stamm Widehouz gehört zur Pfadiabtteilung Schekka. Wir umfassen alle Jugentlichen der 4. - 9. Klasse.\">\n";
echo " <meta name=\"keywords\" content= \"widehouz\">\n";
echo " <meta name=\"author\" content= \"Adrian Braun\">\n";
echo " <meta name=\"publisher\" content= \"Adrian Braun\">\n";
echo " <link rev=\"made\" content= \"tukan@widehouz.ch.vu\">\n";
echo " <meta name=\"copyright\" content= \"Adrian Braun\">\n";
echo " <meta name=\"audience\" content= \"Jugendliche\">\n";
echo " <meta name=\"page-type\" content= \"Private Homepage\">\n";
echo " <meta name=\"page-topic\" content= \"Freizeit & Unterhaltung\">\n";
echo " <meta name=\"revisit after\" content= \"7 days\">\n";
echo "</head>\n";
echo "<body>\n";
echo "<center>\n";
echo "<div class=\"seite\">\n";
echo " <div class=\"kopf\"></div>\n";
echo " <div class=\"menucontainer\">\n";
echo " <a class=\"menu\" id=\"menu_active\" href=\"$link1\">$name1</a>\n";
echo " <a class=\"menu\" href=\"$link2\">$name2</a>\n";
echo " <a class=\"menu\" href=\"$link3\">$name3</a>\n";
echo " <a class=\"menu\" href=\"$link4\">$name4</a>\n";
echo " <a class=\"menu\" href=\"$link5\">$name5</a>\n";
echo " <a class=\"menu\" href=\"$link6\" target=\"blank\">$name6</a>\n";
echo " <a class=\"menu\" href=\"$link7\">$name7</a>\n";
if (isset($_SESSION['user']))
{echo " <b><font color=\"#FF0000\">&nbsp;Intern</font></b>\n";
echo " <a class=\"menu\" href=\"$link101\">$name101</a>\n";
echo " <a class=\"menu\" href=\"$link102\">$name102</a>\n";
echo " <a class=\"menu\" href=\"$link103\">$name103</a>\n";}
echo " </div>\n";
echo " <div class=\"unterteil\">\n";
echo " <div class=\"hauptteil\">\n";;
include ("hauptteil/index.php");
echo " </div>\n";
echo " <div class=\"news\">\n";
echo " <div class=\"letztenews\">Letzte News</div>\n";
echo " <a class=\"newsbeitraege\" href=\"$newslink1\">$newsname1</a>\n";
echo " <a class=\"newsbeitraege\" href=\"$newslink2\">$newsname2</a>\n";
echo " <a class=\"newsbeitraege\" href=\"$newslink3\">$newsname3</a>\n";
echo " <a class=\"newsbeitraege\" href=\"$newslink4\">$newsname4</a>\n";
echo " <a class=\"newsbeitraege\" href=\"$newslink5\">$newsname5</a>\n";
echo " </div>\n";
echo " </div>\n";
echo "</div>\n";
echo "</center>\n";
echo "</body>\n";
echo "</html>\n";
?>

Das ganze phänomen kann man unter http://widehouz.wi.funpic.de/ anschauen
Andes
29.11.2006, 23:29:10
Dein Quelltext(Script) den du hier eingestellt hast unterscheidet sich von dem, den man bei deiner Seite sieht. Auf deiner Seite tauchen noch zwei öffnende p-Tags auf.
Listen werden von ul-Tags umschlossen. Center ist ein veraltetes Tag, welches nicht mehr benutz werden soll. Definier statt dessen lieber margin:0px auto;. Das bewirkt, dass dein div-Tag mittig auf der Seite platziert wird.

Beim Firefox gibt es Probleme, wenn man zwei aufeinander folgende Element mit float:left und float:right definiert. Dann dehnt er das Eltern-Element nicht über die volle Höhe aus. Mit einem nachfolgendem Element, welches über css clear:both zugewiesen bekommt, lässt sich dies abstellen.


.seite
{
width: 752px;
margin:0px auto; //besser als center-Tag
}

<div class="news">
.....
</div>
<div style="clear:both;"></div>
schnaegg
30.11.2006, 18:43:48
Erstmal danke das du mir hilfst!

Aber was meinst du mit den öfnenden p-Tags? sollten die noch mit </p> geschlossen werden? Wenn ja wesshalb denn das?
Und wesshalb sollte ich dnn die Listen mit ul-Tags umschliessen?

Ich habe dies mit clear:both versucht und zwar folgendermassen:
echo " <div class=\"unterteil\">\n";
echo " <div class=\"hauptteil\">\n";;
include ("hauptteil/index.php");
echo " </div>\n";
echo " <div class=\"news\">\n";
echo " <div class=\"letztenews\">Letzte News</div>\n";
echo " <a class=\"newsbeitraege\" href=\"$newslink1\">$newsname1</a>\n";
echo " <a class=\"newsbeitraege\" href=\"$newslink2\">$newsname2</a>\n";
echo " <a class=\"newsbeitraege\" href=\"$newslink3\">$newsname3</a>\n";
echo " <a class=\"newsbeitraege\" href=\"$newslink4\">$newsname4</a>\n";
echo " <a class=\"newsbeitraege\" href=\"$newslink5\">$newsname5</a>\n";
echo " </div>\n";
echo " <div style="clear:both;"></div>\n";
echo " </div>\n";

aber habe nun folgende fehlermeldung erhalten:
Parse error: syntax error, unexpected T_STRING, expecting ',' or ';' in /usr/export/www/vhosts/funnetwork/hosting/widehouz/index.php on line 59


sorry, fals diese Fragen ein bischen "stupid" wirken aber dies ist mein erstes Projekt, welches ich durchführe.
Andes
30.11.2006, 21:15:02
Es ist besser alle HTML-Tags zu schließen. Nicht jeder Browser akzeptiert nur ein öffnendes Tag und stellt dann die Seite falsch dar. Bei XHTML ist es zugar ein Muss sie zu schließen.
li-Tags sind Teil einer Liste und die wird gewöhnlich mit ul-, ol-Tags eingeleitet.
li-Tag (http://de.selfhtml.org/html/text/listen.htm#aufzaehlung)

Fehlermeldung: Du musst natürlich die Anführungsstriche auch maskieren. So wie du es bei den anderen auch schon getan hast. Ich hatte dir nur den reinen HTML-Code gepostet.
schnaegg
30.11.2006, 21:47:21
na klar dieser fehler hätte mir eigentlich auffallen müssen!

Danke für deine hilfreichen tipps ;)
schnaegg
04.12.2006, 16:36:22
Hallo ich bin es wieder!

Ich habe nun mein nächstes problem!
Leider passt sich die grösse vom unterteil(container) bei mozilla firefox nicht dem Inhalt an. mei dem explorer funktioniert dies wunderbar! Die style.css datei ist bis auf die kleine änderung immer noch die selbe!

das ganze kann man unter http://widehouz.wi.funpic.de/ sehen
Andes
04.12.2006, 18:59:49
Da noch eine DIV-Box 'haupteil' mit einer festen Höhenangabe innerhalb von 'unterteil' definiert ist. Da ist der IE etwas Großzügig und macht einfach was er für richtig hält. Der FF und Opera (andere hab ich jetzt nicht geschaut) halten sich an das was du definiert hast und schieben eben den Text über den Rand hinaus.
schnaegg
04.12.2006, 19:28:46
gibt es denn ene möglichkeit eine minimale höhe festzulegen?
Ich hätte nämlich gerne, dass die Seite eine bestimmte höhe hat und sich dann erweitert wenn er Inhalt grösser ist.
Andes
04.12.2006, 19:38:52
Ja mit min-height kannst du eine Mindesthöhe festlegen. Wird aber vom IE ignoriert.
min-height (http://de.selfhtml.org/css/eigenschaften/positionierung.htm#min_height)
schnaegg
04.12.2006, 19:50:04
kann man dies denn nicht irgendwie umgehen damit es bei beiden browsern klappt?
Andes
04.12.2006, 21:48:35
Doch es gibt eine Möglichkeit die in folgenden Browsern funktioniert.
IE6 + 7, FF, Opera, Konqueror, Mozila, Netzcape, Safari

http://wellstyled.com/css-minheight-hack.html