[Erledigt] CSS Problem, Links ausrichten

monk · 09.03.2010, 16:54

Hallo

Ich habe untenstehender Code. Bei einem mehrzeiligen Text (class=feld) wird es korrekt angezeigt. Bei einem kurzen Text wird es aber rechtsbündig ausgerichtet anstatt links. Trage ich bei .feld float:left ein, verhaut es aber das ganze Layout.

Code:

.reihe 
{
	background-color:green;
	margin-bottom:10px;
	padding-bottom:20px;
	display:block;
	float:left;
}


.label 
{
	background-color:yellow;
	float:left;
	padding-right:20px;
	margin-right:20px;
	display:inline;
	clear:right;
}

.feld
{
	background-color:blue;
	float:right;
	display:inline;
}

Code:

<div class="reihe">
    	<div class="label">Text</div>
    	<div class="feld">Das ist ein Text - Das ist ein Text<input type="hidden" value="test" name="ID"></div>
</div>


<div class="reihe">
    <div class="label">Text</div>
    <div class="feld">Das ist ein Text - Das ist ein Text - Das ist ein Text - Das ist ein Text - Das ist ein Text - Das ist ein Text - 
    					Das ist ein Text - Das ist ein Text - Das ist ein Text - Das ist ein Text - Das ist ein Text - Das ist ein Text - 
    					Das ist ein Text - Das ist ein Text - Das ist ein Text - Das ist ein Text - Das ist ein Text - Das ist ein Text - 
    					Das ist ein Text - Das ist ein Text - Das ist ein Text - Das ist ein Text - Das ist ein Text - Das ist ein Text - 
    					Das ist ein Text - Das ist ein Text - Das ist ein Text - Das ist ein Text - Das ist ein Text - Das ist ein Text - 
</div>
</div>



<div class="reihe">
    <div class="label">Text</div>
    <div class="feld">Das ist ein Text - Das ist ein Text - Das ist ein Text - Das ist ein Text - Das ist ein Text - Das ist ein Text - 
    					Das ist ein Text - Das ist ein Text - Das ist ein Text - Das ist ein Text - Das ist ein Text - Das ist ein Text - 
    					Das ist ein Text - Das ist ein Text - Das ist ein Text - Das ist ein Text - Das ist ein Text - Das ist ein Text - 
    					Das ist ein Text - Das ist ein Text - Das ist ein Text - Das ist ein Text - Das ist ein Text - Das ist ein Text - 
    					Das ist ein Text - Das ist ein Text - Das ist ein Text - Das ist ein Text - Das ist ein Text - Das ist ein Text - 
</div>
</div>

<div class="reihe">
    <div class="label">Text</div>
    <div class="feld">Das ist ein Text - Das ist ein Text</div>
</div>

Ich komme hier einfach nicht mehr weiter...

Baltasar · 09.03.2010, 18:05

float ist nicht die textausrichtung!!!!!!!!!!!!!!!!!!!!

text-align.....

das sind echt grundlagen!

monk · 09.03.2010, 18:46

Danke... hilft mir aber auch nicht weiter....

Kardey · 09.03.2010, 19:07

Was ist denn eigentlich genau Dein Ziel?
Soll sich .label links von .feld befinden, sodass sich .label und die erste Zeile von .feld in der selben Zeile befinden (was beim jetzigen Code beim kurzen Text der Fall ist) oder soll sich .label oberhalb von von .feld befinden (was beim jetzigen Code beim langen Text der Fall ist)?

monk · 09.03.2010, 19:20

Mein Ziel ist das erstere, es soll so sein dass die erste Zeile von .feld auf gleicher Höhe wie .label ist und .label linksbündig angeordnet wird - momentan ist das der Fall beim langen (mehrzeiligen) Text im IE:

...und beim kurzen Text im Firefox

Baltasar · 09.03.2010, 19:35

1.) warum floatest du etwas, was offensichtlich ein reihe bzw. zeile erzeugen soll? das kann da wohl raus...

2.)bei .label kann clear:right raus..macht an der stelle eh gar keinen sinn

3.)bei .label float:left setzen

4.)bei .feld den margin-left gleich der breite von .label setzen

fertig.

monk · 09.03.2010, 19:58

Zitat:

Zitat von Baltasar

1.) warum floatest du etwas, was offensichtlich ein reihe bzw. zeile erzeugen soll?

...weil ich leider zuwenig Ahnung von CSS habe, und es nur ungefähr alle 6 Monate wieder brauche.

Vielen herzlichen Dank Baltasar, jetzt klappts! Und es sieht sogar noch gleich aus im IE und FF

Gruss
Monk

Baltasar · 09.03.2010, 20:33

passt schon. merk dir für die zukunft einfach: CSS 4 You - The Finest in Stylesheets

da findest du alle css-eigenschaften mit beschreibung inklusive einiger tuts zu den gängigsten css-geschichten.

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
Script zum auslesen von Links	Lunix	PHP Tipps 2010	7	16.03.2010 12:28
[Erledigt] Problem mit Mehrsprachigkeit	Sniper_Kotaro	PHP Tipps 2009	2	16.12.2009 11:47
Problem beim berenzten ausgeben von links in einer blätterfuntion	litterauspirna	PHP Tipps 2009	3	04.11.2009 15:37
Umlaut Problem	nokieone	PHP Tipps 2009	7	16.10.2009 19:30
Formatierte Ausgabe von PHP generierten Links	larsos	PHP Tipps 2009	2	15.10.2009 20:04
Modul: mod_rewrite \| Problem: Regel schreibt Links um die es nicht soll	kn0wledge	Server, Hosting und Workstations	0	14.10.2009 22:01
Seltsames Problem mit preg_replace	Nightuser	PHP Tipps 2009	10	17.06.2009 22:25
[Erledigt] Problem beim übergeben von Links aus Formularen	Baum123	PHP Tipps 2009	4	07.04.2009 12:45
Problem mit Links	DJ Nuno	HTML, Usability und Barrierefreiheit	0	17.10.2007 07:24
Links im Text	GELight	PHP Tipps 2006	3	13.10.2006 17:35
Problem bei der PDF Generierung HTML2PDF von rustyparts.com	joni1980	PHP-Fortgeschrittene	2	23.09.2005 16:15
Include Problem! Links inerhalb eines Includes ...		PHP Tipps 2005-2	14	23.07.2005 20:20
Tabelle ganz links	lalala	HTML, Usability und Barrierefreiheit	1	06.07.2005 14:29
Problem mit eigenem CMS		PHP Tipps 2005	5	13.04.2005 14:04
Problem mit & Zeichen in Links		HTML, Usability und Barrierefreiheit	4	14.02.2005 22:19


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

09.03.2010, 18:05
Baltasar Erfahrener Benutzer Registriert seit: 26.10.2003 Beiträge: 592	float ist nicht die textausrichtung!!!!!!!!!!!!!!!!!!!! text-align..... das sind echt grundlagen!

09.03.2010, 18:46
monk Benutzer Registriert seit: 19.01.2010 Beiträge: 34 PHP-Kenntnisse: Fortgeschritten	Danke... hilft mir aber auch nicht weiter....

09.03.2010, 19:07
Kardey Neuer Benutzer Registriert seit: 09.03.2010 Beiträge: 23 PHP-Kenntnisse: Anfänger	Was ist denn eigentlich genau Dein Ziel? Soll sich .label links von .feld befinden, sodass sich .label und die erste Zeile von .feld in der selben Zeile befinden (was beim jetzigen Code beim kurzen Text der Fall ist) oder soll sich .label oberhalb von von .feld befinden (was beim jetzigen Code beim langen Text der Fall ist)? __________________ Kardey

09.03.2010, 19:20
monk Benutzer Registriert seit: 19.01.2010 Beiträge: 34 PHP-Kenntnisse: Fortgeschritten	Mein Ziel ist das erstere, es soll so sein dass die erste Zeile von .feld auf gleicher Höhe wie .label ist und .label linksbündig angeordnet wird - momentan ist das der Fall beim langen (mehrzeiligen) Text im IE: ...und beim kurzen Text im Firefox

09.03.2010, 19:35
Baltasar Erfahrener Benutzer Registriert seit: 26.10.2003 Beiträge: 592	1.) warum floatest du etwas, was offensichtlich ein reihe bzw. zeile erzeugen soll? das kann da wohl raus... 2.)bei .label kann clear:right raus..macht an der stelle eh gar keinen sinn 3.)bei .label float:left setzen 4.)bei .feld den margin-left gleich der breite von .label setzen fertig.

09.03.2010, 20:33
Baltasar Erfahrener Benutzer Registriert seit: 26.10.2003 Beiträge: 592	passt schon. merk dir für die zukunft einfach: CSS 4 You - The Finest in Stylesheets da findest du alle css-eigenschaften mit beschreibung inklusive einiger tuts zu den gängigsten css-geschichten.