Page 1 of 1

Help: CSS - Select(SOLVED)

Posted: Tue Aug 16, 2005 5:24 am
by raghavan20
I want someone to help me with styling a select control:
Select:

Code: Select all

.select{
	border:2px solid #000000;
	background-color:#CCCCCC;
	color:#003366;	
	font:Icon, Verdana, Arial;
}
1. the border code does not seem to work
2. Is it possible to change the style of the scroll bar?
3. Is it possible to change the color on selected item, the highlight color?

page at action: http://raghavan20.allhyper.com

Posted: Tue Aug 16, 2005 5:55 am
by anjanesh
Where is the select control on your page ?

Posted: Tue Aug 16, 2005 6:05 am
by raghavan20
pls login to the chat application and you would see it as the users list control

Anybody know how to get color cubes which should open when we click on something?

Posted: Tue Aug 16, 2005 7:00 am
by feyd
you can't style the select control created by the browser. It's an OS level construct, not a browser one. You can however style the individual options, but only so far..

If you create your own select (list really) box, you could style it any way you like.

Posted: Tue Aug 16, 2005 7:41 am
by raghavan20
are you talking of sth like creating a main div and child divs as options

Posted: Tue Aug 16, 2005 7:59 am
by feyd
yup.

Posted: Tue Aug 16, 2005 10:32 am
by raghavan20
I have another css problem with my login page
http://raghavan20.allhyper.com

The width of the main window is supposed to 80%, left and right margins:10% each. But the divs look a lot shrinked.
I hope you would look at the html code using 'view source'
css used:

Code: Select all

.mainDiv{
	background-color:#FFFFFF;
	margin-top:5px;
	margin-left:10%;
	margin-right:10%;
	height:400px;
	width:80%;
}

.loginTitle{
	background-color:#000099;
	color:#FFFFFF;
	font-weight:bolder;
	font-size:1.2em;
	text-align:center;
	padding:10px;
	width:100%;
	height:10%;
}

.login{
	color:#000000;
	margin-top:100px;
	width:70%;
	float:none;
}

.subMenuDiv{
	border:1px solid #333333;
	background-color:#400040;
	color:#FFFFFF;
	margin-top:0px;
	width:28%;
	height:90%;
	float:left;
}

Posted: Tue Aug 16, 2005 10:35 am
by feyd
set width to 100%, with the 10% side margins, you'll get 80%..

Posted: Tue Aug 16, 2005 10:39 am
by raghavan20
Now, the login page works.
But I am using the same css in the chatMainPage.php which appears larger.
Can you find out why?

Code: Select all

.mainDiv{
	background-color:#FFFFFF;
	margin-top:5px;
	margin-left:10%;
	margin-right:10%;
	height:400px;
	width:100%;
}
.leftMainDiv{
	width:75%;
	height:100%;
	float:left;
}

.rightMainDiv{
	width:24%;
	height:100%;
	background-color:#333333;
	color:#FFFFFF;
	float:right;
}

Posted: Tue Aug 16, 2005 8:00 pm
by raghavan20
I was tweaking the login page again and it has gone wrong.
After I set the two child divs to 30% and 70% they look larger than they should and one child div comes underneath the other

looks ok in dreamweaver but it goes all wrong in IE

page at action: http://raghavan20.allhyper.com

css code:

Code: Select all

body {
	background-image:url(background.gif);
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:.8em;
}

.rAlign{
	text-align:right;
}

.lAlign{
	text-align:left;
}
.cAlign{
	text-align:center;
}

.chatWindow{
	background-color:#CCCCCC;
	color:#000099;
	width:70%;
	height:60%;
	overflow:auto;
	border: 3px solid #000000;
	float:left;
	padding:10px;
}
.inputDiv{
	margin-top:-3%;
}

.groupControls{
	margin-left:10%;
	margin-top:6%;
}
.leftMainDiv{
	background-color:#FFFFFF;
	color:#333333;
}

.rightMainDiv{
	background-color:#333333;
	color:#FFFFFF;
}

.displayChatName{
	font-weight:bolder;
	text-transform:capitalize;
	color:#990000;
}
.displayChatMessages{
	color:#3366FF;
}

.title{
	background-color:#000099;
	color:#FFFFFF;
	font-weight:bolder;
	font-size:1.2em;
	text-align:center;
	padding-top:5px;
	padding-botton:5px;
}

.login{
	color:#000000;
	margin-top:100px;
	margin-left:20%;
	width:70%;
	float:none;
}

.subMenuDiv{
	background-color:#400040;
	color:#FFFFFF;
}

.button1{
	background-color:#CCCCCC; color:#000000; height:40px; width:60px; border: 2px solid #000000;
	text-align:center; valign:middle;
}


.textArea{
	border:2px solid #000000;
	background-color:#CCCCCC;
	color:#003366;	
}

.select{
	border:2px solid #000000;
	background-color:#CCCCCC;
	color:#003366;	
	font:Icon, Verdana, Arial;
}

.listRooms{
	text-align:left;
	padding:5px;
	
}

div.loginHeader{
	background-color:#000099;
	color:#FFFFFF;
	height:10%;
	margin-left:10%;
	margin-right:10%;
	font-weight:bolder;
	font-size:1.2em;
	text-align:center;
	padding-top:5px;
	padding-bottom:5px;

}
div.header{
	background-color:#003399;
	color:#FFFFFF;
	height:10%;
	margin-left:10%;
	margin-right:10%;
}


div.parent{
	margin-left:10%;
	margin-right:10%;
}