css Formatierung

[Voselix]

Hallo zusammen,

ich hab wieder mal ne Frage:

Ich habe 3 Artikel (Bild, Textelement, Bild)

Diese sollen bei einer Auflösung >960 px waagerecht nebeneinander erscheinen.
Bei einer Auflösung <960 sollen diese senkrecht zentriert untereinander stehen.

bei>960 habe ich:

.ce_image.start_mitglied_nrw.block {
    height:100px;
    float:left;
    margin-left:10px;
    background-color:rgba(255,255,255,.5);
}

.ce_text.start_mitglied_h.block {
    height:100px;
    float:left;
    padding-top:10px;
    padding-right:10px;
    padding-left:10px;
    background-color:rgba(255,255,255,.5);
}

.ce_text.start_mitglied_h h1 {
    text-align:center;
    font-size:100%;
}

.ce_text.start_mitglied_h p {
    font-size:70%;
}

.ce_image.start_mitglied_brd.block {
    height:100px;
    max-width:115px;
    float:left;
    padding-top:25px;
    background-color:rgba(255,255,255,.5);
}

.ce_text.start_mitglied_txt.block {
    clear:both;
}

bei<960:

.ce_image.start_mitglied_nrw.block {
    display:flex;
    background-color: rgba(255,255,255,.5);
}

.ce_text.start_mitglied_h.block {
    display:block;
    width:100%;
    background-color: rgba(255,255,255,.5);
}

.ce_text.start_mitglied_h h1 {
    text-align:center;
    font-size:100%;
}

.ce_text.start_mitglied_h p {
    text-align:center;
    font-size:70%;
}

.ce_image.start_mitglied_brd.block {
    display:flex;
    background-color: rgba(255,255,255,.5);
}

.ce_text.start_mitglied_txt.block {
}

Das passt aber irgendwie nicht....ich weiss das muss irgendwie mit .>inside gehen aber ich krieg das net hin...kann mir da jemand helfen??


GLG
Vosi

[Spooky]

Poste einen Link zur Seite.

[Voselix]

/index.php/startseite.html

es geht um die drei Elemente:
1. Bild Chorverb. NRW --- Klasse: start_mitglied_nrw
2. Textelement: Kreis Chor...Eu --- Klasse: start_mitglied_h
3. Bild Chorverb. BRD --- Klsse: start_mitglied_brd

[Spooky]

Also prinzipiell musst du allen Elementen float:left; geben, mit der richtigen Breite (Vorsicht bei Margins und Paddings). Und bei <960 ist es dann float:none; und width:auto; und das erste und dritte Element bekommt img { margin:auto; }

[Voselix]

soweit sogut....hab jetzt mal folgendes gemacht (siehe Link)

Bei kleiner 960 ist es jetzt fast gut...bekomme nur die Bilder nicht zentriert :-(

Hab das gleiche Thema mit dem zentrieren von den Elementen ja auch im Banner....wat mach ich da nur...

Lächele verlegen: Kannst du mir die 6 :-))) Elemente mal zentrieren? in der kleinen Auflösung?

Danke vorab!

GLG
Marcus

[Spooky]

Bei kleiner 960 ist es jetzt fast gut...bekomme nur die Bilder nicht zentriert :-(

figure img {
    display:block;
    margin:auto;
}

[dazzle89]

figure img {
    display:block;
    margin:auto;
}

Dann sollte er aber noch das display:flex; beim div entfernen. Oder diesem justify-content: center; geben.

[mlweb]

Also irgendwie solltest Du Dich mal ernsthaft mit css beschäftigen.
Zum Zentrieren von inline-Elementen ist text-align: center das Mittel der Wahl.
Für Blockelemente margin-left und margin right: auto.
Wenn es damit nicht klappt, sollte man mal schauen, was da noch so an Eigenschaften deklariert ist und vielleicht stört.
In Deinem Fall sehe ich da ein display:flex für die drei Elemente die da nebeneinander stehen sollen. Das wird aber m.E. für den jetzigen Aufbau mit float gar nicht benötigt.
Nehme ich das raus kann ich die inline-Elemente prima über text-align: center zentrieren.

Nachtrag: Natürlich kann man den ganzen Konstrukt auch mit Flexboxen bzw. ineinander verschachtelten Flexboxen aufbauen. Man sollte aber immer wissen was man tut und welche Eigenschaft welche Wirkung hat ggf. kann man sich auch mal Testcases für einzelne "Varianten" aufbauen.

[Voselix]

ööööhhhh...halt...das klappt jetzt nicht so ganz---hab jetzt:
<960

figure.image_container {
    display:block;    
    margin:auto;
}

.ce_image.start_mitglied_nrw.block {
    background-color: rgba(255,255,255,.5);
}

.ce_text.start_mitglied_h.block {
    background-color: rgba(255,255,255,.5);
}

.ce_text.start_mitglied_h h1 {
    text-align:center;
    font-size:100%;
}

.ce_text.start_mitglied_h p {
    text-align:center;
    font-size:70%;
}

.ce_image.start_mitglied_brd.block {
    background-color: rgba(255,255,255,.5);
}

.ce_text.start_mitglied_txt.block {
}

und >960:

.ce_image.start_mitglied_nrw.block {
    height:100px;
    max-width:80px;
    margin-left:10px;
    float:left !important;
    background-color:rgba(255,255,255,.5);
}

.ce_text.start_mitglied_h.block {
    height:100px;
    float:left;
    padding-top:10px;
    padding-right:10px;
    padding-left:10px;
    background-color:rgba(255,255,255,.5);
}

.ce_text.start_mitglied_h h1 {
    text-align:center;
    font-size:100%;
}

.ce_text.start_mitglied_h p {
    font-size:70%;
}

.ce_image.start_mitglied_brd.block {
    height:100px;
    max-width:115px;
    float:left;
    padding-top:25px;
    background-color:rgba(255,255,255,.5);
}

aber die Bilder bei<960 sind net zentriert...was mache ich denn da noch falsch?

[dazzle89]

Das display: block und margin: 0 auto musst du dem Bild (img) geben, nicht dem figure-Element.

[mlweb]

aber die Bilder bei<960 sind net zentriert...was mache ich denn da noch falsch?

Weißt Du eigentlich überhaupt was Du tust?
Die Bilder können als inline-Elemente doch nur zentriert werden, wenn ein übergeordnetes Blockelement diese Eigenschaft hat.

[mlweb]

Das display: block und margin: 0 auto musst du dem Bild (img) geben, nicht dem figure-Element.

Und das ist die zweite mögliche Lösungsvariante.

Man macht ein Element zum Blockelement und Zentriert es dann über margin.

[Andreas]

Hier mal zwei Beispiele für Flex und Float

/* Flex */
#startseite {
  display: flex;
  flex-flow: row wrap;
}
#startseite > div {
  width: 33.33%;
}
#startseite > div:nth-child(n+4) {
  width: auto;
}

/* Float */
#startseite > div {
  float: left;
  width: 33.33%;
}
#startseite > div:nth-child(n+4) {
  float: none;
  clear: both;
  width: auto;
} 

Wenn du öfters mit Spaltenaufteilungen arbeitest, dann empfehle ich dir dma_simple_grid in Verbindung mit z.B. Unsemantic. Dann brauchst du kein CSS mehr programmieren sondern kannst das direkt in den Elementen einstellen, auch die Varianten für Mobile, Tablet und Desktop.

[Voselix]

ich danke euch für eure Anregungen-et jeeehhht jetzt---leider hab ich wirklich mängel in den css basics...hab mir jedoch schon einige Tutorials und auch little boxes reingezogen..

Für mich ist es immer schwer die genauen Bezeichner zu finden.....trotz den Entwicklerwerkzeugen in chrome und firefox....

Gaaanz langsam wirds ja besser...aber die Lernhilfen sind nicht auf reelle Projekte bezogen und das gelernte im contao umzusetzen ist nicht ganz so einfach, wenn mann 10 Jahre html mit Frontpage Layoutet hat....

Jeder fängt mal klein an mlweb --- ist halt nicht jeder ein Vollprofi

[the_scrat]

Gaaanz langsam wirds ja besser...aber die Lernhilfen sind nicht auf reelle Projekte bezogen und das gelernte im contao umzusetzen ist nicht ganz so einfach, wenn mann 10 Jahre html mit Frontpage Layoutet hat....

Jeder fängt mal klein an mlweb --- ist halt nicht jeder ein Vollprofi

Ich muss mlweb aber absolut recht geben. Gerade wenn du schreibst, dass du schon 10 Jahre mit Frontpage gearbeitet hast. CSS hat nichts mit Contao zu tun sondern gehört m.M. zu einer Grundvoraussetzung für alles was mit Web zu tun hat. Und richtig, nicht jeder ist ein Vollprofi, aber bei 10 Jahren Frontpage-"erfahrung" und seit über 4 Jahren (seitdem du im Forum registriert bist) könnte man Vollprofi sein.

Und mal ganz ehrlich, wenn ich mir deine Seiten so ansehe, wäre es besser mal 150-250€ in die Hand zu nehmen und sich ein schönes Theme von Rocksolid zu kaufen. Ich denke das wäre eine WIN-WIN Situation. Du brauchst dich nicht mehr mit großartig CSS beschäftigen und der Kunde bekommt eine schöne, moderne Seite!

[dazzle89]

Kleine Bemerkung am Rande:

Ich finde viele Bereiche der Seite in der mobilen Ansicht zu "gequetscht". Texte sitzen ohne Abstand ganz links am Rand. Finde ich nicht schön, hier könntest jeweils links und rechts padding setzen, z.B. 10 oder 20px oder einen prozentualen Wert.

[mlweb]

Jeder fängt mal klein an mlweb --- ist halt nicht jeder ein Vollprofi

Auf der Internetseite wo Du Deine Dienste präsentierst hört sich das aber ganz anders an.

[Voselix]

Danke für eure Kommentare.

Ich werde mich bessern-versprochen. Aber geht bitte nicht ganz so hart mit mir ins Gericht.

Es so, dass meine Seiten immer so sind, wie der Kunde es möchte und auch immer ein ganz enges Budget haben und ich leider viel zu wenig Zeit habe.

Da ich ausserdem nur alle paar Monate mal ein kleines Internetprojekt mache ist meine Übung eher gering.

Ich hoffe auch, das Ihr bemerkt, das Ihr etwas persönlich geworden seid und ich mich etwas verletzt fühle---wir sind doch hier in einem Hilfeforum.

So nun hoffe ich, das ich wenigstens einen Sympathiepunkt ernte!

GLG
Vosi

[mlweb]

... auch immer ein ganz enges Budget haben und ich leider viel zu wenig Zeit habe.

Gerade dann sollte doch ein gekauftes gutes anpassbares Theme die Lösung sein.
Das Budget meiner Kunden ist auch meist sehr begrenzt. Deshalb bin ich jetzt dazu übergegangen für Kunden, deren Budget nicht nur knapp, sondern eigentlich zu knapp ist mit fertigen Themes zu arbeiten.
In diesen Fällen kommuniziere ich auch sehr klar, dass Anpassungen dann nur im Rahmen der Möglichkeiten durchgeführt werden, die der Themeersteller vorsieht. Einige Themes haben aber doch ganz gute Anpassungsmöglichkeiten.