• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[GELOEST] Benötige hilfe bei anordung und zentrierung

Ch3fK0cH

Ch3fK0cH

Neues Mitglied
Guten Morgen HTML.de - Community,

Ich stehe nun wieder mal vor einem Problem was ich nicht gelöst bekomme.
Und zwar habe ich vor wie bei diesem Screenshot zu sehen die 5 Spieler nebeneinander Zentriert in dem roten Feld was ich dort markiert habe anzeigen zu lassen.
Nur leider bekomme ich das nicht hin, ich habe schon einige dinge ausprobiert mit text-alighn, align.items und float left etc aber irgendwas scheint falsch zu sein oder noch zu fehlen.
daher meine Frage ob mir vielleicht jemand sagen kann was ich falsch mache oder was noch fehlt damit es funktioniert.

Hier habe ich euch ein Screenshot und weiter unten mein HTML und CSS Inhalt als Spoiler hinzugefügt.

Danke für eure Zeit und Hilfsbereitschaft.

mfg

Steven K.

Screenshot:
playersheet.jpg
HTML Inhalt des Team Roosters:
<section class="rooster">
<div class="standard-container">
<div class="slogan-gameicon">
<div class="slogan"><h2><span class="text-highlighted-bold">SG PLAYERS</span></h2></div>
<div class="gameicon"><img src="/img/cs2logo.png" alt=""></div>
</div>


<div class="player">
<img src="img/player/noicon2.png" alt="">
<h2>Leon "Gedwer24" Hartmut</h2>
</div>
<div class="player">
<img src="img/player/noicon2.png" alt="">
<h2>Leon "Gedwer24" Hartmut</h2>
</div>
<div class="player">
<img src="img/player/noicon2.png" alt="">
<h2>Leon "Gedwer24" Hartmut</h2>
</div>
<div class="player">
<img src="img/player/noicon2.png" alt="">
<h2>Leon "Gedwer24" Hartmut</h2>
</div>
<div class="player">
<img src="img/player/noicon2.png" alt="">
<h2>Leon "Gedwer24" Hartmut</h2>
</div>
</div>
</section>
Zum Vergrößern anklicken....

CSS Inhalt des Team Roosters + standard-container:
/* HILFSKLASSEN */
.standard-container {
max-width: 1080px;
margin: 0 auto;
}


/* team rooster slogen Content*/
.rooster {
background-color: #3d3d3d;
width: 100%;
margin: 0 auto;
}
.rooster:after {
content: "";
display: block;
clear: both;
}
.slogan-gameicon {
width: 100%;
padding-top: 50px;
padding-bottom: 20px;
}
.slogan-gameicon:after {
content: "";
display: block;
clear: both;
}
.slogan {
float: left;
padding: 8px 0px 0px 20px;
}
.gameicon {
float: left;
padding-left: 40px;
}
.gameicon img {
width: 20%;
}

.player {
width: 16%;
margin: 1%;
padding: 1%;
}

.player img {
width: 100%;
}
Zum Vergrößern anklicken....
 
Zuletzt bearbeitet:
Ch3fK0cH schrieb:
ich habe schon einige dinge ausprobiert mit text-alighn, align.items und float left etc
Zum Vergrößern anklicken....
Hättest du es mal mit Flex-Box probiert :wink:

Siehe
css-tricks.com

A Complete Guide To Flexbox | CSS-Tricks

Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser...
css-tricks.com css-tricks.com
www.w3schools.com

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com www.w3schools.com
kulturbanause.de

CSS Flexbox – Einführung und Überblick

Mit Flexbox könnt ihr unkompliziert variable und responsive Layouts erzeugen. Das Modell arbeitet mit zwei Achsen auf denen Inhalte verteilt werden können. Daher bietet sich die CSS Flexbox besonders für lineare Strukturen an.
kulturbanause.de kulturbanause.de

Flexy Boxes — CSS flexbox playground and code generation tool

Online CSS flexbox playground and code generator. Supports all existing flexbox implementations.
the-echoplex.net
 
Ungefähr so:
CSS: 
.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;
    align-items: center;
    }

.flex-item {
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
    }

HTML: 
<div class="flex-container">
  <div class="flex-item">
    <img src="img/player/noicon2.png" alt="">
    <h2>Leon "Gedwer24" Hartmut</h2>
  </div>
  <div class="flex-item">
    <img src="img/player/noicon2.png" alt="">
    <h2>Leon "Gedwer24" Hartmut</h2>
  </div>
  <div class="flex-item">
    <img src="img/player/noicon2.png" alt="">
    <h2>Leon "Gedwer24" Hartmut</h2>
  </div>
  <div class="flex-item">
    <img src="img/player/noicon2.png" alt="">
    <h2>Leon "Gedwer24" Hartmut</h2>
  </div>
  <div class="flex-item">
    <img src="img/player/noicon2.png" alt="">
    <h2>Leon "Gedwer24" Hartmut</h2>
  </div>
</div>

Hiermit zusammengeklickt: https://the-echoplex.net/flexyboxes/?fixed-height=on&display=flex&flex-direction=row&flex-wrap=wrap&justify-content=space-between&align-items=center&align-content=flex-start&order[]=0&flex-grow[]=0&flex-shrink[]=1&flex-basis[]=auto&align-self[]=auto&order[]=0&flex-grow[]=0&flex-shrink[]=1&flex-basis[]=auto&align-self[]=auto&order[]=0&flex-grow[]=0&flex-shrink[]=1&flex-basis[]=auto&align-self[]=auto&order[]=0&flex-grow[]=0&flex-shrink[]=1&flex-basis[]=auto&align-self[]=auto&order[]=0&flex-grow[]=0&flex-shrink[]=1&flex-basis[]=auto&align-self[]=auto

Und noch ein Tipp: rücke deinen Code vernünftig ein, wie du bei mir siehst, ist das deutlich besser zu lesen.
 
und was genau ist figure-tags? habe das noch nie gehört, bin erst seit ca. 3 wochen dabei mir html und css beizubringen
 
Siehe z. B. hier:
www.w3schools.com

HTML figure Tag

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com www.w3schools.com
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben