Frage Text auf einer Seite fixieren

[Edu]

Hallo Ihr Lieben,

ich habe ein kleines Problem und würde mich freuen, wenn wir gemeinsam eine Lösung erarbeiten würden.
Folgendes soll realisiert werden... ich würde gerne auf einer website mit HTML Code einen Text in einer quasi Tabelle fixieren. Das bedeutete, wenn ich die Website von 100 auf 130 Prozent vergrößere dann soll der Text nicht vermissen werden gerissen sondern mit der Vergrößerung mitgehen. Ich dachte es würde einfach mit einem Bild klappen, aber die Qualität ist nicht schön. Zumindest ist mit dem Bild der Text eingefroren. Ich freue mich über jede Anregung. Vielen Dank

 

[basti1012]

was heist den quasi Tabelle ? Muß es eine Tabelle sein oder kann das auch zwishen <li> oder <div> stehen ? Wie soll die Ausgabe den Aussehen

 

[Edu]

Guten Morgen,

es muss nicht zwingend einen Tabelle sein. Der Text soll eingefrorenen werden und beim verkleinern bzw. vergrößern der Website nicht zerrissen werden. Das Problem gerade ist bei einer 100 Prozent Auflösung sieht der Text mit seinen Textzeilen entsprechend meinen Vorstellungen aus als Beispiel:

Der Text ist in seiner Darstellung ist perfekt

Website wird vergrößert auf 120%

Der Text ist in
seiner Darstellung ist perfekt.

Da sieht man der Text hat auf einmal einen Umbruch und ist zerrissen. Er soll wie oben bleiben und nur mit der Website größer oder kleiner werden. Vielen Dank

 

[Sempervivum]

sieht der Text mit seinen Textzeilen entsprechend meinen Vorstellungen aus als Beispiel:
Der Text ist in seiner Darstellung ist perfekt

Ich sehe überhaupt nichts :-( Wolltest Du da Screenshots posten?
Am besten wäre ein Link zu deiner Seite.

der Text hat auf einmal einen Umbruch

Normaler Weise ist das erwünscht, weil sich auf diese Weise der Text an die Fenstergröße bzw. die Größe des umgebenden Containers anpasst. Du kannst es jedoch durch white-space:nowrap unterbinden:
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Textausrichtung/white-space

nur mit der Website größer oder kleiner werden.

Das kannst Du mit Mediaqueries erreichen.

 

[Edu]

Vielen Dank für die Rückmeldung. Kann man das Ganze nicht über html Befehl in den Griff bekommen? Ich habe keine Programmierkenntnisse. Das war meine Intention am Anfang das man das Ganze in einer Art Tabelle reinpackt diese kann sich ja vergrößern und vergleinert aber der Text in seiner Darstellung soll eingefrorene werden, der soll nicht zerrissen werden.

 

[Sempervivum]

Was ich da gepostet habe, ist nur CSS und erfordert auch nicht mehr Programmierkenntnisse als HTML.

das man das Ganze in einer Art Tabelle reinpackt diese kann sich ja vergrößern und vergleinert aber der Text in seiner Darstellung soll eingefrorene werden, der soll nicht zerrissen werden.

Bei einer Tabelle im Sinne von HTML wird genau so der Text automatisch umgebrochen.

 

[Sempervivum]

Mit automatischem Umbruch:
https://jsfiddle.net/Sempervivum/he8xfwgw/
Ohne automatischen Umbruch, bei Bedarf werden Scrollbalken angezeigt:
https://jsfiddle.net/Sempervivum/he8xfwgw/1/
Umschaltung der Schriftgröße mit Mediaqueries:
https://jsfiddle.net/Sempervivum/he8xfwgw/2/
Bedenke, dass die Schriftgröße nicht zu stark verkleinert werden sollte, damit der Text lesbar bleibt.

 

[Edu]

Danke für deine Hilfe. Mir ist immernoch nicht ganz klar, was ich machen soll. Ich kann nur einen html Quellcode verwenden. Ich bin auf einen deiner Links gegangen dort sind die HTML quellcodes davon habe ich den ersten genommen, aber der Text wird nach wie vor gerissen. Danke

 

[Sempervivum]

Du musst das CSS auch mitnehmen, in style-Tags eingebettet:

<style>
#textcontainer {
  white-space: nowrap;
  overflow: auto;
  font-size: 1.5em;
}
@media (max-width: 600px) {
  #textcontainer {
    font-size: 1em;
  }
}
@media (max-width: 300px) {
  #textcontainer {
    font-size: 0.8em;
  }
}
</style>
<div id="textcontainer">
  Lorem ipsum dolor sit amet,<br>consetetur sadipscing elitr,<br>sed diam nonumy eirmod tempor invidunt<br>ut labore et dolore magna aliquyam erat,<br>sed diam voluptua.
</div>

 

[Edu]

Ach Mensch, das ist mal eine Hilfe!! Ich danke dir. Ich werde es gleich ausprobieren.

 

[Edu]

Ich wollte mich noch einmal bedanken. Es hat super funktioniert. Eine abschließende Frage hätte ich noch ggfs. kann mir schneller geholfen werden. Und zwar habe ich eine Liste mit Bulletpoints generiert. Jedoch bekommen ich die Bulletpoints nicht rot. Paar Anleitungen aus dem Netz versucht ohne Erfolg. Vielen Dank

 

[Felixprogram]

Und zwar habe ich eine Liste mit Bulletpoints generiert. Jedoch bekommen ich die Bulletpoints nicht rot.

Hallo Edu,
zeig mal deinen derzeitigen Codeansatz oder was du schon probiert hast.
Grüße,
Felixprogram

 

[Sempervivum]

Schau mal, ob dies dir weiter hilft:
https://stackoverflow.com/questions...tml-lists-via-css-without-using-any-images-or

 

[Sempervivum]

Oder evtl. so:
https://jsfiddle.net/Sempervivum/1wrfkuy2/

 

[Edu]

Hi, vielen Dank. Ich habe versucht die zweite Lösung umzusetzen. Die habe ich mehrfach im Netz wiedergefunden. Wo ist mein denkfehler. Er zeigt alles in einer Farbe bei mir an.

 

[Edu]

Wie setze ich deinen CSS Code und HTML zusammen... muss ich noch etwas davor schreiben Style usw wie bei der ersten Unsetzung

 

[Sempervivum]

Genau wie beim ersten Mal, CSS in style-Tags einbetten:

<style>
ul li {
  color: red; /* Farbe der Listenpunkte */
}
ul li span {
  color: blue; /* Farbe der Texte */
}
</style>

Ich habe versucht die zweite Lösung umzusetzen. Die habe ich mehrfach im Netz wiedergefunden. Wo ist mein denkfehler. Er zeigt alles in einer Farbe bei mir an.

Hast Du auch daran gedacht, den Text der Listenelemente in span-Tags einzubetten, so wie in meinem HTML?

<ul>
  <li><span>Item 1</span></li>
  <li><span>Item 2</span></li>
  <li><span>Item 3</span></li>
  <li><span>Item 4</span></li>
</ul>

Wenn es nicht funtioniert, dann poste mal deinen Code im Zusammenhang, HTML und CSS.

 

[Edu]

Guten Morgen, leider klappt es noch nicht ganz.

hier der erste Quellcode:

<ul style="list-style-type: square; ul li { color: red; } ul li span { color: black};">

Sind hier bereits Fehler?

 

[Sempervivum]

Ja, Du hast hier einen Inlinestyle verwendet (style="Damit kann man
1. Nur das aktuelle Element ansprechen
2. Keine Selektoren wie ul li oder ul li span verwenden. Solches CSS musst Du in style-Tags setzen wie von mir gepostet:

<style>
ul {
  list-style-type: square;
}
ul li {
  color: red; /* Farbe der Listenpunkte */
}
ul li span {
  color: blue; /* Farbe der Texte */
}
</style>
<ul>
  <li><span>Item 1</span></li>
  <li><span>Item 2</span></li>
  <li><span>Item 3</span></li>
  <li><span>Item 4</span></li>
</ul>

 

[Edu]

Hi, also der Quellcode will nicht so wie wir wollen... ich versuche es immer wieder über den html Editor aber der zeigt mir nicht unsere gewünschte Umsetzung...dann gehe ich über den html Editor und dieser spuckt mir so einen code aus... jetzt muss man nur noch das square in rot bekommen...

<ul style="list-style-type: square;">
<li><span style="color: #ff0000;">sdfsfsdfsdfsdfsdfsdfsdfsdfsdf</span></li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>