• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Problem mit der Darstellung in Browsern

Status
Für weitere Antworten geschlossen.
D

dannylein

Neues Mitglied
Hi liebe Community,

ich hoffe ihr könnte mir mit meinem problem weiterhelfen.
Also ich bin dabei diese Seite umzusetzen:

The-FutureX Webdesign

Wenn man das ganze im Firefox betrachtet, wird es - zumindest bei mir - problemlos dargestellt.
Allerdings betrachte man das ganze im Internet Explorer, so wird der ganze Untere Teil der Seite zerfetzt.

Der HTML Code:
Code: 
<html>
<head>
<title>The-FutureX Webdesign</title>
<meta name="author" content="the futureX.de - Daniel Ehrenhofer">
<meta name="DC.Subject" content="The-FutureX Webdesign">
<meta name="DC.Publisher" content="The-FutureX Webdesign">
<meta name="DC.Creator" content="The-FutureX Webdesign">
<meta name="DC.Contributor" content="The-FutureX Webdesign">
<meta name="Publisher-email" content="[email protected]">
<meta name="Keywords" content="webdesign, the-futurex, the-futurex.de, the-futurex.de webdesign, webdesign, design, gfx, grafikdesign, community, webdesign community, webdesign-community, code, php, mysql, cms, content management, clanpage, clanpages, clanseite, clanseiten, business, free clan templates, free clan layouts, free templates, templates, template, layout, free layout, tutorials, tut, tutorial, grafik tutotial, ps tutorial, photoshop tutorial, c4d tutorial, tfx forum">
<meta name="DC.Description" content="The-FutureX.de erstellt ihnen ihren Internetauftritt schnell und zuverlässig. Wir passen ihnen ihre Homepage nach ihren Wünschen und Bedürfnissen an.Wir überzeugen durch Kundenfreundlichkeit und enger Kundenarbeit.Überzeugen sie sich selbst">
<meta name="DC.Language" content="de">
<meta name="robots" content="INDEX, NOFOLLOW">
<meta name="revisit-after" content="16">
<meta name="DC.Date" content="1116438000">
<meta name="DC.Identifier" content="11">
<meta name="DC.Rights" content="(C)opyright by The-FutureX.de Webdesign">
<meta name="cache-control" content="cache">
<meta name="DC.Title" content="The-FutureX Webdesign">
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.3)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.3)" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="stylesheet" type="text/css" href="tfx.css"></link>

</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" height="1000" border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td valign="top">
   <table width="100%" height="1000" border="0" cellpadding="0" cellspacing="0">
    <tr>
     <td background="img/puffer.jpg">&nbsp;</td>
    </tr>
   </table>
  </td>
  <td width="1000">
   <table align="center" width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr height="57">
     <td colspan="10" class="logo1" width="1000"></td>
    </tr>
    <tr height="30">
     <td colspan="2" class="logo2" width="434"></td>
     <td class="hover1" width="94"></td>
     <td class="hover2" width="81"></td>
     <td class="hover3" width="82"></td>
     <td colspan="2" class="hover4" width="81"></td>
     <td class="hover5" width="83"></td>
     <td class="hover6" width="83"></td>
     <td class="navir" width="62"></td>
    </tr>
    <tr height="160">
     <td colspan="6" class="headinfo" width="758"></td>
     <td colspan="4" class="newsold" width="242"></td>
    </tr>
    <tr height="147">
     <td class="login" width="252"></td>
     <td colspan="9" class="header2" width="748"></td>
    </tr>
    <tr>
     <td class="aktu" width="252" height="151"></td>
     <td colspan="9" rowspan="2" class="content" width="748" height="527"></td>
    </tr>
    <tr>
     <td rowspan="2" class="left" width="252" height="455"></td>
    </tr>
    <tr>
     <td colspan="9" class="footer" width="748" height="79"></td>
    </tr>
    <tr>
     <td class="absh" width="252" height="1"></td>
     <td class="absh" width="182" height="1"></td>
     <td class="absh" width="94" height="1"></td>
     <td class="absh" width="81" height="1"></td>
     <td class="absh" width="82" height="1"></td>
     <td class="absh" width="67" height="1"></td>
     <td class="absh" width="14" height="1"></td>
     <td class="absh" width="83" height="1"></td>
     <td class="absh" width="83" height="1"></td>
     <td class="absh" width="62" height="1"></td>
    </tr>
   </table>
  </td>
  <td valign="top">
   <table width="100%" height="1000" border="0" cellpadding="0" cellspacing="0">
    <tr>
     <td background="img/puffer.jpg">&nbsp;</td>
    </tr>
   </table>
  </td>
 </tr>
