JavaScript and client side scripting.
Moderator: General Moderators
raghavan20
DevNet Resident
Posts: 1451 Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:
Post
by raghavan20 » Tue Aug 16, 2005 5:24 am
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.
anjanesh
DevNet Resident
Posts: 1679 Joined: Sat Dec 06, 2003 9:52 pm
Location: Mumbai, India
Post
by anjanesh » Tue Aug 16, 2005 5:55 am
Where is the select control on your page ?
raghavan20
DevNet Resident
Posts: 1451 Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:
Post
by raghavan20 » Tue Aug 16, 2005 6:05 am
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?
feyd
Neighborhood Spidermoddy
Posts: 31559 Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA
Post
by feyd » Tue Aug 16, 2005 7:00 am
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.
raghavan20
DevNet Resident
Posts: 1451 Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:
Post
by raghavan20 » Tue Aug 16, 2005 7:41 am
are you talking of sth like creating a main div and child divs as options
feyd
Neighborhood Spidermoddy
Posts: 31559 Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA
Post
by feyd » Tue Aug 16, 2005 7:59 am
yup.
raghavan20
DevNet Resident
Posts: 1451 Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:
Post
by raghavan20 » Tue Aug 16, 2005 10:32 am
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;
}
feyd
Neighborhood Spidermoddy
Posts: 31559 Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA
Post
by feyd » Tue Aug 16, 2005 10:35 am
set width to 100%, with the 10% side margins, you'll get 80%..
raghavan20
DevNet Resident
Posts: 1451 Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:
Post
by raghavan20 » Tue Aug 16, 2005 10:39 am
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;
}
raghavan20
DevNet Resident
Posts: 1451 Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:
Post
by raghavan20 » Tue Aug 16, 2005 8:00 pm
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%;
}