ComputerBase
Aktuelles

CSS-Auslagern - Hintergrund ist weg

P

PC FREAKY

Commander
Registriert
März 2010
Beiträge
2.250
Hallo,

Ich habe gerade mein css-sheet ausgelagert und nun fehlt mein Hintergrund...

Die CSS-Datei ist im gleichen Ordner wie mein index, als ich das css noch im index hatte funktionierte es...

Woran kann das liegen?

PC FREAKY
 
Relative und absolut Pfadangaben.

Hast du beachtet das es sich der Pfad verändert hat?
 
Zuletzt bearbeitet:
Die URL-Angabe in der CSS-Datei muss sich relative zur CSS befinden, nicht zur HTML-Datei, in die sie eingebunden wird. ;)
 
wie gesagt, die css datei ist im gleichen ordner wie die index datei ist und war

css-datei:
PHP: 
a<style type="text/css">
<!--
/* grundlegende Seiteneinstellungen*/
body {
        font: 100% Verdana, Arial, Helvetica, sans-serif;
        background-image:url(hintergrund.png);
        background-repeat:repeat;
}

h1,h2,h3 {
        font-family: "Times New Roman", "Trebuchet MS", Georgia, serif;
        font-weight:normal;
        color:#000000;
}

h1 {
        font-size: 330%;
}

h2 {
        font-size: 250%;
}

h3 {
        font-size: 150%;
        margin-bottom:1em;
}
    a:link              { color:black; text-decoration:underline; }
    a:visited           { color:black; text-decoration:underline; }
    a:hover             { color:black; text-decoration:underline; }
    a:active            { color:black; text-decoration:underline; }

    a.otherLink:link    { color:0; text-decoration:none; }
    a.otherLink:visited { color:0; text-decoration:none; }
    a.otherLink:hover   { color:0; text-decoration:underline; }
    a.otherLink:active  { color:0; text-decoration:none; }
    a img               {border:none; }

#main   {
        position:centre;
        margin-left: auto;
        margin-right: auto;
        background-color:#f1f1f1;
        height:1000px;
        width:1000px;
}
#logo   {
        background-image:url(logo2.png);
        height:100px;
        width:1000px;
        margin-left: auto;
        margin-right: auto;
        -webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
#Willkommen {
       margin-left:100px;
       margin-top:50px;
}
-->
</style>
<style type="text/css">
  body {
    font: normal 100.01% Helvetica, Arial, sans-serif;
    color: black; background-color: #ffffe0;
  }

  div#Rahmen {
    width: 1000px;
    background-color:#001ab5;
  }
  * html div#Rahmen {  /* Korrektur fuer IE 5.x */
    width: 1000px;
    w\idth: 1000px;
  }
  div#Rahmen div {
    clear: left;
  }
  ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
  }

  ul#Navigation li {
    list-style: none;
    float: left;
    width: 14em;
    position: relative;
    padding: 0;
  }
  * html ul#Navigation li {  /* Korrektur fuer den IE 5 und 6 */
    margin-bottom: -0.4em;
  }
  *:first-child+html ul#Navigation li {  /* Korrektur fuer den IE 7 */
    margin-bottom: -0.1em;
  }

  ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 1.7em;
  }
  * html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */
    left: -1.5em;
    lef\t: -0.4em;
  }
  ul#Navigation li ul li {
    float: none;
    display: block;
  }

  ul#Navigation a, ul#Navigation span {
    display: block;
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
    color: black; background-color: #ccc;
    -webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
  }

    ul#Subnavi a, ul#Subnavi span {
    display: block;
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
    color: black; background-color: #ccc;
    -webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
  }
  * html ul#Navigation a, * html ul#Navigation span {  /* nur fuer IE erforderlich */
    width: 100%;
    w\idth: 6.4em;
  }
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    border-color: black;
    border-bottom-color: black; border-top-color: black;
    color: black; background-color:#aeaeae;
  }
  li a#aktuell {  /* aktuelle Rubrik kennzeichnen */
    color: black; background-color: silver;
  }
  ul#Navigation li ul span {  /* aktuelle Unterseite kennzeichnen */
    background-color: black;
  }
  /* Erweiterung zur dynamischen Ein-/Ausblendung */
  ul#Navigation li>ul {
    display: none; top: 1.6em;
  }
  ul#Navigation li:hover>ul, ul#Navigation li>a#aktuell+ul {
    display: block;
  }

  /* Workaround fuer den IE 7 */
  *:first-child+html ul#Navigation ul {
    background-color:silver; padding-bottom:0.4em;
  }
</style>

direkt im html-code

PHP: 
<style type="text/css">
<!--
/* grundlegende Seiteneinstellungen*/
body {
        font: 100% Verdana, Arial, Helvetica, sans-serif;
        background-image:url(hintergrund.png);
        background-repeat:repeat;
}

h1,h2,h3 {
        font-family: "Times New Roman", "Trebuchet MS", Georgia, serif;
        font-weight:normal;
        color:#000000;
}

h1 {
        font-size: 330%;
}

h2 {
        font-size: 250%;
}

h3 {
        font-size: 150%;
        margin-bottom:1em;
}
    a:link              { color:black; text-decoration:underline; }
    a:visited           { color:black; text-decoration:underline; }
    a:hover             { color:black; text-decoration:underline; }
    a:active            { color:black; text-decoration:underline; }

    a.otherLink:link    { color:0; text-decoration:none; }
    a.otherLink:visited { color:0; text-decoration:none; }
    a.otherLink:hover   { color:0; text-decoration:underline; }
    a.otherLink:active  { color:0; text-decoration:none; }
    a img               {border:none; }
-->
</style>
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
<!--
#main   {
        position:centre;
        margin-left: auto;
        margin-right: auto;
        background-color:#f1f1f1;
        height:1000px;
        width:1000px;
}
#logo   {
        background-image:url(logo2.png);
        height:100px;
        width:1000px;
        margin-left: auto;
        margin-right: auto;
        -webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
#Willkommen {
       margin-left:100px;
       margin-top:50px;
}
-->
</style>
<style type="text/css">
  body {
    font: normal 100.01% Helvetica, Arial, sans-serif;
    color: black; background-color: #ffffe0;
  }

  div#Rahmen {
    width: 1000px;
    background-color:#001ab5;
  }
  * html div#Rahmen {  /* Korrektur fuer IE 5.x */
    width: 1000px;
    w\idth: 1000px;
  }
  div#Rahmen div {
    clear: left;
  }
  ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
  }

  ul#Navigation li {
    list-style: none;
    float: left;
    width: 14em;
    position: relative;
    padding: 0;
  }
  * html ul#Navigation li {  /* Korrektur fuer den IE 5 und 6 */
    margin-bottom: -0.4em;
  }
  *:first-child+html ul#Navigation li {  /* Korrektur fuer den IE 7 */
    margin-bottom: -0.1em;
  }

  ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 1.7em;
  }
  * html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */
    left: -1.5em;
    lef\t: -0.4em;
  }
  ul#Navigation li ul li {
    float: none;
    display: block;
  }

  ul#Navigation a, ul#Navigation span {
    display: block;
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
    color: black; background-color: #ccc;
    -webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
  }

    ul#Subnavi a, ul#Subnavi span {
    display: block;
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
    color: black; background-color: #ccc;
    -webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
  }
  * html ul#Navigation a, * html ul#Navigation span {  /* nur fuer IE erforderlich */
    width: 100%;
    w\idth: 6.4em;
  }
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    border-color: black;
    border-bottom-color: black; border-top-color: black;
    color: black; background-color:#aeaeae;
  }
  li a#aktuell {  /* aktuelle Rubrik kennzeichnen */
    color: black; background-color: silver;
  }
  ul#Navigation li ul span {  /* aktuelle Unterseite kennzeichnen */
    background-color: black;
  }
  /* Erweiterung zur dynamischen Ein-/Ausblendung */
  ul#Navigation li>ul {
    display: none; top: 1.6em;
  }
  ul#Navigation li:hover>ul, ul#Navigation li>a#aktuell+ul {
    display: block;
  }

  /* Workaround fuer den IE 7 */
  *:first-child+html ul#Navigation ul {
    background-color:silver; padding-bottom:0.4em;
  }
</style>
 
Zuletzt bearbeitet:
Dann lad das mal wo hoch und dann gucken wir mal oder du wartest bis meine Glaskugel fertigt gereinigt ist. ;)

Edit: Sieht das GENAU so aus? Wenn ja, schmeiß das hier raus:
Code: 
a<style type="text/css">
<!--
-->
</style>
<style type="text/css">
und ähnliches hat in der CSS-Datei nix verloren.
 
Zuletzt bearbeitet:
ganz andere Frage:

kann ich irgendwie einen ganzen <div> Baustein auslagern?

wenn ja, wie?
 
Wie, auslagern?

Und wozu soll das gut sein?
 
ich habe mehrere gleiche Seiten, alle haben alles

die navigation haben auch alle

jetzt stell dir vor es sind 20 seiten und ich will 1 neue hinzufügen,
dann müsste ich 20 navigationen ändern,

wenn ich die navigation auslagern könnte, müsste ich nur in einer datei etwas ändern...
 
so wie ich das sehe klappt das bei mir nicht, weil:

bei meinem webspace muss die anfangsseite "index.html" heißen...
 
Lad mal diese Datei hoch:
Name: info.php

PHP: 
<?php

phpinfo()

?>

Ruf sie mal auf, was kommt dann?
 
iFrame ist eine veraltete Methode...
Die Datei hatte ich bereits hochgeladen, mein Server kann php + htacces
 
Dann lass mal eine .htaccess-Datei mit folgendem Inhalt in dein Verzeichnis:
Code: 
DirectoryIndex index.php index.html
Dann kann die 1. Datei auch eine index.php sein. ;)

Danach kannst du dann ja schon die empfohlene "include"-Methode von PHP anwenden, um deine Navigations-Datei in alle anderen einzubinden.

Grüße
Crizzo
 
wie muss das einzubindene formatiert sein?

also wenn das jetzt meine navigation ist, was muss ich da noch dazu, wegmachen und ist das dann ne.php oder kanns auch ne .htm(l) sein?

PHP: 
<div id="main">
 <div id="Rahmen"><ul id="Navigation">
    <li><a href="index.html">Startseite</a></li>

    <li><a href="#Beispiel">Downloads</a>
      <ul id="Subnavi">
        <li><a href="Seite 1.php">Seite1</a></li>
        <li><a href="Seite2.php">Seite2</a></li>
      </ul>
    </li>

  </ul><div></div></div>
 
An der Stelle , wo sonst das <div id="main"> stehen würde, packst du dann einfach dein "<? include ..." hin. Einbinden kannst du alle möglichen Dateien, es müssen keine .php sein, auch .htm, .html, .txt usw.

Wichtig, im include muss der Pfad relativ angegeben werden!

Grüße
 
Crizzo schrieb:
An der Stelle , wo sonst das <div id="main"> stehen würde, packst du dann einfach dein "<? include ..." hin. Einbinden kannst du alle möglichen Dateien, es müssen keine .php sein, auch .htm, .html, .txt usw.

Wichtig, im include muss der Pfad relativ angegeben werden!

Grüße
Zum Vergrößern anklicken....

eine frage dazu, muss der head bereich auch mit rein wenn es nur der navi ausschnitt ist?
 
Okay. Beispiel.
Die Seite sieht sonst so aus:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de" xml:lang="de">
<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-language" content="de" />
<meta name="keywords" content="" />
<meta name="description" content="" />


<title>Testseite</title>
<style type="text/css">


</style>
 </head>

<body>

<ul id="navi">
<li id="home"><strong>Home<span></span></strong></li>
<li id="team"><a href="#">Team<span></span></a></li>
<li id="kontakt"><a href="#">Kontakt<span></span></a></li>
</ul>

</body>
</html>

Jetzt willst du die Navigation über eine einzelne Datei überall per "include" einbinden.
Dann hast du z.B. eine navi.html:
HTML: 
<ul id="navi">
<li id="home"><strong>Home<span></span></strong></li>
<li id="team"><a href="#">Team<span></span></a></li>
<li id="kontakt"><a href="#">Kontakt<span></span></a></li>
</ul>

und deine andere Datei sieht dann so aus:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de" xml:lang="de">
<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-language" content="de" />
<meta name="keywords" content="" />
<meta name="description" content="" />


<title>Testseite</title>
<style type="text/css">


</style>
 </head>

<body>

<?php 
include ("navi.html");
?>

</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

Andy
News Mehr KI für die Google-Suche: Suchagenten der Nutzer laufen dauerhaft im Hintergrund
2
Antworten
37
Aufrufe
2.491
SirGalaxy>.<
SirGalaxy>.<
polloze
Schwarzer Hintergrund bei Ordnern!?
2
Antworten
25
Aufrufe
1.112
polloze
polloze
Parafox
Beste Backup-Lösung für ~6TB + externe SSDs (MacBook Pro) - schnell und zuverlässig im Hintergrund
Antworten
3
Aufrufe
753
BalthasarBux
BalthasarBux
F
Kyocera ecosys P5021cdw druckt schwarz/weiß Blätter mit grauem Hintergrund
Antworten
6
Aufrufe
955
FRR77
F
D
Gibt es eine Health Alternative ohne Berechtigungen außer GPS und ohne das es im Hintergrund läuft?
Antworten
16
Aufrufe
1.243
HateyHate
HateyHate
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 187 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz