Text hervorheben

Heute ist Stammtischzeit:
Jeden Donnerstag 20:30 Uhr hier im Chat.
Wer Lust hat, kann sich gerne beteiligen. ;)
  • Moin,

    für mein Projekt erstelle ich momentan eine Webseite, nur stehe ich jetzt vor einem Problem. Ich möchte den Text auf der Homepage hervorheben, nur weiß ich nicht wie. Denn die Hintergrundfarbe ist schlicht weiß und durch die Überschriften sticht der Text auch nicht hervor.

    Kann man es irgendwie so machen, dass man dem Hintergrund vom Text, sagen wie einen Rahmen geben und dem Hintergrund dann eine Farbe zuteilen kann, der aber auch nicht zu breit wird. Ich hoffe ihr versteht, was ich meine. Denke ich habe mich etwas schlecht ausgedrückt.

    In anderen Foren wird man nur von der Seite aus doof angemacht und ich hoffe, dass ich hier nicht auf unfreundliche Kommentare treffe! :)

    Ich danke schon einmal im Vorraus!

    Edit: Ich kann momentan keinen Code schicken, weil ich nicht zu Hause bin und den Code nicht zur Verfügung habe. Werde es aber nachtragen, wenn ich ihn zu greifen bekomme.

    Eure, TheDirtyPanda

  • Belese dich am besten mal auf http://www.selfhtml.org oder frag Onkel Googel (e.g.: html fettdruck) , man kann Farben nutzen oder die Schriftgröße ändern oder Fettdruck (bold) verwenden, oder Überschriften setzen (hervorheben) usw, zum Beispiel: http://de.selfhtml.org/html/text/physisch.htm

  • Danke! Das habe ich aber schon getan und finde dort irgendwie nicht das was ich erreichen möchte. Oder ich stelle mir einfach zuviel vor.


    Meinst du mit Hervorheben sowas wie Hintergrund für bestimmte Texte?
    http://de.selfhtml.org/css/eigenschaften/hintergrund.htm

    Danke! Ich werde das erstmal versuchen. Das sieht schon mehr dananch aus was ich eigentlich machen wollte! Beschäftige mich erst seid wenigen Wochen mit HTML und CSS :)


  • Danke! Das habe ich aber schon getan und finde dort irgendwie nicht das was ich erreichen möchte. Oder ich stelle mir einfach zuviel vor.

    Danke! Ich werde das erstmal versuchen. Das sieht schon mehr dananch aus was ich eigentlich machen wollte! Beschäftige mich erst seid wenigen Wochen mit HTML und CSS :)


    Ich hab' da mal was vorbereitet: > > jsfiddle < <

    Der Text ist in einem <div> der die Eigenschaften der Klasse "text" enthält. Die Klasse sagt, habe einen weißen Hintergrund und alles was in dir drin ist, soll etwas Abstand vom Rand nehmen :D

    Kelvin


  • Ich hab' da mal was vorbereitet: > > jsfiddle < <

    Der Text ist in einem <div> der die Eigenschaften der Klasse "text" enthält. Die Klasse sagt, habe einen weißen Hintergrund und alles was in dir drin ist, soll etwas Abstand vom Rand nehmen :D

    Danke! Genau so ca. wollte ich das haben! Oh man bin ich doof, ich denk manchmal echt zu kompliziert... :daumendreh2: Ich bau meinen Code jetzt mal bissl um. Danke nochmal!

    Edit: Ich habe jetzt versucht den Code umzuändern. Nur nun haben ich folgendes Problem dabei: Der <div> fängt zwar an den Rahmen zu zeigen, aber er endet abprubt. Kann es vielleicht damit zu tun haben, dass das <div> vielleicht weiter möchte als es eigentlich kann, weil noch ein <header> im Weg ist? Hier ist mal der Code, vielleicht versteht ihr dann was ich meine, denke ich drücke mich einfach zu umständlich aus!

    Ich hoffe ihr versteht was ich meine. Entweder ich stell mich echt zu blöd an oder ich weiß auch nicht, was mein Problem ist. Tut mir leid, wenn es doof rüber kommt.

  • Zitat

    Edit: Ich habe jetzt versucht den Code umzuändern. Nur nun haben ich folgendes Problem dabei
    fängt zwar an den Rahmen zu zeigen, aber er endet abprubt. Kann es vielleicht damit zu tun haben, dass das
    vielleicht weiter möchte als es eigentlich kann, weil noch ein im Weg ist? Hier ist mal der Code, vielleicht versteht ihr dann was ich meine, denke ich drücke mich einfach zu umständlich aus!:

    1. Zeile: "Es gibt noch mehr für <header>"

    Du umschließt mit <header> deinen "rahmen", aber nur zur Hälfte

    <header>
        <div id="rahmen">
    <section id="einleitungssatz">
    <p>Hier wird der Einleitungssatz stehen</p>
    </section>
    </header>
    <!-- Inhalt -->
        </div>

    Strukturfehler:
    Entweder packt du den ganzen Inhalt/Rahmen in deinen <header> (macht aber keinen Sinn) oder
    In deinen <header> kommt nur der Einleitungssatz und danach kommt erst der Rahmen (dann gehört der <header> aber nicht zum Rahmen und sieht anders aus)

    also:

    <div id="rahmen">
        <header>
    <section id="einleitungssatz">
    <p>Hier wird der Einleitungssatz stehen</p>
    </section>
         </header>
    <section id="inhalt">
    <article id="neuigkeiten">
    <header>
    <h2>Neuigkeiten auf der Seite</h2>
    </header>
    <section id ="hauptinhalt">
    <!-- <main> -->
    <p>Hier wird der Hauptinhalt stehen!</p>
    <h2>Was kannst du auf dieser Seite alles machen?</h2>
    <p>Du kannst den Inhalt der Seite lesen</p>
    <footer>
    <p>Bla bla bla footer!</p>
    </footer>
    </section>
    </article>
    </section>
    </div>


    Hier nochmal in Action: Link


    Und: Wenn du CSS anwenden willst musst du

    Code
    class="rahmen"
    class="einleitungssatz"
    ...

    schreiben. Die "id" ist eindeutig, darf nur einmal vorkommen und hat nichts mit CSS zu tun. Oft benutzt man das für einen Knopf unten auf der Seite der "Nach Oben" heißt. Klickst du drauf, kommst du zur id="seitenanfang", mal so nebenbei erzählt

    Kelvin

    Einmal editiert, zuletzt von Kelvin (14. März 2014 um 15:39)

  • Warum denn class und nicht mit der # den Sektor ansprechen? Irgendwie stehe ich gerade auf dem Schlauch ... :/ Ich mein, die ID ist ja eindeutig, weil ich sie ja nur einmal mit dem gleichen Namen vergebe. Irgendwie verstehe ich es gerade nicht, was du mit class="" meinst.

    Danke, es lag wirklich am nicht geschlossenen <header>.

  • Ich würd dir zum Programmieren einen Editor wie UltraEdit oder Proton empfehlen, mit dem Einrückungen automatisch und korrekt dür dich erledigt werden und das ganze somit einfacher zu lesen wäre... Dann fallen einem Öffnungen und Schließungen von Segmenten auch besser auf


  • Warum denn class und nicht mit der # den Sektor ansprechen? Irgendwie stehe ich gerade auf dem Schlauch ... :/ Ich mein, die ID ist ja eindeutig, weil ich sie ja nur einmal mit dem gleichen Namen vergebe. Irgendwie verstehe ich es gerade nicht, was du mit class="" meinst.

    Danke, es lag wirklich am nicht geschlossenen <header>.

    Für mich sieht es so aus, dass du eine Art News-Seite machen möchtest. Weil jeder Artikel das selbe Layout haben soll(te) müssen alle die gleichen Eigenschaften haben und das geht dank der Klasse (class).

    Am Anfang hattest du ja gefragt wie es mit CSS geht, dass der Hintergrund des Textes weiß ist und andere Eigenschaften. Die haben wir in CSS definiert


    Code
    .rahmen {
        padding: 5px 10px 5px 10px; /* Text weiter in der Mitte -> Mehr weißer Rand */
        background-color: #FFFFFF; /* Hintergrundfarbe vom Text (Weiß) */
    }

    Jetzt musst du deinem <div>, der alles umschließt, die Klasse "rahmen" geben:


    Code
    <div class="rahmen">


    Wenn du jetzt mehrere Elemente untereinander haben möchtest, kannst du einfach den ganzen Block kopieren und hunderte male einfügen. Alles wird gleich aussehen, weil alle die gleiche Klasse haben.

    Nimmst du jetzt id="rahmen" wird erst einmal kein CSS geladen und es sieht blöd aus und wenn du vieles untereinander kopierst, gibt es die ID, die eigentlich nur einmal vorkommen sollte, mehrere male und dann gibt es Probleme.


    Klar kannst du auch noch eine ID hinzufügen:

    Code
    <div id="rahmen1" class="rahmen">

    Dieser div heißt mit Namen "rahmen1" und nimmt sich sein Aussehen von der Klasse "rahmen"


    Willst du einen Button einbauen der beim draufklicken zu einem bestimmten Teil springt?

    Kelvin

Jetzt mitmachen!

Du hast noch kein Benutzerkonto auf unserer Seite? Registriere dich kostenlos und nimm an unserer Community teil!