Hey zusammen!
Ich habe bearbeite aktuell die Vereinswebsite meines Fußballvereins.
Da wir nur begrenzte finanzielle Mittel haben, versuche ich es so gut es geht selber hinzubekommen.
Ist sowas mit „wenig“ Aufwand per html möglich?
Beispielbild vom RWE.[ATTACH type=„full“]6125[/ATTACH]
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.
Danke für deine Antwort!
Mit Datenbanken etc hatte ich bisher, ausgenommen CMS für Clans, noch gar keine Berührungspunkte.
Dann wirds wohl in einer normalen Tabelle erstmal reichen müssen 
Dann wirds wohl in einer normalen Tabelle erstmal reichen müssen
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:
https://kulturbanause.de/blog/css-grid-layout-module/
und hier:
https://css-tricks.com/snippets/css/complete-guide-grid/
Ich habe jetzt eine Variante für mich gefunden, mit der ich leben kann.
Allerdings, würde ich gern 2-3 nebeneinander haben und nicht alle untereinander.
Kann mir vielleicht jemand helfen was ich im Code ändern muss, damit dies möglich ist?
CEO & Founder
Some text that describes me lorem ipsum ipsum lorem.
[email]example@example.com[/email]
Contact
Art Director
Some text that describes me lorem ipsum ipsum lorem.
[email]example@example.com[/email]
Contact
Designer
Some text that describes me lorem ipsum ipsum lorem.
[email]example@example.com[/email]
Contact
Allerdings, würde ich gern 2-3 nebeneinander haben und nicht alle untereinander.
Kann mir vielleicht jemand helfen was ich im Code ändern muss, damit dies möglich ist?
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:
<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>example@example.com</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>example@example.com</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>example@example.com</p>
<p><button class="button">Contact</button></p>
</figcaption>
</figure>
<!--- Usw., hier weitere figure-Elemente -->
</section>
Mit diesem CSS kann man das dann variabel gestalten:
/* 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>Aber damit das auch funktioniert, müssen wir auf feste Angaben der Breite verzichten, bei einem responsiven Layout sind diese in den aller seltensten Fällen angebracht. Das gleiche gilt für float:
section {
background-color: #81BEF7;
/* width: 900px; */
/* float: center; */
}Wenn Du dann die Breite des Browserfensters veränderst, siehst Du, dass sich die Elemente variabel verteilen und die Anzahl pro Zeile sich automatisch anpasst.