Antworten zum Thema „Attribute aus einer html datei in externe Css Datei packen“

[landeggs]

Hey zusammen,
ich hab hier einen Auszug aus meinem html Code und ich möchte gerne die Attribute ALIGN, WIDTH und NOWRAP in eine externe Css Datei packen. Kann mir jemand sagen wie das geht und wie der css Quelcode aussehen muss ? Vielen dank schon im Voraus

<p style="font-size: medium; font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;">Text.</p>
    <p style="font-size: medium; font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;">&nbsp;</p>
    <div align="left"></div>
    <table width="100%" border="0" align="center" cellpadding="1" cellspacing="0">
      <tr align="left">
        <th width="42%" scope="col">Soft Skills</th>
        <th width="58%" scope="col">Hard Skills</th>
      </tr>
      <tr align="left">
        <td nowrap="nowrap" style="font-size: medium; font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;"><ul>
          <li>text</li>
        </ul></td>
        <td nowrap="nowrap"><ul>
          <li><span style="font-size: medium; font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;">Adobe Photoshop,  Illustrator und InDesign</span></li>
        </ul></td>
      </tr>
      <tr align="left">
        <td nowrap="nowrap"><ul>
          <li><span style="font-size: medium; font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;">text</span></li>
        </ul></td>
        <td nowrap="nowrap"><ul>
          <li><span style="font-size: medium; font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;">Maxon Cinema 4D</span></li>
        </ul></td>
      </tr>
      <tr align="left">
        <td nowrap="nowrap"><ul>
          <li><span style="font-size: medium; font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;">text</span></li>
        </ul></td>
        <td nowrap="nowrap"><ul>
          <li><span style="font-size: medium; font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;">Apple Final Cut Pro 6 &amp; Adobe Premiere, AfterEffects</span></li>
        </ul></td>
      </tr>
      <tr align="left">
        <td nowrap="nowrap"><ul>
          <li><span style="font-size: medium; font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;">text</span></li>
        </ul></td>
        <td nowrap="nowrap"><ul>
          <li><span style="font-size: medium; font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;">text</span></li>
        </ul></td>
      </tr>
      <tr align="left">
        <td nowrap="nowrap"><ul>
          <li><span style="font-size: medium; font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;">text</span></li>
        </ul></td>
        <td nowrap="nowrap"><ul>
          <li><span style="font-size: medium; font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;">text</span></li>
        </ul></td>
      </tr>
    </table>
    <p style="font-size: medium; font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;">&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>

 

[sokie]

AW: Attribute aus einer html datei in externe Css Datei packen

Das kann ich nicht verstehen.Ausgerechnet align, width und nowrap gehören ja zu deinem Tabellenlayout. viel sinnvoller wäre es alle übrigen inlinestyles aus dem code zu bekommen.
die css-Eigenschaften für deine drei begriffe sind
width: width,
align: text-align und
nowrap: white-space:nowrap;

 

[landeggs]

Mein Problem ist, das der w3c validator mir unter html 4.01 strict vier Fehlermeldungen zu dem Dokument anzeigt, mit der Meldung "There is no attribute allign,width, nowrap", mit dem Hinweis das dieses Problem mit css zu lösen ist. Deshalb meine Idee Ich bin da ziemlich ratlos, da ich Anfänger bin.

okay das mit der externen css datei war wohl offensichtlich die falsche idee, danke soki. Das align Problem habe ich nun lösen können, allerdings bekomm ich es mit width und nowrap nicht hin. kann mir da jemand helfen?

 

[sokie]

AW: Attribute aus einer html datei in externe Css Datei packen

Bitte nächtes mal den ganzen Code mit Doctype! posten, dann wären manche Fragen überflüssig. Ich hatte mich nämlich gewundert, warum die attribute der Tabellenzellen ausgelagert werden sollten, wärend die restliche Seite von inline-styles strotzt.
Auch in der ausgelagerten datei ist die Eigenschaft width = width.
hier hast du allerdings die Sache dass du zwei <th> hast die unterschiedliche breiten haben; das wäre bspw. durch die vergabe einer klasse aufzufangen:

<th width="42%" scope="col" class="softskills">

und dann eben in der css per klassenselektor zu formatieren:

.softskills{
  width: 42%;
}
...

Die eigenschaft no-wrap, wird mit whitespace: nowrap im css notiert.
das text-align: left brauchst du in aller regel nicht zu setzen, das ist defaultwert, wenn nichts anderes vorher angegeben ist.

ebenso kannst du für den bereich mit dem no-wrap auch eine klasse notieren (bspw.: class="nowrap")
un diese dann im css entsprechend formatieren:

.nowrap{
  whitespace: nowrap;
}

abschliessend sollte man dann aber auch alle inlinestyles herausnehmen, und die auch in der css notieren. die font-family zB lässt sich einmal im "body"-selektor für das ganze dokument festlegen:

body{
   [COLOR=#000080][COLOR=#0000ff]font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;[/COLOR][/COLOR]
}

http://www.css4you.de/Texteigenschaften/white-space.html
http://www.css4you.de/