Select nebeneinander
Hallo habe folgendes Problem:
Will das die Select Feleder nebeneinander sind so wie hier ohne css:
ohne
Mit Css sieht es so aus, habe den Hintergrund extra blau gemacht damit man sieht wie gross es ist:
mit
Hier der dazugehörige CSS Code:
Cascading Style Sheet
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
@CHARSET "UTF-8" ;
.jquery-selectbox {
position : relative ;
font-size : 12px ;
background : #1C7CD1 ;
}
.jquery-selectbox.selecthover {
z-index : 500 ;
}
.jquery-selectbox .jquery-selectbox-currentItem {
display : block ;
}
.jquery-selectbox .jquery-selectbox-list {
display : none ;
position : absolute ;
top 18px ;
padding : 2px ;
background : #DDEEFF ;
overflow : auto ;
}
.jquery-selectbox .jquery-selectbox-moreButton {
/*
position: absolute;
top: 0px;
right: 0px;
*/
float : right width : 100% ;
height : 18px ;
cursor : pointer ;
}
.jquery-selectbox .jquery-selectbox-item.listelementhover {
background : #DDF5FF ;
color : #1C7CD1 ;
}
.jquery-selectbox .jquery-selectbox-item {
display : block ;
cursor : default ;
}
Cascading Style Sheet
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
@CHARSET "UTF-8" ;
.jquery-selectbox {
position : relative ;
font-size : 12px ;
background : #1C7CD1 ;
}
.jquery-selectbox.selecthover {
z-index : 500 ;
}
.jquery-selectbox .jquery-selectbox-currentItem {
display : block ;
}
.jquery-selectbox .jquery-selectbox-list {
display : none ;
position : absolute ;
top 18px ;
padding : 2px ;
background : #DDEEFF ;
overflow : auto ;
}
.jquery-selectbox .jquery-selectbox-moreButton {
/*
position: absolute;
top: 0px;
right: 0px;
*/
float : right width : 100% ;
height : 18px ;
cursor : pointer ;
}
.jquery-selectbox .jquery-selectbox-item.listelementhover {
background : #DDF5FF ;
color : #1C7CD1 ;
}
.jquery-selectbox .jquery-selectbox-item {
display : block ;
cursor : default ;
}
Unterschätze nie jemanden der einen Schritt zurück geht! Er könnte Anlauf nehmen.
Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Josephine« (27. Mai 2011, 16:24)
Ich verstehe nicht genau was du willst.. poste doch mal auch html code
Naja ich will das zb. in der Spalte Dienstag 18 40 steht und nicht 18 und darunter 40.
Hier ein auszug aus dem html:
HTML
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
<td >
<select id="cx" name="'.$row->zid.'" >
<option value="-" selected="selected" > '.$fr_h.' </option >
<option value="1" > 00 </option >
<option value="2" > 01 </option >
<option value="3" > 02 </option >
<option value="4" > 03 </option >
<option value="5" > 04 </option >
<option value="6" > 05 </option >
<option value="7" > 06 </option >
<option value="8" > 07 </option >
<option value="9" > 08 </option >
<option value="10" > 09 </option >
<option value="11" > 10 </option >
<option value="12" > 11 </option >
<option value="13" > 12 </option >
<option value="14" > 13 </option >
<option value="15" > 14 </option >
<option value="16" > 15 </option >
<option value="17" > 16 </option >
<option value="18" > 17 </option >
<option value="19" > 18 </option >
<option value="20" > 19 </option >
<option value="21" > 20 </option >
<option value="22" > 21 </option >
<option value="23" > 22 </option >
<option value="24" > 23 </option >
<option value="25" > 24 </option >
</select >
<select id="cx" name="'.$row->zid.'" >
<option value="-" selected="selected" > '.$fr_m.' </option >
<option value="1" > 00 </option >
<option value="2" > 05 </option >
<option value="3" > 10 </option >
<option value="4" > 15 </option >
<option value="5" > 20 </option >
<option value="6" > 25 </option >
<option value="7" > 30 </option >
<option value="8" > 35 </option >
<option value="9" > 40 </option >
<option value="10" > 45 </option >
<option value="11" > 50 </option >
<option value="12" > 55 </option >
</select >
</td >
HTML
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
<td >
<select id="cx" name="'.$row->zid.'" >
<option value="-" selected="selected" > '.$fr_h.' </option >
<option value="1" > 00 </option >
<option value="2" > 01 </option >
<option value="3" > 02 </option >
<option value="4" > 03 </option >
<option value="5" > 04 </option >
<option value="6" > 05 </option >
<option value="7" > 06 </option >
<option value="8" > 07 </option >
<option value="9" > 08 </option >
<option value="10" > 09 </option >
<option value="11" > 10 </option >
<option value="12" > 11 </option >
<option value="13" > 12 </option >
<option value="14" > 13 </option >
<option value="15" > 14 </option >
<option value="16" > 15 </option >
<option value="17" > 16 </option >
<option value="18" > 17 </option >
<option value="19" > 18 </option >
<option value="20" > 19 </option >
<option value="21" > 20 </option >
<option value="22" > 21 </option >
<option value="23" > 22 </option >
<option value="24" > 23 </option >
<option value="25" > 24 </option >
</select >
<select id="cx" name="'.$row->zid.'" >
<option value="-" selected="selected" > '.$fr_m.' </option >
<option value="1" > 00 </option >
<option value="2" > 05 </option >
<option value="3" > 10 </option >
<option value="4" > 15 </option >
<option value="5" > 20 </option >
<option value="6" > 25 </option >
<option value="7" > 30 </option >
<option value="8" > 35 </option >
<option value="9" > 40 </option >
<option value="10" > 45 </option >
<option value="11" > 50 </option >
<option value="12" > 55 </option >
</select >
</td >
Unterschätze nie jemanden der einen Schritt zurück geht! Er könnte Anlauf nehmen.
Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Josephine« (27. Mai 2011, 16:24)
nnaja dann musste doch die cx dinger mit float:left belegen.. du bist ja komisch, hast so viele jquery css klassen angezeigt aber keiner von den kommt in deinem html code vor..
nee das geht auch net, bleiben stur untereinander.
Unterschätze nie jemanden der einen Schritt zurück geht! Er könnte Anlauf nehmen.
Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Josephine« (27. Mai 2011, 12:41)
also als erstens cx ist 2 mal als id vergeben das sollte vermutlich dann eher als class
das sie die zeile umbrechen kann eigentlich nur daran liegen das sie als block definiert werden. Da ich nicht sehe wie die klassen genau zugeordnet werden kann ich da nicht genau sagen welche klassen es sind. Du könntest halt mal gucken und die 2 display:block durch display:inline-block ersetzen oder ein link zu ner beispiel Seite posten das man es genau sieht
-LA
Habs mit inline-block versucht... lieder nix.
Hier der Link zum anschauen:
Link
Ps: Habe auch versucht mit class"cx" fleat:left bringt auch nix reagiert net drauf...
- Auf Touren-Datenmanager dann Andreas auswählen...
hier nochmal die etwas gekürzte css:
Cascading Style Sheet
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
@CHARSET "UTF-8" ;
.jquery-selectbox {
position : relative ;
font-size : 12px ;
background : #1C7CD1 ;
}
.jquery-selectbox.selecthover {
z-index : 500 ;
}
.jquery-selectbox .jquery-selectbox-list {
display : none ;
position : absolute ;
top 18px ;
padding : 2px ;
background : #DDEEFF ;
overflow : auto ;
}
.jquery-selectbox .jquery-selectbox-moreButton {
/*
position: absolute;
top: 0px;
right: 0px;
*/
float : right width : 100% ;
height : 18px ;
cursor : pointer ;
}
.jquery-selectbox .jquery-selectbox-item.listelementhover {
background : #DDF5FF ;
color : #1C7CD1 ;
}
.jquery-selectbox .jquery-selectbox-item {
display : block ;
cursor : default ;
}
Cascading Style Sheet
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
@CHARSET "UTF-8" ;
.jquery-selectbox {
position : relative ;
font-size : 12px ;
background : #1C7CD1 ;
}
.jquery-selectbox.selecthover {
z-index : 500 ;
}
.jquery-selectbox .jquery-selectbox-list {
display : none ;
position : absolute ;
top 18px ;
padding : 2px ;
background : #DDEEFF ;
overflow : auto ;
}
.jquery-selectbox .jquery-selectbox-moreButton {
/*
position: absolute;
top: 0px;
right: 0px;
*/
float : right width : 100% ;
height : 18px ;
cursor : pointer ;
}
.jquery-selectbox .jquery-selectbox-item.listelementhover {
background : #DDF5FF ;
color : #1C7CD1 ;
}
.jquery-selectbox .jquery-selectbox-item {
display : block ;
cursor : default ;
}
vielleicht hilft auch die .js datei weiter:
Javascript-Quelltext
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
/**
* jQuery custom selectboxes
*
* Copyright (c) 2008 Krzysztof Suszyński (suszynski.org)
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*
* @version 0.6.1
* @category visual
* @package jquery
* @subpakage ui.selectbox
* @author Krzysztof Suszyński <k.suszynski@wit.edu.pl>
**/
jQuery.fn.selectbox = function /* Default settings */
var settings = {
className: 'jquery-selectbox' ,
animationSpeed: "normal" ,
listboxMaxSize: "100%" ,
replaceInvisible: false
};
var commonClass = 'jquery-custom-selectboxes-replaced' ;
var listOpen = false ;
var showList = function var selectbox = listObj.parents('.' + settings.className + '' );
listObj.slideDown(settings.animationSpeed, function = true ;
});
selectbox.addClass('selecthover' );
jQuery(document ).bind('click' , onBlurList);
return listObj;
}
var hideList = function var selectbox = listObj.parents('.' + settings.className + '' );
listObj.slideUp(settings.animationSpeed, function = false ;
jQuery(this ).parents('.' + settings.className + '' ).removeClass('selecthover' );
});
jQuery(document ).unbind('click' , onBlurList);
return listObj;
}
var onBlurList = function var trgt = e.target;
var currentListElements = jQuery('.' + settings.className + '-list:visible' ).parent().find('*' ).andSelf();
if (jQuery.inArray(trgt, currentListElements)< 0 && listOpen) {
hideList( jQuery('.' + commonClass + '-list' ) );
}
return false ;
}
/* Processing settings */
settings = jQuery.extend(settings, options || {});
/* Wrapping all passed elements */
return this .each(function var _this = jQuery(this );
if (_this.filter(':visible' ).length = = 0 && ! settings.replaceInvisible)
return ;
var replacement = jQuery(
'<div class="' + settings.className + ' ' + commonClass + '">' +
'<div class="' + settings.className + '-moreButton" />' +
'<div class="' + settings.className + '-list ' + commonClass + '-list" />' +
'<span class="' + settings.className + '-currentItem" />' +
'</div>'
);
jQuery('option' , _this).each(function var v = jQuery(v);
var listElement = jQuery('<span class="' + settings.className + '-item value-' + v.val()+ ' item-' + k+ '">' + v.text() + '</span>' );
listElement.click(function var thisListElement = jQuery(this );
var thisReplacment = thisListElement.parents('.' + settings.className);
var thisIndex = thisListElement[0 ].className.split(' ' );
for ( k1 in thisIndex ) {
if (/ ^ item- [0 - 9 ]+ $/ .test(thisIndex[k1])) {
thisIndex = parseInt(thisIndex[k1].replace('item-' ,'' ), 10 );
break ;
}
};
var thisValue = thisListElement[0 ].className.split(' ' );
for ( k1 in thisValue ) {
if (/ ^ value- .+ $/ .test(thisValue[k1])) {
thisValue = thisValue[k1].replace('value-' ,'' );
break ;
}
};
thisReplacment
.find('.' + settings.className + '-currentItem' )
.text(thisListElement.text());
thisReplacment
.find('select' )
.val(thisValue)
.triggerHandler('change' );
var thisSublist = thisReplacment.find('.' + settings.className + '-list' );
if (thisSublist.filter(":visible" ).length > 0 ) {
hideList( thisSublist );
}else {
showList( thisSublist );
}
}).bind('mouseenter' ,function this ).addClass('listelementhover' );
}).bind('mouseleave' ,function this ).removeClass('listelementhover' );
});
jQuery('.' + settings.className + '-list' , replacement).append(listElement);
if (v.filter(':selected' ).length > 0 ) {
jQuery('.' + settings.className + '-currentItem' , replacement).text(v.text());
}
});
replacement.find('.' + settings.className + '-moreButton' ).click(function var thisMoreButton = jQuery(this );
var otherLists = jQuery('.' + settings.className + '-list' )
.not(thisMoreButton.siblings('.' + settings.className + '-list' ));
hideList( otherLists );
var thisList = thisMoreButton.siblings('.' + settings.className + '-list' );
if (thisList.filter(":visible" ).length > 0 ) {
hideList( thisList );
}else {
showList( thisList );
}
}).bind('mouseenter' ,function this ).addClass('morebuttonhover' );
}).bind('mouseleave' ,function this ).removeClass('morebuttonhover' );
});
_this.hide().replaceWith(replacement).appendTo(replacement);
var thisListBox = replacement.find('.' + settings.className + '-list' );
var thisListBoxSize = thisListBox.find('.' + settings.className + '-item' ).length;
if (thisListBoxSize > settings.listboxMaxSize)
thisListBoxSize = settings.listboxMaxSize;
if (thisListBoxSize = = 0 )
thisListBoxSize = 1 ;
var thisListBoxWidth = Math .round(_this.width() + 5 );
if (jQuery.browser.safari)
thisListBoxWidth = thisListBoxWidth * 0 .94 ;
replacement.css('width' , thisListBoxWidth + 'px' );
thisListBox.css({
width: Math .round(thisListBoxWidth- 5 ) + 'px' ,
height: thisListBoxSize + 'em'
});
});
}
jQuery.fn.unselectbox = function var commonClass = 'jquery-custom-selectboxes-replaced' ;
return this .each(function var selectToRemove = jQuery(this ).filter('.' + commonClass);
selectToRemove.replaceWith(selectToRemove.find('select' ).show());
});
}
Javascript-Quelltext
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
/**
* jQuery custom selectboxes
*
* Copyright (c) 2008 Krzysztof Suszyński (suszynski.org)
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*
* @version 0.6.1
* @category visual
* @package jquery
* @subpakage ui.selectbox
* @author Krzysztof Suszyński <k.suszynski@wit.edu.pl>
**/
jQuery.fn.selectbox = function /* Default settings */
var settings = {
className: 'jquery-selectbox' ,
animationSpeed: "normal" ,
listboxMaxSize: "100%" ,
replaceInvisible: false
};
var commonClass = 'jquery-custom-selectboxes-replaced' ;
var listOpen = false ;
var showList = function var selectbox = listObj.parents('.' + settings.className + '' );
listObj.slideDown(settings.animationSpeed, function = true ;
});
selectbox.addClass('selecthover' );
jQuery(document ).bind('click' , onBlurList);
return listObj;
}
var hideList = function var selectbox = listObj.parents('.' + settings.className + '' );
listObj.slideUp(settings.animationSpeed, function = false ;
jQuery(this ).parents('.' + settings.className + '' ).removeClass('selecthover' );
});
jQuery(document ).unbind('click' , onBlurList);
return listObj;
}
var onBlurList = function var trgt = e.target;
var currentListElements = jQuery('.' + settings.className + '-list:visible' ).parent().find('*' ).andSelf();
if (jQuery.inArray(trgt, currentListElements)< 0 && listOpen) {
hideList( jQuery('.' + commonClass + '-list' ) );
}
return false ;
}
/* Processing settings */
settings = jQuery.extend(settings, options || {});
/* Wrapping all passed elements */
return this .each(function var _this = jQuery(this );
if (_this.filter(':visible' ).length = = 0 && ! settings.replaceInvisible)
return ;
var replacement = jQuery(
'<div class="' + settings.className + ' ' + commonClass + '">' +
'<div class="' + settings.className + '-moreButton" />' +
'<div class="' + settings.className + '-list ' + commonClass + '-list" />' +
'<span class="' + settings.className + '-currentItem" />' +
'</div>'
);
jQuery('option' , _this).each(function var v = jQuery(v);
var listElement = jQuery('<span class="' + settings.className + '-item value-' + v.val()+ ' item-' + k+ '">' + v.text() + '</span>' );
listElement.click(function var thisListElement = jQuery(this );
var thisReplacment = thisListElement.parents('.' + settings.className);
var thisIndex = thisListElement[0 ].className.split(' ' );
for ( k1 in thisIndex ) {
if (/ ^ item- [0 - 9 ]+ $/ .test(thisIndex[k1])) {
thisIndex = parseInt(thisIndex[k1].replace('item-' ,'' ), 10 );
break ;
}
};
var thisValue = thisListElement[0 ].className.split(' ' );
for ( k1 in thisValue ) {
if (/ ^ value- .+ $/ .test(thisValue[k1])) {
thisValue = thisValue[k1].replace('value-' ,'' );
break ;
}
};
thisReplacment
.find('.' + settings.className + '-currentItem' )
.text(thisListElement.text());
thisReplacment
.find('select' )
.val(thisValue)
.triggerHandler('change' );
var thisSublist = thisReplacment.find('.' + settings.className + '-list' );
if (thisSublist.filter(":visible" ).length > 0 ) {
hideList( thisSublist );
}else {
showList( thisSublist );
}
}).bind('mouseenter' ,function this ).addClass('listelementhover' );
}).bind('mouseleave' ,function this ).removeClass('listelementhover' );
});
jQuery('.' + settings.className + '-list' , replacement).append(listElement);
if (v.filter(':selected' ).length > 0 ) {
jQuery('.' + settings.className + '-currentItem' , replacement).text(v.text());
}
});
replacement.find('.' + settings.className + '-moreButton' ).click(function var thisMoreButton = jQuery(this );
var otherLists = jQuery('.' + settings.className + '-list' )
.not(thisMoreButton.siblings('.' + settings.className + '-list' ));
hideList( otherLists );
var thisList = thisMoreButton.siblings('.' + settings.className + '-list' );
if (thisList.filter(":visible" ).length > 0 ) {
hideList( thisList );
}else {
showList( thisList );
}
}).bind('mouseenter' ,function this ).addClass('morebuttonhover' );
}).bind('mouseleave' ,function this ).removeClass('morebuttonhover' );
});
_this.hide().replaceWith(replacement).appendTo(replacement);
var thisListBox = replacement.find('.' + settings.className + '-list' );
var thisListBoxSize = thisListBox.find('.' + settings.className + '-item' ).length;
if (thisListBoxSize > settings.listboxMaxSize)
thisListBoxSize = settings.listboxMaxSize;
if (thisListBoxSize = = 0 )
thisListBoxSize = 1 ;
var thisListBoxWidth = Math .round(_this.width() + 5 );
if (jQuery.browser.safari)
thisListBoxWidth = thisListBoxWidth * 0 .94 ;
replacement.css('width' , thisListBoxWidth + 'px' );
thisListBox.css({
width: Math .round(thisListBoxWidth- 5 ) + 'px' ,
height: thisListBoxSize + 'em'
});
});
}
jQuery.fn.unselectbox = function var commonClass = 'jquery-custom-selectboxes-replaced' ;
return this .each(function var selectToRemove = jQuery(this ).filter('.' + commonClass);
selectToRemove.replaceWith(selectToRemove.find('select' ).show());
});
}
Unterschätze nie jemanden der einen Schritt zurück geht! Er könnte Anlauf nehmen.
Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von »Josephine« (27. Mai 2011, 16:27)
wie ich es liebe wenn leute einen kompletten quellcode einfach hinklatschen und denken dass jemand sich den anschaut
änder dein cx von id auf class
HTML
1
2
<select class="cx" name="'.$row->zid.'" >
</select >
und mach im css folgendes
Cascading Style Sheet
1
2
3
select.cx option {
float :left
...
oder du lädst es hoch und wir schauen über firebug den htmlcode an... dass du immer an solchen lapalien scheiterst
willste nicht erstmal ein kleine gästebuch o.ä programmieren?
Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »cccpmik« (27. Mai 2011, 16:49)
Cascading Style Sheet
1
2
3
4
5
6
7
.jquery-selectbox {
float :left position : relative ;
font-size : 12px ;
background : #1C7CD1 ;
}
73%
22%
19%
11%
6%
Spoiler
PHP »
warum nebeneinander? ... im select?
(9. Februar 2006, 16:13)