• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Text auf einer Seite fixieren

E

Edu

Neues Mitglied
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

basti1012

Senior HTML'ler
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
 
E

Edu

Neues Mitglied
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

Sempervivum

Senior HTML'ler
sieht der Text mit seinen Textzeilen entsprechend meinen Vorstellungen aus als Beispiel:
Der Text ist in seiner Darstellung ist perfekt
Zum Vergrößern anklicken....
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
Zum Vergrößern anklicken....
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.
Zum Vergrößern anklicken....
Das kannst Du mit Mediaqueries erreichen.
 
Zuletzt bearbeitet:
E

Edu

Neues Mitglied
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

Sempervivum

Senior HTML'ler
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.
Zum Vergrößern anklicken....
Bei einer Tabelle im Sinne von HTML wird genau so der Text automatisch umgebrochen.
 
E

Edu

Neues Mitglied
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

Sempervivum

Senior HTML'ler
Du musst das CSS auch mitnehmen, in style-Tags eingebettet:
HTML: 
<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>
 
E

Edu

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

Edu

Neues Mitglied
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
 
E

Edu

Neues Mitglied
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.
 
E

Edu

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

Sempervivum

Senior HTML'ler
Genau wie beim ersten Mal, CSS in style-Tags einbetten:
CSS: 
<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.
Zum Vergrößern anklicken....
Hast Du auch daran gedacht, den Text der Listenelemente in span-Tags einzubetten, so wie in meinem HTML?
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.
 
E

Edu

Neues Mitglied
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

Sempervivum

Senior HTML'ler
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:
HTML: 
<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>
 
E

Edu

Neues Mitglied
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>
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Werbung:

Neueste Beiträge

Oben