Hallo.
Ich bin langsam wirklich am verzweifeln, vielleicht arbeite ich auch einfach schon zu lange nonstop daran, dass ich das offensichtliche nicht sehen kann, aber ich brauche eure Hilfe.
Ich möchte die Elemente in einem "Slider" nebeneinander angeordnet haben, sie sind allerdings untereinander. Für mich macht das keinen Sinn, denn außerhalb dieses Sliders sind sie nebeneinander, so wie ich es ursprünglich eingestellt hatte.
Alles sehr unübersichtlich.
Hier bei diesem Scroller sollten sie nebeneinander sein.
Hier außerhalb des Sliders (siehe ganz unten oberhalb des Footers) sind sie nebeneinander.
CSS für Scrollable:
Code:
/*
root element for the scrollable.
when scrolling occurs this element stays still.
*/
.scrollable {
/* required settings */
position:relative;
overflow:hidden;
width: 580px;
height:260px;
/* custom decorations */
border:1px solid #ccc;
background:#fff;
}
/*
root element for scrollable items. Must be absolutely positioned
and it should have a extremely large width to accomodate scrollable items.
it's enough that you set the width and height for the root element and
not for this element.
*/
.scrollable .items {
/* this cannot be too large */
width:20000em;
position:absolute;
clear:both;
}
.items div {
float:left;
width:670px;
}
/* single scrollable item */
.scrollable img {
}
/* active item */
.scrollable .active {
border:2px solid #000;
position:relative;
cursor:default;
}
/* this makes it possible to add next button beside scrollable */
.scrollable {
float:left;
}
/* prev, next, prevPage and nextPage buttons */
a.browse {
display:block;
float:left;
height:130px;
width:20px;
margin:40px 10px;
cursor:pointer;
font-size:1px;
}
/* right */
a.right { margin-right:0px;}
a.right:hover { background-position:-30px -30px; }
a.right:active { background-position:-60px -30px; }
/* left */
a.left { margin-left: 0px; }
a.left:hover { background-position:-30px 0; }
a.left:active { background-position:-60px 0; }
/* disabled navigational button */
a.disabled {
visibility:hidden !important;
}
CSS für die Column(s): (im Scroller ist momentan nur die home-column1)
Code:
.home-column1
{
float:left;
position: relative;
width: 33%;
}
.home-column2
{
float:left;
position: relative;
width: 33%;
}
.home-column3
{
float:left;
position: relative;
width: 33%;
}
Falls auch noch das HTML benötigt wird, lasst es mich wissen.
Ich bin wirklich am verzweifeln und hoffe, mir kann jemand zumindest einen Tipp geben oder die ganze Arbeit der letzten paar Tage war umsonst
Und ja, ich habe mich bereits in CSS eingelesen. Sehr intensive. Kann nicht sagen, dass ich deshalb alles verstehe...