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.
Ankündigung
Einklappen
Keine Ankündigung bisher.
Problem mit Textausrichtung
Einklappen
Neue Werbung 2019
Einklappen
X
-
Ein Gast antwortete
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 lernenUnd da bin ich ja gerade dabei.
-
Ein Gast antwortetewo 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...
Einen Kommentar schreiben:
-
Ein Gast antworteteMoin
Ä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
Einen Kommentar schreiben:
-
ich sehs jetzt grad .. aber ich muss pennen.
ich teste das morgen .. hoffe, dass das noch reicht ..
Einen Kommentar schreiben:
-
Ein Gast antworteteok, weil dus bist
also das ist der content, bei dem es funzt:
Code:<p class="contentheader">Startseite</p> <p class="contenttext">Drei <div> -Container reichen für dieses Layout aus: Die Titelleiste, das Menü und der Inhalt.Drei <div> -Container reichen für dieses Layout aus: Die Titelleiste, das Menü und der Inhalt.Drei <div> -Container reichen für dieses Layout aus: Die Titelleiste, das Menü und der Inhalt.Drei <div> -Container reichen für dieses Layout aus: Die Titelleiste, das Menü und der Inhalt.Drei <div> -Container reichen für dieses Layout aus: Die Titelleiste, das Menü und der Inhalt.Drei <div> -Container reichen für dieses Layout aus: Die Titelleiste, das Menü und der Inhalt.</p>
Code:<p class="contentheader">Impressum</p> <p class="contenttext">Webmaster</p> <p class="contenttext">Frank Eisenhauer Fürther Str. 55 64756 Mossautal Email </p>
Einen Kommentar schreiben:
-
äh .. *gg* .. ich wollt das grad testen .. aber ich bräuchte ja noch den teil, wo der fehler eigentlich auftritt .. also inhalt eben ..
Einen Kommentar schreiben:
-
Ein Gast antworteteOha da hat ja jemand augen wie ein luxJa 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.
Einen Kommentar schreiben:
-
also .. nur mal so auf den code geschaut .. fehlt nicht das schließende </div> des containers mit der id "content" ??
Einen Kommentar schreiben:
-
Ein Gast antworteteCode:/* 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*/
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>
Einen Kommentar schreiben:
Einen Kommentar schreiben: