Textrahmen mit unterschiedlicher Breite erzeugen

Textrahmen mit unterschiedlicher Breite erzeugen

Beitragvon HaVonTe » 06.12.2011, 11:18

Hallo,

ich versuche seit einiger Zeit verzweifelt eine Art Chatprotokoll mittels Textrahmen darzustellen. Es gelingt mir leider nicht, den Textrahmen eine maximale Breite zu geben, die sich entweder dem Text anpasst, oder max 90% des Bildschirms einnimmt, und den Text dann automaitsch umbricht.

Ich habe meine ganze Hoffnung auf max-width gelegt. Ich hatte es auch schon mit span und div versucht. Auch eine Tabelle führte nicht zum Erfolg.

Bitte helft mir. Vielen Dank im Vorraus.

MfG
HaVonTe

Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Beispiel Runde Ecken</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
p.borderC
{
  padding: 1px;
  border: 2px solid #9945F9;
  border-radius: 15px;
  display:block; text-align:left;
  background-color:#D4B3F9;
  max-width:90%;
}
p.borderD
{
  padding: 1px;
  border: 2px solid #3BD655;
  border-radius: 15px;
  text-align:right;
  background-color:#95D6A0;
   margin-left:10%;
}
.datum { font-style:italic; font-size:66%}
-->
</style>
</head>

<body>

<p class="borderC">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
            nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
            volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation
            ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
            Duis autem veleum iriure dolor in hendrerit in vulputate velit esse
            molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis
            at vero eros et accumsan et iusto odio dignissim qui blandit praesent
            luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
         <span class="datum">kleiner Beispieltext in Times New Roman</span
</p>
<p class="borderD">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
            nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
            volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation
            ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
            Duis autem veleum iriure dolor in hendrerit in vulputate velit esse
            molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis
            at vero eros et accumsan et iusto odio dignissim qui blandit praesent
            luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
         <span class="datum">kleiner Beispieltext in Times New Roman</span
</p>
<p class="borderC">
          sdfsdfsfdsfd.
         <span class="datum">kleiner Beispieltext in Times New Roman</span
</p>
<p class="borderD">
          sdfsdfsf
         <span class="datum">kleiner Beispieltext in Times New Roman</span
</p>
<p class="borderC">
          olutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation
            ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
            Duis autem veleum iriure dolor in hendrerit in vulputate velit .
         <span class="datum">kleiner Beispieltext in Times New Roman</span
</p>
<p class="borderD">
          olutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation
            ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
            Duis autem veleum iriure dolor in hendrerit in vulputate velit
         <span class="datum">kleiner Beispieltext in Times New Roman</span
</p>
</body>
</html>
HaVonTe
neu hier
 
Beiträge: 5
Registriert: 06.12.2011, 11:13

Re: Textrahmen mit unterschiedlicher Breite erzeugen

Beitragvon sejuma » 06.12.2011, 13:57

Der prozentuale max-width-Wert benötigt eine Basis (90% von was?)
Definiere deshalb noch
Code: Alles auswählen
html, body {width: 100%;}
Bild
sejuma
Vielposter
 
Beiträge: 805
Registriert: 15.07.2009, 17:46

Re: Textrahmen mit unterschiedlicher Breite erzeugen

Beitragvon HaVonTe » 06.12.2011, 14:51

Danke für die Antwort.
Vielleicht stelle ich mich ja zu doof an, aber ich hab jetzt folgendes probiert:

Code: Alles auswählen
p.borderC
{
  padding: 1px;
  border: 2px solid #9945F9;
  border-radius: 15px;
  display:block; text-align:left;
  background-color:#D4B3F9;
  max-width:90%;
  html, body {width: 100%;}
}


und
Code: Alles auswählen
<body style="width: 100%;">


Hat beides nicht funktioniert.

Sorry, aber ich bin noch totaler Anfänger in CSS.
HaVonTe
neu hier
 
Beiträge: 5
Registriert: 06.12.2011, 11:13

Re: Textrahmen mit unterschiedlicher Breite erzeugen

Beitragvon sejuma » 06.12.2011, 18:29

Der Fehler liegt darin, dass du die CSS-Formatierung für html und body innerhalb von p vornimmst.
Richtig wäre also:

Code: Alles auswählen
html, body {
width: 100%;
}

p.borderC
{
  padding: 1px;
  border: 2px solid #9945F9;
  border-radius: 15px;
  display:block; text-align:left;
  background-color:#D4B3F9;
  max-width:90%;
}
Bild
sejuma
Vielposter
 
Beiträge: 805
Registriert: 15.07.2009, 17:46

Re: Textrahmen mit unterschiedlicher Breite erzeugen

Beitragvon HaVonTe » 07.12.2011, 08:08

Nochmal vielen Dank für die Antwort. Aber das wars leider immer noch nicht.
Vielleicht war nicht ganz deutlich, was ich erreichen will. In dem Bild sind die Textrahmen, die zu breit sind rot durchgestrichen. Ich will das jeder Textrahmen nur so breit ist wie der Text breit ist oder max. 90% der Bildschirmbreite.

h**p://s7.directupload.net/file/d/2731/vhc7vbsm_jpg.htm
HaVonTe
neu hier
 
Beiträge: 5
Registriert: 06.12.2011, 11:13

Re: Textrahmen mit unterschiedlicher Breite erzeugen

Beitragvon HaVonTe » 07.12.2011, 14:49

Fast geschafft :-D

Mit display:table hats funktioniert. Jetzt muss ich es nur noch schaffen, dass die "borderD" Teile rechtsbündig dargestellt werden. Das scheitert bisher leider.

Code: Alles auswählen
    html, body {
    padding: 1px;
    margin:1px;
    }
    p.borderC
    {
    padding: 1px;
    border: 2px solid #9945F9;
    border-radius: 15px;
    text-align:left;
    background-color:#D4B3F9;
    max-width:90%;
    display:table;
   margin:1px;
    }
    p.borderD
    {
    padding: 1px;
    border: 2px solid #3BD655;
    border-radius: 15px;
    text-align:right;
    background-color:#95D6A0;
   margin:1px;
    margin-left:10%;
    align="right";
    display:table;
    }
    .datum { font-style:italic; font-size:66%}


MfG
HaVonTe
HaVonTe
neu hier
 
Beiträge: 5
Registriert: 06.12.2011, 11:13

Re: Textrahmen mit unterschiedlicher Breite erzeugen

Beitragvon HaVonTe » 07.12.2011, 15:40

Geschafft. Tausend Dank für die Hinweise.

Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 14 February 2006), see www.w3.org" />
    <title>
      Beispiel Runde Ecken
    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
/*<![CDATA[*/
    <!--
    html, body {
    padding: 1px;
    margin:1px;
    }
    p.borderC
    {
    padding: 1px;
    border: 2px solid #9945F9;
    border-radius: 15px;
    text-align:left;
    background-color:#D4B3F9;
    max-width:90%;
    display:table;
        margin:1px;
    }
    p.borderD
    {
    align:right;
    padding: 1px;
    border: 2px solid #3BD655;
    border-radius: 15px;
    text-align:right;
    background-color:#95D6A0;
    max-width:90%;
    display:table;
       margin:1px; 
      margin-left:auto;
      margin-right:0px;
    }
    .datum { font-style:italic; font-size:66%}
    -->
    /*]]>*/
    </style>
  </head>
  <body>
    <p class="borderC">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
      nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
      volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam
      corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis
      autem veleum iriure dolor in hendrerit in vulputate velit esse molestie
      consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero
      eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
      zzril delenit augue duis dolore te feugait nulla facilisi. <span class=
      "datum">kleiner Beispieltext in Times New Roman</span>
    </p>
    <p class="borderD">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
      nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
      volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam
      corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis
      autem veleum iriure dolor in hendrerit in vulputate velit esse molestie
      consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero
      eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
      zzril delenit augue duis dolore te feugait nulla facilisi. <span class=
      "datum">kleiner Beispieltext in Times New Roman</span>
    </p>
    <p class="borderC">
      sdfsdfsfdsfd. <span class="datum">kleiner Beispieltext in Times New
      Roman</span>
    </p>
    <p class="borderD">
      sdfsdfsf <span class="datum">kleiner Beispieltext in Times New
      Roman</span>
    </p>
    <p class="borderC">
      olutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam
      corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis
      autem veleum iriure dolor in hendrerit in vulputate velit . <span class=
      "datum">kleiner Beispieltext in Times New Roman</span>
    </p>
    <p class="borderD">
      olutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam
      corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis
      autem veleum iriure dolor in hendrerit in vulputate velit <span class=
      "datum">kleiner Beispieltext in Times New Roman</span>
    </p>
  </body>
</html>
HaVonTe
neu hier
 
Beiträge: 5
Registriert: 06.12.2011, 11:13


Moderatoren: Laus, Moderatoren

Ähnliche Beiträge zu "Textrahmen mit unterschiedlicher Breite erzeugen"

Zurück zu: CSS für Anfänger

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 3 Gäste