XHTMLforum - Kachelmuster via html - Responsive Design freundlich

Seite 1 von 2

40 Beiträge dieses Themas auf einer Seite anzeigen

XHTMLforum (http://xhtmlforum.de/index.php)

- (X)HTML (http://xhtmlforum.de/forumdisplay.php?f=72)

- - Kachelmuster via html - Responsive Design freundlich (http://xhtmlforum.de/showthread.php?t=70578)

SamuelS

30.01.2014 07: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

inta	30.01.2014 09: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>

Da du die Grafiken nebeneinander anordnen möchtest, musst du sie floaten oder auf inline-block setzen. Je nach verfügbaren Platz brechen sie ganz von alleine um, dafür brauchst du nicht einmal Media-Queries.

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.

SamuelS

30.01.2014 15:25

:roll: danke für deine/eure geduld!
ich hab ausprobiert...

css:

HTML-Code:

.gallery {

        display: inline-block;

}

und die html ausgabe:

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. :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

inta	30.01.2014 15:32

Du hast es auf die Liste angewendet, du möchtest es aber auf die List-Items anwenden.

SamuelS

30.01.2014 16:09

auch schlecht: :oops:

HTML-Code:

ul#gallery li {

        float: left;

}

Das eigenartige ist, dass ich das vor zwei stunden hatte und es wunderbar geklappt hat. nur weiß ich nicht mehr wie ich das gemacht hab. man man man...

...ich probiers weiter.

Neu:

Aha so hab ichs hab, und zwar so:

css

HTML-Code:

.gallery {

        float: left;

}

html

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>

Ist das eine gute Lösung?

MrMurphy

30.01.2014 16:53

Hallo

Zitat:

Ist das eine gute Lösung?

Ohne die gesamte Seite zu kennen lässt sich das schlecht beurteilen. Sie scheint korrekt aber veraltet zu sein.

Gruss

MrMurphy

SamuelS

30.01.2014 17: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. :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 {

        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 Ausgabe

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?

inta	30.01.2014 17:49

Zitat:

Zitat von SamuelS (Beitrag 536749)

Das eigenartige ist, dass ich das vor zwei stunden hatte und es wunderbar geklappt hat. nur weiß ich nicht mehr wie ich das gemacht hab.

Ganz einfach, eine Id gallery existiert nicht, das ist eine Klasse. Du kannst CSS nicht raten, du musst es lernen. Dir fehlt schon das grundlegende Verständnis wie CSS funktioniert, daher ist es wenig sinnvoll hier gleich weitermachen zu wollen. Lern die Grundlagen, dann können wir dir bei konkreten Problemen gerne helfen.

SamuelS

30.01.2014 18:00

Zitat:

Zitat von inta (Beitrag 536752)

Dieses Problem ist doch gelöst. :roll:
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

explanator

30.01.2014 18: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>

Alle Zeitangaben in WEZ +2. Es ist jetzt 05:44 Uhr.

Seite 1 von 2

40 Beiträge dieses Themas auf einer Seite anzeigen