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

Website wird NUR in Firefox falsch dargestellt

M

Mr. H00mpa L00mpa

Neues Mitglied
Hallo Helper's

Wie im Titel bereits erwähnt, wird meine Website in allen gängigen Browsern (IE, Chrome, Opera, Safari und Iron) richtig dargestellt, ausser in Firefox.

Ich hab nun schon recht lange daran rumgenagt, aber komme nicht auf die Lösug.

Problembeschreibung:

Anstatt das Problem mit Worten zu schildern, stelle ich hier einfach mal zwei Screenshots rein....

...Einmal die Websitendarstellung in Opera (sowie IE, Chrome, Safari und Iron):

Pic-Upload.de - Webiste-in-Opera.png


...und einmal in Firefox (auf die Sidebar achten):

Pic-Upload.de - Webiste-in-Firefox.png


Die .css-Datei ist eigentlich extern gespeichert (nicht im Quellcode).
Gestern habe ich in einem Forum den Quellcode + CSS-Code auf ein und das selbe Dokument gepackt (nur die gesamten Texte wurden entfernt), um es für die Helfer leichter zu machen und siehe da...... wenn ich sie so in Firefox Aufrufe, wird sie richtig angezeigt.;ugl

Ich verstehe nicht worans liegen kann.... Ich denke mir, dass es an der Text Formattierung (.css) liegt, aber ich suche und suche, doch finde den Fehler nicht....

Im nächsten Post, stelle ich den Quellcode + .css (im gleichen Dokument) zur Verfügung... Ich weiss, dass man eine Seite auf einen Test-Server laden kann, damit jeder eine Live Ansicht wie meine hat, aber ich weiss leider nicht wie das geht..... bzw. was/wo/wie gemacht werden muss.
Wenn jemand also lieber hätte, dass ich die Seite auf einen Server lade, dann könnte derjenige vielleicht so Freundlich sein und es mir (grob) erklären....Danke !
FG
Mr.H00mpa L00mpa :!:
 
Zuletzt bearbeitet:
Quellcode + CSS

Da Quellcode + .css zusammen zu gross ist für einen Post, muss ich es aufteilen.

Quellcode:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="keywords" content="" />  <meta name="description" content="" />
  <title></title>
</head>
<body>
<div id="wrapper">
 <div id="header">
   <a href="home1.html"><div class="nav">Home</div></a>
  <a href="das_projekt.html"><div class="nav">Das Projekt</div></a>
  <a href="ueber_uns.html"><div class="nav">ݢer uns</div></a>
  <a href="spenden.html"><div class="nav">Spenden</div></a>
  <a href="kontakt.html"><div class="nav">Kontakt</div></a>
 <div class="social"><img src="http://www.html.de/Bilder/Social Icons/Youtube.png" width="40" height="40" alt="Youtube" /></div>
  <div class="social"><a href="https://twitter.com/Helvetic_Garden"><img src="http://www.html.de/Bilder/Social Icons/Twitter.png" width="40" height="40"  alt="Follow us on Twitter" /></a></div>
  <div class="social"><a href="http://www.facebook.com/pages/Helvetic-Garden-Productions/385405594870011"><img src="http://www.html.de/Bilder/Social Icons/Facebook.png" width="40" height="40" alt="Follow us on Facebook" /></a></div>
</div>
<div id="sidebar_home_deu">  <div class="sidebar_spende_titel"></div>
   <ul>
     <li></li>
    <li></li>
   </ul>
  <br />
  <hr />
  <p class="sidebar_spende_titel"></p>
   <ul>
    <li></li>
    <li></li>
    <li></li> 
  </ul>
  <br />
  <hr />
  <p class="sidebar_spende_titel"></p>
   <ul>
    <li></li>
    <li></li>
    <li></li>
   </ul>
  <br />
  <hr />
  <p class="sidebar_spende_titel"></p>
   <ul>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
  </ul>
  <br />
  <hr />
  <p class="sidebar_spende_titel"></p>
   <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>
  <br />
  <hr />
  <p class="sidebar_spende_titel"></p>
   <ul>
    <li></li>
    <li></li>
    <li></li>
   <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>
  <br />
  <hr />
  <p class="sidebar_spende_titel"></p>
   <ul>
   <li></li>
    <li></li>
   <li></li>
    <li></li>
    <li></li>
   <li></li>
    <li></li>
    <li></li>
   </ul>
  <br />
  <hr />
  <p class="sidebar_spende_titel"></p>
   <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>
  <br />
  <hr />
  <p class="sidebar_spende_titel"></p>
   <ul>
   <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   <li></li>
   <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>
  <br />
  <hr />
  <p class="sidebar_spende_titel"></p>
   <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>
  <br />
  <hr />
  <p class="sidebar_spende_titel"></p>
   <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <br />
  <hr />
  <p class="sidebar_spende_titel"></p>
   <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>
  </div>
  <div id="content">
    <div id="language_box">
      <div id="english_flag"><a href="http://www.html.de/English/home2.html"><img src="http://www.html.de/Bilder/Flags/U.S.A.png" width="40" height="25" alt="Read in English" /></a></div>
      <div id="german_flag"><a href="home1.html"><img src="http://www.html.de/Bilder/Flags/Deutschland-3D-Web.png" width="40" height="25" alt="Auf Deutsch lesen" /></a></div>
      <div id="italy_flag"><a href="http://www.html.de/Italiano/home4.html"><img src="http://www.html.de/Bilder/Flags/Italy_3D-Web.png" width="40" height="25" alt="Leggi in Italiano" /></a></div>
      <div id="france_flag"><a href="http://www.html.de/Francais/home3.html"><img src="http://www.html.de/Bilder/Flags/France_3D-Web.png" width="40" height="25" alt="Lire en fran袩s" /></a></div>
    </div>
  </div>
  <div id="footer">&copy; 2012 - 2013 Copyright by Helvetic-Garden.com</div>
</div>
</body>
</html>
 
Zuletzt bearbeitet:
Könntest Du bitte einen Link zur Webseite zeigen? Denn so kann man das nicht wirklich nachvollziehen.
 
Hallo threadi

Danke schonmal für dein Interesse mir zu helfen.

Als erstes muss ich folgendes sagen. Da ich ganz frisch hier eingetroffen bin, mussten Tread, sowie nachvolgende Post's erst freigeschaltet werden, was seine Zeit gebraucht hat.
Da ich nicht Zeit hatte die Seite/Thread jede Stunde zu Aktualisieren, ist es leider jetzt zu Verspätungen mit den nachfolgenden Post's gekommen.

Wie ich im ersten Post geschrieben habe, sollten noch Quellcode und Css folgen, da diese zusammen zu gross für einen Post sind, musste ich auch Quellcode und Css in separaten Post's unterbringen.
Was jetzt auch geschieht.
Was ich auch geschriben habe ist, dass leider die Seite bislang auf keinen Server geladen wurde und falls jemand weiss wie dass mit den Testserver geht, er mir doch bitte einen Link oder Tipp geben kann wo ich mich darüber Informieren kann.
Ich habe selbst über die Suchmaschine versucht danach zu suchen, aber ich werde immer zu Zahlungpflichtigen ServerSite's geleitet.
Ich werde im nächsten Post trotzdem mal die Css hochladen und den Quellcode werde ich hier noch ein wenig besser Formattieren...

MfG
 
Zuletzt bearbeitet:
Hier nun noch die CSS-Datei.
Wie bereits gesagt, musste ich Quellcode und CSS-Datei separat unterbringen. Also einfach den Css Anhang ganz unten, in den <head> Bereich </head> kopieren (nichts ändern).

Code: 
<style type="text/css">


@charset "utf-8";
#wrapper {
	margin-right: auto;
	margin-left: auto;
	width: 1000px;
	border-radius: 10px;
	-moz-border-radius: 0px;
}
#header {
	height: 250px;
	margin-right: auto;
	margin-left: auto;
	background-color: #FFF;
	background-image: url(../Bilder/Header/Sunspot_abgerundet.jpg);
	background-repeat: no-repeat;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
}
.nav {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	color: rgba(255,255,255,1);
	background-color: rgba(204,204,204,0.5);
	text-align: center;
	height: 27px;
	width: 110px;
	float: left;
	margin-left: 5px;
	padding-top: 13px;
	margin-top: 205px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	box-shadow: 2px 2px 2px rgba(0,0,0,1);
	-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,1);
	-moz-box-shadow: 2px 2px 2px rgba(0,0,0,1);
	text-shadow: 1px 1px 2px rgba(0,0,0,1);
}
.social {
	float: right;
	margin-top: 205px;
	margin-right: 10px;
}
#sidebar_home_deu {
	float: right;
	height: 90px;
	width: 249px;
	overflow: auto;
	border: 1px solid rgba(102,102,102,1);
	background-color: rgba(204,204,204,1);
}
#sidebar_das_projekt {
	float: right;
	width: 249px;
	background-color: rgba(204,204,204,1);
	border-radius: 0px 10px 10px 0px;
	-webkit-border-radius: 0px 10px 10px 0px;
	-moz-border-radius: 0px 10px 10px 0px;
	box-shadow: 0px 0px;
	-webkit-box-shadow: 0px 0px;
	-moz-box-shadow: 0px 0px;
	overflow: auto;
	height: 2068px;
	border: 1px solid rgba(102,102,102,1);
}
#sidebar_ueber_uns {
	float: right;
	height: 645px;
	width: 249px;
	overflow: auto;
	border: 1px solid rgba(102,102,102,1);
	background-color: rgba(204,204,204,1);
}
#sidebar_spenden {
	float: right;
	width: 249px;
	overflow: auto;
	height: 1075px;
	border: 1px solid rgba(102,102,102,1);
	background-color: rgba(204,204,204,1);
}
#sidebar_kontakt {
	width: 249px;
	float: right;
	overflow: auto;
	height: 764px;
	border: 1px solid rgba(102,102,102,1);
	background-color: rgba(204,204,204,1);
}
#sidebar_home_eng {
	float: right;
	height: 90px;
	width: 249px;
	overflow: auto;
	border: 1px solid rgba(102,102,102,1);
	background-color: rgba(204,204,204,1);
}
#sidebar_the_project {
	float: right;
	height: 1850px;
	width: 249px;
	overflow: auto;
	border: 1px solid rgba(102,102,102,1);
	background-color: rgba(204,204,204,1);
}
#sidebar_about_us {
	float: right;
	height: 680px;
	width: 249px;
	overflow: auto;
	border: 1px solid rgba(102,102,102,1);
	background-color: rgba(204,204,204,1);
}
#sidebar_donate {
	float: right;
	height: 945px;
	width: 249px;
	overflow: auto;
	border: 1px solid rgba(102,102,102,1);
	background-color: rgba(204,204,204,1);
}
#sidebar_contact_eng {
	float: right;
	height: 758px;
	width: 249px;
	overflow: auto;
	border: 1px solid rgba(102,102,102,1);
	background-color: rgba(204,204,204,1);
}
#sidebar_home_fra {
	float: right;
	height: 90px;
	width: 249px;
	overflow: auto;
	border: 1px solid rgba(102,102,102,1);
	background-color: rgba(204,204,204,1);
}
#sidebar_le_projet {
	float: right;
	height: 2237px;
	width: 249px;
	overflow: auto;
	border: 1px solid rgba(102,102,102,1);
	background-color: rgba(204,204,204,1);
}
#sidebar_le_team {
	float: right;
	height: 743px;
	width: 249px;
	overflow: auto;
	border: 1px solid rgba(102,102,102,1);
	background-color: rgba(204,204,204,1);
}
#sidebar_donner {
	float: right;
	height: 1165px;
	width: 249px;
	overflow: auto;
	border: 1px solid rgba(102,102,102,1);
	background-color: rgba(204,204,204,1);
}
#sidebar_contact_fra {
	float: right;
	height: 750px;
	width: 249px;
	overflow: auto;
	border: 1px solid rgba(102,102,102,1);
	background-color: rgba(204,204,204,1);
}
#sidebar_home_ita {
	float: right;
	height: 90px;
	width: 249px;
	overflow: auto;
	border: 1px solid rgba(102,102,102,1);
	background-color: rgba(204,204,204,1);
}
#sidebar_il_progetto {
	float: right;
	height: 2285px;
	width: 249px;
	overflow: auto;
	border: 1px solid rgba(102,102,102,1);
	background-color: rgba(204,204,204,1);
}
#sidebar_il_team {
	float: right;
	height: 740px;
	width: 249px;
	overflow: auto;
	border: 1px solid rgba(102,102,102,1);
	background-color: rgba(204,204,204,1);
}
#sidebar_donare {
	float: right;
	height: 1110px;
	width: 249px;
	overflow: auto;
	border: 1px solid rgba(102,102,102,1);
	background-color: rgba(204,204,204,1);
}
#sidebar_contatto {
	float: right;
	height: 755px;
	width: 249px;
	overflow: auto;
	border: 1px solid rgba(102,102,102,1);
	background-color: rgba(204,204,204,1);
}
.sidebar_spende_titel {
	font-family: "Arial Black", Gadget, sans-serif;
	font-size: 15px;
	text-align: center;
	background-color: rgba(204,255,153,1);
	margin-top: 25px;
	margin-right: 10px;
	margin-left: 10px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
#language_box {
	height: 30px;
	width: 210px;
	background-color: rgba(102,0,0,1);
	padding-top: 5px;
	float: right;
	margin-right: 5px;
	margin-top: -45px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
#english_flag {
	height: 25px;
	width: 40px;
	float: left;
	margin-right: 10px;
	margin-left: 10px;
}
#german_flag {
	height: 25px;
	width: 40px;
	float: left;
}
#italy_flag {
	float: left;
	height: 25px;
	width: 40px;
	margin-right: 10px;
	margin-left: 10px;
}
#france_flag {
	float: left;
	height: 25px;
	width: 40px;
}
#content {
	background-color: #FFFFFF;
	padding-left: 25px;
	padding-bottom: 40px;
	padding-top: 50px;
	color: #333;
	-webkit-border-radius: 5px 0px 0px 5px;
	border-radius: 5px 0px 0px 5px;
	-moz-border-radius: 5px 0px 0px 5px;
	-webkit-box-shadow: -1px -1px 1px #666;
	width: 700px;
	-moz-box-shadow: -1px 1px 1px rgba(102,102,102,1);
	box-shadow: -1px 1px 1px rgba(102,102,102,1);
	padding-right: 25px;
}
#e-mail_box {
	color: rgba(153,153,153,1);
	font-size: 24px;
	font-weight: bold;
	text-shadow: 0px 0px;
	height: 33px;
	margin-top: 30px;
	padding-top: 2px;
	padding-left: 7px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	font-family: "Arial Black", Gadget, sans-serif;
	width: 97px;
}
#e-mail_adresse {
	font-size: 14px;
	font-weight: bold;
	font-family: Tahoma, Geneva, sans-serif;
	height: 18px;
	width: 182px;
	margin-top: 20px;
	margin-left: 10px;
	border: 1px solid rgba(51,51,51,1);
	padding-left: 5px;
}
.Follow_us_contact {
	font-size: 24px;
	font-weight: bold;
	color: rgba(153,153,153,1);
	text-shadow: 0px 0px;
	height: 32px;
	margin-top: 20px;
	padding-top: 3px;
	padding-left: 7px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	font-family: "Arial Black", Gadget, sans-serif;
	width: 170px;


}
#facebook_bar {
	height: 35px;
	width: 125px;
	padding-top: 20px;
}
#twitter_bar {
	height: 35px;
	width: 125px;
	margin-top: 20px;
}
#kontaktiere_uns_contact {
	height: 32px;
	font-family: "Arial Black", Gadget, sans-serif;
	font-size: 24px;
	font-weight: bold;
	margin-top: 20px;
	padding-top: 3px;
	padding-left: 7px;
	color: rgba(153,153,153,1);
	text-shadow: 0px 0px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	width: 228px;
}
.formular_texte {
	display: block;
	height: 20px;
	width: 65px;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: rgba(51,51,51,1);
	float: left;
}
.formular_ausfuell-felder {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 11px;
	color: rgba(51,51,51,1);
	width: 200px;
	border: 1px solid rgba(153,153,153,1);
}
#form1 input:focus {
	background-color: rgba(232,209,187,1);
	border: 2px solid rgba(51,51,51,1);
}
.formular_textfeld {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 11px;
	color: rgba(51,51,51,1);
	height: 100px;
	width: 200px;
	border: 1px solid rgba(102,102,102,1);
}
#form1 textarea:focus {
	background-color: rgba(232,209,187,1);
	border: 2px solid rgba(51,51,51,1);
}
#senden {
	background-color: rgba(153,102,51,1);
	height: 30px;
	width: 85px;
	border: 2px solid rgba(0,0,0,1);
	margin-left: 185px;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: rgba(204,204,204,1);
	border-radius: 7px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
}
body,td,th {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 12px;
	color: #333;
}
body {
	background-color: #E5E5E5;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
a:link {
	color: #0033FF;
	text-decoration: none;
}
a:visited {
	color: #00CC99;
	text-decoration: none;
}
a:hover {
	color: #99CC33;
	text-decoration: underline;
}
a:active {
	color: #FF0000;
	text-decoration: none;
}
h1 {
	font-size: 30px;
	color: #1D1D1D;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	text-transform: uppercase;
	text-decoration: underline;
	text-align: center;
}
h2 {
	font-size: 20px;
	color: #1D1D1D;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	text-decoration: underline;
	text-transform: none;
	padding-left: 50px;
}
h3 {
	font-size: 16px;
	text-decoration: none;
	font-weight: bold;
	text-transform: none;
	color: #1D1D1D;
}
#footer {
	height: auto;
	text-align: center;
	padding-top: 7px;
	background-color: #000000;
	color: #CCC;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	box-shadow: -1px 0px 2px #000;
}
</style>
 
Hatte keinen Platz mehr um den obigen Post zu Editieren....deshalb schreib ich's hier:

[EDIT]: Ich werde gleich mal den Tipp von "threadi" Ausführen und sobald es gemacht ist, werde ich es hier Melden.

Danke threadi nochmal
 
Ich gebe dir noch ein paar weitere Tipps:

- Validiere dein HTML und CSS.
- Vereinfache den Code um alles, was nicht unbedingt notwendig zum Lösen des Problems ist. Die vielen leeren Listelemente zum Beispiel.
- Installiere das Addon Firebug für den FF. Damit lassen sich solche Fehler leicht aufspüren.
- Installiere XAMPP als Webserver für deine lokale Testumgebung.
 
Hallo Tronjer

Vielen Dank für deine Tipps !....werde sie gleich mal in die Praxis umwandeln.

Ich habe vorsichtshalber nur alle Texte aus dem Quellcode rausgelöscht, deshalb die leeren Listeneinträge (sowie ach die meta-Daten u.A.).
Ehrlich gesagt dachte ich, die Texte wären nicht von belang, da ich es für unwahrscheindlich halte, dass es am Text selbst liegt, sondern eher an dessen Formattierung, wennschon.
Die Listeneinträge gehören zur Sidebar und ich habe diese gelassen, damit der "Overflow"-Command trotzdem erhalten bleibt, da das Problem (wie ich denke) an der Sidebar liegt.

Besten Dank an die netten Helfer hier :!::!:
 
Jetzt habe ich zwei Tipp's von Tronjer mal umgesetzt, die W3C-Validations (HTML + CSS).

Bei CSS wurden keine Fehler entdeckt:

Screen:




Bei HTML wurden wiederum 5 Fehler ausgespuckt (alle gleich). Ich verstehe aber nicht genau die Fehlerbeschreibung von W3C:

Screen:



Klingt vielleicht Doof, aber kann es sein, dass etwas falsch daran ist, einen "div-Tag", in einen "a-Tag" zu schreiben ?
Dass ist nähmlich was ich aus der Meldung Interpretiere.

Ich werde weiter alle Tipps von euch durchgehen und dann Feedback geben.


[EDIT]:
Ich habe übrigens auch Firebug installiert, aber es ist nicht gerade ein Tool, was man auf anhieb versteht. Habe ein paar Anleitungen auf die schnelle angeschaut, doch da braucht es ein paar "Minuten" mehr....

Hier mal trotzdem einen Screen mit Firebug:

Screen:




MfG
Mr. H00mpa L00mpa
 
Zuletzt bearbeitet:
Ja, das ist nicht zulässig. Innerhalb vom Inline-Element a dürfen nur inline-Elemente enthalten sein. Also kein <div>. Eher <span> oder ein <img>.
 
threadi schrieb:
Ja, das ist nicht zulässig. Innerhalb vom Inline-Element.........
Zum Vergrößern anklicken....

Ich brauchte gerademal soviel, wie ich von dir Zitiert habe, zu lesen, als mir bei "Inline-Element" ein :idea: aufgegangen ist....Dass war mal eine richtig dumme Frage von mir ;ugl !

Naja, jetzt hab ich mal das "div-", UM das "a-Tag" geschrieben und siehe da..... es geht doch.

Das eigentliche Problem wurde leider dadurch nicht behoben, aber wenigstens sind nun beide Test's (HTML + CSS) Fehlerfrei durch den W3C-Validator gekommen, was schonmal gut ist (finde ich).

Das beste ist wohl, wie bereits von euch angedeutet, dass ich die Site auf einen Server lade und diese dann für euch zur Verfügung zu stelle. Dies wird erst morgen im laufe des Tages passieren, da ich im moment ein Problem/Fehlercode beim hochladen der Site bekomme und muss dass jetzt mal abchecken mit dem WebSpaceAnbieter, btw. in dessen Forum.
Für heute bin ich durch....
TakeCare
Mr. H00mpa L00mpa


[EDIT]: Bin immernoch dran, das Problem beim hochladen der Site zu beheben, sobald sie zugänglich ist, werde ich es hier melden...Danke
 
Zuletzt bearbeitet:
Den Fehler beim hochladen der Site wurde endlich behoben !
Da es Linux Server sind, wurden die Grossschreibung falsch Interpretiert...wusste ich leider nicht.

Hier nun der Link zur Site:

Sunspot Documentary

!!! INFO !!! Nur in Firefox ist der Fehler zu sehen.....achtet auf die Position der Sidebar.

Besten Dank !
FG

Ich hoffe dass ihr mir helfen könnt die Lösung für das Problem zu finden.
 
Zuletzt bearbeitet:
Ich sehe (im FF) nur ein schwarzes Feld mit 3 Flaggen und weiter unten ist noch eine. Ich kann nicht mal erahnen wie es eigentlich aussehen sollte. Ich vermute dein Problem ist einfach ein fehlendes Verständnis für den Aufbau der CSS-Eigenschaften auf Basis von sauberem HTML.

Erstell doch die Liste der Flaggen mal folgendermaßen:
Ersetze den jetzigen HTML-Code durch eine <ul>-Liste (ist semantisch gesehen das richtige, da es sich um Navigationspunkte handelt). Diese <ul>-Liste kannst Du am Stück per CSS dorthin positionieren (nicht mit "position: absolute;"!) wo sie hin soll.
Innerhalb der Liste musst Du dann nur noch pro Flagge ein <li> und darin ein <a> einfügen. Die Listenpunkte musst Du noch so konfigurieren, dass sie nebeneinander stehen, also:

Code: 
ul#flaggen li { display: inline; }

Wenn Du es ganz sauber machen willst, dann füge die Bilder per background-position den Links hinzu. Also z.B.
Code: 
ul#flaggen a { 
 background-repeat: no-repeat; 
 display: block;
 height: 120px;
 width: 120px;
}
ul#flaggen a#de { background-image: url(deutscheflagge.png); }

Dadurch werden aus den Links Blockelemente mit einer festen Höhe und Breite (musst Du an die der Flaggengrafiken anpassen) und jeder Link erhält über die ID eine Hintergrundgrafik zugewiesen (in meinem Beispiel nur die deutsche Flagge).

Jetzt müsstest du nur noch Abstände zwischen den Flaggen entsprechend setzen.
 
Er meint die zweite Seite.

Schreibe von der Reihenfolge im HTML erst die Sidebar und anschließend das Div Content. Wenn du es dir dann einfach machen willst, teile die Breite der beiden Elemente so auf, dass sie addiert die Gesamtbreite des Wrappers ergeben - incl. der Border - und gib ihnen ein float:left. Auf das Padding innerhalb des Contents würde ich verzichten. Nimm zum Verschieben der language-box lieber margin.
 
@ threadi

Du hast vollkommen Recht, aber zu meiner Verteidigung möchte ich ein paar Sachen sagen:

Da die index.html ein Flash-Video beinhalten wird, es aber noch nicht fertig ist, musste ich etwas reinstellen, also hab ich mich auf die schnelle für die Flaggen entschieden (da der Server ja von der index.html startet).

Wie gesagt, hast du vollkommen Recht mit der <ul>-Liste und eigentlich hab ich dass auch so gelernt.
Ich habe in der eile vergessen einen <div>-Tag um alle Flaggen herum noch zu machen, dann wären sie nicht mehr gefloated wenn der Browser kleiner gemacht wird.

Wenn ein <div>-Tag alle Flaggen umschliesst, ist das doch eigentlich i.O., oder nicht ?

Jedenfalls, bitte achtet einfach nicht auf die index.html, es wurde nur so hingekleckst, damit ich die Site auf den Server laden konnte.


@ tronjer

Ich verstehe dich gerade nicht ganz. Soweit ich sehe, habe ich die Sidebar vor den content in HTML geschrieben und die breite zwischen content (751px) und Sidebar (249px) ergeben auch die Breite des Wrapper's (1000px.).

Wie kann ich denn den Text in den content einrücken, ohne padding ?

Der Tipp, die Language box margin zu nehmen finde ich super. Danke

FG


[EDIT]: Ich werde heute unter anderem mal ein wenig die Semantik verbessern (Tipp von threadi).... doch wäre ich sehr froh wenn irgendjemand Tipp's zum eigentlichen Problem hat, denn ohne dass Problem gelöst zu haben, kann ich nur schwer weitermachen, wenn ich weiss dass es bereits jetzt ein Problem gibt....ich weiss es klingt ein wenig wiedersprüchlich, denn viellleicht liegt ja gerade in der Semantik die Lösung zum Problem. Dennoch denke ich dass wenns grobe Fehler gäbe, wäre der W3C-Test Felgeschlagen.

Bin dankbar für jeden (zum Thema passenden) Tipp !

@ trojner
Du hattest Recht, die Breite der Sidebar und die des content ergaben zusammen nicht die grösse des Wrapper....mein Fehler. Dass war ein sehr guter Tipp, aber obwohl ich guter Dinge war als ich es korrigiert habe, hat es leider trotzdem nichts gebracht.... die Sidebar wird immer noch gleich angezeigt (in FF).

MfG
Mr.H00mpa L00mpa
 
Zuletzt bearbeitet:
@ threadi

Ich habe jetzt mal die Flaggen in der index.html, in eine <ul>-Liste untergebracht:

HTML CODE:
Code: 
<body><div id="wrapper">
  <ul>
    <li><a href="english/home2.html"><img src="bilder/flags/usa-uk-3d-index.png" width="225" height="150" alt="U.S.A./U.K._flag" /></a></li>
    <li><a href="deutsch/home1.html"><img src="bilder/flags/germany-3d-index.png" width="225" height="150" alt="Deutschland_Flagge" /></a></li>
    <li><a href="francais/home3.html"><img src="bilder/flags/france-3D-index.png" width="225" height="150" alt="France_flag" /></a></li>
    <li><a href="italiano/home4.html"><img src="bilder/flags/italy-3d-index.png" width="225" height="150" alt="Bandiera_Italia" /></a></li>
  </ul>
</div>
</body>

CSS CODE:
Code: 
<style type="text/css">
#wrapper {    
background-color: rgba(0,0,0,1);   
height: 300px;    
margin-top: 150px;    
margin-right: auto;    
margin-left: auto;   
padding-top: 125px;   
width: 2000px;
}
ul {   
list-style-type: none;   
margin-left: auto;
}
li {    
float: left;   
height: 150px;    
width: 225px;    
margin-right: 15px;
}
</style>

Der HTML-Code ist, in etwa, wie du es mir erklärt hast (hoffe ich). Im 2ten Teil deiner Erklärung (css Konfiguration), stehe ich komplett auf dem Schlauch.
Ich verstehe den Teil:
threadi schrieb:
Code: 
[COLOR=#333333]ul#flaggen li[/COLOR]
Code: 
[COLOR=#333333]ul#flaggen a[/COLOR]
und
Code: 
[COLOR=#333333]ul#flaggen a#de[/COLOR]
Zum Vergrößern anklicken....
nicht.

Sind das einzelne Selektoren ?
"Bitte entschuldige..... ich Check's einfach nicht

Das gleiche werde ich nun auch mit der Flaggen- und Navigations-bar in der Site machen...
FG
 
Mein Gedanke dabei war folgender:

HTML
HTML: 
<body><div id="wrapper">
  <ul id="flaggen">
    <li><a id="en" href="english/home2.html">&nbsp;</a></li>
    <li><a id="de" href="deutsch/home1.html">&nbsp;</a></li>
    <li><a id="fr" href="francais/home3.html">&nbsp;</a></li>
    <li><a id="it" href="italiano/home4.html">&nbsp;</a></li>
  </ul>
</div>
</body>

Dazu passt dann das o.g. CSS:
Code: 
ul#flaggen a {
 background-repeat: no-repeat;
 display: block;
}

ul#flaggen a#de {
 background-image: url(bilder/flags/germany-3d-index.png;
}

ul#flaggen a#en {
 background-image: url(bilder/flags/usa-uk-3d-index.png);
}

ul#flaggen a#fr {
 background-image: url(bilder/flags/france-3D-index.png);
}

ul#flaggen a#it {
 background-image: url(bilder/flags/italy-3d-index.png);
}

Hier müstest Du jetzt nur noch die Maße der Grafiken im CSS hinterlegen damit die Links, die zu Blockelementen gemacht wurden, auch eine passende Höhe und Breite annehmen.
 
Vielen Dank für deine Mühe und Zeitnahme threadi.
Nun hab ich es verstanden. ;Jump

Ich werde es gleich mal Umsetzen...


[EDIT]:

Noch etwas zu meinem eigentlichen Problem; Jetzt kommen "content (751px)" und "Sidebar (249px)", auf die Breite des wrapper's (1000px), aber man sieht z.B. in Opera, dass der "content unter der Sidebar weiterläuft". Die "Sidebar" ist in HTML vor dem "content" platziert, und sie hat den Command "float-right" bekommen.
Sieht vllt. jemand von euch wieso der "content" trotzdem unter der Sidebar ca.50px. weiterläuft ?
Gruss
 
Zuletzt bearbeitet:
Ich habe endlich rausgefunden wo der Fehler mit der "Sidebar" war.

Ich habe den "content" auf "700", statt "751px" skaliert.

Die "Sidebar" auf gleicher Grösse gelassen (249px), aber anstatt "float-right" ein "float-left" gegeben. Ausserdem noch ein "margin-left" von "751px" und nun wird die Site in alle Browsern richtig dargestellt.

Folgendes Wundert mich:

Content=700px
+
Sidebar=249px

Total: 949px.

Wrapper=1000px .........:?::?::?:

Naja, trotzdem vielen Dank für all eure Tipp's und Antworten.

Schönen Abend allerseits !

Freundliche Grüsse
Mr.H00mpa L00mpa
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben