Ergebnis 1 bis 7 von 7

Thema: Alle Inhalte des containers zentrieren

  1. #1
    HTML Newbie
    Registriert seit
    13.11.2018
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Alle Inhalte des containers zentrieren

    Guten Abend Zusammen,

    ich bin neu in der HTML & CSS Welt und habe eine anfänger Frage. Ich habe meine Seite so gut wie fertiggestellt und bin jetzt dabei das Responsive-Design umzustellen.

    Und zwar geht es darum das ich auf meiner Seite ein div Container habe in dem Links mit Logos daneben stehen. Ich würde gerne sowohl die Links als auch die Logos zentrieren. Mit text-align:center; werden allerdings nur die Links zentriert und die Logos bleiben links am Rand stehen. Ich hoffe ich konnte mich verständlich ausdrücken.

    Bitte nicht zu hart mit mir sein, es ist mein erstes Projekt

    Code:
    HTML Code:
    
    <div class="container1">
        <div class="container2">
            <div class="row">
                <div class="three columns">
                    <a class="links" href="....">
                        <div class="logo1"><i class="...."></i></div>
                        <div class="text1"><p>Text</p></div>
                    </a>
                </div>
                <div class="three columns">
                    <a class="links" href="....">
                        <div class="logo2"><i class="..."></i></div>
                        <div class="text2"><p>Text</p></div>
                    </a>
                </div>
                <div class="three columns">
                    <a class="links" href="....">
                        <div class="logo3"><i class="...."></i></div>
                        <div class="text3"><p>Text</p></div>
                    </a>
                </div>
                <div class="three columns">
                    <a class="links" href="....">
                        <div class="logo4"><i class="....."></i></div>
                        <div class="text4"><p>Text</p></div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    
    
    CSS Code:
    
    .text2,
    .text3 {
        font-size:120%;
        margin-left:35px;
        margin-top:5px;
    
        @media (min-width:1085px) {
            font-size:150%;
            margin-left:35px;
            margin-top:5px;
        }
    }
    .text4 {
        font-size:120%;
        margin-left:35px;
        margin-top:5px;
    
        @media (min-width:1085px) {
            font-size:150%;
            margin-left:5px;
            margin-top:5px;
        }
    }
    .text1 {
        font-size:120%;
        margin-left:20px;
        margin-top:5px;
    
        @media (min-width:1085px) {
            font-size:150%;
            margin-left:120px;
            margin-top:5px;
        }
    }
    .logo2,
    .logo3 {
        float:left;
        font-size:150%;
        -webkit-transition: -webkit-transform .5s ease-in-out;
        transition:         transform .5s ease-in-out;
        
        @media (min-width:1085px) {
            float:left;
            font-size:200%;
            -webkit-transition: -webkit-transform .5s ease-in-out;
            transition:         transform .5s ease-in-out;
        }
    }
    .logo4 {
        float:left;
        font-size:150%;
        -webkit-transition: -webkit-transform .5s ease-in-out;
        transition:         transform .5s ease-in-out;
        margin-right:10px;
        margin-left:20px;
    
        @media (min-width:1085px) {
            float:left;
            font-size:200%;
            -webkit-transition: -webkit-transform .5s ease-in-out;
            transition:         transform .5s ease-in-out;
            margin-right:10px;
            margin-left:20px;
        
        }
    }
    .logo1 {
        float:left;
        font-size:150%;
        margin-left:0px;
        margin-bottom:0px;
        -webkit-transition: -webkit-transform .5s ease-in-out;
        transition:         transform .5s ease-in-out;
    
        @media (min-width:1085px) {
            float:left;
            font-size:200%;
            margin-left:100px;
            margin-bottom:50px;
            -webkit-transition: -webkit-transform .5s ease-in-out;
            transition:         transform .5s ease-in-out;
        }
    }
    .logo1:hover,
    .logo2:hover,
    .logo3:hover,
    .logo4:hover {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    .links {
        text-decoration:none;
        color:$white;
    }
    .links:hover {
        text-decoration:underline;
        color:$white;
        -webkit-transition:all 0.5s;
        transition:all 0.5s;
    }
    Vielen Dank schon mal.

  2. #2
    Moderator Avatar von Arne Drews
    Registriert seit
    20.01.2016
    Ort
    Friedrichstadt, NF
    Beiträge
    1.638
    Danke
    24
    Bekam 138 mal "Danke" in 137 Postings

    Standard AW: Alle Inhalte des containers zentrieren

    Lies Dich mal in das Flexmodell ein, dann ist responsive nicht mehr weit weg.

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    13.11.2018
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Alle Inhalte des containers zentrieren

    @Arne Drews,

    Vielen Dank für die Antwort. Ich habe an mehreren Stellen gelesen dass das arbeiten mit Flexbox nicht so effektiv ist wie mit einem Grid. Daher arbeite ich mit einem vorgefertigten Grid Modell. Wenn die Seite am PC angeschaut wird passt ja auch alle mit dem Grid aber wenn ich auf responsive Design umschalte lassen sich die Grids nicht zentrieren. Was auch gerade Sinn macht wenn ich das so schreibe. Gibt es eine möglichkeit die Grids ab einer bestimmten größe auszuschalten?

    LG

  4. #4
    Moderator Avatar von Arne Drews
    Registriert seit
    20.01.2016
    Ort
    Friedrichstadt, NF
    Beiträge
    1.638
    Danke
    24
    Bekam 138 mal "Danke" in 137 Postings

    Standard AW: Alle Inhalte des containers zentrieren

    Zitat Zitat von <aktiv-passiv> Beitrag anzeigen
    Ich habe an mehreren Stellen gelesen dass das arbeiten mit Flexbox nicht so effektiv ist wie mit einem Grid.
    In der Fix und Foxi oder wo?

    Zitat Zitat von <aktiv-passiv> Beitrag anzeigen
    Daher arbeite ich mit einem vorgefertigten Grid Modell.
    Tust Du ja offensichtlich nicht, sondern mit float.
    Du kannst ja gerne mal anhand Deines CSS-Code oben zeigen, was Du da als Grid interpretierst, bin gespannt.

    Zitat Zitat von <aktiv-passiv> Beitrag anzeigen
    Wenn die Seite am PC angeschaut wird passt ja auch alle mit dem Grid aber wenn ich auf responsive Design umschalte lassen sich die Grids nicht zentrieren. Was auch gerade Sinn macht wenn ich das so schreibe. Gibt es eine möglichkeit die Grids ab einer bestimmten größe auszuschalten?
    Tut gar nicht nötig, wenn Du flex oder das echte Grid-Modell verwendest.
    Wobei Du beim Grid-Modell noch ein paar Problemchen mit der Browser-Unterstützung hast.

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    13.11.2018
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Alle Inhalte des containers zentrieren

    Die genauen Seiten weiß ich nicht mehr ich habe gegooglet und mich durchgelesen und Youtube Videos zum Thema Grid geschaut. Da wurde es erzählt.

    hier der Code zum Grid.
    Code:
    /* Grid
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
    .container {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 0auto;
    padding: 020px;
    box-sizing: border-box; }
    .column,
    .columns {
    width: 100%;
    float: left;
    box-sizing: border-box; }
    
    /* For devices larger than 400px */
    @media (min-width: 400px) {
    .container {
    width: 85%;
    padding: 0; }
    }
    
    /* For devices larger than 550px */
    @media (min-width: 550px) {
    .container {
    width: 80%; }
    .column,
    .columns {
    margin-left: 4%; }
    .column:first-child,
    .columns:first-child {
    margin-left: 0; }
    
    .one.column,
    .one.columns                    { width: 4.66666666667%; }
    .two.columns                    { width: 13.3333333333%; }
    .three.columns                  { width: 22%;            }
    .four.columns                   { width: 30.6666666667%; }
    .five.columns                   { width: 39.3333333333%; }
    .six.columns                    { width: 48%;            }
    .seven.columns                  { width: 56.6666666667%; }
    .eight.columns                  { width: 65.3333333333%; }
    .nine.columns                   { width: 74.0%;          }
    .ten.columns                    { width: 82.6666666667%; }
    .eleven.columns                 { width: 91.3333333333%; }
    .twelve.columns                 { width: 100%; margin-left: 0; }
    
    .one-third.column               { width: 30.6666666667%; }
    .two-thirds.column              { width: 65.3333333333%; }
    
    .one-half.column                { width: 48%; }
    
    /* Offsets */
    .offset-by-one.column,
    .offset-by-one.columns          { margin-left: 8.66666666667%; }
    .offset-by-two.column,
    .offset-by-two.columns          { margin-left: 17.3333333333%; }
    .offset-by-three.column,
    .offset-by-three.columns        { margin-left: 26%;            }
    .offset-by-four.column,
    .offset-by-four.columns         { margin-left: 34.6666666667%; }
    .offset-by-five.column,
    .offset-by-five.columns         { margin-left: 43.3333333333%; }
    .offset-by-six.column,
    .offset-by-six.columns          { margin-left: 52%;            }
    .offset-by-seven.column,
    .offset-by-seven.columns        { margin-left: 60.6666666667%; }
    .offset-by-eight.column,
    .offset-by-eight.columns        { margin-left: 69.3333333333%; }
    .offset-by-nine.column,
    .offset-by-nine.columns         { margin-left: 78.0%;          }
    .offset-by-ten.column,
    .offset-by-ten.columns          { margin-left: 86.6666666667%; }
    .offset-by-eleven.column,
    .offset-by-eleven.columns       { margin-left: 95.3333333333%; }
    
    .offset-by-one-third.column,
    .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
    .offset-by-two-thirds.column,
    .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }
    
    .offset-by-one-half.column,
    .offset-by-one-half.columns     { margin-left: 52%; }
    
    }
    
    
    Okay was heißt das echte Grid-Modell? Also stimmt es nicht das Flex eine art veraltete Version von Grid ist?

  6. #6
    Moderator Avatar von Arne Drews
    Registriert seit
    20.01.2016
    Ort
    Friedrichstadt, NF
    Beiträge
    1.638
    Danke
    24
    Bekam 138 mal "Danke" in 137 Postings

    Standard AW: Alle Inhalte des containers zentrieren

    Ja, Du erstellst Dir ein eigenes ColumnLayout, ähnlich wie Bootstrap, das ist aber nicht das CSS-Grid-Model.
    Flex ist immer noch das sinnvollste für Dich, ob Du es willst oder nicht.

  7. #7
    HTML Newbie
    Themenstarter

    Registriert seit
    13.11.2018
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Alle Inhalte des containers zentrieren

    Alles klar. Vielen Dank. Hatte es in einem Online Kurs gelernt. Scheint nicht ganz so richtig zu sein. Muss es mir mit dem responsive Design dann nochmal genau anschauen.

Ähnliche Themen

  1. Alle Elemente einer Beitragsseite via CSS zentrieren
    Von ktinka im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 18.10.2017, 09:56
  2. Div Inhalte mehrfach zentrieren
    Von htmler im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 26.03.2014, 20:29
  3. Automatische Größe des Containers
    Von mathe_is_GEIL! im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 16.10.2007, 21:17
  4. alle inhalte einer auswahlliste mit php holen
    Von im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 5
    Letzter Beitrag: 09.08.2007, 19:14
  5. nicht alle inhalte drucken
    Von Macintosch im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 23.06.2004, 12:52

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •