Ankündigung

Einklappen
Keine Ankündigung bisher.

Problem mit Textausrichtung

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Problem mit Textausrichtung

    Hallo zusammen ich bin gerade dabei mir ein html layout ohne tabellen nur mit hilfe von css zu erstellen.
    Leider habe ich ejtzt ein kleines Problem. Das layout habe ich soweit jetzt fertig. Nur ich habe ein problem mit der Textausrichtung.
    Ich habe ein zweispaltiges layout welches mit 2 floatenden div layern realisiert ist. Der Text wird in dem div-layer auch richtig dargestellt, aber nur wenn eine zeile innerhalb des inhaltes dabei ist die über die breite des layers rausgeht und dadurch umgebrochen wird. Dann wird der text auch richtig linksbündig ausgegeben.
    Habe ich allerdings nur eine zeile text im inhalt der die zeile nicht komplett ausfüllt so wird mir der text rechtsbündig ausgegeben, was ich nirgends angegeben habe.
    Ich habe auch schon alle möglichen varianten probiert text-align:left mit einzubauen. jedoch funktioniert das auch nicht, selbst wenn es direkt in einem

    tag angegeben ist.
    Hatte jemand vielleicht schon einmal ein ähnliches Problem?
    Zur Lösung stelle ich auch gerne css code und html code zur verfügung.
    Danke schon mal im voraus.

  • #2
    code?
    [b][url=http://www.benjamin-klaile.de]privater Blog[/url][/b]

    Kommentar


    • #3
      Code:
      /* Grundelemente */
      body{
      	font-family:Verdana, Arial, Helvetica, sans-serif;
      	padding:0px;
      	margin:0px;
      	background-color:#ffffff;
      	text-align:center;
      	}
      h1{
      	font-size:18px;
      	font-weight:bold;
      	}
      
      /* class Selektoren */
      .contentheader{
      	font-size:24px;
      	font-weight:bold;
      	}
      .contenttext{
      	font-size:12px;
      	}
      /* ID Selektoren */
      #box{ /*box um gesamten Inhalt */
      	width:770px;
      	margin: 25px;
      	}
      /*beginn header*/
      #header{
      	border:1px solid #000000;
      	padding: 0;
      	background-color: #eeeeee;
      	text-align:center;
      	}
      #logo{
       	padding: 0px 0px 0px 0px; 
      }
      #headersubtitle{
      	font-size:11px;
      	font-weight:bold;
      	color:#000000;
      	margin: 0px 0px 7px 0px;
      	}
      #headerbottom{
      	font-size:12px;
      	font-weight:bold;
      	color:#ffffff;
      	text-align:left;
      	background-color:#0000ff;
      	border-top:1px solid #000000;
      	padding: 1px 10px 1px 10px;
      	}
      /*ende header*/
      /*beginn navigation*/
      #navigation{
      	padding: 25px 0px 0px 0px;
      	margin: 0px 15px 0px 0px;
      	float:left;   
      	}                     
      .menucontainer{
      	width:120px;
      	border:1px solid #000000;
      	background-color:#0000ff;
      	margin: 0px 0px 15px 0px;
      	}
      .menutitle{
      	font-size:12px;
      	font-weight:bold;
      	color:#FFFFFF;
      	text-align:left;
      	margin:3px;
      	padding: 0px 0px 0px 5px;
      	}
      a.menu:active, a.menu:hover{ 
       	color:#efefef;
      	background-color:#737994;
      	}
      a.menu, a.menu:link, a.menu:visited {
       display:block;
       padding:3px 5px 3px 10px;
       border-top:1px solid #000;
       background-color:#efefef;
       text-align:left;
       font-weight:bold;
       font-size:10px;
       color:#000000;
       text-decoration:none;
       }
      
      /*ende navigation*/
      /*beginn content*/
      #content{
      	float:right;
      	padding: 20px 0px 30px 30px;
      	}
      #text{
      	text-align:left;
      	}
      
      /*ende content*/
      einmal css und hier noch der zugehörige html code:
      Code:
      <head>
      <title>Diplom 2004</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <link href="tools/style.css" rel="stylesheet" type="text/css" />
      </head>
      
      <body>
      <div id="box">
      
      <div id="header">
      	[img]tools/header.jpg[/img]
      	<div id="headersubtitle"><span>Studiengang Bank 2001 an der Berufsakademie Mosbach</span></div>
      	<div id="headerbottom">
      	<span>Startseite</span>
      	</div>
      </div>
      
      <div id="navigation">
      	<div class="menucontainer">
      	<p class="menutitle">Menu</p>
      	Startseite
      	Der Kurs
      	Bilder
      	Gästebuch
      	Impressum
      	</div>
      	<div class="menucontainer">
      	<p class="menutitle">Login</p>
      	Startseite
      	Der Kurs
      	</div>
      </div>
      <div id="content">
      <div id="text">
      <?php
      if(!isset($_GET['inc']) || $_GET['inc'] == "")
      {
      include("inc/home.inc.php");
      }
      else
      {
      include("inc/".$_GET['inc'].".inc.php");
      }
      ?> 
      </div> 
      
      </div>
      </body>
      </html>

      Kommentar


      • #4
        also .. nur mal so auf den code geschaut .. fehlt nicht das schließende </div> des containers mit der id "content" ??
        [b][url=http://www.benjamin-klaile.de]privater Blog[/url][/b]

        Kommentar


        • #5
          Oha da hat ja jemand augen wie ein lux Ja der schleißende Tag hat gefeht. Das hab ich jetzt mal behoben.
          Aber an der Ausrichtugn hat es wieder nur da was bewirkt wo der text länger als eine zeile ist
          Ich habe in dem stylesheet bei dem #content noch text-align:left; eingefügt.

          Kommentar


          • #6
            äh .. *gg* .. ich wollt das grad testen .. aber ich bräuchte ja noch den teil, wo der fehler eigentlich auftritt .. also inhalt eben ..
            [b][url=http://www.benjamin-klaile.de]privater Blog[/url][/b]

            Kommentar


            • #7
              ok, weil dus bist
              also das ist der content, bei dem es funzt:
              Code:
              <p class="contentheader">Startseite</p>
              <p class="contenttext">Drei &lt;div&gt; -Container reichen f&uuml;r dieses Layout aus: Die Titelleiste, das Men&uuml; und der Inhalt.Drei &lt;div&gt; -Container reichen f&uuml;r dieses Layout aus: Die Titelleiste, das Men&uuml; und der Inhalt.Drei &lt;div&gt; -Container reichen f&uuml;r dieses Layout aus: Die Titelleiste, das Men&uuml; und der Inhalt.Drei &lt;div&gt; -Container reichen f&uuml;r dieses Layout aus: Die Titelleiste, das Men&uuml; und der Inhalt.Drei &lt;div&gt; -Container reichen f&uuml;r dieses Layout aus: Die Titelleiste, das Men&uuml; und der Inhalt.Drei &lt;div&gt; -Container reichen f&uuml;r dieses Layout aus: Die Titelleiste, das Men&uuml; und der Inhalt.</p>
              und hier funzt es nicht:
              Code:
              <p class="contentheader">Impressum</p>
              <p class="contenttext">Webmaster</p>
              <p class="contenttext">Frank Eisenhauer
              
                F&uuml;rther Str. 55
              
                64756 Mossautal
              
                
              
                Email  </p>

              Kommentar


              • #8
                ich sehs jetzt grad .. aber ich muss pennen.
                ich teste das morgen .. hoffe, dass das noch reicht ..
                [b][url=http://www.benjamin-klaile.de]privater Blog[/url][/b]

                Kommentar


                • #9
                  Moin

                  Ändere mal in Deinem CSS das floating für #content von right auf left, dann klappt es.

                  BTW logisches markup ist aber was anderes als diese tag-soup

                  Gruß kpoint

                  Kommentar


                  • #10
                    wo ist eigentlich dein Dokumenttyp? Ist zwar ganz toll wenn du alles "versuchst" in divs zu schreiben, aber der restliche Code einfach erbärmlich ist! Warum nicht gleich alles richtig machen? Mach xhtml draus, angefangen hast du´s ja schon beim meta und bei link Attribut, aber beim Rest...

                    Kommentar


                    • #11

                      Ja sorry ich hab eben erst gestern damit angefangen alles mit css zu coden. Ichg laube das konnte keiner auf anhieb perfekt. Fehler sind da um sie zu machen und daraus zu lernen Und da bin ich ja gerade dabei.

                      Kommentar

                      Lädt...
                      X