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

Brauche ich mehrere CSS dateien bei untersch.Design?

S

steff89

Neues Mitglied
Frage 1 hat sich geklärt, danke dafür an alle helfer. :)
Frage 2 ebenfalls :)
Frage 3 ist aktuell: weshalb wird bei dem kreis was weg geschnitten? (siehe bild weiter unten)
 
Zuletzt bearbeitet:
1.
HTML: 
<link rel="stylesheet" type="text/css" href="formate.css">
2. wie beim logo auch, also:

HTML: 
.logo:hover .divimlogo {
  display: block;
}
.divimlogo:hover {
  ...
}
 
Guten Morgen,

zu deiner ersten Frage bezüglich der CSS Datei:
du kannst eine externe CSS erstellen und diese für alle Seiten nutzen.
Definiere einfach verschiedene Klassen in denen du Hintergrundfarbe etc. angibst und gebe diese entsprechend mit.
Beantwortet das deine Frage?
 
1. ist ja genau das was mir nix bringt und hab ich ja schon so. wenn ich das jetzt bei seite1, seite2,... eingebe sehen die ja genauso aus wie alle anderen seiten. mir wurde aber erzählt das man ein css mit unterschiedlichen designs für unterschiedliche seitendesigns machen kann.
oder brauche ich für jede anders designte seite eine extra css datei?

zb.:
home.html->soll das design haben was ich in style.css gemacht habe
seite1.html->soll ein ANDERES design haben,allerd.soll nur eine css datei geutzt werden
seite2.html->hier ebenfals ein anderse design mit nur einer css datei
...
 
_JayJay_ schrieb:
Guten Morgen,

zu deiner ersten Frage bezüglich der CSS Datei:
du kannst eine externe CSS erstellen und diese für alle Seiten nutzen.
Definiere einfach verschiedene Klassen in denen du Hintergrundfarbe etc. angibst und gebe diese entsprechend mit.
Beantwortet das deine Frage?
Zum Vergrößern anklicken....

ich will ja nicht nur unterschiedliche farben sondern auch bilder usw. für jemanden der das kann ist die ganze sache sicher total logisch ^^ für mich als anfänger nicht so ganz, aber ich lerne langsam dazu


irgendwie sagen auch immer alle was anderes :Dich hab bisher alles so:

HTML: 
<!DOCTYPE html>
<html>
<head>
    <title>Steffi Portfolio</title>
    <link rel="stylesheet" type="text/css" href="Style.css"/>
</head>
<body>
    <div id="main"></div>
        <div id="kreis"></div>
            <div id="dots_home"></div>
                <div id="logo_hover"></div>
                    <a href="Steffi_index.html"><div id="name_hover"></div></a>     
                    <a href="Impressum_index.html"><div id="impressum_hover"></div></a> 
                    <a href="Kontakt_index.html"><div id="kontakt_hover"></div></a>     
                    <a href="Corporate_index.html"><div id="corporate_hover"></div></a> 
                    <a href="Grafik_index.html"><div id="grafikdesign_hover"></div></a> 
                    <a href="Foto_index.html"><div id="fotodesign_hover"></div></a>             
</body>
</html>

CSS:
Code: 
body {
    font-family:Arial, Helvetica, sans-serif;
    color:#636466;
    font-size:12px;
    line-height:20px;
    padding:0;
    margin:0;
    background-color:#c5e0db;
}
#main  {
    width:1010px;
    height:540px;
    background-image:url(img/back1.png);
    background-repeat:no-repeat;
    background-size:1000px auto;
    background-position: 5px -3px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-501px;
    margin-top:-266px;
    z-index:1;
}
#kreis {
    width:956px;
    height:509px;
    background-image:url(img/kreisehome.png);
    background-repeat:no-repeat;
    background-size:900px auto;
    background-position: 32px 12px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-478px;
    margin-top:-252px;
    z-index:2; 
}
#dots_home {
    width:956px;
    height:509px;
    background-image:url(img/dotshome.png);
    background-repeat:no-repeat;
    background-size:900px auto;
    background-position: 32px 12px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-478px;
    margin-top:-252px;
    z-index:3;
}
#logo_hover {
    background:url(img/logo2.png);
    background-repeat:no-repeat;
    background-position: 1px -573px;
    background-size:355px auto;
    width:355px;
    height:433px;
    float:left;
    margin:-214px -175px 0px;
    padding:600;
    top:50%;
    left:50%;
    z-index:4;
    position:absolute;
}
#logo_hover:hover {
    background:url(img/logo2.png);
    background-repeat:no-repeat;
    background-position: 0px 0px;
    background-size:355px auto;
    width:355px;
    height:433px;
    float:left;
    margin:-214px -175px 0px;
    padding:600;
    top:50%;
    left:50%;
    z-index:4;
    position:absolute; 
}

