[ERLEDIGT] Fußballkader per HTML
- Ersteller tronicxs
- Erstellt am
Werbung:
![]()
Definiere "sowas". Klar lässt sich eine Seite wie die genannte vom FC RWE (ein Link wäre hier übrigens besser gewesen, die lässt sich aber auch leicht finden) auch per Hand mit reinem HTML/CSS bauen (sogar deutlich besser als die Seite die mit veraltetem float-Layouts rumpfuscht) - einfacher und v.a. wartungsfreundlicher wäre es aber auf jeden Fall wenn da eine Datenbank dahinter steckt und die Seite über eine Programmiersprache zusammengebaut würde. Und ich weiß nicht wie weit eure Kenntnisse - schon im Bezug auf HTML/CSS - reichen, aber ein gewisser Aufwand ist es schon so eine Seite hin zu bekommen.
Werbung:
![]()
Sempervivum
Senior HTML'ler
Das Layout, das Du als Screenshot gepostet hast, bitte nicht als Tabelle. Die lässt sich mit normalen Mitteln nicht responsiv machen und ihr wollt ja sicher, dass eure Website auch auf dem Handy gut aussieht.
Informiere dich statt dessen über Gridlayout, z. B. hier:
CSS Grid – Einführung in Gestaltungsraster mit dem Grid Layout Module
Mit CSS Grid erzeugt ihr Gestaltungsraster, indem Zeilen und Spalten für einen Bereich definiert werden. Elemente werden dann den Rasterzellen zugewiesen, wodurch sehr interessante Layouts möglich sind.
kulturbanause.de
A Complete Guide to CSS Grid | CSS-Tricks
Our comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.
Sempervivum
Senior HTML'ler
Anscheinend hast Du dir nicht die Mühe gemacht, einen Blick auf die Links zu werfen, die ich dir gegeben habe. Na denn: Für solch ein Layout mit Bildern und jeweils einer Beschreibung dazu bietet sich das figure-Tag an. Ich habe dein HTML mal entsprechend umgeändert und auch überflüssige Container entfernt:
Code:
<section class="grid-container">
<figure class="grid-item">
<img src="images/dia0.jpg" alt="Jane">
<figcaption>
<h2>Jane Doe</h2>
<p class="title">CEO & Founder</p>
<p>Some text that describes me lorem ipsum ipsum lorem.</p>
<p>[email protected]</p>
<p><button class="button">Contact</button></p>
</figcaption>
</figure>
<figure class="grid-item">
<img src="images/dia1.jpg" alt="Mike">
<figcaption>
<h2>Mike Ross</h2>
<p class="title">Art Director</p>
<p>Some text that describes me lorem ipsum ipsum lorem.</p>
<p>[email protected]</p>
<p><button class="button">Contact</button></p>
</figcaption>
</figure>
<figure class="grid-item">
<img src="images/dia2.jpg" alt="John">
<figcaption>
<h2>John Doe</h2>
<p class="title">Designer</p>
<p>Some text that describes me lorem ipsum ipsum lorem.</p>
<p>[email protected]</p>
<p><button class="button">Contact</button></p>
</figcaption>
</figure>
<!--- Usw., hier weitere figure-Elemente -->
</section>
Code:
/* Styles for grid layout */
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 5px;
}
figure.grid-item img {
width: 100%;
min-width: none;
}
</style>
Code:
section {
background-color: #81BEF7;
/* width: 900px; */
/* float: center; */
}Werbung:
![]()
