30.01.2014, 08:48
|
|||
|
|||
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 
|
| Sponsored Links |
|
30.01.2014, 10:20
|
||||
|
||||
|
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"> <li><img src="" alt=""></li> <li><img src="" alt=""></li> <li><img src="" alt=""></li> <li><img src="" alt=""></li> <li><img src="" alt=""></li> </ul> 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.
|
| Sponsored Links |
|
30.01.2014, 16:25
|
|||
|
|||
 danke für deine/eure geduld!ich hab ausprobiert... css: HTML-Code:
.gallery {
display: inline-block;
}
HTML-Code:
<ul class="gallery"> <li><img alt="" src="..." width="300" height="300" /></li> <li><img alt="" src="..." width="300" height="300" /></li> <li><img alt="" src="..." width="300" height="300" /></li> <li><img alt="" src="..." width="300" height="300" /></li> <li><img alt="" src="..." width="300" height="300" /></li> <li><img alt="" src="..." width="300" height="300" /></li> </ul> Aber beides (auch float:left;) funktioniert nicht.  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
|
|
30.01.2014, 17:09
|
|||
|
|||
|
auch schlecht:
HTML-Code:
ul#gallery li {
float: left;
}
...ich probiers weiter. Neu: Aha so hab ichs hab, und zwar so: css HTML-Code:
.gallery {
float: left;
}
HTML-Code:
<ul> <li><img class="gallery" alt="" src="..." width="100" height="100" /></li> .... <li><img class="gallery" alt="" src="..." width="100" height="100" /></li> </ul> Geändert von SamuelS (30.01.2014 um 17:34 Uhr) Grund: Ich habs doch geschafft!
|
|
30.01.2014, 18:21
|
|||
|
|||
 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. 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 {
list-style-type: none;
margin: 0;
padding: .8em;
}
.kachel {
float: left;
margin: 0;
padding: .2em;
}
.kachelnavigation span {
background-color: red;
position: absolute;
top: 20px;
left: 20px;
z-index: 1;
}
HTML-Code:
<ul class="kachelnavigation"> <li><a href="..."><img class="kachel" alt="" src="..." width="100" height="100" /><span>test</span></a></li> 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?
|
|
30.01.2014, 18:49
|
||||
|
||||
|
Zitat:
|
|
30.01.2014, 19:00
|
|||
|
|||
|
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... 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
|
| Sponsored Links |
|
30.01.2014, 19:38
|
|||
|
|||
|
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> <figcaption> Überschrift </figcaption> <img src="http://lorempixel.com/400/200/sports/" alt="Logo" height="240" width="315"> </figure>
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum.
|
| Sponsored Links |
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Problem mit Responsive Design via CSS | Zeratul | CSS | 0 | 05.09.2013 22:11 |
| Responsive Design: Leere Fläche beim Header entfernen | Shyne | (X)HTML | 6 | 26.06.2013 14:57 |
| html hidden-array aus Formular via javascript füllen | ZENeca | Javascript & Ajax | 8 | 11.07.2011 20:07 |
| Wie parse ich mit php Markdown syntax nach html? | asdfgqw | Serveradministration und serverseitige Scripte | 0 | 03.06.2008 01:11 |
| HTML Design Vorlage einbauen in Script | Austrianer | (X)HTML | 2 | 08.05.2006 11:33 |
Linear-Darstellung
