Du bist nicht angemeldet.

Lieber Besucher, herzlich willkommen bei: DeveloperTalk. Falls dies dein erster Besuch auf dieser Seite ist, lies bitte die Hilfe durch. Dort wird dir die Bedienung dieser Seite näher erläutert. Darüber hinaus solltest du dich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutze das Registrierungsformular, um dich zu registrieren oder informiere dich ausführlich über den Registrierungsvorgang. Falls du dich bereits zu einem früheren Zeitpunkt registriert hast, kannst du dich hier anmelden.

Patrick

Profi

  • »Patrick« ist der Autor dieses Themas

Beiträge: 694

Danksagungen: 168

  • Private Nachricht senden

1

04.03.2014, 18:22

Gitter-Layout; Divs nebeneinander & untereinander positionieren

Hallo liebe Community!

ich sitze gerade vor einem schier - ohne Javascript - unlöslichen Problem.

Ich habe ca. folgendes HTML:

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>

<html>
    <body>
        [...]
        <main>
            <section>
                <div class="csc-default">[...]</div> <!-- Überschrift enthalten -->
                <div class="csc-default">[...]</div> <!-- Im Prinzip <article> -->
                <div class="csc-default">[...]</div> <!-- dito -->
                <div class="csc-default">[...]</div> <!-- dito -->
                <div class="csc-default">[...]</div> <!-- dito -->
            </section>
        </main>
        [...]
    </body>
</html>


Und habe mit folgendem CSS:

Cascading Style Sheet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
main section {
    width: 90%;
    margin: 0 auto;
}

        main section .csc-default {
		float: left;
		margin-bottom: 70px;
		width: 50%;
	}
	
	
	
	main section .csc-default:nth-child(odd) {
		float: right;
	}
	
	main section .csc-default:first-child {
		float: none;
		margin-left: 0;
		width: 100%;
	}


Versucht, dass der erste Div oben drüber dargestellt wird und die andern Divs nebeneinander dargestellt werden, und nach zweiten, ein Umbruch stattfindet, und es dann in der nächsten Zeile weitergeht.

Bis jetzt sieht es aber leider so aus:

C/C++-Quelltext

1
2
3
4
<    D    I    V    />
<div>            <div>
                 <div> // Float: left
                 <div> // Float: right



Weiß jemand eine Lösung? :S In Spalten und Zeilen kann ich das CMS-bedingt nicht aufteilen..
Ex ungue leonem.

War der Beitrag für dich hilfreich?
Dann drück auf .

Erik

Profi

Beiträge: 1 274

Registrierungsdatum: 22.06.2011

Wohnort: Deutschland ;)

Danksagungen: 307

  • Private Nachricht senden

2

04.03.2014, 20:48

Kann aus dem Satz irgendwie nicht entnehmen, wie das genau aussehen soll :D Kannste das vllt nochmal darstellen?
Beste Webite im Internet ( ͡° ͜ʖ ͡°)
xinra.de

Patrick

Profi

  • »Patrick« ist der Autor dieses Themas

Beiträge: 694

Danksagungen: 168

  • Private Nachricht senden

3

04.03.2014, 21:26

Oh stimmt :D Es soll so aussehen:

HTML

1
2
3
<     D      I      V     />
<  D  I  V  /><  D  I  V  />
<  D  I  V  /><  D  I  V  />


Die DIV's jeweils mit einer Breite von 50%. Und ab einer gewissen Fenstergröße würde ich dann einen Umbruch machen und 3 nebeneinander jeweils stellen wollen.
Ex ungue leonem.

War der Beitrag für dich hilfreich?
Dann drück auf .

Simon

Profi

Beiträge: 725

Registrierungsdatum: 14.06.2011

Danksagungen: 210

  • Private Nachricht senden

4

04.03.2014, 21:50

Hmm weiß nicht ob ich es richtig verstanden habe.
Wieso macht du die Divs nicht einfach auf 50% und per Media-Query dann ab einer bestimmten Größe auf 33%?
Dann brauchst du ja auch kein Float, weil der Browser normal selbst die Divs in eine neue Zeile schiebt, wenn die aktuelle voll ist?

Erik

Profi

Beiträge: 1 274

Registrierungsdatum: 22.06.2011

Wohnort: Deutschland ;)

Danksagungen: 307

  • Private Nachricht senden

5

05.03.2014, 00:12

jo, was simon gesagt hat ist ein guter ansatz ;D
ich benutz für sowas mitlerweile bootstrap, aber das kann man sich auch noch leicht selbst basteln...
Beste Webite im Internet ( ͡° ͜ʖ ͡°)
xinra.de

liro

Fortgeschrittener

Beiträge: 180

Danksagungen: 36

  • Private Nachricht senden

6

05.03.2014, 09:50

Hmm weiß nicht ob ich es richtig verstanden habe.
Wieso macht du die Divs nicht einfach auf 50% und per Media-Query dann ab einer bestimmten Größe auf 33%?
Dann brauchst du ja auch kein Float, weil der Browser normal selbst die Divs in eine neue Zeile schiebt, wenn die aktuelle voll ist?


Float brauchst du, da divs Blockelemente sind (damit immer untereinander dargestellt werden), also brauchst du float oder display: inline-block.
Wenn du eh eine feste Breite hast dann würde ich diese auch verwenden, sprich wenn die Seite eine Breite von 1000px haben soll, jedem innerem div eine Breite von 1000px/2 + Abstände geben. Oder du machst alles, auch die Abstände, in %.

Es hat sich bereits 1 registrierter Benutzer bedankt.

Benutzer, die sich für diesen Beitrag bedankt haben:

Patrick (16.03.2014)

Simon

Profi

Beiträge: 725

Registrierungsdatum: 14.06.2011

Danksagungen: 210

  • Private Nachricht senden

7

05.03.2014, 10:02

Ach ja stimmt,
aber man kann auch einfach alles nach links floaten, dann hat er den Umbruch selbst gemacht. ^^

Sent from my XT890 using Tapatalk

Johannes S.

Fortgeschrittener

Beiträge: 444

Registrierungsdatum: 24.06.2011

Wohnort: Lychen

Danksagungen: 71

  • Private Nachricht senden

8

06.03.2014, 02:00

Wie sieht es mit den folgenden CSS-Eigenschaften aus?

Cascading Style Sheet

1
2
3
4
.csc-default ~ .csc-default {
	width: 50%;
	float: left;
}
Signatur ?

liro

Fortgeschrittener

Beiträge: 180

Danksagungen: 36

  • Private Nachricht senden

9

06.03.2014, 09:21

Mal ne Frage: wieso verwendest du für die Überschrift die selbe class wie für die Artikel?

Patrick

Profi

  • »Patrick« ist der Autor dieses Themas

Beiträge: 694

Danksagungen: 168

  • Private Nachricht senden

10

11.03.2014, 22:17

Mal ne Frage: wieso verwendest du für die Überschrift die selbe class wie für die Artikel?


Weil das durch Typo3 leider so bedingt ist, dass ich ein Content Element nur mit der Überschrift machen muss.. Und ich nicht sagen kann, dass dieses Content Element ne andere Klasse haben soll.. :/ das ist das doofe.. also ich habe zumindest nicht herausgefunden wie.


Zitat von »Simon«

Hmm weiß nicht ob ich es richtig verstanden habe.
Wieso macht du die Divs nicht einfach auf 50% und per Media-Query dann ab einer bestimmten Größe auf 33%?
Dann brauchst du ja auch kein Float, weil der Browser normal selbst die Divs in eine neue Zeile schiebt, wenn die aktuelle voll ist?

Das hatte ich vor, aber es muss erstmal mit 50% klappen ^^


@alle nach links floaten:
Schon vorher ausprobiert funktioniert nicht dann sind die ersten beiden nebeneinander, das nächste rechts gefloatet und das danach links, ziemlich komisch..

@display: inline-block
Stimmt daran dachte ich gar nicht. Das muss ich mal ausprobieren.

@Johannes: Ich weiß nicht, wieso das etwas ändern sollte, aber ich probier es auch mal.
Ex ungue leonem.

War der Beitrag für dich hilfreich?
Dann drück auf .

Patrick

Profi

  • »Patrick« ist der Autor dieses Themas

Beiträge: 694

Danksagungen: 168

  • Private Nachricht senden

11

14.03.2014, 17:21

Mit display: inline-block; in Kombination mit vertical-align: top; hat es super geklappt, danke!
Ex ungue leonem.

War der Beitrag für dich hilfreich?
Dann drück auf .

Johannes S.

Fortgeschrittener

Beiträge: 444

Registrierungsdatum: 24.06.2011

Wohnort: Lychen

Danksagungen: 71

  • Private Nachricht senden

12

17.03.2014, 23:34

Ich war mir nicht sicher was dein Ziel ist und daher konnte ich auch nicht sicher sagen ob meine Lösung funktiniert. Wenn die verschiedenen Blöcke unterschiedlich hoch sind, wird meine Lösung auch nicht funktionieren und an dem selben Problem scheitern wie du es hier beschreibst:
@alle nach links floaten:
Schon vorher ausprobiert funktioniert nicht dann sind die ersten beiden nebeneinander, das nächste rechts gefloatet und das danach links, ziemlich komisch..

Das Problem ist einfach, dass er links neben einem nach links gefloateten Element X kein Element mehr platziert, welches im HTML-Dokument nach dem Element X steht, und dass ein nach links gefloatetes Element in der Höhe so weit wie möglich nach links gerückt wird, in der es im HTML-Document steht. Das heißt wenn das zweite gefoatete Element niedriger ist als das erste, so wird das dritte Element auch auf die rechte Seite gepackt.

EDIT: Wenn es keine weiteren Bemerkungen gibt, werde ich das Thema demnächst schließen.
Signatur ?

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »Johannes S.« (17.03.2014, 23:42)


Patrick

Profi

  • »Patrick« ist der Autor dieses Themas

Beiträge: 694

Danksagungen: 168

  • Private Nachricht senden

13

18.03.2014, 22:12

Klingt logisch! Gut dass es noch Alternativen gibt. Und mal gucken, was die Zukunft uns bringt, vlt. gibt es iwann sogar eine JS-freie Lösung divs mit unterschiedlicher Höhe und Breite unter und nebeneinander platzieren zu können. Wahrscheinlich aber unwahrscheinlich ;)
Ex ungue leonem.

War der Beitrag für dich hilfreich?
Dann drück auf .

Ähnliche Themen