Ankündigung

Einklappen
Keine Ankündigung bisher.

CSS wird auf Server nicht richtig angezeigt

Einklappen

Google Anzeige oben

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • CSS wird auf Server nicht richtig angezeigt

    Moinsen,

    ich habe meine Homepage über unseren Schulserver laufen und alles grad hochgeladen, jedoch wird meine erste CSS auf dem Server nicht so angezeigt wie auf meinem PC.

    Was ich meine ist in den Bildern zu sehen.

    Alle Dateien auf dem Server sind identisch mit denen auf meinem PC, allerdings will die erste Seite einfach nicht das richtige Bild laden, den Button anzeigen und per CSS opacity aktivieren. Hat jemand eine Idee warum das so sein kann?

    Hier die HTML und CSS:



    /*
    Plugin: jQuery Parallax
    Version 1.1.3
    Author: Ian Lunn
    Twitter: @IanLunn
    Author URL: http://www.ianlunn.co.uk/
    Plugin URL: http://www.ianlunn.co.uk/plugins/jquery-parallax/

    License: http://creativecommons.org/licenses/by-sa/3.0/ (Attribution Share Alike). Please attribute work to Ian Lunn simply by leaving these comments in the source code or if you'd prefer, place a link on your website to http://www.ianlunn.co.uk/.
    */

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

    body{
    margin: 0;
    min-width: 980px;
    padding: 0;
    }

    p{
    margin: 20px 0 0 0;
    }

    p, ul{
    font-family:"Proxima Nova Light", 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-size-adjust:0.5;
    font-weight:200;
    font-style:normal;
    opacity: 0.6;
    color: #FFFFFF;
    }

    .button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    }

    .button1 {
    background-color: #555555;
    color: white;
    border: 4px solid #555555;
    opacity: 0.7;
    border-radius: 4px;
    }

    .button1:hover {
    background-color: white;
    color: #555555;
    opacity: 0.7;
    border-radius: 4px;
    }

    img{
    border: 0;
    }

    h1, #pixels{
    font-family:"Museo 900", Verdana, serif;
    font-size-adjust:0.40;
    font-weight:700;
    font-style:normal;
    }

    h2{
    font-family:"Beau Sans Pro Book", Verdana, sans-serif;
    font-size-adjust:0.531;
    font-weight:500;
    font-style:normal;
    color: #555555;
    opacity: 0.7;
    }

    #header h1, #pixels{
    color: #fffff;
    opacity: 0;
    }

    .float-left{
    float: left;
    margin: 0 0 0 20px;
    }

    .float-right{
    float: right;
    margin: 0 20px 0 0;
    }

    .center{
    font-size: 2.5em;
    padding: 80px 0 0 0;
    text-align: center;
    }

    #nav{
    list-style: none;
    position: fixed;
    right: 0px;
    opacity: 0;
    }

    #header, #intro, #second{
    width: 100%;
    }

    #intro{
    background:url(images/pic2.png) 100% 0 repeat fixed;
    color: white;
    height: 900px;
    margin: 0 auto;
    padding: 0;
    }

    .story{
    margin: 0 auto;
    min-width: 980px;
    overflow: auto;
    width: 980px;
    }

    .story .float-left, .story .float-right{
    padding: 100px 0 0 0;
    position: relative;
    width: 350px;
    }

    #accordion{
    background-color: black;
    height:20px; /////////////DEACTIVATED///////////////
    position: right;
    transition: height 1s ease-in-out;

    }

    #accordion:hover{
    background-color: black;
    height: 140px; /////////////DEACTIVATED///////////////
    animation-direction: left;

    }

    #accordion{
    width: 60px;
    height: 60px; /////////////DEACTIVATED///////////////
    background: red;
    -webkit-transition: width 1s, height 1s, -webkit-transform 1s; /* MACOS */
    transition: width 1s, height 1s, transform 1s;
    }

    #accordion:hover {
    width: 150px;
    height: 150px; /////////////DEACTIVATED///////////////
    -webkit-transform: rotate(360deg); /* MACOS */
    transform: rotate(360deg);
    }

    @keyframes fullexpand {

    0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }
    4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }
    16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }
    17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }
    18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
    }
    MfG
    Silas Daebler
    Angehängte Dateien
    PC Seite: So sollte es sein Server Seite: So ist es leider
    Zuletzt geändert von playzocker22; 28.05.2018, 21:28.

  • #2
    Nein, aus den Bildern kann ich leider nichts erkennen.
    jedoch wird meine erste CSS auf dem Server nicht so angezeigt wie auf meinem PC.
    Erster Kandidat für die Fehlerursache in solch einem Fall: Groß- und Kleinschreibung bei Dateinamen. Windows ist es egal, auf dem Server ist jedoch z. B. styles.css etwas anderes als Styles.css.

    Kommentar

    Lädt...
    X