</table>
</body>
</html>

Der CSS Code:
Code: 
body
{
  font-family: verdana, arial, sans-serif, helvetica;
  font-size: 12px;
}

.link0
{
  font-family: verdana;
  color: #2C6189;
  text-decoration: none;
}
.link0:hover
{
  color: black;
}

.link1
{
  font-family: verdana;
  color: #4279A3;
  text-decoration: none;
}
.link1:hover
{
  color: black;
}

.link2
{
  font-family: verdana;
  color: #ffffff;
}
.link2:hover
{
  color: black;
}


.absh
{
  background-image: url(img/abstandhalter.gif);
  background-repeat: no-repeat;
}

.logo1
{
  background-image: url(img/logo1.jpg);
  background-repeat: no-repeat;
}

.logo2
{
  background-image: url(img/logo2.jpg);
  background-repeat: no-repeat;
}



.hover1 {

         width: 94px;
         height:30px;
         background: url("img/navi/home_hoff.jpg") 0 0 no-repeat;
          margin: auto;

}

.hover1:hover {

       background: url("img/navi/home_hon.jpg") 0 0 no-repeat;
       margin: auto;

}

.hover2 {

         width: 81px;
         height:30px;
         background: url("img/navi/about_hoff.jpg") 0 0 no-repeat;
          margin: auto;

}

.hover2:hover {

       background: url("img/navi/about_hon.jpg") 0 0 no-repeat;
       margin: auto;

}

.hover3 {

         width: 82px;
         height:30px;
         background: url("img/navi/ref_hoff.jpg") 0 0 no-repeat;
          margin: auto;

}

.hover3:hover {

       background: url("img/navi/ref_hon.jpg") 0 0 no-repeat;
       margin: auto;

}

.hover4 {

         width: 81px;
         height:30px;
         background: url("img/navi/art_hoff.jpg") 0 0 no-repeat;
          margin: auto;

}

.hover4:hover {

       background: url("img/navi/art_hon.jpg") 0 0 no-repeat;
       margin: auto;

}

.hover5 {

         width: 83px;
         height:30px;
         background: url("img/navi/ange_hoff.jpg") 0 0 no-repeat;
          margin: auto;

}

.hover5:hover {

       background: url("img/navi/ange_hon.jpg") 0 0 no-repeat;
       margin: auto;

}

.hover6 {

         width: 83px;
         height:30px;
         background: url("img/navi/kon_hoff.jpg") 0 0 no-repeat;
          margin: auto;

}

.hover6:hover {

       background: url("img/navi/kon_hon.jpg") 0 0 no-repeat;
       margin: auto;

}


.navir
{
  background-image: url(img/navi_r.jpg);
  background-repeat: no-repeat;
}
.headinfo
{
  background-image: url(img/header_info.jpg);
  background-repeat: no-repeat;
}
.newsold
{
  background-image: url(img/news_old.jpg);
  background-repeat: no-repeat;
}
.login
{
  background-image: url(img/login.jpg);
  background-repeat: no-repeat;
}
.header2
{
  background-image: url(img/header2.jpg);
  background-repeat: no-repeat;
}

.aktu
{
  background-image: url(img/aktu_pro.jpg);
  background-repeat: no-repeat;
}
.content
{
  background-image: url(img/content.jpg);
  background-repeat: no-repeat;
}
.left
{
  background-image: url(img/leftsite.jpg);
  background-repeat: no-repeat;
}
.footer
{
  background-image: url(img/footer.jpg);
  background-repeat: no-repeat;
}

.contentbordercolor
{
  color: black;
  font-family: verdana, arial, sans-serif, helvetica;
  font-size: 9px;
 }

.contentfontcolor
{
  color: #2C6189;
  font-family: verdana, arial, sans-serif, helvetica;
  font-size: 9px;
 }

 .menuebordercolor
{
  color: #ffffff;
  font-family: verdana, arial, sans-serif, helvetica;
  font-size: 9px;
 }

  .kontakt
{
  width: 235px; padding: 5px;
  width: 200px;
  color: #2C6189;
  font-family: verdana, arial, sans-serif, helvetica;
  font-size: 9px;
 }

Ich hab jetzt schon Stunden damit verbracht rauszufinden was das soll, bin aber leider auf keine Lösung gekommen, vielleicht hat ja hier jemand die passende Lösung.

Ich danke euch schon jetzt für eure Hilfe.

Gruß, Danny
 
Werbung:
eine sache. du hast ja für die links und schrift-tags verschiedene schriftarten angegeben. ich persönlich gebe immer mehr an, da benutzer, die nicht windows haben, vielleicht kein Tahoma/Verdana haben (mac-user). diese können dann helvetica oder sans-serif "erkennen". bei mir sind das Tahoma, Helvetica und sans-serif glaube ich, die ich benutze :-).

Code: 
p {
font-family: Tahoma, Helvetiva, sans-serif;
font-size 14px;
color: #ff0;
}

das als beispiel :-)


mfg leo :)
 
Ihre Webseite ist Ihr Unternehmens-Spiegel im Internet
Zum Vergrößern anklicken....
Nur Perfektion - die wir Ihnen bieten - kann und sollte daher Ihren Ansprüchen genügen
Zum Vergrößern anklicken....
Sry, aber als ich dann den Quellcode gesehen habe, musste ich etwas schmunzeln.

Tabellen zeichnen tabellarische Daten aus und dienen nicht dem Layout, warum siehst du ja im IE.

Mein Rat, schmeiß den Kram weg, lies dir z.B. diesem Artikel mal durch (Vorsprung durch Webstandards | Semantischer Code - Definitionen, Methoden, Zweifel) und fang neu an, ohne Tabellen.

Zeichne den Inhalt deiner Seite vernünftig aus, Überschriften mit <h1 - h6>, Fließtext mit <p></p>, Listen mit <ul></ul> usw. Layout ist dabei egal, das machst du später mit CSS.
 
Werbung:
Danke für die schnell Hilfe.

cain:

Danke für den Tipp, werde ich beherzigen.

Thor:

Was soll ich sagen, erwischt. ;)

Nein, das alles lässt sich leicht erklären.
Diese ganze Webdesign Nummer läuft eigentlich nur neben meinem Studium um mir ein bisschen Geld zu verdienen, ich bin also weiß gott kein Profi.
Dieser Text bezog sich jetzt mehr auf meine Grafischen Fähigkeiten.
Der Code für meine Layouts wird meist durch bekannte Coder geschrieben, die das auch richtig können, allerdings kann ich von keinem verlangen das er mir eine Homepage bastelt, deswegen versuch ich mich selbst.
Das ich mit meinen, vor Jahren erworbenen HTML Kenntnissen nicht weit komme, war mir vorher klar, aber das es so schlimm ist.

Leider habe ich auch Absolut keine Zeit um irgendetwas neues zu lernen, allerdings habe ich mir das schon länger vorgenommen. :-(
Vielleicht klappt es irgendwann.

Aber zugegeben, der Text ist wohl maßlos überzogen und unpassend.
Ich überlege mir da etwas neues. :oops:

So und nun, ja, das Projekt ist also nicht zu retten?
Neu anfangen würde mir jetzt das Genick brechen.

Vielleicht hat ja noch einer nen Zaubertrick?

Gruß,
danny
 
So auf den ersten Blick hätte ich gesagt, da stimmt was nicht mit den rowspans, aber bei den ganzen Tabellen verlier ich den Überblick.

Probier mal, an den Höhenangaben was zu verändern, oder an den spans, was anderes wüsste ich momentan nicht.
 
Wenn ich an den Höhenangaben rumspiele, versaue ich mir leider alles im FireFox. :?

Es ist immer das selbe...
 
Zuletzt bearbeitet:
Werbung:
dannylein schrieb:
...
Leider habe ich auch Absolut keine Zeit um irgendetwas neues zu lernen, allerdings habe ich mir das schon länger vorgenommen.
Vielleicht klappt es irgendwann.
...
Zum Vergrößern anklicken....
Dann biete doch nicht ausgerechnet jetzt Webdesign an. Webdesign ist (finanziell) nicht der Hit wenn man es nebenbei betreibt.
Ich habe mich als Student mit Nachtwachen in der Psychiatrie über Wasser gehalten.
Eine Zeit lang habe ich auch Schuhe eingepackt.
Je nach dem was ich gerade konnte. Wenn du im Webdesign nicht fit bist mach was anderes.

Du kommst ja nicht mal mit deiner eigenen Seite klar. Wie willst du unter Zeitdruck für andere Websiten erstellen?
 
Zuletzt bearbeitet:
Wenn ich mich damit nicht über Wasser halten könnte würde ich es nicht tun.
Ich hab meinen festen Nebenjob, das bisschen Grafiken mach ich nur nebenbei noch.
Und wie gesagt, mehr als Grafiken tu ich in der Regel auch nicht, ich habe ja meine Leute für den Code.
Die Projekte werden dann so zu sagen auf zwei Leute aufgeteilt, meistens sind die Kunden damit einverstanden.
Bis jetzt hat alles immer gut geklappt.

Allerdings war für mich nun der Zeitpunkt gekommen einen neuen, besseren Webauftritt zu gestalten, um vielleicht ein wenig Seriosität zu gewinnen, was offensichtlich nicht klappt. :)
 
Wie willst Du Dich damit über Wasser halten, wenn der Quellcode Deiner eigenen Site schon sagt, dass Du keine aktuellen Kenntnisse in Web-Entwicklung hast? Solche Seiten kann man heute unmöglich irgendjemandem für Geld anbieten! Wenn Du auf Seriosität aus bist, dann musst Du die Zeit einfach investieren und musst aktuelle Web-Entwicklung lernen!

Super ist auch, dass Deine Seite völlig weiß bleibt, wenn keine Images dargestellt werden können! Toller Job :-(

Nein, ehrlich. Investiere viieeel Zeit, oder häng die Web-Entwicklung an den Nagel.

Gruß,
-Efchen
 
Werbung:
Ich weiß nicht was das momentan soll, ich hab nie darum gebeten meine Arbeit zu bewerten!

Ich hab auch schon mehrmals erwähnt das ich NUR die Grafik / das Layout mache und den Code von jemandem schreiben lasse!

Alles andere ist vollkommen egal und ich bitte darum das einfach außenvor zu lassen.
Ich wollte einfach nur Hilfe haben und nicht ins Kreuzfeuer genommen werden.
Ich weiß eure Tipps auch sehr zu schätzen (siehe Thor's link), allerdings fehlt mir die Zeit was neues zu erlernen. Mit dem was ich kann, (das bisschen Grafiken) bin ich bis jetzt ganz gut gefahren und alle waren zufrieden, warum sollte ich nun alles in Frage stellen?

Wenn jetzt noch jemand verwertbare Beiträge hat, dann nur raus damit.
Zwar wird das nicht der Fall sein, da ich eh bei allen unten durchbin, aber dann tut es mir auch leid...

Gruß,
Danny
 
Das nennt sich Recht auf freie Meinungsäußerung. Ich weiß nicht, wieso so viele Leute, die Fragen in Foren stellen, glauben, sie hätten irgendein Recht, dass nicht jemand mal seine Meinung kundtut, die keine direkte Antwort auf die Frage ist.

allerdings fehlt mir die Zeit was neues zu erlernen. Mit dem was ich kann, (das bisschen Grafiken) bin ich bis jetzt ganz gut gefahren und alle waren zufrieden, warum sollte ich nun alles in Frage stellen?
Zum Vergrößern anklicken....
Da gibts nahezu unendlich viele Gründe. Aber die willst Du ja nicht wissen.
Das ist so ähnlich wie die Diskussion, ob Handwerker einen Meisterbrief brauchen. Ich finde solche Angebote werfen kein gutes Licht auf die Branche. Aber das beschränkt sich IMHO nicht nur auf die kostenlosen Angebote, falls Dich das beruhigt. Aber wenn man das noch kostenlos anbietet, dann wird das sicher nicht dazu beitragen, das WWW zu einem besseren Ort mit mehr Barrierefreiheit, besserem Code, schnelleren Ladezeiten und besser strukturierten Seiten zu machen.

Zum Thema: Deine Höhenangaben stimmen nicht. Die mittlere Spalte hat 1089px Höhe, die rechts daneben nur 1000. Da erklärt sich schonmal der Sprung auf der rechten Seite. Bei den anderen Spalten ist das wahrscheinlich ähnlich.
Ich kann Dir nur raten, das Tabellenlayout zu entfernen, damit wirst Du nicht glücklich, auch wenn Du das nicht hören willst.
Warum Layout mit Tabellen dumm ist: Probleme definiert, Lösungen angeboten

Außerdem ist ein pixelgenaues Layout ohnehin nicht fürs WWW geeignet. Wenn man die Schrift vergrößert, zerschießt es Dir das ganze Layout. Klar, das merkst Du derzeit nicht, die Seite hat ja auch noch keinen Text.

Auch wenn Du den Code nicht selber schreibst, auch wenn die Optik durchaus als gelungen gelten kann, die Seite ist so wie sie jetzt ist, nicht fürs Web geeignet. Ich kann Dir nur nach wie vor dringend davon abraten, den eingeschlagenen Kurs weiter zu verfolgen.

Viel Erfolg noch,
-Efchen
 
Zuletzt bearbeitet von einem Moderator:
Gelesen, verstanden und akzeptiert! :smile:
Ich Entschuldige mich bei allen Beteiligten für meine uneinsichtigkeit.

Ich werde das Projekt an dieser Stelle stoppen und die Zeit nutzen um HTML richtig zu lernen. Wenn ich dann irgendwann Zeit habe, werde ich die ganze Sache nochmal vernünftig angehen!

Ich sehe jetzt ein das es wenig Sinn macht. :-)

Gruß,
Danny

PS: nichts für ungut, bin ein alter Sturkopf! :cool:


EDIT://

Ich hab noch was vergessen.
Und zwar wollte ich mal wissen wie sich das "neue HTML" eigentlich auf meine Layouts auswirkt?
Bedeutet das jetzt für mich, ich kann nicht mehr so frei Designen wie bisher?
Ich meine, z.b. das jetzige Layout lässt sich nicht so einfach Umsetzten?
 
Zuletzt bearbeitet:
Werbung:
Das ist ein einfacher Zweispalter.
Es gibt kompliziertere Layouts.

Da du vermutlich hauptsächlich deine Grafiken präsentieren willst, würde ich ein Layout mit fixer Breite in px empfehlen. Das ist zu Anfang am einfachsten und gewährleistet, daß deine Bilder ins Layout passen. Horizontales Scrollen mußt du dann bei kleinerem Browserfenstern in kauf nehmen. (Fotografen machen das Z.B. oft so).

Bei der Umsetzung findest du hier bestimmt Hilfe.

Mich hat irritiert, daß du auf der Seite scheinbar Webdesign anbietest.
Vielleicht änderst du dein Angebot einfach in Grafikdesign ab.
Das ist vielleicht sogar universeller.

Ich mache auch nicht alles selber.
Was mir nicht liegt vergebe ich weiter (Unter anderem auch Bildbearbeitung).
 
Zuletzt bearbeitet:
dannylein schrieb:
Gelesen, verstanden und akzeptiert! :smile:
Ich Entschuldige mich bei allen Beteiligten für meine uneinsichtigkeit.... bin ein alter Sturkopf! :cool:
Zum Vergrößern anklicken....
Na gut :-) Vergeben und vergessen.

Und zwar wollte ich mal wissen wie sich das "neue HTML" eigentlich auf meine Layouts auswirkt?
Zum Vergrößern anklicken....
Streng genommen muss ich antworten: Gar nicht. Denn mit HTML macht man kein Layout. HTML benutzt man, um dem Inhalt eine Struktur zu geben und muss dabei in der Regel das Layout nicht beachten. Eine Überschrift wird als Überschrift ausgezeichnet. Wie sie dann ohne CSS im Browser dargestellt wird, ist irrelevant. Wichtig ist, dass eine Überschrift als Überschrift ausgezeichnet werden muss.

Bedeutet das jetzt für mich, ich kann nicht mehr so frei Designen wie bisher?
Ich meine, z.b. das jetzige Layout lässt sich nicht so einfach Umsetzten?
Zum Vergrößern anklicken....
Dein Layout ist simpel, wie neuroleptika schon gesagt hat.

Aber die Art, wie man Layout/Design für Websites erstellt, ist mit sicherheit anders, als wenn man das für PrintDesign macht. Unter Umständen musst Du Deine Arbeitsweisen etwas abändern, ja.
Was IMHO z.B. gar nicht geht, ist ein Design in einem Grafikprogramm zu malen und es dann zu "slicen" (oder wie das heißt). Das sind Vorgehensweisen, die mit Tabellenlayout zusammenpassen.
Außerdem muss man ja auch beachten, dass pixelgenaues Layout im WWW nicht wirklich funktioniert. Die Größe des Viewports und die im Browser eingestellte Schriftgröße müssen berücksichtigt werden.

Wichtig ist, dass man HTML schreiben kann, ohne Layout. Gut, Ausnahmen bestätigen die Regel: Wenn man weiß, dass man zwei Block-Elemente nebeneinander haben will, muss man sie floaten, und das gefloatete muss dann vor dem anderen im Quelltext stehen. Das sind aber kleine Details, die man relativ schnell weiß. Nur die Wahl der Tags darf nicht davon abhängen, wie das Tag ohne CSS im Browser dargestellt wird.

Detailfragen kannst Du gerne stellen. Wir helfen gerne. Wir motzen nicht, weil jemand Tabellen missbraucht oder Fließtext als Grafiken einbindet, und lassen die Leute dann im Regen stehen.

Ach ja, Kompromissbereitschaft ist gefragt. Da im WWW vieles variabel und unbekannt ist, und Browser auch nicht immer das machen, was sie eigentlich sollen, stößt man hin und wieder an gewisse Grenzen, die man nicht immer überschreiten kann, aber auch nicht immer mit aller Macht überschreiten kann. Prinzipiell dürfen Websites in unterschiedlichen Browsern auch bis zu einem gewissen Grad unterschiedlich aussehen. Die Funktionalität ist letzten Endes wichtiger als pixelgenaues Aussehen.

Viel Erfolg,
-Efchen
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben