Printable View
Hello there!
I would like to know how can I create this box using HTML and CSS?
http://i56.tinypic.com/nay5v.png
I have tried and some how I managed to make this: http://t-clicks.com/blog/ but this is now what I'm looking for can someone help please?
huh no one?
Please explain your question in more detail.
What are you trying to accomplish? What have you attempted? What problems have you encountered?
what do you mean by "box"? the search box? the menu? please explain.
I have actually managed to sort it out and you can chck it live at http://t-clicks.com/blog! but I would like to add something in menu and that is a hoover effect you can have a look at the image below for reference
http://i53.tinypic.com/9vl0k1.jpg
maybe something like? (I'm assuming you're talking about your nav menu; I couldn't find anything on your page that looked like the image you posted.)Code:#cat-nav a:hover{ background: url('new.jpg') no-repeat top right; }
Can it only be possible through image but not through css color?
you can change the background color using css. If you want something like that little yellow box that says "NEW" on hover, it would be easier to use an image.
That's nice to know but this code doesn't even work!
it's difficult to know what you're talking about when you give no explanation.
Please post a link to the page on your site that contains the problematic code so we can check it out.
can you also explain what "doesn't work" ?
for example, if I add a :hover rule to your menu, it works fine. Are you seeing something different? Please be as detailed as possible with your explanations.
It did works fine to me as well now. Your no repeat top right attribute did not worked with the background image code. I removed no repeat top right and it worked fine. Still couple of questions how can I make background image active on selected category? Let's say someone clicked on category Apple so the bg image should have to be active on Apple and hoovering on other. Similarly if someone clicked on Social media so the bg image should have to be active on Social media and hoovering on others. How do I do that please? You can check the live bg image on http://t-clicks.com/blog
Thanks.
for example:HTML Code:<ul id="cat-nav" class="nav">
<li class="cat-item cat-item-1"><a href="http://t-clicks.com/blog/?category_name=uncategorized" title="View all posts filed under Apple">Apple</a>
</li>
<li class="cat-item cat-item-3"><a href="http://t-clicks.com/blog/?category_name=helo" title="sdad">Featured</a>
</li>
<li class="cat-item cat-item-4"><a href="http://t-clicks.com/blog/?category_name=business" title="View all posts filed under Buisness & Marketing">Buisness & Marketing</a>
</li>
<li class="cat-item cat-item-5"><a href="http://t-clicks.com/blog/?category_name=gaming" title="View all posts filed under Gaming">Gaming</a>
</li>
<li class="cat-item cat-item-6"><a href="http://t-clicks.com/blog/?category_name=mobile" title="View all posts filed under Mobile">Mobile</a>
</li>
<li class="cat-item cat-item-7"><a href="http://t-clicks.com/blog/?category_name=social-media" title="View all posts filed under Social Media">Social Media</a>
</li>
<li class="cat-item cat-item-8"><a href="http://t-clicks.com/blog/?category_name=startups" title="View all posts filed under Startups">Startups</a>
</li>
<li class="cat-item cat-item-9"><a href="http://t-clicks.com/blog/?category_name=tech-gadgets" title="View all posts filed under Tech & Gadgets">Tech & Gadgets</a>
</li>
<li class="cat-item cat-item-10"><a href="http://t-clicks.com/blog/?category_name=video" title="View all posts filed under Video">Video</a>
li>
<li class="cat-item cat-item-11"><a href="http://t-clicks.com/blog/?category_name=tutorials" title="View all posts filed under Tutorials">Tutorials</a>
</li>
</ul>
also:Code:#cat-nav li{ background: red; }
/* normally, each <li> will have a red background. */
#cat-nav:hover li{ background: blue; }
/* when you mouse over the menu, they will have blue backgrounds */
#cat-nav li:hover{ background: green; }
/* and the specific link you hover over will have a green background. */
/* this won't work "as is" in all browsers (e.g., IE), but it helps explain the concept. */
"active" only applies during the click. after the mouse button goes up, the item is no longer active. if you want the new background to remain after the click, you'd need to use a different solution (likely involving javascript).
Yes, Everything works like you said! But the last thing you did not mention how to do it! Like if I want it to be active even after the mouse goes up! Do you have any code for that please? :) Sorry for bothering again and again!
you'll likely need to use javascript. There are many approaches, usually involving adding a special class name to the item you want changed. If you use jQuery, for example, you could use theaddClass()function when the link is clicked on.
look into it, give it a try, and let us know how it goes.
What kind of Box you are taking about.
Please read through the thread before posting. We're talking about the <li>'s in his site menu.Quote:
Originally Posted by DuncanCox