|
CSS - Applying Style To Searchbox Border
I would like to create an effect similar to the one found on http://www.macromedia.com that when you click in the search box, the edge of the searchbox changes color.
I know how to change the color of the box, but I do not know how to make the box switch whenever it is clicked on or in focus. Can anyone help me? Similar TutorialsSidebar div's background is messed up. Its background should be black until the end, but its cut short. Check it he http://www.refinethetaste.com/html/default.asp?Section=products&CATEGORYID=4 PHP Code: #products .sidebar { background: #000000; color: #CCCCCC; padding: 10px 0 0 0; } #products .sidebar ul { margin: 0; padding: 0; list-style: none;} #products .sidebar li { display: block; float: left; width: 124px; padding: 10px 5px 10px 15px;} #products .sidebar li ul { line-height: 15px; } #products .sidebar li li { display: list-item; background: url(../images/img07.gif) no-repeat left 50%; padding: 0 0 0 10px;} #products .sidebar h2 { font-size: 12px; margin: 0px; color: #FFFFFF;} #products .sidebar a { font-size: 10px; text-decoration: none; color: #CCCCCC;} #products .sidebar a:hover { text-decoration: underline;} #products .clear { clear:both; height:1px; width:1px; overflow:hidden; } PHP Code: <div class="clear"></div> <div class="sidebar"> <ul> <li> <h2>Lorem Ipsum</h2> <ul> <li><a href="#">Fusce dui neque fringilla</a></li> <li><a href="#">Eget tempor eget nonummy</a></li> <li><a href="#">Magna lacus bibendum mauris</a></li> <li><a href="#">Nec metus sed donec</a></li> <li><a href="#">Magna lacus bibendum mauris</a></li> </ul> </li> <li> <h2>Recipient</h2> <ul> <li><a href="#">Family</a></li> <li><a href="#">For Him</a></li> <li><a href="#">For Her</a></li> </ul> </li> <li> <h2>Price</h2> <ul> <li><a href="#">Under $50</a></li> <li><a href="#">$50-$75</a></li> <li><a href="#">$75-$150</a></li> <li><a href="#">$150 & Up</a></li> </ul> </li> </ul> </div> <div class="clear"></div> hey guys i have this so far
Code: div#navbar2 {
height: 30px;
width: 100%;
border-top: solid #000 1px;
border-bottom: solid #000 1px;
background-color: #99b3b4;
text-align:center;
}
div#navbar2 ul {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #FFF;
line-height: 30px;
white-space: nowrap;
}
div#navbar2 li {
list-style-type: none;
display: inline;
}
div#navbar2 li a {
text-decoration: none;
padding: 7px 10px;
color: #FFF;
}
div#navbar2 li a:link {
color: #FFF:
}
div#navbar2 li a:hover {
font-weight: bold;
color: #000000;
background-color: #e4ebeb;
}
but what i can figure out is how to show the link they are on as a selected button so having the button be red if they are on that link... Code: <div id="navbar2"> <ul> <li><a href="index.php?page=update">Basic</a></li> <li><a href="link2.html%20">Button 2</a></li> <li><a href="link3.html%20">Button 3</a></li> </ul> </div> Please can anyone tell me why my style sheet is not applying to this page http://www.on-line-biz.com ? This is killing me! The border of a DIV top is working perfectly on FF but not applying on top in IE 6+7. Here are the class attributes: {padding:1px 7px 3px; font-size:16px; border-color:#555555; border-style:solid; border-width:1px 1px 0px; text-decoration:none; color:#425366; background-color: #abd3ff; font-weight:bold;} Not sure if the problem is on this class or in anything that affecting it. Any suggestions will be great. Ehud hey i have applied a style to a select tag which should be displaying a red border... but it doesn't work....however THIS WORKS IN OPERA 7 but doesn't work in IE and Mozilla :S go to the site and click submit straight away...as you can see there is no border applied to the second drop down box! does anyone no how to apply a border to a select tag site is located at http://studentwork.qantm.com.au/pking/website/feedback.cfm cheers Hello All, following is my code Code: <html>
<head>
<style type="text/css">
.test {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #ff0000;
font-weight: bold;
}
</style>
</head>
<select name="slt" >
<option class="test">value1</option>
<option>value2</option>
<option>value3</option>
</select>
</html>
In the above code i am trying to apply style for first option i got the color for first option but not the size and weight. The font-size and font-weight attributes are not applied.... can some one help me out in this... Please help me ASAP Thanks in Advance Ramesh I was reading that if you wanted to apply the same style to more than one rule, you can use a comma, but I'm having a weird quirk happen when I do that. for example: h1, h2 {color:olive;} For some reason, it's only applying to h2. Even when I place it so that there are no parent elements. I've validated the xhtml and the css. What's the deal? I'm a total newbie to CSS and web design in general. Sorry if I'm using the wrong terms for things. I'm a little puzzled by this weird display bug by IE7, this bug doesn't occur in IE6. It had to do with the DIV's CSS's border-style. If you set it to double then you notice some random bugs with it. Some of the time, the border is displayed without a problem. Some of the time, it is displayed with some gaps in the line as if it is not being drawn upon. Some of the other time, it is not displayed at all. I noticed if I switch from one tab to another then back, the border appeared as if nothing had happened. I also noticed that if I open the view source that overlapp the web browser then closed it, the border appeared as if nothing had happened. How do you fix that problem? Thanks... heya! sorry if this is a real stupid quiestion/in the wrong area, im a bit new to css and this forum! Im wondering if there is any way to have a border only apply for part of a box... ie only the first/last 50% or 250px of the top and bottom borders. Hope this makes sence. Any help appriciated, even if it is to say it cant be done. I want to apply this style to a Table TD cell: Code: border-bottom: 1px solid #D2D7DD; It works fine in firefox but not IE, as with many things. Any get-around for this, something that IE would be happy with? Thanks. I have the following code in my page for the links styles: Code: a:link, a:visited, a:active {
font-weight: bold;
color: #000099;
text-decoration: none;
background-color: #C4E4F7;
border: 1px solid #000066;
}
a:hover {
font-weight: bold;
color: #FC6103;
text-decoration: none;
background-color: #FFEAD5;
border: 1px solid #974B00;
}
The thing is, that in firefox, the code works fine, but on IE the top and bottom border sections are not displayed... Can't understand why... Any ideas how to fix it? Hello, Code: <table border="1"> <tr> <td class="norightborder"> Two cells, </td> <td class="noleftborder"> but no borders between them. </td> </tr> </table> Code: .noleftborder {
border-left-style: none;
}
.norightborder {
border-right-style: none;
}
I notice a pixel gap between the two cells and it's annoying me. How do I get rid of it? Thanks Rogier I have the following defined in my css file: Code:
table {
border:1px dashed #999;
}
And the following code interspersed throughout other parts of my code: PHP Code: echo "<table nowrap border=\"0\">"; The problem I have is that the border is still appearing around these tables where I have specified no border. As I understand, the inline style should take precedence, right? Is this a php issue? Or am I doing something else wrong? Hi, I have created a component which is wrapped inside a div element. Is it possible to set the border of the div element similar to the borders shown by default for a select drop down? thanks and regards, Sim085 I am at a total loss on this one. I'm trying to create a simple inline unordered list menu - no problems there - I've done that plenty of times. However, this time I would like my menu to have a border around it instead of being a plain box. As soon as I add the 'border-style:solid' modifier to the div, the text misaligns straight down, roughly 15px lines, out of the box. This happens on Firefox (and apparently on Opera as well, though I haven't checked that one myself). At this point I've stripped the page to bare bones, switched from transitional to strict, tried float vs not, tried margins vs 0 margins, and padding vs 0 padding, relative vs absolute, and attempted to manually shift the text through negative positions as well. No joy. Css: Code: /* Navigation */
#nav {
width: 821px;
height: 18px;
border: 1px;
border-style: solid;
border-color:red;
}
#nav ul {
}
#nav li {
display:inline;
float:left;
background-color:#9E0C0C;
text-align:center;
color:white;
font-family: arial, san-serif;
font-size: 14px;
font-variant: small-caps;
}
and page: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" > <link href="style.css" rel="stylesheet" type="text/css" media="screen"> </head> <body> <div id="nav"> <ul> <li>Home</li> <li>XXX</li> <li>XXX</li> <li>CCC</li> <li>HHH</li> <li>JJJ</li> <li>kkk</li> <li>KKK</li> </ul> </div> </body> </html> (As I said, I've stripped it to absolutely nothing else.) Any suggestions would be welcome. (ETA: Also tried changing text size in case a too-large font size was making the text 'pop out' of the box. That is also not it.) The CSS in this file:
Code: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <title>Comments on 2005-02-09: February 9, 2005 - Final Game</title> <meta http-equiv="Content-Type" content="application/xhtml+xml; encoding=UTF-8;" /> <link rel="stylesheet" type="text/css" href="comments.css" /> </head> <body> <h2>Posting on 2005-02-09: February 9, 2005 - Final Game in <a href="refresh.php" id="title">XMLBlog</a></h2> <div class="entry"> <p class="normal">I woke up like usual. <em class="entry">My mom couldn't find my lunch bag, so I had to show her.</em></p> <p class="happy">On the way to school, I nearly fell asleep on the bus. <em class="entry">Surprisingly, I felt more rested than before.</em></p> <p class="normal">We had a sub in Physics, along with homework. <span class="happy"><em class="entry">While doing my homework, I talked to this guy that sits nearby.</em></span></p> <p class="happy"><span class="sad">At the beginning of class, I tried to switch with someone to sit near a friend, but our sensei didn't allow it.</span> We just did reading in Japanese, <em class="entry">where I was better than a majority of the class as far as Katakana is concerned</em>. Also, we looked at pizza menus and added up our cost in <ruby><rb>円</rb><rt>エン</rt></ruby>. <em class="entry">some of them looked so delicious, which made me hungry.</em></p> <p class="normal">We watched a video in health, and nothing else.</p> <p class="happy">I basically had English off, since I already finished all of my work. <em class="entry">I also found out that my pre-write can count as a rough draft, since I didn't really do one. Along with that, I get to turn in my completed vocabulary in a day late, since I proved to her that I had it done.</em> For the most part, I just read while listening to music.</p> <p class="sad">Lunch alone, again.</p> <p class="normal">Math was comprised mainly of continuing work on our investigations. <em class="entry">This one didn't have proofs, which made it easier.</em> Due to our teacher talking about homework, we didn't move onto the next one.</p> <p class="normal">We started off with playing our warm-ups for Solo & Ensemble, then went to free time. <em class="entry">For the most part, I goofed off.</em> <span class="hider">Also, someone was trying to lift a stand up, but the top flew off and hit them in the chin, hard.</span></p> <p class="sad">Once home, I found that the euphonium I was waiting for didn't arrive yet.</p> <p class="normal">I had a normal trombone lesson this time. <em class="entry">I made somewhat considerable progress, and was taught better hand positions.</em></p> <p class="happy"><strong class="entry">The euphonium came!</strong> It took a while, but it finally arrived. <em class="entry">The nice <strong class="entry">Bach 5GS</strong> my mom bought was too small, since we thought the instrument would be a small-shank. Still, the instrument came with a 6 1/2 AL from Jupiter, which I shall use for the time being.</em></p> <p class="happy">Later on, I found out that there was a 5GS there. <em class="entry">Earlier, I had called Mills about it, and they eventually replied saying there was one.</em> My dad and I went there and bought it.</p> <div class="story"> <div class="title">Final Game (Bothell Lost N/A)</div> <div class="storybody"> <p class="normal">After a quick lyre readjustment for my new euphonium, my dad and I dashed off to the school...</p> <h>Enter: Eighth Graders</h> <p class="normal">When I got there, I found out how <em class="entry">huge</em> the band was. <em class="entry">There even was another baritone player from my old school!</em> My section commented on how good my instrument looked. <em class="entry">When we warmed up, he also commented on the great tone it had.</em></p> <p class="normal"><span class="sad">We had trouble cramming into the stands, so we had to cover a full section and around 1/3 of another.</span> Throughout the entire game, I told the eighth grader some things to remember, and cracked a few jokes with him.</p> <p class="normal">When the game actually started, we got into our final setup. <span class="sad"><em class="entry">I was near someone that annoyed me.</em></span> <em class="entry">Also, I talked to the 'leader' of the trumpets a bit, as well.</em> The game for our team was going decently. </p> <p class="sad">The guy in front of me got more annoying. He also hit my section where it hurts most. <em class="entry">I kind of got back at him when he snuck my cell phone away from me.</em> Still, he cracked jokes no matter what. <span class="normal"><em class="entry">Also, the group thrusts were a little messy, but decent to say the least. It <strong class="entry">may</strong> be that the eighth graders haven't gotten used to them yet.</em></normal></p> <p class="normal">At half-time, the little girls danced up with the cheerleaders. <em class="entry">Someone made an insightful comment about how their parents paid them to be sluts.</em> <span class="happy"><em class="entry">Also, the trumpet leader danced and sang with them, and a few of us joined in.</em></span> Of course, we played a few songs. The percussion played, and we did our thing.</p> <p class="happy">Rest came with the third quarter. <span class="sad">Though, when I went to buy drinks, they only had <strong class="entry">Powerade</strong>, which was <em class="entry">okay</em></span> Once back in the stands, I shared the candy I bought with a couple of friends while we chatted. Also, I performed the <strong class="entry">Baritone Test</strong> on the eighth grader's instrument, which proved it as a euphonium. <em class="entry">Though, it still seems too light and small to be a real euphonium. It's the same brand as mine, but a lower-end model.</em></p> <p class="normal"><span class="sad">Our team was losing badly.</span> Still, we kept up our little spirit through it all. It all ended as usual.</p> <p class="happy">My section and I talked on the way back from our last game as sophomores. Also, we played us some <strong class="entry">Oompa</strong>!</p> </div> </div> <p class="normal">After the game, I wondered if there was a Denny's party. My dad and I checked twice, most likely finding it as false; so I went home.</p> </div><p>No comments</p><hr /><form action="postcomments.php?ie=&title=February 9, 2005 - Final Game&date=2005-02-09" method="post" name="comment" id="main"> <div class="right"> <img src="comments_files/right_main_bar.png" alt="right_side" /> </div> <div class="left"> <img src="comments_files/left_main_bar.png" alt="left_side" /> </div> <div class="center"> Date: <input type="textarea" class="upper" name="date" value="2005-02-09" readonly="readonly" /> Title: <input type="textarea" class="upper" name="title" value="February 9, 2005 - Final Game" readonly="readonly" /> <br /> Name: <input type="textarea" name="name" class="lower" /> E-mail: <input type="textarea" name="e-mail" class="lower" /> </div> <div class="comment"> <input type="textarea" name="comment" class="text" /> <input type="submit" value="Post!" class="click" /> </div> </form> </body> </html> Applied this as a div id and a div class, neither of which apply css to the links and text properly. Also hashed all selectors. Some of these are to be followed by regular text/explanations. What am I missing here? Code: .cont { /*container*/
position: relative;
background: #FBFBFB;
float:left;
border: 1px solid #D3D3D3;
width: 195px;
color:#999;
text-decoration: none;
}
#vt-r {
color:#999999;
text-decoration: none;
font-size: 0.90em;
font-weight: 400;
margin: 10px 0px 7px 15px;
}
.vt-r:link {
color:#3366CC;
text-decoration: none !important;
font-size: 0.70em;
font-weight: 400;
padding: 15px 5px 0 0;
margin: 10px 0px 7px 15px;
}
.vt-r:hover {
color:#333;
text-decoration: underline;
}
<div class="cont">
<div id="vt-r">
<a href="/urladdress.htm">LINK1</a><br>
Example text.<br>
<a href="/urladdress.htm">LINK2</a><br>
<a href="/urladdress.htm">LINK3</a><br>
</div>
</div>
Greetings Not sure about the best way to go about this. I have an Unordered List that has a set height for the List Items. Like so: Code:
#left ul {
padding: 0px;
list-style-type: none;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#left ul li {
text-align: center;
float: left;
margin-right: 20px;
height: 200px;
margin-bottom: 20px;
}
This works fine for most of the pages, but there is one where I really need the height of the <li>'s to be 350px. I tried just adding a class like Code:
.comics {
height: 350px;
}
I tried adding this to the <li> Code:
<li class="comics"><a href="#"><img src="images/comics/thumbnails/HeldvsHeldin3_sm.jpg" alt="" width="250" height="350">
</a></li>
and also just a <span> Code:
<li><span class="comics"><a href="#"><img src="images/comics/thumbnails/HeldvsHeldin3_sm.jpg" alt="" width="250" height="350">
</a></span></li>
but it still kept the 200px height. Do I need to make a whole new <li> code or am I missing something? 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 css stylesheet and an xslt stylesheet. In my xml doc i apply the xslt stylesheet, but how do i also apply the css? thanks |
|||||||