CSS - design-Ansicht in dreamweaver ist ok, aber nicht im browser

So, ich habe diesen css-code zur Formatierung einer html-Seite. Das problem ist, dass, wenn ich eine Seite im browser, ich bekomme es als nicht formatiert an alle. Div ' s titulo und titulo2 sind einfache Textzeilen und das formulario die div ist eine form. Ich will die form zu sein, zentriert auf der Seite, mit einem margin-left und-right auf auto.

Dank

    @charset "utf-8";
    /* CSS Document */

    #titulo{
        background:white;
        text-align:center;
    };

    #titulo2{
        background:white;
        text-align:center;
    };

   #formulario{
        margin-left: auto ;
        margin-right: auto ;
        width: 400px;
        display: inline-block;
    };

Ok, also hier ist mein html:

<body>

<p>
<div id="titulo">Área Pessoal</div>
</p>

<p>
<div id="titulo2">Registo de Saídas</div>
</p>

<div id="formulario"><form>

<p>
<label>Data e hora : <input /></label>
</p>

<p>
<label>Morada : <input /></label>
</p>
<p>
<label>Localização Geográfica : <input /></label>
</p>

<p>
<label>Tipo de saída : <input type="radio" name="tipo" value="Sozinho" />Sozinho</label><input type="radio" name="tipo" value="Acompanhado" />Acompanhado</label>
</p>

<p>
<label>Condições Atmosféricas : <input /></label>
</p>

<p>
<label>Altura da maré : <input type="radio" name="mare" value="Alta" />Alta</label><input type="radio" name="mare" value="Baixa" />Baixa</label>
</p>

<p>
<label>Temperatura da Água : <input  /></label>
</p>

<p>
<label>Visibilidade Dentro de Água :  <input type="radio" name="visibilidade" value="Boa" />Boa</label><input type="radio" name="visibilidade" value="Má" />Má</label>
</p>

<p>
<label>Peixes Capturados : </label>
</p>
<p>
<label>espécies <input type="text" /></label>
</p>
<p>
<label>compimento <input type="text" /></label>
</p>
<p>
<label>peso <input type="text" /></label>
</p>
<p>
<label>Upload Ficheiros Multimédia :<br />
  <input type="file" name="ficheiro" multiple>
    </label>

  <p><input type="submit" value="Enviar"><input type="reset"></p>

</form></div>

<p>
<label><a href="historico_saidas.html">Histórico de Saídas</a></label>
</p>
<p>
<label><a href="estatisticas.html">Estatisticas</a></label>
</p>
</body>
</html>
  • Vielleicht ist das HTML ist nicht einschließlich die CSS-Datei richtig?
  • Sie müssen den gesamten code.
  • Redest du von diesem ? "<link type="text/css" href="registo_saidas.css" />" Das ist richtig, die erste "titulo" bekomme ich zentriert, wie ich will, aber nicht den rest der Seite
  • Setzen Sie das Formular in ein div dann das div zentriert... ich habe gesehen, Probleme mit der Formatierung von Formularen centerally.
  • Die form ist innerhalb seiner eigenen div...
  • Keine Ideen ?
  • Haben Sie eine reset stylesheet?
  • Was meinst du mit einem reset-stylesheet ? Sorry, aber ich habe nie davon gehört..

InformationsquelleAutor Nelson Silva | 2012-10-31
  1. 0

    Mag dies offensichtlich sein, aber sind deine divs korrekt gekennzeichnet?
    Beispiel <div id="titulo"></div>

    Du hast schließenden tags nach dem Stil, aber nach, dass der einfachste Weg ist wohl zu wickeln alles mit einem div 

    #titulo { background:white; text-align:center; } 
#titulo2{ background:white; text-align:center; } 
#formulario{ margin-left: auto ; margin-right: auto ; width: 400px; display: inline-block; }
.wrapper{ width:600px; margin:0 auto; }

    HTML: 

    <div class="wrapper"> 
<div id="titulo"><p>Área Pessoal</p></div> 
<div id="titulo2"><p>Registo de Saídas</p></div> 
<div id="formulario">

    etc..

    • ys, der gepostete html-oben
    • Fast da, aber ich bin immer noch mit dem gleichen problem in titulo2. In DW, ist zentriert, aber in chrome ist auf der linken Seite des div...
    • Versuchen Sie dies: #titulo2{ background:white; margin:0 auto; }
    • Gleiche problem... ich bin jetzt mit diesem: .wrapper{ width: 400px; height:: 4000px; margin-left: auto ; margin-right: auto ; }; #titulo{ text-align:center; }; #titulo2{ text-align:center; } #formulario{ margin-left: auto ; margin-right: auto ; }; Und ich bekomme den Haupt-div zentriert mit all seinen Inhalten, aber beide Titel sind neben dem linken Rand...
    • Vielleicht Mitte der p-text? .wrapper{ width: 400px; height:4000px; margin: 0 auto; }; #titulo{ text-align:center }; #titulo2{ text-align:center; } #formulario{ margin:0 auto ; } #titulo p, #titulo2 p{ text-align:center; }
    • es ändert sich nichts...ich werde weiter versuchen herauszufinden, wie es zu lösen, aber ich bin mir langsam die Ideen aus...
    • Ist es das, was Ihr nach? jsfiddle.net/seanbelly/hJ2Ju
    • scheint, werde ich versuchen, danke 😉

    InformationsquelleAutor Sean
  2. 2

    Okay, 1) verwenden Sie Niemals Dreamweaver als Ihre Quelle zu sehen, wie HTML - /CSS-erfüllt ist, immer in einem browser auszuführen... Zu viele Gründe, um zu diskutieren. 2) Sie müssen wickeln Sie das Formular in ein div-element, und weisen Sie ihm einen Satz Breite (und Höhe, je nachdem, wie Ihre form ist). Sobald dies erledigt ist, dann weisen Sie dem div margin:auto Eigenschaften...

    • Ich glaube, das war, was ich getan habe, richtig ? Und ich bin immer noch mit dem gleichen problem
    • Es ist, weil der Dreamweaver auch oft nicht, dass HTML richtig. Auf meiner website, Elemente scheinen in völliger Unordnung in Dreamweaver, aber gut Aussehen im browser.
    • Mir ist der andere Weg herum, schön in DW aber hässlich im broswer :p
    InformationsquelleAutor Alias
  3. 1

    Ist es möglich, dass der link-tag hat ein root-relativer Verweis.

    Beispielsweise, wenn ich schon diese:

    includes/gallery.css

    dann der link kann wie folgt Aussehen:

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

    Diese werden nicht korrekt gerendert, wenn der "Galerie.css" - Datei ist nicht in der folgenden Position:

    [root directory]/includes/gallery.css

    Um dieses problem zu beheben, könnte man hinzufügen, einen Zeitraum, um den Weg, wie diese:

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

    oder entfernen Sie den ersten Schrägstrich wie diesen:

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

    Diese würden für eine html-Seite mit einem Verzeichnis von gehört. Zum Beispiel, für die index.html Seite:

    CSS - design-Ansicht in dreamweaver ist ok, aber nicht im browser

    Den Weg, der browser sucht die Galerie.css-Datei in diesem Fall in der folgenden Art und Weise:

    1. Aus dem Verzeichnis, index.html ist momentan in (Ort)
    2. Verschieben um eine Ebene nach unten in das Verzeichnis "includes"
    3. Holen Sie sich die Datei "Galerie.css"

    Ich hoffe, das hilft.

    Viele Grüße - Wayne Riesterer

    InformationsquelleAutor Wayne Riesterer
Schreibe einen Kommentar