[flip4life]

Hello, I am having a lot of trouble on something that should be rather simple. I am trying to make a "Recently Added" section of my website where I update it with the date and when you click that, it uses Jquery to slide down and show my hidden "div" which shows all of the recently made pages etc.

The problem is, I want a simple white bar going across like I currently have. I used this CSS coding to make it:

a.recently_added_button {
	margin-top: 2px;
	color:#F00;
	width:600px;
	background:#FFF;
	padding-left:10px;
	padding-top:1px;
	padding-bottom:2px;
	border-bottom: 1px solid #CCC;
}
a.recently_added_button:hover {
	height:20px;
	text-decoration: none;
	color:#F00;
	background:#FFF url(images/button_bg_o.jpg) no-repeat;
	border-bottom: 1px solid #999;
}

and the HTML coding I have calling over to it is this:

 <span class="toggle">
		<a style="cursor:pointer;" class="recently_added_button">Wednesday, June 29th 2011 <img src="/includes/images/double_down_arrow.png"></a></span>
                     <div class="hiddenDiv">              
                     <table width="600px">
 ETC...
    </div>

I simply cannot get the width of the top button to be the 600px I am telling to to be. It is only as long as the text I have typed into it which is not what I want it to do. For an idea of how I want it to look, it is kind of like the "messages" box in your youtube account, slightly different though.

I am able to get it HOW I want it to look by making the padding in the CSS

padding-right:415px;

but then it still depends on how much text is typed for the width to be shown.

here is the page that I am having trouble with, the top is with the EXACT coding shown above, and below is how I WANT it to look, accomplished by using the padding-right code that obviously is not working entirely right either:

http://www.northtown...ently_added.php

Thanks so much guys! [:

This post has been edited by flip4life: 30 June 2011 - 03:38 AM

[arvindthakur]

Can you tell in which browser you are getting the problem?

This post has been edited by arvindthakur: 30 June 2011 - 04:19 AM

[flip4life]

arvindthakur, on 30 June 2011 - 04:16 AM, said:

I think your border-bottom-style syntax is wrong.
use this border-bottom-style:solid;

Thanks, ill go and switch it although it does work. That would in no way effect the problem I am currently having though right?

[arvindthakur]

I think this is not possible with anchor tag...

use button instead of anchor to accomplish your need.

[flip4life]

arvindthakur, on 30 June 2011 - 04:23 AM, said:

I think this is not possible with anchor tag...

use button instead of anchor to accomplish your need.

I'm sorry, would you be able to give me an example of what you are talking about? I am somewhat confused by that?

Appreciate it! [:

[arvindthakur]

Ok Try this...

CSS PART----

input.button { color: #FFFFFF;
             background-color: #e50707;
             font-weight: bold;
             font-size: 8pt;
             width:600px;
             padding: 3px;
             margin: 0px;
             border-top-style: none;
             border-right-style: none;
             border-bottom-style: none;
             border-left-style: none;
           }

HTML PART---

<input type="button" class="button"  value="recently added button" />

You can change the css properties acc. to your need.

[flip4life]

arvindthakur, on 30 June 2011 - 04:49 AM, said:

Ok Try this...

CSS PART----

input.button { color: #FFFFFF;
             background-color: #e50707;
             font-weight: bold;
             font-size: 8pt;
             width:600px;
             padding: 3px;
             margin: 0px;
             border-top-style: none;
             border-right-style: none;
             border-bottom-style: none;
             border-left-style: none;
           }

HTML PART---

<input type="button" class="button"  value="recently added button" />

You can change the css properties acc. to your need.

I appreciate the help, but I cannot do exactly what I am trying to do with this code. For starters, I have it calling in an image within the text. Apparently when using a button, you cannot call in an image within the text.

I also cannot figure out how to make it different when hovering over the button either, but it is kind of a deal breaker that I cannot do it this way if I am not able to call in an image next to the text.

My idea is pretty much exactly what YouTube does for the "underbar info" of a video, it is a few words, picture of an arrow being called into it, and it does the simple javascript.

I know there has to be a way that this can be done and it has to be fairly easy i'm assuming. Just must be missing something, not quite sure what though

Appreciate your effort very much though.

[flip4life]

Bah, any other ideas? I have tried numerous different methods with still no success