|
CSS - Customizing A Textfield Is Possible, Right?
Similar TutorialsI am trying to customize some links. However, everything I've found shows how to customize all the links (using a:active, etc.). I cannot find the syntax to create a style that I can apply to specific links. Can someone help? TIA. Hi, can anyone give me a hand with customizing my lists? I am trying to do something like here, http://www.microsoft.com/, but with a semi-transparent background in the nav bar. It works if I have borders around the links, which is fine if I had a solid bg as I can hide them, but being semi-transparent I have a problem, and when I remove them it causes a shift when moving over a link. Any ideas?? Hey guys, I am in the process of adding a Twitter widget onto my website. I would like it to be very similar to that on http://www.spotify.com/us/about/what/. I am not sure how to edit the currently provided Twitter widgets to resemble that... Has anyone any idea? PS. I am looking for a programmer for my startup company. No cash, but rather equity. We need someone fluent in PHP. Hi, I am importing a Word Press blog to a web site, but it looks kind of sloppy. You can see it here : What I need to do is just present the title, and maybe the first 100 characters, then have a "read more" link. Once this link is clicked, the full article will show on the same page. I think I might need to use a JavaScript library as well, but I know I will need some CSS. If someone could give me a general idea of how to go about this, I would appreciate it. Links and resources are also welcome. thanks Hi there! I'll cut right down to the chase: is my method of styling form input fields efficient? Is there a better way to do it? I tried directly styling the input, rather than putting it in a div, but it didn't work in IE (when too much text went into the field, the background would move, no matter what I did. ) Also, is my <label> styling okay? HTML Code: Original - HTML Code <div class="formRow"> <div class="textInput"> <input class="textInput" id="name" type="text" /> <label for="name">Name</label> </div> </div> <div class="formRow"> <div class="textInput"> <input class="textInput" id="name" type="text" /> <label for="name">Name</label> </div> </div> CSS Code: Original - CSS Code #content div.formRow:hover { background-color: #EEE; } #content input.textInput { font-size: 14px; color: #666; padding: 3px 5px; width: 190px; height: 20px; border: 0; background-color: transparent; } #content input.textInput:focus { color: #000; } #content div.textInput { margin-left: 50px; background: transparent url('images/textInput.png') no-repeat; } #content div.textInput label { font-size: 14pt; font-weight: bold; margin-left: 50px; vertical-align: top; }
And lastly... my image: Thanks a lot! notice difference between first two txt fields and the third one. first two have only background color changed, but in IE they have become bigger, in Moziila/Netscape their border is chaged.. I would like to have background color changed, but size, color and border width stay same, like in third textfield.. please use following code for refference: Code:
<html>
<head>
<style>
.boxA { background-color:#CCCCCC; }
.boxB { background-color:#999999; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<body>
<input type="text" id="text1" class="boxB" onFocus="makeLight(this)" onBlur="makeDark(this)"><br><br>
<input type="text" id="text2" class="boxB" onFocus="makeLight(this)" onBlur="makeDark(this)"><br><br>
<input type="text" id="text3">
<br><br>
<script>
function makeLight(obj){
obj.className="boxA";
}
function makeDark(obj){
obj.className="boxB";
}
</script>
</body>
</html>
My problem is with 2 textfields that I am using css to text attributes, all is well in IE, but in netscape and firefox the letters q,y,p the bottoms get cut off. Any suggestions greatly appreciated. here is a link to the page i am working on http://www.cfwilson.com/365c/index.htm Charles I am trying to construct a site using a complete de-coupled design. My problem concerns some absolute positioned textfields. I do not wish to use a table to display the form, as this would defeat the whole purpose of the project. The page in question can be found here The CSS is as follows (exmaple of the name header and text field Code: /* Contact Form Positioning */
.NameFormTitle
{
position: absolute;
left: 15px;
top: 110px;
display: inline;
}
#NameFormField
{
position: absolute;
left: 120px;
top: 110px;
display: inline;
font-family: Arial, sans-serif;
color: #999999;
font-weight: bold;
line-height: 100px;
}
In IE 6 all is well. The textfield is the same height as the header, in Firefox and Netscape the textfields are to high. I have tried line height, but as the elements are absoluted positioned this has no effect (I think). Please help 1) I want to change the margin around the textfield, right now it looks like a 2px border but i want to change it to 1 or 0 as I will use my css of the parent div to space the items. Is this possible? if so how? Thanks there is a picture attached, as you can see it has a margin, i highlighted it, otherwise it would be snug with the bright green border ps: borders are only there to see the sections 2) Can i change what the <br> tag does? can I make my own class? I would like to make a <br class"mybr"> that would have a 10px space, or something like that. Is this possible? Hi there, I have a text field which I would like to change colour on hover. Any ideas how I would do this? I tried using a class with a:hover but it didn't work. Thanks! Hi Everyone, I have a problem trying to position a submit button on a search form. The button is an image saying "go" and I am trying to move the button down by a few pixels using CSS. Whenever I use margin-top:3px; the textfield is also moved down although I am using a class on the button of "goButton" (see code below). I want to be able to move the button only. CSS code: Code: #searchField {display:inline;}
#goButton {display:inline; margin-top:3px;}
.goButton {margin-top:3px;}
HTML/PHP code: Code: $output = '<div id="searchField"><span class="white">Search</span><input name="searchword" id="mod_search_searchword" maxlength="20" alt="search" class="inputbox'. $moduleclass_sfx .'" type="text" size="'. $width .'" value="'. $text .'" onblur="if(this.value==\'\') this.value=\''. $text .'\';" onfocus="if(this.value==\''. $text .'\') this.value=\'\';" /></div>';
if ( $button ) {
$button = '<div id="goButton"><A HREF="javascript:document.searchForm.submit()"
onmouseover="document.searchForm.go_but.src=\'/silence/templates/rhuk_solarflare_ii/images/goOver.gif\'"
onmouseout="document.searchForm.go_but.src=\'/silence/templates/rhuk_solarflare_ii/images/go.gif\'"
onclick="return val_form_this_page()">
<IMG SRC="/silence/templates/rhuk_solarflare_ii/images/go.gif"
WIDTH="19" HEIGHT="19" BORDER="0" ALT="Go"
NAME="go_but" class="goButton"></A></div>';
}
Full CSS code: Code: html, body {margin: 0; padding: 0; border: 0;}
html {
height: 100%;
}
body {
color: #5f5c5c;
background-color: #8091b4;
font-family: verdana, sans-serif;
font-size: 80%;
text-align: center;
margin: 10px 0;
line-height: 130%;
height: 100%;
margin-bottom: 1px;
font-size:10px; /*added to change all font sizes*/
}
.clr {
clear: both;
}
.outline {
border: 1px solid #cccccc;
background: #ffffff;
padding: 2px;
}
#buttons_outer {
width: 635px;
margin-bottom: 2px;
margin-right: 2px;
float: left;
}
#buttons_inner {
border: 1px solid #cccccc;
height: 21px !important;
height: 23px;
}
#pathway_text {
overflow: hidden;
display: block;
height: 25px;
line-height: 25px !important;
line-height: 22px;
padding-left: 4px;
border: 1px solid #ccc;
margin-bottom: 2px;
}
#pathway_text img {
margin-left: 5px;
margin-right: 5px;
margin-top: 6px;
}
#buttons {
float: left;
margin: 0px;
padding: 0px;
width: auto;
}
ul#mainlevel-nav
{
list-style: none;
padding: 0;
margin: 0;
font-size: 0.8em;
}
ul#mainlevel-nav li
{
background-image: none;
padding-left: 0px;
padding-right: 0px;
float: left;
margin: 0;
font-size: 11px;
line-height: 21px;
white-space: nowrap;
border-right: 1px solid #cccccc;
}
ul#mainlevel-nav li a
{
display: block;
padding-left: 15px;
padding-right: 15px;
text-decoration: none;
color: #333333;
background: transparent;
}
#buttons>ul#mainlevel-nav li a { width: auto; }
ul#mainlevel-nav li a:hover
{
color: #fff;
background: #c64934;
}
#search_outer {
float: left;
width: 165px;
}
#search_inner {
border: 1px solid #cccccc;
padding: 0px;
height: 21px !important;
height: 23px;
overflow: hidden;
}
#search_inner form {
padding: 0;
margin: 0;
}
#search_inner .inputbox {
border: 0px;
padding: 3px 3px 3px 5px;
font-family: arial, helvetica, sans-serif;
font-size: 11px;
color: #c64934;
margin-top:3px;
}
#header_outer {
text-align: left;
border: 0px;
margin: 0px;
}
#header {
float: left;
padding: 0px;
margin-right: 2px;
width: 635px;
height: 150px;
background: url(../images/header_short.jpg) no-repeat;
}
#top_outer{
float: left;
width: 165px;
}
#top_inner {
border: 1px solid #cccccc;
padding: 2px;
height: 144px !important;
height: 150px;
overflow: hidden;
float: none !important;
float: left;
}
#left_outer {
float: left;
margin-top: 2px;
width: 165px;
}
#left_inner {
border: 1px solid #cccccc;
padding: 2px;
float: none !important;
float: left;
}
#content_outer {
padding: 0px;
margin-top: 0px;
margin-left: 2px;
/** border: 1px solid #cccccc; **/
float: left;
width: 635px;
}
#content_inner{
float: none !important;
float: left;
padding: 0;
padding-top: 2px;
margin: 0;
}
table.content_table {
width: 100%;
padding: 0px;
margin: 0px;
}
table.content_table td {
padding: 0px;
margin: 0px;
}
#banner_inner {
float: left;
padding: 0px;
height: 70px;
}
#poweredby_inner {
float: right;
padding: 0px;
margin-left: 0px;
height: 70px;
}
#right_outer {
margin-left: 2px;
width: 165px;
}
#right_inner {
float: none !important;
float: left;
border: 1px solid #cccccc;
padding: 2px;
}
.user1_inner {
border: 1px solid #cccccc;
float: none !important;
float: left;
margin: 0px;
padding: 2px;
}
.user2_inner {
border: 1px solid #cccccc;
float: none !important;
float: left;
margin: 0px;
padding: 2px;
}
table td.body_outer {
padding: 2px;
border: 1px solid #cccccc;
}
.maintitle {
color: #ffffff;
font-size: 40px;
padding-left: 15px;
padding-top: 20px;
}
.error {
font-style: italic;
text-transform: uppercase;
padding: 5px;
color: #cccccc;
font-size: 14px;
font-weight: bold;
}
/** old stuff **/
.back_button {
float: left;
text-align: center;
font-size: 11px;
font-weight: bold;
border: 3px double #cccccc;
width: auto;
background: url(../images/button_bg.png) repeat-x;
padding: 0px 10px;
line-height: 20px;
margin: 1px;
}
.pagenav {
text-align: center;
font-size: 11px;
font-weight: bold;
border: 3px double #cccccc;
width: auto;
background: url(../images/button_bg.png) repeat-x;
padding: 0px 10px;
line-height: 20px;
margin: 1px;
}
.pagenavbar {
margin-right: 10px;
float: right;
}
#footer {
text-align: center;
padding: 3px;
}
#footerNew {
font-size:12px;
padding: 3px;
margin-left:20px;
margin-right:8px;
border-top:1px solid #7f91b4;
padding-bottom:400px;
}
#footerLeft {
float:left;
margin-left:0px;
color:#5f5c5c;
font-size:10px;
padding-left:0;
}
#footerRight {
margin-top:-15px;
float:right;
margin-right:0px;
padding-right:0;
}
.contactRollover {
margin-right:0px;
display:inline;
float:right;
width:52px;
height:13px;
background: url(/silence/templates/rhuk_solarflare_ii/images/footerContactDual.gif) no-repeat;
text-indent:-9999px;
}
a{ outline:none;}
a.contactRollover:link, a.contactRollover:visited, a.contactRollover:active {
background: url(/silence/templates/rhuk_solarflare_ii/images/footerContactDual.gif) no-repeat;
}
a.contactRollover:hover {background-position:-52px 0;}
.legalRollover {
display:inline;
float:right;
width:93px;
height:13px;
background: url(/silence/templates/rhuk_solarflare_ii/images/footerLegalDual.gif) no-repeat;
text-indent:-9999px;
}
a.legalRollover:link, a.legalRollover:visited, a.legalRollover:active {
background: url(/silence/templates/rhuk_solarflare_ii/images/footerLegalDual.gif) no-repeat;
}
a.legalRollover:hover {background-position:-93px 0;}
#searchField {display:inline;}
#goButton {display:inline;}
.goButton {margin-top:3px;}
.goRollover {
display:inline;
float:left;
width:19px;
height:19px;
background: url(/silence/templates/rhuk_solarflare_ii/images/goDual.gif) no-repeat;
text-indent:-9999px;
}
a.goRollover:link, a.goRollover:visited, a.goRollover:active {
background: url(/silence/templates/rhuk_solarflare_ii/images/goDual.gif) no-repeat;
}
a.goRollover:hover {background-position:-19px 0;}
ul
{
margin: 0;
padding: 0;
list-style: none;
}
li
{
line-height: 15px;
padding-left: 15px;
padding-top: 0px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
background-position: 0px 2px;
}
td {
text-align: left;
font-size: 11px;
}
/* Joomla core stuff */
a:link, a:visited {
color: #c64934; text-decoration: none;
font-weight: bold;
}
a:hover {
color: #900; text-decoration: none;
font-weight: bold;
}
table.contentpaneopen {
width: 100%;
padding: 0px;
border-collapse: collapse;
border-spacing: 0px;
margin: 0px;
}
table.contentpaneopen td {
padding-right: 5px;
}
p.contentpaneopen {
padding-right: 5px;
}
table.contentpaneopen td.componentheading {
padding-left: 4px;
}
table.contentpane {
width: 100%;
padding: 0px;
border-collapse: collapse;
border-spacing: 0px;
margin: 0px;
}
table.contentpane td {
margin: 0px;
padding: 0px;
}
table.contentpane td.componentheading {
padding-left: 4px;
}
table.contentpaneopen fieldset {
border: 0px;
border-bottom: 1px solid #eee;
}
.button {
color: #c64934;
font-family: Arial, Hevlvetica, sans-serif;
text-align: center;
font-size: 11px;
font-weight: bold;
border: 3px double #cccccc;
width: auto;
background: url(../images/button_bg.png) repeat-x;
padding: 0px 5px;
line-height: 18px !important;
line-height: 16px;
height: 26px !important;
height: 24px;
margin: 1px;
}
.inputbox {
padding: 2px;
border:solid 1px #cccccc;
background-color: #ffffff;
}
.componentheading {
background: url(../images/subhead_bg.png) repeat-x;
color: #666666;
text-align: left;
padding-top: 4px;
padding-left: 4px;
height: 21px;
font-weight: bold;
font-size: 10px;
text-transform: uppercase;
}
.contentcolumn {
padding-right: 5px;
}
.contentheading {
height: 30px;
color: #002469;
font-weight: normal;
font-size: 16px;
white-space: nowrap;
padding-left:2px;
}
.contentpagetitle {
font-size: 13px;
font-weight: bold;
color: #cccccc;
text-align:left;
}
table.searchinto {
width: 100%;
}
table.searchintro td {
font-weight: bold;
}
table.moduletable {
width: 100%;
margin-bottom: 5px;
padding: 0px;
border-spacing: 0px;
border-collapse: collapse;
}
div.moduletable {
padding: 0;
margin-bottom: 2px;
}
table.moduletable th, div.moduletable h3 {
background: url(../images/subhead_bg.png) repeat-x;
color: #666666;
text-align: left;
padding-left: 4px;
height: 21px;
line-height: 21px;
font-weight: bold;
font-size: 10px;
text-transform: uppercase;
margin: 0 0 2px 0;
}
table.moduletable td {
font-size: 11px;
padding: 0px;
margin: 0px;
font-weight: normal;
}
table.pollstableborder td {
padding: 2px;
}
.sectiontableheader {
font-weight: bold;
background: #f0f0f0;
padding: 4px;
}
.sectiontablefooter {
}
.sectiontableentry1 {
background-color : #ffffff;
}
.sectiontableentry2 {
background-color : #f9f9f9;
}
.small {
color: #999999;
font-size: 11px;
}
.createdate {
height: 15px;
padding-bottom: 10px;
color: #999999;
font-size: 11px;
}
.modifydate {
height: 15px;
padding-top: 10px;
color: #999999;
font-size: 11px;
}
table.contenttoc {
border: 1px solid #cccccc;
padding: 2px;
margin-left: 2px;
margin-bottom: 2px;
}
table.contenttoc td {
padding: 2px;
}
table.contenttoc th {
background: url(../images/subhead_bg.png) repeat-x;
color: #666666;
text-align: left;
padding-top: 2px;
padding-left: 4px;
height: 21px;
font-weight: bold;
font-size: 10px;
text-transform: uppercase;
}
a.mainlevel:link, a.mainlevel:visited {
display: block;
background: url(../images/menu_bg.png) no-repeat;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #ccc;
text-align: left;
padding-top: 5px;
padding-left: 18px;
height: 20px !important;
height: 25px;
width: 100%;
text-decoration: none;
}
a.mainlevel:hover {
background-position: 0px -25px;
text-decoration: none;
color: #fff;
}
a.mainlevel#active_menu {
color:#fff;
font-weight: bold;
}
a.mainlevel#active_menu:hover {
color: #fff;
}
a.sublevel:link, a.sublevel:visited {
padding-left: 1px;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #c64934;
text-align: left;
}
a.sublevel:hover {
color: #900;
text-decoration: none;
}
a.sublevel#active_menu {
color: #333;
}
.highlight {
background-color: Yellow;
color: Blue;
padding: 0;
}
.code {
background-color: #ddd;
border: 1px solid #bbb;
}
form {
/* removes space below form elements */
margin: 0;
padding: 0;
}
div.mosimage {
border: 1px solid #ccc;
}
.mosimage {
border: 1px solid #cccccc;
margin: 5px
}
.mosimage_caption {
margin-top: 2px;
background: #efefef;
padding: 1px 2px;
color: #666;
font-size: 10px;
border-top: 1px solid #cccccc;
}
span.article_seperator {
display: block;
height: 1.5em;
}
/*added styles*/
#search {
height:30px;
width:190px;
background-color:#4c6696;
margin-top:0px;
}
.white {
color:#fff;
padding:5px;
font-size:11px;
}
/*Added from 3 col layout*/
p {margin: 0; padding: 8px;}
h2 {font-size: 1.2em; text-align: center; padding: 10px;}
.clear { clear: both; }
a {text-decoration: underline; font-weight: bold; color: #000;}
.alignright {margin-top: 0; text-align: right;}
.small {font-size: .9em;}
.wrapper {
margin: 0 auto;
width: 768px;
text-align: left;
/*background: #add8e6;*/
background: #ffffff;
border: 0px solid #000;
color:#5f5c5c;
}
/*** Below is the Tan hack, needed because the decorative side borders (thin black) on
.wrapper. It fixes the box model of IE5.x/win, making it display the same as other browsers. ***/
* html .wrapper {
width: 771px;
w\idth: 768px;
}
.outer {
border-left: 150px solid #ffffff;
border-right: 190px solid #ccd3e1;
background: url(images/blackline.gif) 100% 0 repeat-y;
}
/*** These are the visible side col BG's. The image BG is needed to replace a side border
on div.inner, which can't be used because of problems in Mozilla. The image substitutes
for the thin black divider between the right green col and the center col. If the black divider
is not wanted, the BG image may be removed. The Tan hack below feeds a IE a different
BG location, due to a BG placement variation.
***/
* html .outer {
background: url(images/blackline.gif) 565px 0 repeat-y;
}
.inner {
margin-left: -2px; /*** This fixes a small overlap problem in IE6. ***/
width: 620px; /*** This width is for non-IE browsers. Mozilla makes this necessary. ***/
border: 0px solid #000;
border-width: 0 0 0 0px;
}
/*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing
div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid
blowing the layout apart. IE gets the original 100% width as in the Livingstone layout. It blows
my mind that all this hacking is being caused by the mighty Gecko engine! (shakes head ruefully)
***/
* html .inner {
width: 100%;
}
.float-wrap {
float: left;
width: 567px;
margin-left: -150px; /*** Same length as left column width ***/
}
/*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left,
div.left is carried over into the proper position.
***/
.left {
margin-top:25px;
}
#line {
border-right:1px solid #000000;
height:100%;
}
.right {
float: right;
width: 190px;
position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/
background-color:#ccd3e1;
}
* html .right {
margin: 0 -190px 0 0; /*** IE gets this margin. ***/
}
.center {
margin-top:23px;
float: right;
width: 415px;
background: url(/silence/templates/rhuk_solarflare_ii/images/navBlueLine.gif) repeat-y 0 0;
}
.leftCenter {
width:2px;
}
.wide {
background-color: #002469; /* header and footer colours */
width: 100%;
border: 2px solid #000;
font-size: 1.4em;
font-weight: bold;
}
.wide p {padding: 5px;}
.top {border-width: 0 0 0px;
overflow:hidden;}
.bottom {border-width: 2px 0 0;}
/* Mozilla bug fixes */
html>body .inner, html>body .float-wrap {
border-bottom: 1px solid transparent;
}
.grey {
color:#5f5c5c;
}
.newsflash {
padding: 15px 10px;
width:175px;
color:#5f5c5c;
font-size: 10px;
}
.newsflashTitle {
color:#4c6696;
font-weight:bold;
margin-left: -7px;
font-size: 11px;
}
a.readon {
color:#002469;
background: url(/silence/templates/rhuk_solarflare_ii/images/redArrow.gif) no-repeat left;
font-size: 10px;
}
a.readon:hover {
color:#002469;
background: url(/silence/templates/rhuk_solarflare_ii/images/redArrow.gif) no-repeat left;
font-size: 10px;
}
a.readon:visited {
color:#002469;
background: url(/silence/templates/rhuk_solarflare_ii/images/redArrow.gif) no-repeat left;
font-size: 10px;
}
Any help would be greatly appreciated. Thanks. P.s. How do I post links to the site on here?...I tried but it removed the URL saying (URL address blocked: See forum rules) |
|||||||