• 28.04.2024, 15:36
  • Registrieren
  • Anmelden

  • Sie sind nicht angemeldet.

 

Denksportaufgabe css

Ani

God

Beiträge: 2 228

Denksportaufgabe css

Freitag, 7. Januar 2011, 16:20

Hi.
wir haben hier gerade ein "kleines" CSS Problem.
Ich bin zwar der Meinung dass das nicht möglich ist, aber vielleicht hat ja jemand doch eine gute Idee.
Schafft es jemand von euch das die Boxen (divs mit klasse box) sich nach rechts weiter fortsetzen und der scroller scrollbar wird, OHNE javascript und der klasse scroller eine feste Weite zu geben?

test.html ist angehangen

html:

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167

<div id="cartSubCategory">
	<div class="scroller">
		<!-- start SubCategory -->	
		<div class="box" style="cursor:pointer;" onClick="javascript:document.location='CartCategories.asp?frmOpgID=81&amp;frmCacID=8506';">
			<h1>20 Zoll Kinderfahrrad</h1>
			<div class="text">
			</div>
			<div class="subCat">
				<a href="CartCategories.asp?frmOpgID=81&amp;frmCacID=8506">Kategorie anzeigen</a>

			</div>
			<div class="clearer"></div>
		</div>
		<!-- end SubCategory -->	
						
		<!-- start SubCategory -->	
		<div class="box" style="cursor:pointer;" onClick="javascript:document.location='Kategorie_Radsport_BMX-12345.html';">
			<h1>BMX Dirt Street Bike</h1>
			
			<div class="img">
				<img src="http://demo.rim.de/bikeshops/admin/pix/ShowCartCategoryImage.asp?frmOpgID=81&amp;frmCacID=410&amp;frmImageWidth=80&amp;frmImageMaxHeight=" alt="BMX Dirt Street Bike">

			</div>
			
			<div class="text">
			
			</div>
										
				
				<div class="subCat">
					<a href="Kategorie_Radsport_BMX-12345.html">Kategorie anzeigen</a>
				</div>
			
		  <div class="clearer"></div>
		</div>

		<!-- end SubCategory -->	
		
		<!-- start SubCategory -->	
		<div class="box" style="cursor:pointer;" onClick="javascript:document.location='Kategorie_Radsport_City.html';">
			<h1>Cityrad XXL Fahrrad</h1>
			
			<div class="text">
			
			</div>
										
				
				<div class="subCat">
					<a href="Kategorie_Radsport_City.html">Kategorie anzeigen</a>
				</div>

			
		  <div class="clearer"></div>
		</div>
		<!-- end SubCategory -->	
		
		<!-- start SubCategory -->	
		<div class="box" style="cursor:pointer;" onClick="javascript:document.location='CartCategories.asp?frmOpgID=81&amp;frmCacID=747';">
			<h1>Crossrad Crossräder</h1>
			
			<div class="text">
			
			</div>
										
				
				<div class="subCat">

					<a href="CartCategories.asp?frmOpgID=81&amp;frmCacID=747">Kategorie anzeigen</a>
				</div>
			
		  <div class="clearer"></div>
		</div>
		<!-- end SubCategory -->	
		
		<!-- start SubCategory -->	
		<div class="box" style="cursor:pointer;" onClick="javascript:document.location='CartCategories.asp?frmOpgID=81&amp;frmCacID=8481';">
			<h1>Damenfahrrad</h1>
			
			<div class="text">

			
			</div>
										
				
				<div class="subCat">
					<a href="CartCategories.asp?frmOpgID=81&amp;frmCacID=8481">Kategorie anzeigen</a>
				</div>
			
		  <div class="clearer"></div>
		</div>
		<!-- end SubCategory -->	
		
		<!-- start SubCategory -->	
		<div class="box" style="cursor:pointer;" onClick="javascript:document.location='CartCategories.asp?frmOpgID=81&amp;frmCacID=346';">

			<h1>E-Bike Pedelec Elektrofahrrad</h1>
			
			<div class="text">
			
			</div>
										
				
				<div class="subCat">
					<a href="CartCategories.asp?frmOpgID=81&amp;frmCacID=346">Kategorie anzeigen</a>
				</div>
			
		  <div class="clearer"></div>
		</div>

		<!-- end SubCategory -->	
		
		<!-- start SubCategory -->	
		<div class="box" style="cursor:pointer;" onClick="javascript:document.location='CartCategories.asp?frmOpgID=81&amp;frmCacID=344';">
			<h1>Herrenfahrrad</h1>
			
			<div class="text">
			
			</div>
										
				
				<div class="subCat">
					<a href="CartCategories.asp?frmOpgID=81&amp;frmCacID=344">Kategorie anzeigen</a>
				</div>

			
		  <div class="clearer"></div>
		</div>
		<!-- end SubCategory -->	
		
		<!-- start SubCategory -->	
		<div class="box" style="cursor:pointer;" onClick="javascript:document.location='Kategorie_Radsport_Hollandraeder.html';">
			<h1>Hollandrad Hollandfahrräder</h1>
			
			<div class="text">
			
			</div>
										
				
				<div class="subCat">

					<a href="Kategorie_Radsport_Hollandraeder.html">Kategorie anzeigen</a>
				</div>
			
		  <div class="clearer"></div>
		</div>
		<!-- end SubCategory -->	
		
		<!-- start SubCategory -->	
		<div class="box" style="cursor:pointer;" onClick="javascript:document.location='CartCategories.asp?frmOpgID=81&amp;frmCacID=333';">
			<h1>Kinder-/Jugendrad 20-26 Zoll</h1>
			
			<div class="text">

			
			</div>
										
				
				<div class="subCat">
					<a href="CartCategories.asp?frmOpgID=81&amp;frmCacID=333">Kategorie anzeigen</a>
				</div>
			
		  <div class="clearer"></div>
		</div>
		<!-- end SubCategory -->	
		
	</div>
</div>

css:

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

#cartSubCategory 
  {
	overflow: auto;
	width:900px;
	height:180px;
	border: 1px solid black;
}
#cartSubCategory .scroller
{
	width:auto;
	height:180px;
	white-space: nowrap;
}

  #cartSubCategory .box
  { 
  margin:5px 5px 0 0 ;
  height:150px;
  width:200px;
  text-align:center;
  float:left;
   }
»Ani« hat folgende Datei angehängt:
  • test.zip (1,15 kB - 38 mal heruntergeladen - zuletzt: 31. August 2023, 19:42)

Y0Gi

God

Beiträge: 12 708

Freitag, 7. Januar 2011, 17:47

Einfach bei den Boxen das `float: left;` entfernen und dafür `display: inline-block;` setzen. Außerdem für die Klasse "scroller" die Breite auf 'nen hohen Wert, z.B. 99999px setzen.

Dann verhält sich die BMX-Box zwar komisch, das scheint aber an deren Inhalt zu liegen. Wenn ich den Inhalt der ersten Box da reinkopiere, sind alle wieder auf der selben Höhe. Außerdem scheinen mehrzeilige Überschriften das Layout etwas zu stören.

Anmerkungen:

- Warum zippst du eine einzelne Datei? Mag das Forum keine HTML-Dokumente beim Upload?

- Statt der Container "scroller" und "box" würde ich der Semantik folgen und eine (sortierte) Liste verwenden, d.h. stattdessen die Elemente "ol" respektive "li" einsetzen.

- Dann kannst du auch gleich von den Unterschiedlichen Elementnamen profitieren und `#cartSubCategory .box` durch `ol.scroller > li` ersetzen (d.h. auf den einzelnen "li"s muss kein Klassenname mehr gesetzt werden!). Dabei wirkt sich der Style nur auf die direkten "li"-Kindelemente von "ol.scroller" aus, nicht auf irgendwo tiefer darin enthaltene "li"s. Den entsprechenden CSS-Selektor (`>`) sollte heutzutage jeder halbwegs aktuelle Browser beherrschen.

- Den Cursor kannst du natürlch ebenfalls im Stylesheet statt inline setzen.

- Schau dir unbedingt jQuery für das JavaScript an. Soweit ich das sehe sind der Link im inneren Ankerelement und die per JavaScript als Ziel gesetzte URL pro Box identisch. Anstatt das JavaScript also manuell einzubetten, kannst du es an zentraler Stelle benutzen und auch die Link-Ziele dynamisch ermitteln:

Quellcode

 
1
2
3
4

`$('ol.scroller > li').click(function() {
  var url = $(this).find('a').attr('href');
  location.href = url;
});`

(Richtig gesehen, jQuery nutzt CSS-Selektoren um sich im Dokumentenbaum zu bewegen.)

Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von »Y0Gi« (7. Januar 2011, 18:00)

This is my sick nature. – NorthCon // LANresort Bispingen // BYCEPS (LAN party software platform) // OrgaTalk (LAN party orga board)

Ani

God

Beiträge: 2 228

Samstag, 8. Januar 2011, 19:25

danke für die anmerkungen yogi.

Problem ist dass das nur ein auszug aus einem großen Projekt ist, daher sind die klassen so schon korrekt.
Wenn nur son bißchen wäre, wäre ul.scroller > li gut gewesen, aber die .box muss sein.


jQuery wollen wir "erstmal" vermeiden. Wie gesagt, das ist ein großen Projekt.
Bisher war das was ihr hier seht noch tables. "mal eben" alles umschreiben ist leider nicht möglich.

bezüglich gezippte html Datei, ja das Forum nimmt keine html Dateien an, daher die zip.


der tip mit der liste gut, werden mal gucken ob wir statt der divs einfach ne ul machen.

werden das dann am Montag ausprobieren, melde mich wieder.

Y0Gi

God

Beiträge: 12 708

Sonntag, 9. Januar 2011, 17:06

Letztlich macht das Weglassen oder zumindest Auslagern von unnötigen Klassen sowie Inline-Styles und -JavaScript die gesamte "Code"-Basis übersichtlicher, besser wartbar, besser vom Client zu Cachen und erhöht damit auch die Performance. Ist jetzt nicht so, dass das nur Schönheitsspielerein wären ;) Will das nur mal explizit so festhalten. Refactoring lohnt sich letztlich fast (d.h. nur, wenn die Lebenszeit des betroffenen Produktes sehr begrenzt ist) immer.
This is my sick nature. – NorthCon // LANresort Bispingen // BYCEPS (LAN party software platform) // OrgaTalk (LAN party orga board)

Ani

God

Beiträge: 2 228

Sonntag, 9. Januar 2011, 20:39

dann nimm mal ~200 Dateien (inculdes) und 100 Websites + styles auseinander und refactor das alles.
Wenn du das machen willst, bitte.
ich machs nicht und es wird auch kein anderer machen.

Y0Gi

God

Beiträge: 12 708

Montag, 10. Januar 2011, 19:09

Das, was ich alles schon refactored habe, lässt sich ohne wissenschaftliche Schreibweise schon gar nicht mehr in Zahlen ausdrücken ... ;) Glaub mir man, bei sowas steh' ich immer in der ersten Reihe :)

P.S.: "Clean Code" von Robert C. Martin ist ein tolles Buch. War schlau, sich das zu Weihnachten zu wünschen.
This is my sick nature. – NorthCon // LANresort Bispingen // BYCEPS (LAN party software platform) // OrgaTalk (LAN party orga board)