|
CSS - I Need Selection Boxes With Style
the code below draws a nice hairline textbox
<input type='text' name='name' style="border:1px solid black; font-size: 10px; font-family: arial"> the colde below draws a nice hairline texarea <textarea name='msg' rows='10' cols='40' style="border:1px solid black; font-size: 12px; font-family: arial"> but the code below doesn't change anything <select name='sel' style="border:1px solid black; font-size: 10px; font-family: arial"> <option value='1'>first</option> <option vakue='2'>second</option> </select> Is there a way to remove this ugly shade from a selection menu as it exists for textboxes and textareas? Thanks for your help! Similar TutorialsHello experts! I would like to style the font, background-color and border (possibly more) for those little yellow boxes that appear when you hover over an element with the ALT or TITLE attribute set. Is there a default/built in selector for these, or does it require a round-about method? A lot of people have been asking about this at work I'd love to be the first to find the answer (with your help of course)! Hey all, i can't find out anywhere if i can use css to change the style of html menus and buttons...Id just like the menu to look a little different, ie different button and different colour background and text..etc any ideas or help would be appreciated thanks RF I am just wondering if there is a way to simply extend a style rule from one previously defined. For instance, if I have this rule: Code:
.textarea-box {
color: #990000;
background-color: #fff;
width: 375px;
height: 200px;
border: #000 solid 1px;
}
...if I want another text area rule to be the same except for one difference, the height should be 80px, do I have to write the rule out again with a new name, incorporating the new height, or is there some nifty way to just change the height in the new rule? Thanks for help with this. j9 I have a menu bar made up of <a href> elements that have a hover style of:
PHP Code: #mainMenu a:hover { color:#000000; background-color: #66c74c; padding: 1px 4px 1px 4px; margin: 1px 1px 1px 1px; } This will provide a green colored rollover visual as the user moves their mouse over the menu bar. I just added some JS today that will highlight the clicked (selected) menu so there is visual feedback of the section the user is in. For some reason, after setting the background color of the <a href> and color attributes, the HOVER: no longer functions. Here is the code to do the hilite where I pass the ID of the <a href> menu selection in the variable "menu": PHP Code: //--- Simplify setup by creating an array of the menus and hilight ID's --- var menus = ["menu1","menu2","menu3","menu4","menu5", "menu6","menu7","menu8","menu9","menu10"]; function J_hiliteMenu(menu) { //--- first make sure all the menu are hidden and unhilited --- for(i=0; i < menus.length; i++) { if (menus[i] == menu) theIndex = i; // Hold on to the chosen index position var obj = document.getElementById(menus[i]); if (obj == null) continue; // if menu is not available skip it obj.style.color = "#ffffff"; obj.style.backgroundColor = "#234fd7"; } //--- hilite the menu we're interested in --- var obj = document.getElementById(menu); obj.style.color = "#000000"; obj.style.backgroundColor = "#f8f400"; } Prior to hiliting the menu I un-hilite all the menus (since we may be switching from another). I think this is where the problem is. Maybe I need to redefine the rollover "hover" attribute for all elements during the un-hilite loop? Does anyone know how to set a HOVER: attribute using JavaScript? Thanks! I've recently tried to make it so that when you hover over something, another background appeared, and when I tried that, I already had a working Selected Page background, which stopped working when the hovering one was implemented. The code is: ul#menu li a:hover { color: #FFF; background: #0066CC url(menu_hover.png) repeat-x;} ul#menu li.selected a, ul#menu li.selected a:hover { color: #FFF; background: #1C2c3E url(menu_select.png) repeat-x:} I am quite new to css and wandering how I can add my Stylesheet selection on the page to a dropdown list so the user can choose his/her theme. I have the coding worked out for stylesheet selection and cookies saving and stuff just need help on how to display the 3 themes in a dropdwon list instead of 3 merged links on screen. On my main page atm I have the code: Code:
<?
include('includes/stylearray.php');
?>
<?
// WRITE OUT SWITCHER LINKS
while(list($key, $val) = each($styleSheets)){
echo "<a href='styleswitcher.php?SETSTYLE=".$key."'title='".$val["title"]."'>".$val["text"]."</a>";
}
?>
but this just lists them as 3 links, I need them in a dropdown list but cant seem to format it right to do that. Can anyone point me in right direction about splitting up that setstyle php bit into dropdown list instead of 3 ugly links? OK, this is a new one to me. I'm building my first CSS-only site, and am quite happy with the way it's going, but have discovered something quite odd today. When viewed with IE, the browser handles text selection VERY oddly, not allowing users to highlight a block of text to, say, copy to the clipboard. Try it yourself: http://www.theatrebayarea.org/v2/ Any idea what this is about? It's not a huge bug, but I'd like to be able to fix it. Needless to say, non-IE browsers handle it fine. -D So, I'm pretty new to all this, and any help is really key. So, on my site, I have a lot of rollover images. I may be breaking usability rules! The site has a lot of hand drawn elements that are supposed to act as nav. So, we implemented hand drawn nav that changes color when you rollover it. The problem is that when you click on those rollovers, a big dotted box appears around the selected one... it looks especially tacky if you don't go over to the next page. All of these elements have this box. Is there a way to tell the browser not to show that selection box?? If i have the following html: PHP Code: <div id="centre"> <h2>Header</h2> <p>Lorem ipsum appareat definiebas has eu. Eam consul ancillae ex.</p> <p> Sumo percipit instructior te mei. Est diceret convenire periculis ad, id vix facilisis sadipscing.</p> <p>Ei per aeque petentium tincidunt, posse inimicus ad sit.</p> </div> I want to select the first letter within the first <p> element, I've tried to do it using double pseudo-elements: PHP Code: div#centre p:first-child:first-letter { etc. } But this obviously won't work, because the <p> ain't first. I realise that i could do it very simply by just giving the first paragraph a class, but the use pretty much requires contextual selection, It seems the equivalent of second:child (which is what i want) will be available in css3, Even ideas would be great, Cheers I do relatively simple websites and I did a simple one for a client of mine and have a problem selecting text in a column. The website is, jeffwalterssafety.com I can't seem to even touch the text. It acts like an "image" when looking at it in Firefox/Chrome but I can select it in IE 7. Be gentle in the site's criticism... Also let me know if it's necessary to have my CSS file here. Thanks Here's the problem: aparently Opera places an inverse color highlight on links that receive the keyboard focus (see Javascript Development: How do I hide focus on Opera?), and I'd like to hide it. CSS3 property
Code: outline-style is useless here, and I've also tried setting the JScript Code: hideFocus property, but aparently this only works on IE. In fact, I've tried everything I can think of except blurring the link, which would completely defeat my purpose. I tried Javascript Development and got nothing, so maybe the answer is not Javascript. Is there possibly some proprietary CSS extension in Opera that would hide the highlight? If so, what is it and how do I use it? Hallo, I have in several cases serious problems with floating boxes. Not with the standard layout's like here described http://css.maxdesign.com.au/floatutorial/ but with more complicated layouts. I know to place the float attribute but have problems with setting the clear attribute. Does some know a good source where I find more information or documented examples ? Finally I can fix my problems, but it take so much time of testing... Thnaks Hi I am creating a new site for a friend in Wordpress ilovelifebecause.com I can usually muddle through in css to make changes, but i'm stumped at the moment. What I am trying to do is swap around the two cream coloured boxes so the larger one is on the right, the thinner one on the left and the blue box in the middle still. I've tried a number of things in the css file but can't seem to find the right method - can anyone help? many thanks in advance Paul hi, Im making a site, and i decided to use CSS instead of tables. I have used basic CSS before, but it gets abit harder when i start making boxes etc. Here is my code so far - layout.css - (one that gets included on each page) Code: @import "style.css";
body {
margin:10px 10px 0px 10px;
padding:0px;
}
#leftcontent {
position: absolute;
left:10px;
top:50px;
width:200px;
background:#fff;
border:1px solid #000;
}
#centercontent {
background:#fff;
margin-left: 199px;
margin-right:199px;
border:1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 201px;
margin-right:201px;
}
#shoutbox {
position: absolute;
right:10px;
top:50px;
width:200px;
background:#fff;
border:1px solid #000;
}
#rightcontent {
position: absolute;
right:10px;
top:50px;
width:200px;
background:#fff;
border:1px solid #000;
}
#banner, #footer {
background:#fff;
height:40px;
border-top:1px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
height:39px;
}
#footer {
background:#fff;
height:40px;
border-bottom:1px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
height:39px;
}
#banner h1 {
font-size:16px;
padding:10px 10px 0px 10px;
margin:0px;
}
#shoutbox, #rightcontent p {
font-size:10px
}
style.css - text formatting etc. Code: body {
font: 12px/1.2 Tahoma;
background:#ddd;
padding:0px;
margin:0px;
}
a {
text-decoration:none;
font-weight:bold;
color:#c00;
}
pre {
font-size:11px;
color:blue;
}
ol {
margin-right:40px;
}
li {
margin-bottom:10px;
}
p,h1,pre {
margin:0px 10px 10px 10px;
}
h1 {
font-size:14px;
padding-top:10px;
}
it produces a good layout, with a header, 3 coloums and a footer. whoever, the boxes expand at different rates and the footer doesnt move down. the header also doesnt expand. i know how i can fix this, but i dont know how to fix it without making it so that its locked at a resolution. i would like the site to exapand as the window is made larger. here is an image of what i get - and this is what i am aiming to acheive - as you can see, i want all the boxes to be the same length, which is defined by the size of the largest box. also, i want to create 2 or more boxes on the left, only the bottom of which gets made longer. on the first image you cannot see the extra box because it is covered by the other one :-/ i would be greatful for any help you guys can provide me thanks, dynamyt Im trying to replicate the vertical navigation style that is used on the Mozilla Firefox Website (as seen to the left). I have sucessfully done this useing images, with the exclusion of a space problem between the items and the end images in FireFox. I am using the strict.dtd and am frustrated with this problem. Iff anyone can help me create a nav with this style that would be wonderful. Here is the css im using: Code:
.cssnavend {
position:relative;
font-family: arial, verdana, helvetica, sans-serif;
display: block;
width: 209px;
height: 9px;
margin: 0;
margin-bottom:0px;
padding: 0;
}
.cssnav {
position:relative;
font-family: arial, verdana, helvetica, sans-serif;
background-image: url(images/but-over.jpg);
background-repeat: no-repeat;
display: block;
width: 209px;
height: 31px;
margin: 0;
margin-bottom:0px;
padding: 0;
}
.cssnav a {
display:block;
font-size: 11px;
width: 209px;
height: 31px;
display: block;
float: left;
margin: 0;
padding: 0;
color: #096CCE;
text-decoration: none;
}
.cssnav img {
width: 100%;
height: 100%;
border: 0;
}
.cssnav a:hover{
color: #000;
}
* html a:hover {
visibility:visible
}
.cssnav a:hover img{
visibility:hidden
}
.cssnav span {
position:absolute;
left:7px;
top:7px;
margin:0;
cursor: pointer;
}
#box {
margin-top: 10px;
padding: 0;
width: 209px;
display: block;
}
#boxtop {
width: 209px;
height: 11px;
}
#boxcontent {
width: 209px;
background: #DFE5EB;
}
#boxbottom {
width: 209px;
height: 11px;
}
#boxtext {
width: 209px;
background: #DFE5EB;
padding: 2px;
}
The following code is me testing my css. The first group is useing the cssnav styles. The 2nd group is using the box styles. The 3rd group is a try at making a content box with rounded corners that is a spacific width. Unfortunatly, the content of the box will not wrap to the width of the box, instead it continues on 1 line and outside the box. Code: <div class="cssnavend"><img src="images/but-top.jpg"></div> <div class="cssnav"><a href="index.php"><img src="images/but-up.jpg" /><span>Home</span></a></div> <div class="cssnav"><a href="#"><img src="images/but-up.jpg" /><span>This is a test</span></a></div> <div class="cssnav"><a href="phpbb/index.php" target=_blank><img src="images/but-up.jpg" /><span>Forum</span></a></div> <div class="cssnavend"><img src="images/but-bot.jpg"></div> <br><br> <div class="box"> <div class="boxtop"><img src=images/but-top.jpg></div> <div content="boxcontent"> <div class="cssnav"><a href="#"><img src="images/but-up.jpg" /><span>Home</span></a></div> <div class="cssnav"><a href="#"><img src="images/but-up.jpg" /><span>This is a test</span></a></div> <div class="cssnav"><a href="#"><img src="images/but-up.jpg" /><span>Forum</span></a></div> </div> <div class="boxbottom"><img src=images/but-bot.jpg></div> </div> <br><br> <div class="box"> <div class="boxtop"><img src=images/box-top.jpg></div> <div class="boxcontent"> <div class="boxtext">This is some text inside of the box. This text should wrap and be padded.</div> </div> <div class="boxbottom"><img src=images/box-bot.jpg></div> </div> Thank you all who help. Hello: I'm trying to place two drop down boxes at the right of my page. When I view the pages in Firefox and Internet Explorer, they are so far off. You can view the page yourself by visiting: http://www.informedmortgage/100-financing.html I've tried changing widths, margins, etc and am having no luck. I can use some help. I hope someone can help me out. Thank you. Back to top I have 4 or 5 form controls that I want in a horizontal line. Each form control has a label above it, and I'm using <br>s to position the form control below the label. I thought that wrapping each "label<br>form control" with a <span> would turn the whole thing into an inline block, where the next <span> would line up next to it, like the next <td> in a <tr>. Code:
<div id=secondline>
<span id=ed>
<b>Event Definition</b>:<br>
<textarea name=inject cols=45 rows=6></textarea>
</span>
<span id=after>
<b>After</b><br>
<select name=next size=8 multiple>
<option value=0>0
...
<option value=100>100
</select>
</span>
</div>
but, alas, it doesn't work like that. How can I get Code: <tr> <td>label<br>form_control</td> <td>label<br>form_control</td> </tr> behavior without using tables? Hello, I created a site with floating frames and it looks good in IE6 and FF/Mozilla. But I have one problem: I use in my dynamic layout an ID more then once (thats not OK according w3 validation) I tried to do something with pseudo classes but this works not really goed. My "uni" thumb box is used on two diff. pages The skyscraper: http://www.all4yourwebsite.com/ and the result/search page: http://www.all4yourwebsite.com/search.php I know there is a solution, but because the tumbbox have to be much flexible the solution must be simple as the current (wrong) solution. Anyone an idea? My boxes line up horizontally perfectly in Firefox but not in IE7 (not suprisingly). Because of the rules I can't show you the link but the html places two boxes side by side lined up so that they are the same distance from the top. It looks right in Firefox but IE7 drops the right box about 10 pixels or so. My Html is this: <div id="newsboxleft"> <div id="newsboxright"></div></div> My CSS is this: #newsboxleft { margin: 10px auto; position: relative; top: 0px; left: -187px; width: 350px; height: 142px; background: url(../images/newsboxleft.jpg) repeat-x top; border-top: 0px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-bottom: 1px solid #000000; padding: 0px; clear: both; } #newsboxright { margin: 10px auto; position: relative; top: 0px; left: 373px; width: 350px; height: 142px; background: url(../images/newsboxright.jpg) repeat-x top; border-top: 0px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-bottom: 1px solid #000000; padding: 0px; clear: both; } I hope someone can help. Thanks. Hi guys, I am trying to achieve the following: Box 1 | ------ Box 2 | ** With a 3rd box to the right of box 1&2 I have got this far but cant work out how to do 'box2' Code: <div id="box2"> box 2 </div> <div id="box3"> box 3 </div> Code:
#box2 {
float: left;
padding: 10px;
margin: 20px;
background: #ffffff;
width: 100px;
/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 100px;
}
html>body #box2 {
width: 100px;
/* ie5win fudge ends */
}
#box3 {
float: right;
padding: 10px;
margin: 20px;
background: #ffffff;
width: 100px;
/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 100px;
}
html>body #box3 {
width: 100px;
/* ie5win fudge ends */
}
Can anyone possibly help? |
|||||||