✔ gitterformige Elementanordnung mit Tabelle <li>

G

Gast170816

Hallo,

ich will Bildchen in <li> stecken und sie dann gitterförmig (5 Bilder rüber und 5 Bilder runter) anordnen.

Wenn man's so macht, kann man entweder alle Bilder in einer Reihe horizontal oder in einer Reihe vertikal machen:
Code: 
<ul>
  <li><img /></li>
  <li><img /></li>
  <li><img /></li>
</ul>

Kann man die da aber eben auch irgendwie gitterförmig anordnern, immer "Zeilenschaltung" nach 5 Bildern und dann drunter wieder 5.

Oder MUSS das eher in die Richtung aufgebaut werden?:
Code: 
<ul>
  <li>
      <img />
      <img />
       <img />
  </li>
  <li>
      <img />
      <img />
       <img />
  </li>
  <li>
      <img />
      <img />
       <img />
  </li>
</ul>
 
du könntest zb den Float nach 5 Elementen in Reihe einfach aufheben mit einer extra Klasse des Listen-Elements:
HTML: 
<ul>
  <li>
      <img />
  </li>
  <li>
      <img />
     
  </li>
  <li class="floatEnd">
      <img />
     
  </li>
<li>
      <img />
      
  </li>
  <li>
      <img />
   
  </li>
</ul>
Und diese Klasse im CSS dementsprechend definieren.
 
Ok, vielen Dank für den Tipp... ich will das mal probieren

EDIT: Probiert! ...kann es sein, dass das nur so funktioniert, dass man die erste Klasse z.B. ins 1-2-3-vierte macht und dann aber immer ins 1-2-dritte? Klappt bei mir nämlich nur so, dass einheitlich drei in jeder Reihe stehen.
 
Zuletzt bearbeitet von einem Moderator:
Naja, ich teste das grade ganz plump mit jCarousel (die einfache Version http://sorgalla.com/projects/jcarousel/examples/static_simple.html , also noch nicht groß eigene CSS dafür erstellt. Für <ul> und <li> ist da festgelegt.


Code: 
ul {
    left: 0;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    top: 0;
    width: 950px;
}

li {
    float: left;
    list-style: none outside none;
}

DIVs und Krempel drumrum dürften eigentlich nicht relevant sein, denk ich mal...

Hier der Teil HTML (Also damit erziele ich immer drei in einer Reihe):
Code: 
<ul id="mycarousel" class="jcarousel-skin-tango">
    <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>

    <li class="reiherunter"><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
    <li class="reiherunter"><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
    <li class="reiherunter"><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
  </ul>

Faaalls ich es schaffe will ich das in Textpattern reintun und automatisch füllen lassen... Da kann man schon irgendwie jedem x-ten <li> eine Klasse ranschreiben lassen...ich kann aber schon jetzt ahnen, dass das komisch/schwer wird, wenn da einmal vier <li> gezählt und dann drei gezählt werden sollen.
 
Mir ist grad eingefallen das es wie von mir beschrieben nicht funktionieren kann. Denn das ListenElement das den Float beendet bräuchte ja eigentlich danach soft wieder den Float damit die folgenden Elemente auch wieder neben an stehn.
Was du machen könntest wäre ein Extra-Listenelement einzubauen an der Stelle wo der Float beendet werden soll.
HTML: 
<ul id="mycarousel" class="jcarousel-skin-tango">
    <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>

<li style="clear:left;">
 
    <li class="reiherunter"><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>

<li style="clear:left;">

    <li class="reiherunter"><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>

<li style="clear:left;">

    <li class="reiherunter"><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
  </ul>
 
Also ich glaube, irgendwie kann man das - speziell nun in diesem Fall für jCarousell - irgendwie durch eine Konfigurationsdatei angeben. (Im Download als Text in einer HTML-Datei dabei http://sorgalla.com/jcarousel/)

Hier wird irgendwas erkärt, aber ich verstehst nicht. Ich kann durchaus ganz vielen NEBENeinander anzeigen, aber es bleibt einzeilig. Hat sich jemand schonmal mit diesem Bildkarussell beschäftigt und weiß wie es einzustellen geht?

Mit so fremdem CSS ist schon doof und dann schreibt da scheinbar auch immernoch ne js-Datei inline-Styles ran.

EDIT:
Außerdem hab ich was (wieder)gefunden, wo ich eine gitterförmige Anordnung mal mit DIVs gemacht hatte, müsste ja dann auch mit IMGs gehen. Braucht man eigentlich gar nicht die LIs unbedingt

Code: 
div {
    display: inline-block;
    float: left;
    margin-bottom: 10px;
    margin-right: 10px;
}

Vielleicht bringt das jetzt jemandem anders was... mein jCarousel-Ding hat immernoch keine Gitteranordnung :-(.
 
Zuletzt bearbeitet von einem Moderator:
So nun hab ich also eine Seite gefunden, wo jemand diese Galerie so verwendet. Ein bisschen *schnippschnapp* und hier hab ich dann mal die CSS-Dateien dazu... ich denke ich hab keine Datei vergessen. JS und Dinge die standardmäßig zu diesem Galerie-PlugIn dazu gehören, müsste sich jeder selbst auf der offiziellen Seite runterladen.
Evtl. Bildlinks in den CSS-Datein stimmt mitunter natürlich nicht, das müsste jeder bei sich anpassen.

jquery.jcarousel.css:
Code: 
/**
 * This <div> element is wrapped by jCarousel around the list
 * and has the classname "jcarousel-container".
 */
.jcarousel-container {
    position: relative;
}

.jcarousel-clip {
    z-index: 2;
    padding: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
}

.jcarousel-list {
    z-index: 1;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

.jcarousel-list li,
.jcarousel-item {
    float: left;
    list-style: none;
    /* We set the width/height explicitly. No width/height causes infinite loops. */
    width: 75px;
    height: 75px;
}

/**
 * The buttons are added dynamically by jCarousel before
 * the <ul> list (inside the <div> described above) and
 * have the classnames "jcarousel-next" and "jcarousel-prev".
 */
.jcarousel-next {
    z-index: 3;
    display: none;
}

.jcarousel-prev {
    z-index: 3;
    display: none;
}

skin.css
Code: 
/* -------------------------------------------- */
/* ------------ LARGE (INDEX PAGE) ------------ */
/* -------------------------------------------- */

.jcarousel-skin-tango .jcarousel-container {
    /*background: #FFF;*/
   	margin-left: 29px; /* IMPORTANT! DO NOT REMOVE! */
	margin-right: 29px; /* IMPORTANT! DO NOT REMOVE! */
}

.jcarousel-skin-tango .jcarousel-container-horizontal {
    width: 920px;
    padding-left: 31px;
    padding-right: 49px;
    padding-top: 15px;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width:  935px;
    height: 289px;
}

.jcarousel-skin-tango .jcarousel-item {
    width: 308px;
    height: 289px;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
    margin-right: 5px;
}


.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}

/**
 *  Horizontal Buttons
 */
.jcarousel-skin-tango .jcarousel-next-horizontal {
    position: absolute;
    top: 120px;
    right: -15px;
    width: 29px;
    height: 54px;
    cursor: pointer;
    background: transparent url(../images/arrow_right.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
    position: absolute;
    top: 120px;
    left: -15px;
    width: 29px;
    height: 54px;
    cursor: pointer;
    background: transparent url(../images/arrow_left.png) no-repeat 0 0;
}
    
/* -------------------------------------------- */
/* ------------ SMALL (ABOUT THE STUDIO PAGE) ------------ */
/* -------------------------------------------- */

.jcarousel-skin-tango-small .jcarousel-container {
    /*background: #FFF;*/
   	margin-left: 29px; /* IMPORTANT! DO NOT REMOVE! */
	margin-right: 29px; /* IMPORTANT! DO NOT REMOVE! */
}

.jcarousel-skin-tango-small .jcarousel-container-horizontal {
    width: 920px;
    padding-left: 31px;
    padding-right: 49px;
    padding-top: 15px;
}

.jcarousel-skin-tango-small .jcarousel-clip-horizontal {
    width:  935px;
    height: 140px;
    border-bottom: 1px solid #313131;
    padding-bottom: 15px;
}

.jcarousel-skin-tango-small .jcarousel-item {
    width: 151px;
    height: 136px;
}

.jcarousel-skin-tango-small .jcarousel-item-horizontal {
    margin-right: 5px;
}


.jcarousel-skin-tango-small .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}

/**
 *  Horizontal Buttons
 */
.jcarousel-skin-tango-small .jcarousel-next-horizontal {
    position: absolute;
    top: 60px;
    right: -15px;
    width: 29px;
    height: 54px;
    cursor: pointer;
    background: transparent url(../images/arrow_right.png) no-repeat 0 0;
}

.jcarousel-skin-tango-small .jcarousel-prev-horizontal {
    position: absolute;
    top: 60px;
    left: -15px;
    width: 29px;
    height: 54px;
    cursor: pointer;
    background: transparent url(../images/arrow_left.png) no-repeat 0 0;
}



/* -------------------------------------------- */
/* ------------ Gallery (PORTFOLIO PAGE) ------------ */
/* -------------------------------------------- */

.jcarousel-skin-tango-gallery .jcarousel-container {
    /*background: #FFF;*/
   	margin-left: 29px; /* IMPORTANT! DO NOT REMOVE! */
	margin-right: 29px; /* IMPORTANT! DO NOT REMOVE! */
}

.jcarousel-skin-tango-gallery .jcarousel-container-horizontal {
    width: 920px;
    padding-left: 31px;
    padding-right: 49px;
    padding-top: 15px;
}

.jcarousel-skin-tango-gallery .jcarousel-clip-horizontal {
    width:  935px;
    height: 575px;
    padding-bottom: 10px;
}

.jcarousel-skin-tango-gallery .jcarousel-item {
    width: 151px;
    height: 575px;
}

.jcarousel-skin-tango-gallery .jcarousel-item-horizontal {
    margin-right: 7px;
}

.jcarousel-skin-tango-gallery .jcarousel-item-horizontal img {
    margin-bottom: 10px;
}


.jcarousel-skin-tango-gallery .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}

/**
 *  Horizontal Buttons
 */
.jcarousel-skin-tango-gallery .jcarousel-next-horizontal {
    position: absolute;
    top: 275px;
    right: -15px;
    width: 29px;
    height: 54px;
    cursor: pointer;
    background: transparent url(../images/arrow_right2.jpg) no-repeat 0 0;
}

.jcarousel-skin-tango-gallery .jcarousel-prev-horizontal {
    position: absolute;
    top: 275px;
    left: -15px;
    width: 29px;
    height: 54px;
    cursor: pointer;
    background: transparent url(../images/arrow_left2.jpg) no-repeat 0 0;
}

Nichts zu danken. ;-) :)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück