Ankündigung

Einklappen
Keine Ankündigung bisher.

PHP-Datei mit CSS-Datei verknüpfen

Einklappen

Neue Werbung 2019

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

  • PHP-Datei mit CSS-Datei verknüpfen

    Guten Morgen,

    bevor ich meine Frage stelle, möchte ich gerne meine Situationslage erläutern. Ich absolviere zur Zeit mein Fernstudium und bin auf mich alleine gestellt, daher wende ich mich an euch und würde
    mich über eure Unterstützung sehr freuen. Vor allem bin ich Anfänger!

    Frage)

    Erstellen Sie eine externe CSS-Datei Aufgabe3.css mit Styles für die drei Klassen blueGreen, blackYellow und whiteRed. Setzen Sie mindestens die Text- und Hintergrundfarbe entsprechend der Bezeichnung.
    Die Klasse blueGreen bekommt die Textfarbe blau und die Hintergrundfarbe grün, die nächste schwarz/gelb und die letzte weiß/rot. Setzen Sie zusätzlich einen Rahmen in der Textfarbe und beliebiger Stärke.
    Erstellen Sie dann eine PHP-Datei einsende3.php, die Sie mit der CSS-Datei einsende3.css verknüpfen. Die PHP-Datei soll mindestens eine Überschrift 1,
    einen Absatz und eine Tabelle enthalten, denen Sie die Styles aus der externen StylesheetDatei zuweisen – zum Beispiel wie auf der folgenden Abbildung:









  • #2
    Abbildung
    Angehängte Dateien

    Kommentar


    • #3
      Problemstellung: Bis auf die Tabelle habe ich alles gelöst!

      Eigentlich hätte ich gerne gewusst, wie man die Tabelle hinbekommt wie in der Abbildung.

      Zuerst sende ich euch nur einen Ausschnitt, wenn nicht ausreichen sollte, danach den kompletten Code.

      CSS-Datei


      .whiteRed
      {

      table, td {border: 1px ; border-spacing: 10px;}
      th, td {padding: 20px;}
      #tabelle {background-color: #FF0000;} //Farbcode für rot : #FF0000
      #spaltengruppe {background-color: #FF0000; color: #FFFFFF} //Farbcode für weiss: #FFFFFF
      #zeilengruppe {background-color: #FF0000; color: #FFFFFF}
      #zeile {background-color: #FF0000;}
      #zelle {background-color: #FF0000;}

      }


      HTML

      ......

      <body>


      <p class="whiteRed">

      <table>

      <tbody id="spaltengruppe">

      <tr id="spalte">
      <td id="spalte"> Spalte 1 </td>
      <td> Spalte 2 </td>
      </tr>

      </tbody>

      <tbody id="zeilengruppe">

      <tr id="zeile">
      <td id="zelle"> Zelle </td>
      <td> Zelle </td>
      </tr>

      </tbody>


      </table>

      </P>



      </body>


      Danke!





      Kommentar


      • #4
        Verwende Code Tags, wenn du Code hier einfügst, das haben wir dir bereits 3 mal gesagt.

        Dein CSS ist falsch und ids müssen eindeutig sein.

        Für die Tabelle hier mal die kürzeste Variante. Den Rest schaffst du selber.
        Informiere dich über HTML Tabellen.

        HTML-Code:
        <!DOCTYPE html>
        <html>
        <head>
        <meta charset="UTF-8">
        <title>einsende3</title>
        <style>
            .redwhite{ background-color: red; color: white; }
        </style>
        </head>
        
        <body>
            <table class="redwhite">
                <tr>
                    <th> Spalte 1 </th>
                    <th> Spalte 2 </th>
                </tr>
                <tr>
                    <td> Zelle </td>
                    <td> Zelle </td>
                </tr>
            </table>
        </body>
        </html>

        Kommentar


        • #5
          Zuerst möchte ich mich für deine Unterstützung bedanken. Habe die Aufgabe komplett gelöst.

          Wie kann ich Code Tags verwenden?



          Kommentar


          • #6
            Ein paar Links zum Selbststudium:

            SELFHTML

            SCHATTENBAUM

            PHP-Code:
            <html prefix="og: http://ogp.me/ns#" lang="de-DE" dir="ltr">
               <head>
                  <meta charset="utf-8" />
                  <link type="text/css" rel="stylesheet" media="screen" href="style.css" />
               </head>
            <body>
            <?php
            echo "<style>
            body
            {
               clear: both;
               top: 0px;
               position: fixed;
               float: left;
               left: 0px;
               width: 100%;
               height: 100%;
            }
            #table {
              float:left;
              margin:5% 20% 0% 20%;
              width:60%;
              border-collapse:collapse;
              border:5px solid black;
            }
            #th_blue_green
            {
               float:left;
               margin:5% 0% 0% 0%;
               width:98.8%;
               font-size:230%;
               color:blue;
               background:green;
               border: 5px solid blue;
            }

            #th_black_yellow
            {
               float:left;
               margin:5% 0% 0% 0%;
               width:98.8%;
               font-size:130%;
               color:black;
               background:yellow;
               border: 5px solid black;
            }
            #th_white_red_label
            {
               float:left;
               margin:5% 0% 0% 0%;
               left: 0px;
               width:20%;
               font-size:130%;
               color:white;
               background:red;
               border:5px solid blue;

            }   
            #th_white_red_zelle
            {
               float:left;
               margin:0% 0% 5% 0%;
               left: 0px;
               width:20%;
               font-size:130%;
               color:white;
               background:red;
               border:5px solid black;
            }
            </style>"
            ;

            echo 
            "
            <table id='table'>
               <tr>
                  <th id='th_blue_green'>Überschrift 1</th>
               </tr>

               <tr>
                  <th id='th_black_yellow'>Die Vorteile von Responsive Webdesign zeigen sich in Statistiken und Trends zur Nutzung mobiler Endgeräte. Der steigende Marktanteil von Smartphones und Tablets wie iPhone und iPad erzwingen auch das Umdenken beim Gestalten von Webseiten. Wurde bis dato für eine Bildschirmauflösung von maximal 1000px Breite auf dem Computer- Desktop optimiert, muss heutzutage auf eine Vielzahl verschiedener Endgeräte Rücksicht genommen werden: </th>
               </tr>
               <tr>
                  <th id='th_white_red_label'>Spalte 1</th>
                  <th id='th_white_red_label'>Spalte 2</th>
               </tr>
               <tr>
                  <th id='th_white_red_zelle'>Zelle</th>
                  <th id='th_white_red_zelle'>Zelle</th>
               </tr>
            </table>"
            ;   
            ?>
            </body>
            </html>

            Kommentar


            • #7
              Ich sehe weder in der fragestellung noch auf dem bild irgendwas von einer tabelle!
              wieso sollte man eine css verknüpfen und dann doch im html stylangaben machen ?

              so wird das in meinen Augen weder was beim TE noch hier.
              wenn das für ein studuim ist Cyrus1980 , dann lese deine Aufgabenstellung und löse sie auch;
              optimierungen und Probleme kann man dann hier besprechen.

              und
              NUTZE CODE TAGS

              Kommentar


              • #8
                2012Kaspar
                bitte ändere Deinen Code dahingehend, dass valides HTML erzeugt wird, keine doppelten Id´s vorhanden sind, die Tabelle berichtigt wird usw. Das was du hier zeigst ist wirklich Murks.

                Kommentar


                • #9
                  Zitat von Cyrus1980 Beitrag anzeigen
                  Wie kann ich Code Tags verwenden?
                  Im Forums-Editor in der Symbolleiste auf das grosse A klicken damit sich der erweiterte Editor öffnet, danach findest du Schalter Code, HTML und PHP.
                  Darauf klicken und dann den Code zwischen den Tags hinein kopieren.


                  Kommentar


                  • #10
                    So:

                    [QUOTE][/QUOTE]

                    [CODE][/CODE]
                    [HTML][/HTML]
                    [PHP][/PHP]


                    Kommentar

                    Lädt...
                    X