[Bib]

Hi,
ich habe ein kleines Problem mit meiner Seite:

Ich habe mit CSS zwei div-Boxen definiert, um Text 2-spaltig anzeigen zu lassen.

<div  class="text_zweispaltig">
text box 1
</div>

<div class="text_zweispaltig">
text box 2
<div>

Meine CSS-Datei (Ausschnitt)

.text_zweispaltig {
 text-align:left;
 width:250px;
 margin-left:10px;
}

Die Boxen erscheinen jedoch untereinander und nicht nebeneinander. Was muß ich da noch hinzufügen, damit das nebeneinander (mit kleinem Abstand dazwischen) angezeigt wird?

Wenn ich die linke Box mit float:left und die rechte Box mit float:right formatiere, dann passts auch nicht ganz. die Boxen werden zwar nebeneinander angezeigt, aber dadurch, daß die recht Box länger (mehr Zeilen) ist, passt das mit den nachfolgenden Boxen nicht mehr überein.

[axx]

Zitat (Bib: 12.09.2006, 13:29)

Die Boxen erscheinen jedoch untereinander und nicht nebeneinander. Was muß ich da noch hinzufügen, damit das nebeneinander (mit kleinem Abstand dazwischen) angezeigt wird?

Selbstverständlich werden beide Elemente untereinander angezeigt. Das Element <div> ist ein Blockelement.

float:left heißt, nachfolgende Elemente fließen rechts um das mit 'float:left' formatierte Element. Beide Boxen werden nebeneinander angezeigt. Ist der Inhalt der zweiten Box länger als der der ersten, wird der Inhalt der zweiten Box danach wieder die ganze Seitenbreite einnehmen. Beispiel

Zitat

Wenn ich die linke Box mit float:left und die rechte Box mit float:right formatiere, dann passts auch nicht ganz. die Boxen werden zwar nebeneinander angezeigt, aber dadurch, daß die recht Box länger (mehr Zeilen) ist, passt das mit den nachfolgenden Boxen nicht mehr überein.

Welche nachfolgenden Boxen?

[Bib]

Ich habe erst ein paar Bilder auf meiner Seite, dann kommen ein paar Daten dazu (die sind 2-spaltig) angezeigt und danach kommt nochmal eine box über die ganze Breite mit ein paar Hinweisen.

Wenn ich das 2-spaltige mit float:left/right formatiere, dann werden die Spalten schön nebeneinander angezeigt, aber die nachfolgende Box (die mit den Hinweisen über die ganze Breite) fängt genau unterhalb der linken Box an. Die rechte Box ist aber etwas länger und daher verschiebt sich dann der untere Bereich.

In dem Bild im Anhang sieht man es. Der blau umrandete Bereich sollte eigentlich ebenfalls schön nebeneinander stehen (es sind zwei Listen nebeneinander in einem div-Container).

Angehängte Miniaturbilder

• 

[axx]

Deiner Beschreibung nach sollte die linke Liste in der blauen Umrandung aus dem Fluss genommen werden.

ul.klassenname {clear:both;}

Für eine genauere Aussage brauche ich den Quelltext.

[Bib]

Bittesehr...

Hauptseite (roter Rahmen)

<div class="text_zweispaltig_l">
<p class="ueberschrift">Daten
		zum EFH Variante 1:</p>
		  <p>Wohnfläche ca. 125 qm
		  &nbsp;
		  <p class="text_fett">Verkaufspreis 289.000,-€</p><p class="ueberschrift">Daten
		zu EFH Variante 2:</p>
		</p>
		<p>Wohnfläche ca. 146 qm<p><b>Verkaufspreis 312.000,-€</b><p>Hier kann 
		der Wohnzimmeranbau auch wegfallen, dann ca. 129 qm
		<p><p>Zweiterschließung für Strom, Telefon, Kanalanschlüsse ect. 
		bei beiden Varianten ca. 10.000,- €<p>Die Größe und die Architektur ist 
		bei beiden Varianten noch variabel.</p>
		</div>
		<div class="text_zweispaltig_r">
		<p class="ueberschrift">Grundstücksgröße:</p>
	  <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ca. 426 qm<br>
		</p>
		<p class="ueberschrift">Optional erhältlich:<br>
		<br>
		Garage:<span class="text_fett">&nbsp; 6.500,-- €</span>
		</p>
		<p>Carport:<span class="text_fett"> 3.500,-- €</span></p>
		<p>Anbau Abstellraum/Geräte:<b> </b>
		</p>
		<p><span class="text_fett">10.000,-- € </span>
		</p>
		<p>(kann auch später erfolgen)</p>
		<p>Terrasse ca. 15qm<span class="text_fett">: 3.500,-- €</span></p>
		<p>Pergola<span class="text_fett">:&nbsp; 2.200,-- €</span></p>
		<p>Eingangsdach<span class="text_fett">: 1.300,-- €</span></p>
		<p class="ueberschrift">Kontaktaufnahme:</p>
	   

</div>

<div class="auswahl">
  <? include ("041_1_1_0_stadtaic_efh_auswahl.php"); ?>
</div>

Auswahl (blauer Rahmen)

<div class="zweispaltig_l">
<p><a href="index.php?id=41111">Lageplan / Beschreibung</a></p>
<p><a href="index.php?id=41113">Ansichten Variante 1</a></p>
<p><a href="index.php?id=411131">Dachgeschoss Variante 1</a></p>
<p><a href="index.php?id=411132">Erdgeschoss Variante 1</a></p>
</div>

<div class="zweispaltig_r">
<p><a href="index.php?id=41112">Ansichten / Daten</a></p>
<p><a href="index.php?id=41114">Ansichten Variante 2</a></p>
<p><a href="index.php?id=411141">Dachgeschoss Variante 2</a></p>
<p><a href="index.php?id=411142">Erdgeschoss Variante 2</a></p>
</div>

CSS

.zweispaltig_l {
 text-align:left;
 float:left;
 width:170px;
 margin-left:100px;
}

.zweispaltig_r {
 text-align:left;
 float:right;
 width:170px;
 margin-right:100px;
}

.text_zweispaltig_l {
 text-align:left;
 float:left;
 width:250px;
 margin-left:10px;
}

.text_zweispaltig_r {
 text-align:left;
float:right;
 width:250px;
 margin-right:10px;
}

Dieser Beitrag wurde von Bib bearbeitet: 12. September 2006 - 20:46

[axx]

Nun, wie ich schon sagte:

.zweispaltig_l {
clear:both;
}

[Bib]

Klappt bestens, danke!

Kannst du mir vielleicht noch sagen, wie ich den Abstand zwischen dem Listenzeichen und dem Listentext ändere?

Hab mit

list-style-image:url(xxx.gif);

das Zeichen, das bei meinen Listenpunkten dabeisteht geändert. Jedoch ist mir der Abstand zwischen dem Zeichen und dem dazugehörigen Text zu gering. Kann man den Abstand vergrößern oder müsste ich da auch wieder 2-spaltig arbeiten wie beim obigen Beispiel?

[axx]

Dein hier geposteter Quelltext enthält keine Liste.

[Bib]

Hab ich verwechselt...

<ul class="drei_gruende">
  <li>Eine umfassende, kompetente und ehrliche Beratung.</li><p>
  <li>Eine hochwertige und handwerkliche Bauqualität.</li><p>
  <li>Das Gefühl, durch die intensive Baubetreuung eine solide Bauqualität zu erhalten.</li><p>
</ul>

CSS

.drei_gruende
{
	width:450px;
	padding-left:100px;
	font-size:14px;
	list-style-image:url(design/punkt_01.gif);
 	text-align:left;
}

P.S. Wie erreiche ich es hier im Forum, daß längere Code-Anzeigen mit einem Scrollbalken versehen werden? Meine Postings werden sonst sehr unübersichtlich, wenn ich mal längere Code-Ausschnitte poste.

Dieser Beitrag wurde von Bib bearbeitet: 13. September 2006 - 07:12

[flo]

Zitat

P.S. Wie erreiche ich es hier im Forum, daß längere Code-Anzeigen mit einem Scrollbalken versehen werden? Meine Postings werden sonst sehr unübersichtlich, wenn ich mal längere Code-Ausschnitte poste.

Mit

[ codebox ] [ /codebox ] (ohne die leerzeichen)

 Dies ist ein sehr langer Satz und sollte mit hilfe der [ codebox ] tags wesentlich besser zu lesen sein.

Dieser Beitrag wurde von Flo bearbeitet: 13. September 2006 - 07:22

[asko]

Alles, aber auch wirklich alles, was es über Listen zu wissen gibt findest Du auf dieser CSS Tutorial Seite

[axx]

Das Listensymbol, ob Grafik oder nicht, gehört zum Listenelement, und der Abstand zwischen Symbol und Text ist m.W. nicht einstellbar.

[asko]

Zitat (axx: 13.09.2006, 09:01)

Das Listensymbol, ob Grafik oder nicht, gehört zum Listenelement, und der Abstand zwischen Symbol und Text ist m.W. nicht einstellbar.

Jein. Mit einem Trick kann man nicht nur den horizontalen Abstand einstellen, sondern auch die vertikale Position bestimmen.
Der Trick besteht darin gar kein List-Symbol zu benutzen und dafür mit Hintergrundgrafik zu arbeiten. Hier erst mal der Code:

ul {
	list-style-type: none;
}

ul li {
	background-image: url(pfad/zum/list-symbol.gif);
	background-repeat: no-repeat;
	background-position: 5px 5px;
	padding-left: 20px;
}

Erklärung:
Zunächst wird der Ungeordneten Liste mitgeteilt das sie gar kein Symbol für Listen-Elemente benutzen soll.
Das Listen-Element selbst benutzt dann eine Hintergrundgrafik die an Stelle des Listen-Symbol tritt. Durch das no-repeat wird dies nur einmal angezeigt, sonst könnte es bei kleinen Grafiken zu Kachel-Effekten kommen. Mit padding-left erzwingt man einen Innenabstand des Listen-Elements wodurch -logischerweise- die Hintergrundgrafik nach aussen gedrückt wird. Durch das "background-position" wird die Grafik zum Listen-Element ausgerichtet damit die Höhe stimmt und nicht links oben in der Ecke hängt.
Einfach mal testen und mit den Werten spielen, dann sieht man schon was sich verändert

Da der Code oben auf alle Listen-Elemente angewendet wird empfiehlt es sich einen Container mit ID zu benutzen, da eine "globale" Veränderung aller Listen-Elemente u.U. gar nicht erwünscht ist.

Dieser Beitrag wurde von asko bearbeitet: 13. September 2006 - 08:49