|
||||
Positionierung funktioniert nicht innerhalb von Jquery's Scrollable
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; } 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%; } 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... |
Sponsored Links |
|
|||
ich gehe mal davon aus, dass die seite die du verlinkt hast deine ist und das problem und auch html dort zu sehen ist, oder?
Das Problem das du hast ist folgendes: deine html struktur ist großer quatsch das css passt sich gut dem html an ich nenne dir mal ein paar bsp damit du siehst was ich meine in deinem div mit der klasse "items" liegen divs. denen hast du per css etwas zugeordnet. in der struktur kommen dann weitere divs, die diese eigenschaft auch annehmen, das hast du bestimmt nciht so gewollt. mit der anweisung: Code:
.items > div { .... } width: 20000em; ??? warum gibst du die breit in em an? du verwendest ein ul mit nur einem li element. in diesem steht dann die auflisten in verschiedenen divs. wenn du das ul / li eh nicht verwendest warum dann eine liste mit nur einem eintrag. im css schreibst du irgendwo margin und padding: 0 mit importent und überschreibst du eigenschaft für alle elemente dass sie margin und padding 0 haben... wtf? usw. ich schlage dir vor: nehme dir einen zettel und einen stift und zeichne dir die struktur auf die du brauchst, damit wird dir dann wohl hoffentlich schnell klar was du brauchst und was nicht. |
Sponsored Links |
|
||||
Ja, das stimmt.
Die gesamte "Scrollable" CSS stammt direkt von der JQuery Tools Seite, keine Ahnung z.B. warum die die Breite in "em" angeben, ich hab daran nichts verändert. Ich denke, das Problem ist, dass ich in die "divs" wieder "divs" reinlege, aber tue ich das nicht, funktioniert der Scrolleffekt nicht. Das umzuschreiben ist sehr kompliziert für jemanden wie mich, der von Javascript so gut wie keine Ahnung hat Die ungeordnete Liste wollte ich nur ausprobieren und sehen, ob ich damit irgendwas ausrichten kann. Hat aber nicht funktioniert. Auf Grundlage des hier angegebenen HTML, JS und CSS hab ich den Scroller aufgebaut: http://flowplayer.org/tools/demos/scrollable/index.html Geändert von japanworm (11.09.2011 um 15:22 Uhr) |
|
|||
|
|
|||
schau dir mal den validator an. eventuell funktioniert es dann eh direkt, wenn die fehler mal weg sind. du hast im moment auch ein leeres div in dem .items-div. vielleicht kommt das durch die fehler da rein. solange das nicht valide ist könntest du unerwartete fehler bekommen die man nur wegbekommen wird wenn es valide ist. das sollte also dein erster schritt sein.
|
|
||||
Wow, das wusste ich nicht. Danke!
Und was bedeutet das hier? Zitat:
|
|
||||
Fehler entstehen teilweise durch Folgefehler. Fang in der Liste oben an und validiere jedes mal wenn du einen Fehler berichtigt hast neu. Dann werden das ganz schnell weniger Fehler
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade! |
Sponsored Links |
|
||||
Momentan arbeite ich mich durch die "img"-Fehler, da das schon mal gut die Hälfte ist und danach schau ich mal, was übrig bleibt. Dann ist es hoffentlich auch übersichtlicher.
Allerdings nicht mehr lange, ist schon spät und Zeit fürs Bett hier, nicht dass ich noch mehr Fehler reinhaue |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
positionierung innerhalb von div + height in ie6 | .robert | CSS | 5 | 27.03.2007 17:15 |
positionierung von div's innerhalb eines div | Fabster | CSS | 8 | 18.07.2006 19:02 |
Positionierung // Größenangabe innerhalb einer Div-Schachtel | wicky2k6 | CSS | 2 | 18.02.2006 18:18 |
Ratschläge bei Publizierung eines fertigen Layouts gesucht | Black Fladder | CSS | 55 | 05.09.2004 15:30 |
Absolute Positionierung funktioniert nicht | Kilrathi | CSS | 5 | 20.07.2004 11:25 |