#name_hover {
    background:url(img/name_button.png);
    background-repeat:no-repeat;
    background-position:0 0;
    background-size:187px auto;
    width:187px;
    height:27px;
    float:left;
    margin:-194px -419px 0px;
    padding:600;
    top:50%;
    left:50%;
    z-index:5;
    position:absolute;
}
#name_hover:hover {
    background:url(img/name_button.png);
    background-repeat:no-repeat;
    background-position:0 -32px;
    background-size:187px auto;
    width:187px;
    height:27px;
    float:left;
    margin:-194px -419px 0px;
    padding:600;
    top:50%;
    left:50%;
    z-index:5;
    position:absolute;
}
#impressum_hover {
    background:url(img/impressum_button.png);
    background-repeat:no-repeat;
    background-position:0 0;
    background-size:187px auto;
    width:187px;
    height:27px;
    float:left;
    margin:-135px -419px 0px;
    padding:600;
    top:50%;
    left:50%;
    z-index:6;
    position:absolute;
}
#impressum_hover:hover {
    background:url(img/impressum_button.png);
    background-repeat:no-repeat;
    background-position:0 -32px;
    background-size:187px auto;
    width:187px;
    height:27px;
    float:left;
    margin:-135px -419px 0px;
    padding:600;
    top:50%;
    left:50%;
    z-index:6;
    position:absolute;
}
#kontakt_hover {
    background:url(img/kontakt_button.png);
    background-repeat:no-repeat;
    background-position:0 0;
    background-size:187px auto;
    width:187px;
    height:27px;
    float:left;
    margin:-76px -419px 0px;
    padding:600;
    top:50%;
    left:50%;
    z-index:7;
    position:absolute;
}
#kontakt_hover:hover {
    background:url(img/kontakt_button.png);
    background-repeat:no-repeat;
    background-position:0 -30px;
    background-size:187px auto;
    width:187px;
    height:27px;
    float:left;
    margin:-76px -419px 0px;
    padding:600;
    top:50%;
    left:50%;
    z-index:7;
    position:absolute;
}
#corporate_hover {
    background:url(img/corporate_button.png);
    background-repeat:no-repeat;
    background-position:0 -3px;
    background-size:187px auto;
    width:187px;
    height:27px;
    float:left;
    margin:45px 240px 0px;
    padding:600;
    top:50%;
    left:50%;
    z-index:8;
    position:absolute;
}
#corporate_hover:hover {
    background:url(img/corporate_button.png);
    background-repeat:no-repeat;
    background-position:0 -33px;
    background-size:187px auto;
    width:187px;
    height:27px;
    float:left;
    margin:45px 240px 0px;
    padding:600;
    top:50%;
    left:50%;
    z-index:8;
    position:absolute;
}
#grafikdesign_hover {
    background:url(img/grafikdesign_button.png);
    background-repeat:no-repeat;
    background-position:0 -3px;
    background-size:187px auto;
    width:187px;
    height:27px;
    float:left;
    margin:104px 240px 0px;
    padding:600;
    top:50%;
    left:50%;
    z-index:9;
    position:absolute;
}
#grafikdesign_hover:hover {
    background:url(img/grafikdesign_button.png);
    background-repeat:no-repeat;
    background-position:0 -33px;
    background-size:187px auto;
    width:187px;
    height:27px;
    float:left;
    margin:104px 240px 0px;
    padding:600;
    top:50%;
    left:50%;
    z-index:9;
    position:absolute;
}
#fotodesign_hover {
    background:url(img/fotodesign_button.png);
    background-repeat:no-repeat;
    background-position:0 -3px;
    background-size:187px auto;
    width:187px;
    height:27px;
    float:left;
    margin:163px 240px 0px;
    padding:600;
    top:50%;
    left:50%;
    z-index:10;
    position:absolute;
}
#fotodesign_hover:hover {
    background:url(img/fotodesign_button.png);
    background-repeat:no-repeat;
    background-position:0 -33px;
    background-size:187px auto;
    width:187px;
    height:27px;
    float:left;
    margin:163px 240px 0px;
    padding:600;
    top:50%;
    left:50%;
    z-index:10;
    position:absolute;
}

wenn ich das richtig verstanden habe muss ich jetzt noch für jede seite eine html datei anlegen zb: impressum.html, kontakt.html,...
aber wie nutzte ich bei diesen seiten die selbe css datei so, das nur bestimmte designs die darin definiert sind auf der seite angezeigt werden. was muss ich in der css datei angeben damit die html datei weiß was sich davon auf sie bezieht?



den hover effekt auf den hover habe ich soweit. :)

könnt ihr mir die frage beantworten warum bei manchen grafiken, vorallem runden, manchmal stücke abgeschnitten werden, je nachdem wie groß die anzeige auf dem bildschirm ist? der container wo die grafik drinn ist ist ausreichend groß bzw sogar größer, trotzdem sieht es immer so aus, als wird beim kreis links und unten was gerade weggeschnitten.
 
Zuletzt bearbeitet:
Hallo,

es ist schwer dir zu helfen da deine frage/n nicht ganz klar sind.

zu dem css dateien:
da gibts mindest 2 wegen, wo bei keinen falsch oder richtig ist.
1. eine große css wo alles drin steht und halt duch classen und ids unterschiede gemacht werden oder verschachtelungen #impressum .navi oder #kontakt .navi
2. mehrere css datein, eine haupt wo alle grundsachen drin stehen und dann eine pro design wo halt die besonderen sachen drin stehen und je nach design wird halt eine andere eingefügt.

die frage aus deim letzten ist wieder total unklar.
warum bei manchen grafiken, vorallem runden, manchmal stücke abgeschnitten werden, je nachdem wie groß die anzeige auf dem bildschirm ist?
Zum Vergrößern anklicken....
in dem was falsch machst :O)
ohne link keine chance den fehler zu sehen bzw zu verstehen was überhaupt meinst, ohne link brauchst dir aber jetzt kein abbrechen das zu erklären da der 100% gebraucht wird.


Cheffchen
 
Bild ist angehangen.
an der rechten seite des kreises ist gerade runter ein stück beschnitten, obwohl der kreis richtig eingepasst wurde und der container sogar noch mehrere pixel größer ist als das bild.
12.jpg
 
Cheffchen schrieb:
Hallo,

es ist schwer dir zu helfen da deine frage/n nicht ganz klar sind.

zu dem css dateien:
da gibts mindest 2 wegen, wo bei keinen falsch oder richtig ist.
1. eine große css wo alles drin steht und halt duch classen und ids unterschiede gemacht werden oder verschachtelungen #impressum .navi oder #kontakt .navi
2. mehrere css datein, eine haupt wo alle grundsachen drin stehen und dann eine pro design wo halt die besonderen sachen drin stehen und je nach design wird halt eine andere eingefügt.
Zum Vergrößern anklicken....

3. Man bindet einen Compiler wie SASS oder LESS ein. Die Body-Tags der Views erhalten eine mit der URL korrespondierende Klasse und analog dazu werden Namespaces im CSS erstellt.

Code: 
//URL:  http://example.com/unterseite

// HTML
<body class="unterseite">.....</body>

// CSS
body.unterseite {
 p {
    color: #ff0000;
    a {
      color: #00ff00;
      &.active {
        color: #fff;
      }
    }
  }
}

Auf diese Weise kann man entweder ein gemeinsames oder auch für jede Unterseite ein eigenes Stylesheet erstellen, was bei der Auslieferung vom Server zu einer einzigen großen CSS-Datei kompiliert wird. Ohne dass man die mit der tiefen Ausdifferenzierung von CSS-Attributen verbundene Schreibarbeit hat.
 
Hei danke für eure hilfe, das mit der CSS datei für alle designs und unterseiten hat sich von selbst gelöst, war nur ein anfänger-denkfehler meinerseits ^^ war letztendlich doch ganz einfach.

warum die kreise sich manchmal so verrücken (bzw. die verücken sich nicht, aber werden von irgendeinem unsichtbaren container beschnitten obwohl da egentlich keiner ist) wenn man den bildschirm verkleinert/vergrößert ist mir allerdings unklar. das sieht dann immer aus als verrutscht der container.
 
Zuletzt bearbeitet:
ich wiederhole mich gerne

""warum bei manchen grafiken, vorallem runden, manchmal stücke abgeschnitten werden, je nachdem wie groß die anzeige auf dem bildschirm ist?"
in dem was falsch machst :O)
ohne link keine chance den fehler zu sehen bzw zu verstehen was überhaupt meinst, ohne link brauchst dir aber jetzt kein abbrechen das zu erklären da der 100% gebraucht wird."

oder ist das zu schwer zu verstehen?

cheffchen
 
was willst du denn für nen link, die seite ist nicht online.
html und css hab ich hier eingestellt und das bild ebenfalls.

sei nicht gleich so unfreundlich
 
hallö,

bin doch nicht unfreundlich, habe doch nur gesagt ohne link ist schwer die zu. helfen.

wenn bei ein Lied schiefe töne drin sind, hört man sich das doch auch erst einmal komplett an, bevor man vielleicht die Noten anschaut.

das online zu stellen dürfte auch kein großes Problem sein, es gibt auch freehoster.

cheffchen
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben