Kachelmuster via html - Responsive Design freundlich
Hallo HTML& CSS profis,
verzweifelt suche ich eine Lösung für mein Problem: Smartphones und Tablets werden immer beliebter. Responsive Design ist das Thema schlechthin. Ich versuch also Meine Website an diese Wandlung an zu passen. Stellt euch eine Tabelle in html vor mit 3 Spalten und 3 Zeilen. In jeder Zelle befindet sich ein Bild, mit sagen wir 100*100 pixel. Mit HTML Befehlen ist das jetzt ganz einfach. In jede Zelle ein Bildverweis mit einem Link. Und schon hab ich ein "Kachelmuster". Wie werde ich jetzt aber diesem Responsive Design gerecht? Also das diese Kachelanordnung nicht wie im html als Tabelle angezeigt wird (und man das mühsam herranzoomen muss), sondern schön ein Bild nach dem anderen aufgelistet wird. Oh ich elender anfänger. es tut mir leid, dass ich euch mit solchen fragen belästige und hoffe doch, dass ich ich hier hilfe erhalte. ich hoffe man versteht mein problem. MfG Schneider |
Tabellen sind nicht zur rein optischen Anordnung gemacht, du hast gerade selbst bemerkt, warum sie dafür auch völlig ungeeignet (da unflexibel) sind.
Was du möchtest hört sich für mich nach einer Liste von Bildern an, das HTML könnte so aussehen: HTML-Code:
<ul class="gallery"> Das ist aber absolut grundlegendes HTML/CSS, du solltest dir unbedingt die Grundlagen aneignen. Es gibt dazu genügend Onlinequellen, wie zum Beispiel Little Boxes. |
:roll: danke für deine/eure geduld!
ich hab ausprobiert... css: HTML-Code:
.gallery { HTML-Code:
<ul class="gallery"> Aber beides (auch float:left;) funktioniert nicht. :oops: Eine Liste mit bildern wird angezeigt, aber nicht das gewünschte Kachelmuster. Ich les mich schon eifrig durch, aber mein gehirn bremst... :-S gruß sam |
Du hast es auf die Liste angewendet, du möchtest es aber auf die List-Items anwenden.
|
auch schlecht: :oops:
HTML-Code:
ul#gallery li { ...ich probiers weiter. Neu: Aha so hab ichs hab, und zwar so: css HTML-Code:
.gallery { HTML-Code:
<ul> |
Hallo
Zitat:
Gruss MrMurphy |
:) Danke. Veraltet? Naja - never tuch the running system.
Neugierig bin ich trotzdem. Würdest du das mittels Media-Queries lösen? Meine Fragen gehn weiter. :oops: Ich möchte jetzt über diese einzelnen Bilder eine Bildunterschrift (welches später auch als link fungiert) wie zum Beispiel hier: HTML und CSS3 Lösung Bildbeschriftung mit transparentem Bereich Das geht ja in meinem Fall nicht ganz so. was ich ausprobiert hab: CSS HTML-Code:
ul { HTML-Code:
<ul class="kachelnavigation"> Naja mein "link" orrientier sich nach dem Browser. "test" sitzt also ganz oben links. Jetzt hab ich gelesen, dass sich "test" nach einem static-Element richtet. Wie schaff ich dass, dass mein "test"-link genau in meinem Bild sitzt? |
Zitat:
|
Zitat:
Ich hab nur weitere Fragen zu dem Thema. Vielen dank für deine Hilfe. Die sache ist die, dass ich mich unheimlich schwer tue das nach Schema F zu lernen. Ich hab einige HTML und CSS kenntnisse, aber ich muss eben noch einiges lernen. Ich lern beim ausprobieren. Das ist doch auch etwas. Ich hab durch die Aktion jetzt wieder einiges gelernt... :roll: Auf alle Fälle: vielen dank, dass ich bis hier Hilfe bekommen hab! Und falls jemand den nerv hat: Meine Frage da oben steht noch im Raum. -_- Samuel |
Das Vorgehen ist veraltet, nutze HTML5 dafür.
Das Element heisst figure und die Überschrift figcaption. Eine Übersicht aller Elemente siehst du hier -->HTML5 Doctor, helping you implement HTML5 today Besipíelanwendung: HTML-Code:
<figure> |
Alle Zeitangaben in WEZ +2. Es ist jetzt 05:44 Uhr. |
Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
© Dirk H. 2003 - 2023