zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Positionierung funktioniert nicht innerhalb von Jquery's Scrollable

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.09.2011, 13:34
Benutzerbild von japanworm
Confuser
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 14.07.2011
Ort: Japan
Beiträge: 143
japanworm befindet sich auf einem aufstrebenden Ast
Standard 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;		
}
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...
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.09.2011, 14:00
Benutzer
neuer user
 
Registriert seit: 24.07.2011
Beiträge: 83
lolDog befindet sich auf einem aufstrebenden Ast
Standard

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:
Zitat:
Zitat von japanworm Beitrag anzeigen
Alles sehr unübersichtlich.
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 { .... }
erreichst du dass nur die divs betroffen sind die direkt unter .items liegen und keine weiteren.

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 11.09.2011, 15:19
Benutzerbild von japanworm
Confuser
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 14.07.2011
Ort: Japan
Beiträge: 143
japanworm befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
  #4 (permalink)  
Alt 11.09.2011, 16:25
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Validator! The W3C Markup Validation Service

___________
Gruß,
Roland
Mit Zitat antworten
  #5 (permalink)  
Alt 11.09.2011, 16:58
Benutzer
neuer user
 
Registriert seit: 24.07.2011
Beiträge: 83
lolDog befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 11.09.2011, 17:12
Benutzerbild von japanworm
Confuser
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 14.07.2011
Ort: Japan
Beiträge: 143
japanworm befindet sich auf einem aufstrebenden Ast
Standard

Würde ich sehr gerne machen, wenn ich wüsste WIE!
Ich hab das schon 100 Mal versucht, aber ich versteh nicht, was genau ich abändern soll. Wirklich gut erklärt ist das ja nicht ....

Es ist ja nicht so, dass ich GAR nichts davon verstehe, aber das hier z.B.:

Zitat:
Line 184, Column 210: end tag for "img" omitted, but OMITTAG NO was specified

…er=0 title="Follow me on Twitter" ></a> <a href="http://feeds.feedburner.com/Z…



You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".

Geändert von japanworm (11.09.2011 um 17:17 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 11.09.2011, 17:24
Benutzer
neuer user
 
Registriert seit: 24.07.2011
Beiträge: 83
lolDog befindet sich auf einem aufstrebenden Ast
Standard

das heißt das du ein img aufmachst aber du machst es nirgens zu. jedes img muss so aussehen: <img ...... /> bei dir fehlt überall das / am ende.
Mit Zitat antworten
  #8 (permalink)  
Alt 11.09.2011, 17:31
Benutzerbild von japanworm
Confuser
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 14.07.2011
Ort: Japan
Beiträge: 143
japanworm befindet sich auf einem aufstrebenden Ast
Standard

Wow, das wusste ich nicht. Danke!

Und was bedeutet das hier?

Zitat:
Info Line 184, Column 84: start tag was here

…ter.com/zoomingjapan" target="_blank"><img src="http://zoomingjapan.com/wp-con…
Gibt es eine schnellere Option, das durchzuarbeiten, weil momentan (bei über 100 Fehlern) such ich mich teilweise dumm und dämlich.
Mit Zitat antworten
  #9 (permalink)  
Alt 11.09.2011, 17:39
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.989
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

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!
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 11.09.2011, 17:42
Benutzerbild von japanworm
Confuser
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 14.07.2011
Ort: Japan
Beiträge: 143
japanworm befindet sich auf einem aufstrebenden Ast
Standard

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


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:03 Uhr.