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

Problem mit Browsern, bin so ein Noob :(

Status
Für weitere Antworten geschlossen.
T

tenforce

Neues Mitglied
Also folgende seite funktioniert im IE7 genau so wie ich mir es vorstelle, mittig, und richtig angeordnet! im safari und firefox allerdings nicht :(
ich bin noch total neu in css und html und so, deswegen weis ich nicht was ich falsch mache, vllt ist der ganze ansatz ja falsch, wenn ja berichtigt mich bitte ;)

MoeTek GbR

Hier der Quelltext:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
         <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>

    <div id="frame">
         <div id="box">
              <img src="moetek.png" alt="" border="0" width="200" height="140">
         </div>

         <div id="title">
         </div>

         <div id="left">
         </div>

         <div id="main">
              <h1>Hier entsteht eine Internetseite!</h1>
         </div>
    </div>

    <div id="sign">
              2008 © MoeTek
    </div>

    </body>
</html>
Und hier das css:
Code: 
body{
    background:#9AC0CD;
    font-family:Arial,Verdana,Sans-serif;
    text-align:center;
}
#frame {
    width:800px;
    height:600px;
}
#box {
    float:left;
    width:200px;
    height:140px;
}
#title {
    width:600px;
    height:140px;
    background:#000000;
}
#left {
    clear:left;
    float:left;
    width:200px;
    min-height:460px;
    background:#000;
    color:#FFFFFF;
}
#main {
    width:600px;
    min-height:460px;
    background:#FFFFFF;
}
#sign {
    height:20px;
    width:800px;
    background:#000000;
    color:#FFFFFF;
}
vielen dank für eure hilfe im vorraus
 
Horizontal Zentrieren kann man mit:
Code: 
margin-left: auto;
margin-right: auto;
Oder kurz (nicht das selbe):
Code: 
margin: 0 auto;
Du solltest im Vorherein im Firefox entwickeln und über Conditional Comments an den IE anpassen. Und versuch dein HTML semantisch auszuzeichnen und keine DIV-Suppe zu fabrizieren.
 
Internet Explorer wenden text-align: center; auch auf ganze Blockelemente an.
Alle anderen Browser zentrieren nur den inline-Inhalt der Elemente.
margin: 0 auto; bewirkt, daß der vertikale Außenabstand 0 hat und der horizontale gleichmäßig aufgeteilt wird.

In der Praxis entspricht das: margin-left: auto; margin-right: auto;.

Ein <div> hat als default in allen Browsern margin: 0;

Der IE5 kennt margin: auto; nicht.

css ab IE6:
Code: 
#frame {
    width:800px;
    height:600px;
    margin: 0 auto;
}
 
Zuletzt bearbeitet:
neuroleptika schrieb:
Ein <div> hat als default in allen Browsern margin: 0;
Zum Vergrößern anklicken....
Wie viele Browser mag es auf der Welt geben, die CSS unterstützen? Dass Du Dich so weit aus dem Fenster lehnen kannst, zu behaupten, das wäre in allen Browsern so!
Tatsache ist doch, dass es seitens CSS keine Vorschriften gibt, wie die Defaultwerte eines Elements zu setzen sind, es liegt also im Ermessen eines jeden Browserherstellers, das zu machen, wie er will. Deshalb gilt bei CSS: Wenn man Eigenschaften mit zugesicherten Werten verwenden will, muss man diese Werte explizit angeben, sonst gilt: Wert der Eigenschaft ist mir egal.

Jaja, meine Glaskugel zeigt mir schon, was Du antworten wirst, also kannst Du Dir das auch sparen :-)

Grüße,
-Efchen
 
crash schrieb:
Doch es gibt eine Art Default-Stylesheet: Default style sheet for HTML 4
Zum Vergrößern anklicken....
Da steht aber auch:
This appendix is informative, not normative.
Zum Vergrößern anklicken....
Wenn mich mein Englisch nicht ausgerechnet jetzt im Stich lässt, heißt das so viel wie, dass der Anhang rein informativ ist, aber nicht verbindlich.

Und DIV hat wirklich in jedem Browser margin: 0;
Zum Vergrößern anklicken....
Nein, im EfchenNavigator 7.3.1 haben divs einen margin:1em;

q.e.d.
 
Ja, weil den Browser-Herstellern sicher Abweichungen gestattet sind. Bei einem reinen Stil-, Gruppierungs- und Sprache-Container wäre ein Abweichung irrsinnig.
 
Ok, so weit so gut, dieses problem mit dem zentrieren ist behoben! danke schonmal ;)
aber es sieht immernoch total verstümmelt aus im firefox, guckt ma im IE siehts genau so aus wie ichs haben will! ich denke irgendwie ist die methode des anordnens mit float:left und clear:left nicht gescheit angewandt!
 
klopf klopf^^

hm ich bekomms einfach nicht hin, die mittige ausrichtung schon, aber die anordnung will einfach nicht, sieht alles dahin gestückelt aus
 
Ich würde das ganze folgendermaßen angehen.
Als erstes mal ein div als wrapper, das zentriert wird und nen schwarzen Hintergrund bekommt.
Dort kommt dann der header rein, der das Image enthält.
Unter das Image kommt der content, der nach rechts gefloated wird, zum Schluß der footer.

Und so könnte das alles aussehen:

PHP: 
    <div id="wrapper">
      <div id="header">
        <img id="logo" src="http://plexys.pl.ohost.de/moetek/moetek.png" alt="" />
      </div>
      <div id="content">
        <h1>Muh</h1>
      </div>
      <div class="clear" />
      <div id="footer">
        2008 &copy; MoeTek 
      </div>
    </div>
und das CSS dazu
Code: 
      body {
        background-color: #9AC0CD;
      }
      
      #content {
        text-align: center;
        width: 80%;
        height: 500px;
        background-color: white;
        float: right;
      }
      
      #footer {
        text-align: center;
        color: white;
      }
      
      #wrapper {
        margin: 0 auto;
        width: 60%;
        background-color: black;
      }
      
      #wrapper>#header>#logo {
        width: 150px;
      }
      
      .clear {
        clear: both;
      }
 
So oder so ähnlich.
Falls #footer wirklich so breit wie #wrapper sein soll.
Und wenn es in manchen Browsern in etwa aussehen soll:
Bildschirmfoto-1.png

Ansonsten mal genauer beschreiben.
 
Zuletzt bearbeitet:
Noch genauer? Bei dem Code fehlt doch nur noch das Gerüst der .html Datei, Doctype, Header... den Rest brauchst du doch nur kopieren.
Was hast du denn jetzt geändert in deinem Code?
 
|Thor| schrieb:
Noch genauer?
Zum Vergrößern anklicken....
Ich meinte tenforce sollte beschreiben wie es genau aussehen soll.
Ich habe einfach nur deinen Quelltext kopiert und einen Screenshot gezeigt.
Die Grafik ist 960*720 px groß. Ich vermute es sollte anders aussehen?!
Vielleicht soll der Footer über die ganze Seite gehen oder das Logo über den ganzen header/wrapper.
Oder weiß der Geier wie sonst noch.
 
Zuletzt bearbeitet:
Oh, sry,

hatte gerade irgendwie gedacht, du wärst der Threadersteller. Mein Fehler, hab nicht mehr nachgesehen.

Wie es aussehen soll, hat er doch gesagt,
tenforce schrieb:
Also folgende seite funktioniert im IE7 genau so wie ich mir es vorstelle...
Zum Vergrößern anklicken....
nur in anderen Browsern halt nicht. Das sollte sich ja nun aber auch erledigt haben, da mein Code zumindest im FF3 und IE7 so aussieht, wie er es haben will, oder?
 
Ja stimmt schon, die Grafik sollte zugeschnitten werden und die Breite auf feste Werte setzen ist ja auch nicht wirklich das Problem. Ich hab jetzt halt nur FF und IE getestet.
 
Dann im Prinzip so wie es |Thor| vorgemacht hat.
Allerdings gibt es da Einschränkungen:
Code: 
#wrapper>#header>#logo
So etwas versteht der IE6 nicht. Da eine id nur einmal im Dokument vorkommen darf, ist es auch nur eine unnötige Barriere.
#logo reicht auch als Selektor.
Ich würde für Grafiken, die nur Text enthalten, mit background-image überdeckten Texten arbeiten.
Da gehen die Meinungen hier aber auseinander.

Um nicht abzuschweifen - Es würde sich auch sowas anbieten:

Code: 
<div id="wrapper">

      <h1>
      <img src="http://plexys.pl.ohost.de/moetek/moetek.png" alt="Motek" width="150" height="113" id="logo" />
      </h1>
      <div id="content">
      <h2>Muh</h2>
      </div>

      <div class="clear" ></div>
      <div id="footer">
        2008 &copy; MoeTek
      </div>

</div>
Code: 
      body {
        background-color: #9AC0CD;
      }
      
      #content {
        text-align: center;
        width: 80%;
        height: 500px;
        background-color: white;
        float: right;
      }
      
      #footer {
        text-align: center;
        color: white;
      }
      
      #wrapper {
        margin: 0 auto;
        width: 60%;
        background-color: black;
      }
      
       h1 {
        margin: 0;
        padding: 0;
      }

       h1 img {
        display: block;
      }
      
      .clear {
        clear: both;
      }
Wenn es auch im IE5 zentriert werden soll könntest du <body> text-align:center; geben.


Die Grafik solltest du dennoch auf das nötige maß skalieren.
 
Zuletzt bearbeitet:
also der code den ihr mir jetzt gezeigt habt zeigt genau das an, was ich auch haben will, danke schonmal soweit! allerdings, wenn ich das browserfenster kleiner mache von der breite , sollen die objekte starr bleiben in größe etc! eigentlich soll es nix anderes sein wie all diese bekannten seiten, beispiel das jeder kennt: werkenntwen.de das ist auch ein quasi "block" in der mitte, der sich beim kleinermachen erst bis an den linken rand verschiebt, aber nicht gestaucht wird!


EDIT!!: ICH HABS, ich musste einfach im wrapper anstatt eine % breite eine genaue px breite eingeben :) trotzdem danke für alles
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben