Div´s mit text-align:justify anordnen

J_Jara · 15.12.2009, 14:23

hallo, ist es möglich und wie, divs per text-align:justify anzuordnen?
gibt es eine besere möglichkeit?

Code:

<div class="thema_home">
  <div class="thema_home_thema" ></div>
  <div class="thema_home_thema" ></div>
  <div class="thema_home_thema" ></div>                    
</div>

hier das css:

Code:

.thema_home{ text-align:justify;}
.thema_home_thema{ float:left; width:150px; background-color:#3366FF;}

danke

abdullah · 15.12.2009, 15:05

hi,
was willst du denn genaueres machen ?

.thema_home{ text-align:justify;} stellt den inhalt als Blocksatz dar.

schau dir dazu bitte text-align: Horizontale Ausrichtung: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets genauer an

oder div elemente als Block - elemente darstellen:

Code:

<div id="box1" style="float: left; width: 150px; background: rgb(220,230,220);">
   <p>erster Link</p>
   <p>zweiter Link</p>
</div>
<div id="box2" style="float: left; margin-left: 15px; border: 1px solid silver; ">
   <p>Das <strong>div-Tag</strong> ist ein besonders nützliches Konstrukt in HTML. </p>
   <p>Es strukturiert Inhalte, die logisch zusammengehören 
   und optisch herausgestellt werden.</p>
</div>

lg abdullah

J_Jara · 15.12.2009, 15:09

Hi! und danke für die antwort.

ich möchte 5 div´s nebeneinander haben, alle divs sind 150px breit, die abstände zwischen sind automatisch und alle gleich, so das alles insgesammt 100% breite hat.

abdullah · 15.12.2009, 15:53

Zitat:

Zitat von J_Jara

Hi! und danke für die antwort.

ich möchte 5 div´s nebeneinander haben, alle divs sind 150px breit, die abstände zwischen sind automatisch und alle gleich, so das alles insgesammt 100% breite hat.

mit den CSS - code nimmst du die formatierungen für jedes einzelne div - element:

Code:

<style type="text/css">
.box1 { float: left; width: 150px; background: rgb(220,230,220); border: 1px solid silver; }
.box2 { float: left; width: 150px; margin-left: 15px; border: 1px solid silver; }
.box3 { float: left; width: 150px; margin-left: 15px; border: 1px solid silver; }
.box4 { float: left; width: 150px; margin-left: 15px; border: 1px solid silver; }
.box5 { float: left; width: 150px; margin-left: 15px; border: 1px solid silver; }
</style>

mit margin-left: Wert; kannst du den Abstand von links aus angeben, ich habe die Rahmen eingeblendet damit du siehst wie deine div elemente verhalten.

code für die div tags:

Code:

<div class="box1">
   <p>div 1</p>
</div>

<div class="box2">
   <p>div 2</p>
</div>

<div class="box3">
   <p>div 3</p>
</div>

<div class="box4">
   <p>div 4</p>
</div>

<div class="box5">
   <p>div 5</p>
</div>

insgesammte bereite von 100% hängt von deinem Browserfenster ab, da du die
div - elemente mit 150px in der breite einschränkst wird es niemals 100% werden,
auch wenn die abstände automatisch dargestellt werden können, gibt es von browser zu
browser unterschiede.

lg abdullah

abdullah · 15.12.2009, 15:54

hi,
schuldigung!
habe ausversehen zweimal gepostet...

J_Jara · 15.12.2009, 16:06

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="XHTML namespace">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
</head>
<div>
 <div style="width:140px; background-color:#9933CC; position:absolute; left:0px;">text</div>
 <div style="width:140px; background-color:#9933CC; position:absolute; left:50%; margin-left:-70px; ">text</div>
 <div style="width:140px; background-color:#9933CC; position:absolute; left:100%; margin-left:-140px;">text</div>
 </div>
<body>
</body>
</html>

so was wie hier, aber für egal wieviele divs. nicht nur für 3 divs

nikosch · 15.12.2009, 16:07

Ich wüßte nicht, wieso mal für 4 identische Angaben die Elemente einzeln formatieren sollte. Die CSS-Klassen brauchts auch nicht. Wenn wie oben eine Elternelement vorhanden ist.

@J_Jara: Woran haperts jetzt? Benutze Floats, statt margin.

abdullah · 15.12.2009, 16:13

hi,
vielleicht sollte ich sagen sollen dass die werte default werde von mir waren auch wenn es nicht gut gedacht war, die mit den selben werten zu bestimmen...

müsste aber jetzt klappen

J_Jara · 15.12.2009, 16:31

Wenn ich ein text in eine ebene einbinde, und diese ebene die Eigenschaft jutify hat, dann verhält sich der text so, dass die abstände zwischen den Wörtern automatisch eine gösse annähmen die denn Eindruck vorgibt, als würde jede Zeile die maximale breite haben. Die Zeilen beginnen immer links und enden immer rechts bündig.

Nun zu meinen Anliegen:
Ich möchte das meine divs sich so verhalten wie die Wörter im text!! Wie mache ich das.

nikosch · 15.12.2009, 16:35

Wurde bereits gesagt. Breite angaben, float setzen. justify hat damit nichts zu tun. Bite CSS Grundlagen büffeln!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Text Ersetzen an anderer Stelle	phpde	Off-Topic Diskussionen	6	03.08.2009 20:12
CSS Layout mit 4 Buttons nebeneinander!!	Rambo02	HTML, Usability und Barrierefreiheit	7	27.07.2009 15:33
Webdesign dringend Hilfe	Rambo02	HTML, Usability und Barrierefreiheit	3	25.07.2009 10:40
Textfelder Array in Datenbank schreiben	raa	PHP Tipps 2009	16	14.03.2009 21:41
[Erledigt] im sql kann ich tabelle nicht hinzufügen	autofieber	Datenbanken	7	01.03.2009 18:38
Text in Datenbank umwandeln	muffinsbacken	PHP Tipps 2009	9	07.01.2009 18:40
JavaScript/PHP: qooxdoo 0.7.1 - Teil 1 : Eine Einführung	Zergling-new	Tutorials	6	25.01.2008 10:41
CSS - Bild im div container überlappt andere container	Buschdieb	HTML, Usability und Barrierefreiheit	13	19.07.2007 23:17
CSS - Design (clear - Problem)		HTML, Usability und Barrierefreiheit	7	21.12.2005 14:55
Text aus der DB verteilen		PHP Tipps 2007	17	16.11.2005 12:04
[Erledigt] Link		PHP Tipps 2005-2	10	20.07.2005 21:28
[Erledigt] gd Text um den Mittelpunkt anordnen....		PHP-Fortgeschrittene	7	18.07.2005 16:43
frames probleme		HTML, Usability und Barrierefreiheit	6	18.01.2005 02:33
txt-Datei erstellen	d-81	PHP Tipps 2004	12	11.08.2004 20:31

15.12.2009, 14:23
J_Jara Erfahrener Benutzer Registriert seit: 15.04.2008 Beiträge: 147	Div´s mit text-align:justify anordnen hallo, ist es möglich und wie, divs per text-align:justify anzuordnen? gibt es eine besere möglichkeit? Code: <div class="thema_home"> <div class="thema_home_thema" ></div> <div class="thema_home_thema" ></div> <div class="thema_home_thema" ></div> </div> hier das css: Code: .thema_home{ text-align:justify;} .thema_home_thema{ float:left; width:150px; background-color:#3366FF;} danke


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

15.12.2009, 15:05
abdullah Erfahrener Benutzer Registriert seit: 02.12.2009 Beiträge: 104 PHP-Kenntnisse: Anfänger	hi, was willst du denn genaueres machen ? .thema_home{ text-align:justify;} stellt den inhalt als Blocksatz dar. schau dir dazu bitte text-align: Horizontale Ausrichtung: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets genauer an oder div elemente als Block - elemente darstellen: Code: <div id="box1" style="float: left; width: 150px; background: rgb(220,230,220);"> <p>erster Link</p> <p>zweiter Link</p> </div> <div id="box2" style="float: left; margin-left: 15px; border: 1px solid silver; "> <p>Das <strong>div-Tag</strong> ist ein besonders nützliches Konstrukt in HTML. </p> <p>Es strukturiert Inhalte, die logisch zusammengehören und optisch herausgestellt werden.</p> </div> lg abdullah

15.12.2009, 15:09
J_Jara Erfahrener Benutzer Registriert seit: 15.04.2008 Beiträge: 147	Hi! und danke für die antwort. ich möchte 5 div´s nebeneinander haben, alle divs sind 150px breit, die abstände zwischen sind automatisch und alle gleich, so das alles insgesammt 100% breite hat.

15.12.2009, 15:54
abdullah Erfahrener Benutzer Registriert seit: 02.12.2009 Beiträge: 104 PHP-Kenntnisse: Anfänger	hi, schuldigung! habe ausversehen zweimal gepostet...

15.12.2009, 16:07
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Ich wüßte nicht, wieso mal für 4 identische Angaben die Elemente einzeln formatieren sollte. Die CSS-Klassen brauchts auch nicht. Wenn wie oben eine Elternelement vorhanden ist. @J_Jara: Woran haperts jetzt? Benutze Floats, statt margin. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

15.12.2009, 16:13
abdullah Erfahrener Benutzer Registriert seit: 02.12.2009 Beiträge: 104 PHP-Kenntnisse: Anfänger	hi, vielleicht sollte ich sagen sollen dass die werte default werde von mir waren auch wenn es nicht gut gedacht war, die mit den selben werten zu bestimmen... müsste aber jetzt klappen

15.12.2009, 16:31
J_Jara Erfahrener Benutzer Registriert seit: 15.04.2008 Beiträge: 147	Wenn ich ein text in eine ebene einbinde, und diese ebene die Eigenschaft jutify hat, dann verhält sich der text so, dass die abstände zwischen den Wörtern automatisch eine gösse annähmen die denn Eindruck vorgibt, als würde jede Zeile die maximale breite haben. Die Zeilen beginnen immer links und enden immer rechts bündig. Nun zu meinen Anliegen: Ich möchte das meine divs sich so verhalten wie die Wörter im text!! Wie mache ich das.

15.12.2009, 16:35
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Wurde bereits gesagt. Breite angaben, float setzen. justify hat damit nichts zu tun. Bite CSS Grundlagen büffeln! __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --