Help: CSS - Select(SOLVED)

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Help: CSS - Select(SOLVED)

Post 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
Last edited by raghavan20 on Wed Aug 17, 2005 6:54 am, edited 2 times in total.
User avatar
anjanesh
DevNet Resident
Posts: 1679
Joined: Sat Dec 06, 2003 9:52 pm
Location: Mumbai, India

Post by anjanesh »

Where is the select control on your page ?
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post 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?
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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.
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post by raghavan20 »

are you talking of sth like creating a main div and child divs as options
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

yup.
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post 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;
}
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

set width to 100%, with the 10% side margins, you'll get 80%..
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post 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;
}
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post 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%;
}
Post Reply