zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Kachelmuster via html - Responsive Design freundlich

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.01.2014, 07:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.01.2014
Ort: abroad
Beiträge: 18
SamuelS befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 30.01.2014, 09:20
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.025
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 30.01.2014, 15:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.01.2014
Ort: abroad
Beiträge: 18
SamuelS befindet sich auf einem aufstrebenden Ast
Standard

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.

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
Mit Zitat antworten
  #4 (permalink)  
Alt 30.01.2014, 15:32
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.025
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Du hast es auf die Liste angewendet, du möchtest es aber auf die List-Items anwenden.
Mit Zitat antworten
  #5 (permalink)  
Alt 30.01.2014, 16:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.01.2014
Ort: abroad
Beiträge: 18
SamuelS befindet sich auf einem aufstrebenden Ast
Standard

auch schlecht:

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?

Geändert von SamuelS (30.01.2014 um 16:34 Uhr) Grund: Ich habs doch geschafft!
Mit Zitat antworten
  #6 (permalink)  
Alt 30.01.2014, 16:53
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.066
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 30.01.2014, 17:21
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.01.2014
Ort: abroad
Beiträge: 18
SamuelS befindet sich auf einem aufstrebenden Ast
Standard

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 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?
Mit Zitat antworten
  #8 (permalink)  
Alt 30.01.2014, 17:49
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.025
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Zitat:
Zitat von SamuelS Beitrag anzeigen
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.
Mit Zitat antworten
  #9 (permalink)  
Alt 30.01.2014, 18:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.01.2014
Ort: abroad
Beiträge: 18
SamuelS befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von inta Beitrag anzeigen
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.
Dieses Problem ist doch gelöst.
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
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 30.01.2014, 18:38
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Problem mit Responsive Design via CSS Zeratul CSS 0 05.09.2013 21:11
Responsive Design: Leere Fläche beim Header entfernen Shyne (X)HTML 6 26.06.2013 13:57
html hidden-array aus Formular via javascript füllen ZENeca Javascript & Ajax 8 11.07.2011 19:07
Wie parse ich mit php Markdown syntax nach html? asdfgqw Serveradministration und serverseitige Scripte 0 03.06.2008 00:11
HTML Design Vorlage einbauen in Script Austrianer (X)HTML 2 08.05.2006 10:33


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:40 Uhr.