Frage an Webmaster zur CSS-Formatierung

[Zzindbad]

Ich möchte hinter verschiedene Tabellenfelder unterschiedliche Hintergrundbilder einbinden, die sich nicht wiederholen. Füge ich die Bilder über einen Links ein, sind sie nicht im Hintergrund, und ich kann keinen Text darüber schreiben. Füge ich die Dateien als Hintergrundbild ein, wiederholen sie sich kachelförmig. Ich habe diverse Hinweise gefunden, wie man dieses über ein CSS-Style verhindert. Ich weiß aber nicht, wie ich den Hintergrundbildern im HTML-Code mitteilen kann, dass die im Style-Sheet genannten Vorgaben für sie gelten. Vielleicht kann mir jemand diese Anfängerfrage für die CSS-Formatierung beantworten.

Tom

[Buchtenbummler.de]

formatieren geht nicht (mehr) per Tabelle, sondern per containern
Wenn Du die Tabelle als Gerüst verwenden willst, lege enfach container auf die jeweilige Zelle(bin auch kein crack, geht bestimmt auch eleganter)
Ich empfehle Dir LITTLEBOXES, vermittelt sehr gut die Grundlagen,m kostet nicht viel und ist auch hilfreich gerade für Anfängerwiederholungen

[Zzindbad]

Hans, danke für die Antwort, aber ich werde die Website nicht komplett umstellen. Eher verzichte ich auf die Realisierung einer gewünschten Verbesserung des Erscheinungsbildes.


Meine Frage ist wahrscheinlich viel simpler zu beantworten, als es erscheint.

Angenommen, ich habe im CSS-Style folgendes stehen:

#searchform {
position: absolute;
top: 20px;
right: 130px;
width: 400px;
height: 19.5px;
text-align: right;
}


Ich möchte nur wissen, wie im HTML Code angegeben wird, dass das Suchformular (searchform) weiss, dass es gemeint ist.

Hinweise, wie dieses zum Eintrag in die CSS gibt es genug.
<background-style=background-image:url(yourpicture.jpg); background-repeat:no-repeat;>

Wie erkläre ich dem Inhalt eines Tabellenfeldes, dass es gemeint ist?



Tom

[Zeus Faber]

Ist HTML Code eigentlich auch möglich ??
Gruß Wolfgang

[Zzindbad]

Wenn die Frage so gemeint ist, ob ich auch mit einem HTML Code arbeiten würde, dann: "Ja, gerne."

Tom

[markezz]

Hallo Tom,

das Suchfeld-HTML-Element braucht eine ID. Also musst du die Tabellenzelle (?) wie folgt notieren:

<td id="searchform"></td>

Dann kann man dieses Feld im CSS eindeutig als #searchform adressieren.

Allerdings verliert die Tabelle im HTML ihre Funktionen, wenn man sie oder Teile davon versucht absolut zu positionieren. Es gibt aber eine andere Möglichkeit:

HTML:

<table id="mytable">
    <tr>
        <td id="cell1">Zelle 1</td>
        <td id="cell2">Zelle 2</td>
    </tr>
</table>

CSS:

#mytable{
    border: 1px solid black; /* nur als Beispiel, denn es ist wichtig, dass die Rahmen nun auch per CSS definiert werden */
    table-layout: fixed;
    width: 800px;
}

#mytable th, #mytable td {
    border: 1px solid black;
    overflow: hidden;
    width: 400px;
    height: 20px; 
}

Ist aber eigentlich auch nicht so sinnvoll und nur mit Einschränkungen zu verwenden...

Besser ist es so wie Buchtenbummler.de gesagt hat:

<table id="mytable">
    <tr>
        <td><div id="cell1">Zelle 1</div></td>
        <td><div id="cell2">Zelle 2</div></td>
    </tr>
</table>

Dann kannst Du die Zellen jeweils mit Breite, Höhe und Hintergrundbildern formatieren wie du willst. Die Tabelle passt sich dann automatisch an.

Gruß,
Markus

[Zzindbad]

Markus, danke, das war genau das, was ich wissen wollte.

Im HTML gibt es die id
<td id="searchform"></td>

und im CSS die Raute # vor dem Begriff searchform.

Obwohl ich reichlich Websiten mit CSS durch Veränderungen der Einträge im Aussehen massiv verändert habe, war mir diese simple Zuordnung nicht bewußt, weil ich die Urkonstrukte der Foren und Blogs nie erstellt hatte. Jetzt kann ich auch endlich meine absolut positionierten Navigatinsleisten an derselben Stellen neben langen Indexen erscheinen lassen. Super!

Alles klar!

Tom

[plata]

Hallo,

alternativ geht das über das Attribut "class". Im CSS wird das durch einen Punkt am Anfang des Namens notiert.

Eine ID muss innerhalb des Dokuments eindeutig sein. Wenn Du mehrere Elemente mit denselben style-Informationen formatieren möchtest, solltest Du die Notation mit class verwenden. Beispiel:

HTML:

<td class="searchform">…</td>

CSS:

.searchform {
border: 1px solid black;
…
}

Viele Grüße,
Thilo

[Zzindbad]

Thilo, danke!

Class und Punkt oder id und Raute.

Tom

[B.Hallier]

Ein mehr als hilfreiches Tool ist das Plugin "Firebug" für den Firefox: damit kannst du onthefly css-Dateien editieren bzw. zeigt dir das Tool auch an, wo in welcher css-Datei die Sachen definiert werden (falls du mal auf die Schnelle andere Farben etc. austauschen möchtest etc.).

Eigentlich eine Pflichterweiterung

[Zzindbad]

Firebug verwende ich ganz gerne. Eigentlich ist meine Eingangsfrage angesichts der Tatsache, dass ich seit Jahren in diversen CSS Dateien etliche Änderungen bis zum Erzielen eines bestimmten Aussehens vornehme, seltsam, weil mir der ganze Kram recht vertraut ist. Aber irgendwie habe ich nie selbst die Verbindung zwischen einem Element und den CSS-Vorgaben hergestellt sondern Themes bearbeitet, in denen diese Dinge bereits bestanden oder für meine Websites in jede HTML Datei nur ein paar CSS Vorgaben zum Aussehen und Fonttype der Schriften eingebettet.

Tom