[HTML/CSS] Webseite auf Firefox zeigts verschoben an.

norman_b

Aktives Mitglied
hallo auch ich komme mit einem ähnlichen problem... aber leider finde ich in den bisherigen Beiträgen keine Lösung! Ich mache eine Webseite mit Dreamweaver CS 3. Da ich im mainContent eine Box mit Text errichtet habe (mainContent2) und neben dieser noch ein Bild möchte (mainContent1) habe ich im div-tag "mainContent" eine art unter-div-tags erstellt. eben den mainContent1 und mainContent2. hat eigentelich au geklappt. Die Ansicht im Internet Explorer stimmt auch, nur beim Firefox funktionierts nicht. Der mainContent2 erscheint ganz oben im mainContent. Das Bild erscheint gar nicht! Könnt Ihr mir helfen? Was mache ich falsch????

Code:
* {
margin: 0;
padding: 0;
}
body {
background-color: #000000;
font-size: 76%;
line-height: 120%;
text-align: center;
font-family: Tahoma;
}
#container {
width: auto;
margin: 0 auto
}
#header {
background-image: url(../_bilder/Hintergrund%20neue%20Homepage/Logo%20Heater.jpg);
background-repeat: no-repeat;
background-position: center;
height: 90px;
margin-top: 15px;
margin-bottom: 15px;
}
#navigation {
margin-top: 30px;
}
#mainContent {
height: 315px;
position: relative;
}
#mainContent1 {
height: 300px;
}
#mainContent2 {
}
.fltlt {
float: left;
margin-left: 150px;
margin-top: 50px;
}
#mainContent2 h2 {
font-family: Impact;
font-size: 32px;
margin-top: 20px;
margin-bottom: 15px;
font-weight: lighter;
color: #FBCB0D;
letter-spacing: 1px;
}
#mainContent2 p {
font-family: Tahoma;
letter-spacing: 1px;
line-height: 18pt;
font-size: 14px;
font-variant: small-caps;
}
#navigation ul {
}
#navigation a {
text-decoration: none;
font-family: Impact;
margin-left: 20px;
margin-right: 20px;
color: #fbcb0d;
font-size: 24px;
}
#navigation li {
display: inline;
}
#navigation a:hover {
color: #fff3c5
}
#footer {
color: #FFFFFF;
font-size: 12px;
margin-top: 35px;
font-family: Tahoma;
}
/* Hintergrunde der Seiten */

#index #mainContent {
background-image: url(../_bilder/Hintergrund%20neue%20Homepage/Home%202.jpg);
background-repeat: no-repeat;
background-position: center;
}

#index #mainContent2 {
color: #FFFFFF;
background-color: #666666;
width: 350px;
margin-top: 50px;
margin-left: 400px;
}

#index #mainContent2 p {
margin-left: 10px;
margin-right: 10px;
margin-bottom: 20px;
}

und Quelcode:
Code:
<html>
  <head>
    <meta>
    <title>Unbenanntes Dokument</title>
    <link>
  </head>

  <body>
    <div>
      <div></div>
      <div>
        <div>
          <img>
            <div>
              <h2>Neues Layout</h2>
              <p></p>
            </div>
          </div>
        </div>
        <div>
          <ul>
            <li><a>Home</a></li>
            <li><a>Label</a></li>
            <li><a>Phil</a></li>
            <li><a>Tobias</a></li>
            <li><a>Filme</a></li>
            <li><a>Galerie</a></li>
            <li><a>Links</a></li>
          </ul>
        </div>
        <div>
          <p>©</p>
        </div>
    </div>
  </body>
</html>

Weiss da jemand bescheid??
 
Zuletzt bearbeitet von einem Moderator:

Dragonlord

PCtipp-Moderation
Teammitglied
Lösung

Ändere/Füge bei allen Positionsangaben den folgenden Wert hinzu:

Code:
position: absolute;
Jetzt musst Du nur die Positionierung nochmals anpassen und dann sollte es klappen.

lg Roger

[edit]Titel dem Unterforum angepasst[/edit]
 
Zuletzt bearbeitet:

BlackIceDefender

Gesperrt
Gesperrt
Ändere/Füge bei allen Positionsangaben den folgenden Wert hinzu:

Code:
position: absolute;
Jetzt musst Du nur die Positionierung nochmals anpassen und dann sollte es klappen.

lg Roger...

Ich verstehe nicht viel vom Thema, aber: Bewirkt das absolute Positionieren nicht, dass im Browser dann die Site nicht mehr skaliert werden kann? Dies ist etwas, dasmich sehr stoert, wenn die fonts fix auf eine kleine pixelgroesse (2-4) engestellt sind und die Ansicht nicht vergroessert werden kann.
 

Dragonlord

PCtipp-Moderation
Teammitglied
Vergrössern

Nein, dass hat nur mit der Positionierung zu tun und nichts mit den Schriftgrössen.

Ich verwende immer eine solche Positionierung und es funktioniert auch einwandfrei wenn man es vergrössert oder verkleinert.

lg Roger
 

norman_b

Aktives Mitglied
Positionsangaben?

Hallo Roger

Vielen Dank für Deine Hilfe... aber jetzt muss ich leider nochmals nachfragen (das habe ich bei meinem learning by doing self-kurs nicht gelernt :-) :

Was muss ich machen????

"Ändere/Füge bei allen Positionsangaben den folgenden Wert hinzu: position: absolute;" Kannst du mir ein Beispiel mit meinem Code machen? Bezieht sich das auf den CSS oder den Quellcode?


"Jetzt musst Du nur die Positionierung nochmals anpassen und dann sollte es klappen." Was sind mit "Positionierungen" gemeint?

Sorry, bin halt ein 100%-Neuling bei solchen Sachen und kenne daher die Fachausdrücke (noch) nicht...

vielen Dank nochmals für Deine Hilfe!!

Gruss
 

Dragonlord

PCtipp-Moderation
Teammitglied
Code

Hier das Beispiel eines CSS-Quellcodes.

Code:
@charset "utf-8";
/**
* Author: Roger ...
* Datum: 30.07.2008
*/

/* Allgemein */
body
{
    margin-left: 0px;
    margin-bottom: 0px;
    margin-right: 0px;  
    margin-top: 0px;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: #ffffff;
    background-color: #193264;
}
img
{
    border: 0px;
}

/* Container */
#container
{
    left: 50%;
    top: 50%;
    margin-left: -500px;
    margin-top: -220px;
    width: 1000px;
    height: 440px;
    position: absolute;
    z-index: 10;
}

/* Hintergrund */
#hg
{
    left: 0px;
    top: 0px;
    position: absolute;
    z-index: 20;
}
#hg_drache
{
    left: 840px;
    top: 0px;
    position: absolute;
    z-index: 30;
}
#hg_wolken
{
    left: 0px;
    top: 107px;
    position: absolute;
    z-index: 40;
}

table.hg
{
    width: 1000px;
    height: 440px;
}
table.hg_drache
{
    width: 130px;
    height: 130px;
}
table.hg_wolken
{
    width: 1000px;
    height: 304px;
}

/* Navigation */
#navi
{
    left: 0px;
    top: 70px;
    position: absolute;
    z-index: 30;
}

table.navi
{
    height: 40px;
}

/* Tabelle klein */
td.klein
{
    font-size: 9px;
}
/* HG_Bild */
td.hg_bild
{
    font-size: 1px;
}

/* Link */
a
{
    text-decoration: none;
    font-size: 12px;
}
a:link
{
    color: #ffffff;
}
a:visited
{
    color: #ffffff;
}
a:hover
{
    color: #999999;
}
a:active
{
    color: #999999;
}
lg Roger
 

norman_b

Aktives Mitglied
also dann müsste ich "nur" den mainContent auf position: absolut setzen und das firefox-problem löst sich damit? das habe ich vor her auch schon versucht ohne erfolg... oder muss ich die position: absolut machen und dann die ganze Seite neu "positionieren"?

Ich muss wohl die Homepage am Weekend nochmals überarbeiten... :-)


Hier das Beispiel eines CSS-Quellcodes.

siehe vorheriger Post

lg Roger
 
Zuletzt bearbeitet von einem Moderator:

Dragonlord

PCtipp-Moderation
Teammitglied
Positionierung

Wichtig ist einfach, dass Du überall wo Du eine Positionierung innerhalb der CSS-Datei hast die Position auf absolut stellst.

lg Roger
 

Dragonlord

PCtipp-Moderation
Teammitglied
Positionierung

Code:
* {
margin: 0;
padding: 0;
}
body {
background-color: #000000;
font-size: 76%;
line-height: 120%;
text-align: center;
font-family: Tahoma;
}
#container {
width: auto;
margin: 0 auto
}
#header {
background-image: url(../_bilder/Hintergrund%20neue%20Homepage/Logo%20Heater.jpg);
background-repeat: no-repeat;
background-position: center;
height: 90px;
margin-top: 15px; [COLOR=Red]/* Position/Abstand von oben */[/COLOR]
margin-bottom: 15px; [COLOR=Red]/* Position von unten */[/COLOR]
}
#navigation {
margin-top: 30px; 
[COLOR=Red]/* Position/Abstand von oben */[/COLOR]
}
#mainContent {
height: 315px; [COLOR=Red]/* Höhe des Content */[/COLOR]
position: relative;
}
#mainContent1 {
height: 300px; 
[COLOR=Red]/* Höhe des Content */[/COLOR]
}
#mainContent2 {
}
.fltlt {
float: left;
margin-left: 150px;
margin-top: 50px;
}
#mainContent2 h2 {
font-family: Impact;
font-size: 32px;
margin-top: 20px;
margin-bottom: 15px;
font-weight: lighter;
color: #FBCB0D;
letter-spacing: 1px;
}
#mainContent2 p {
font-family: Tahoma;
letter-spacing: 1px;
line-height: 18pt;
font-size: 14px;
font-variant: small-caps;
}
#navigation ul {
}
#navigation a {
text-decoration: none;
font-family: Impact;
margin-left: 20px;
margin-right: 20px;
color: #fbcb0d;
font-size: 24px;
}
#navigation li {
display: inline;
}
#navigation a:hover {
color: #fff3c5
}
#footer {
color: #FFFFFF;
font-size: 12px;
margin-top: 35px;
font-family: Tahoma;
}
/* Hintergrunde der Seiten */

#index #mainContent {
background-image: url(../_bilder/Hintergrund%20neue%20Homepage/Home%202.jpg);
background-repeat: no-repeat;
background-position: center;
}

#index #mainContent2 {
color: #FFFFFF;
background-color: #666666;
width: 350px;
margin-top: 50px;
margin-left: 400px;
}

#index #mainContent2 p {
margin-left: 10px;
margin-right: 10px;
margin-bottom: 20px;
}
Ich habe Dir mal ein paar Positionsangaben und Definitionen rot markiert.

lg Roger
 

norman_b

Aktives Mitglied
super!! vielen dank für deine hilfe! hoffe, dass es nun klappen wird! melde mich wieder! :-)

Quellcode:
siehe vorheriger Post
 
Zuletzt bearbeitet von einem Moderator:

Dragonlord

PCtipp-Moderation
Teammitglied
Tipp

Noch ein gut gemeinter Tipp.

Bitte poste nicht immer die vorherigen Beiträge. Es bringt nichts, wenn Du den ganzen Beitrag zitierst, ausser Du willst auf eine bestimmte Passage aufmerksam machen oder hinweisen.

lg Roger
 

norman_b

Aktives Mitglied
super!! vielen dank für deine hilfe! hoffe, dass es nun klappen wird! melde mich wieder! :-)

Quellcode:
siehe vorheriger Post
 
Zuletzt bearbeitet von einem Moderator:

Dragonlord

PCtipp-Moderation
Teammitglied
Danke

Gern geschehen, hoffe Du kannst es jetzt anpassen.

Noch ein gut gemeinter Tipp:

Bitte poste nicht immer die vorherigen Beiträge. Es bringt nichts, wenn Du den ganzen Beitrag zitierst, ausser Du willst auf eine bestimmte Passage aufmerksam machen oder hinweisen.

lg Roger
 

norman_b

Aktives Mitglied
So ich glaube, dass es langsam gut kommt... jetzt habe ich nur noch ein Problem: Die Navigationsliste wird jetzt im Firefox komplett angezeigt, wobei sie im IE abgeschnitten ist... es macht den Anschein, dass eine Box zu klein ist (siehe auch Anhang)... finde aber nicht raus welche...

hier noch de CSS-Code.
Code:
* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #000000;
    font-size: 76%;
    line-height: 120%;
    font-family: Tahoma;
}
#container {


}
#header {
    background-image: url(../_bilder/Hintergrund%20neue%20Homepage/Logo%20Heater.jpg);
    background-repeat: no-repeat;
    background-position: center;
    height: 80px;
    margin-top: 10px;
    margin-bottom: 10px;
}
#mainContent {
    position: absolute;
    height: 315px;
    margin-top: 15px;


}
#mainContent1 {
    height: 315px;
}
.fltlt {
    float: left;
    margin-left: 150px;
    margin-top: 50px;
    position: absolute;
    left: 122px;
    top: -24px;
}
#mainContent2 h2 {
    font-family: Impact;
    font-size: 32px;
    margin-top: 20px;
    margin-bottom: 15px;
    font-weight: lighter;
    color: #FBCB0D;
    letter-spacing: 1px;
    text-align: center;
}
#mainContent2 p {
    font-family: Tahoma;
    letter-spacing: 1px;
    line-height: 18pt;
    font-size: 14px;
    font-variant: small-caps;
    text-align: center;
}
#navigation {
    position: absolute;
    margin-top: 360px;
    height: 37px;
    width: 794px;
    text-align: center;
    left: 117px;


}
#navigation ul {

}
#navigation a {
    text-decoration: none;
    font-family: Impact;
    margin-right: 20px;
    color: #fbcb0d;
    font-size: 24px;
    left: 31px;
    top: 20px;
    width: 664px;
}
#navigation li {
    display: inline;
}
#navigation a:hover {
    color: #fff3c5
}
#footer {
    color: #FFFFFF;
    font-size: 12px;
    margin-top: 400px;
    font-family: Tahoma;
    position: absolute;
    margin-left: 20px;
    text-align: center;
    left: 428px;
    top: 108px;
    width: 139px;
}
/* Hintergrunde der Seiten */

#index #mainContent {
    background-image: url(../_bilder/Hintergrund%20neue%20Homepage/Home%202.jpg);
    background-repeat: no-repeat;
    background-position: center;
    height: 315px;
    width: 1000px;
    top: 96px;
    left: -1px;
}
#phil #mainContent {
    background-image: url(../_bilder/Hintergrund%20neue%20Homepage/Phil%202.jpg);
    background-repeat: no-repeat;
    background-position: center;
}
#tobias #mainContent {
    background-image: url(../_bilder/Hintergrund%20neue%20Homepage/Tobias%202.jpg);
    background-repeat: no-repeat;
    background-position: center;
}
#filme #mainContent {
    background-image: url(../_bilder/Hintergrund%20neue%20Homepage/Filme%202.jpg);
    background-repeat: no-repeat;
    background-position: center;
}
#galerie #mainContent {
    background-image: url(../_bilder/Hintergrund%20neue%20Homepage/Galerie%202.jpg);
    background-repeat: no-repeat;
    background-position: center;
}
#links #mainContent {
    background-image: url(../_bilder/Hintergrund%20neue%20Homepage/Links%202.jpg);
    background-repeat: no-repeat;
    background-position: center;
}
#label #mainContent {
    background-image: url(../_bilder/Hintergrund%20neue%20Homepage/Label%202.jpg);
    background-repeat: no-repeat;
    background-position: center;
}
#label #mainContent2 {
    color: #FFFFFF;
    background-color: #6F6D6E;
    width: 220px;
    margin-top: 50px;
    margin-left: 700px;
}
#index #mainContent2 {
    color: #FFFFFF;
    background-color: #666666;
    width: 350px;
    margin-top: 50px;
    margin-left: 400px;
    position: absolute;
    left: 232px;
    top: -33px;
}
#phil #mainContent2 {
    color: #FFFFFF;
    background-color: #333333;
    width: 150px;
    margin-top: 20px;
    margin-left: 550px;
    font-weight: 100;
}
#tobias #mainContent2 {
    color: #FFFFFF;
    background-color: #5B5F2C;
    width: 200px;
    margin-top: 50px;
    margin-left: 300px;
}
#galerie #mainContent2 {
    color: #FFFFFF;
    background-color: #992300;
    width: 200px;
    margin-top: 50px;
    margin-left: 400px;
}
#links #mainContent2 {
    color: #FFFFFF;
    background-color: #70787A;
    width: 200px;
    margin-top: 20px;
    margin-left: 550px;
}
#filme #mainContent2 {
    color: #FFFFFF;
    background-color: #9B2D08;
    width: 250px;
    margin-top: 50px;
    margin-left: 400px;
}
#index #mainContent2 p {
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
}
#label #mainContent2 p {
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
}
#phil #mainContent2 p {
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
}
#tobias #mainContent2 p {
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
}
#filme #mainContent2 p {
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
}
#galerie #mainContent2 p {
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
}
#links #mainContent2 p {
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
}

PS. hoffe habe nicht wieder "gepostet"... :-)
 
Zuletzt bearbeitet:

Dragonlord

PCtipp-Moderation
Teammitglied
Vermutung

Warscheinlich handelt es sich um folgende Einstellung:
Code:
#navigation
{
    position: absolute;
    margin-top: 360px;
    height: 37px; [COLOR=Red]/* zuwenig hoch */[/COLOR]
    width: 794px;
    text-align: center;
    left: 117px;
}
lg Roger
 

norman_b

Aktives Mitglied
Verflucht... das dachte ich auch schon... war aber nichts!! kann das feld doppelt so gross machen. geht nicht. kann es klein machen, geht nichts, kann ein zusätzlicher "leerschlag" machen und dann vertical middle geht aber auch nicht. komisch ist, dass es nur im IE so angezeigt wird!

anderer vorschlag.. ;-)
 
Oben