7 Replies - 792 Views - Last Post: 30 June 2011 - 05:04 PM

#1 flip4life  Icon User is offline

  • D.I.C Head

Reputation: -2
  • View blog
  • Posts: 50
  • Joined: 29-April 11

Simple CSS made Buttons width cannot be set

Posted 30 June 2011 - 03:34 AM

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


Is This A Good Question/Topic? 0
  • +

Replies To: Simple CSS made Buttons width cannot be set

#2 arvindthakur  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 133
  • Joined: 07-June 11

Re: Simple CSS made Buttons width cannot be set

Posted 30 June 2011 - 04:16 AM

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

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

Was This Post Helpful? 0
  • +
  • -

#3 flip4life  Icon User is offline

  • D.I.C Head

Reputation: -2
  • View blog
  • Posts: 50
  • Joined: 29-April 11

Re: Simple CSS made Buttons width cannot be set

Posted 30 June 2011 - 04:18 AM

View Postarvindthakur, 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?
Was This Post Helpful? 0
  • +
  • -

#4 arvindthakur  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 133
  • Joined: 07-June 11

Re: Simple CSS made Buttons width cannot be set

Posted 30 June 2011 - 04:23 AM

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

use button instead of anchor to accomplish your need.
Was This Post Helpful? 0
  • +
  • -

#5 flip4life  Icon User is offline

  • D.I.C Head

Reputation: -2
  • View blog
  • Posts: 50
  • Joined: 29-April 11

Re: Simple CSS made Buttons width cannot be set

Posted 30 June 2011 - 04:27 AM

View Postarvindthakur, 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! [:
Was This Post Helpful? 0
  • +
  • -

#6 arvindthakur  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 133
  • Joined: 07-June 11

Re: Simple CSS made Buttons width cannot be set

Posted 30 June 2011 - 04:49 AM

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.
Was This Post Helpful? 0
  • +
  • -

#7 flip4life  Icon User is offline

  • D.I.C Head

Reputation: -2
  • View blog
  • Posts: 50
  • Joined: 29-April 11

Re: Simple CSS made Buttons width cannot be set

Posted 30 June 2011 - 05:04 AM

View Postarvindthakur, 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.
Was This Post Helpful? 0
  • +
  • -

#8 flip4life  Icon User is offline

  • D.I.C Head

Reputation: -2
  • View blog
  • Posts: 50
  • Joined: 29-April 11

Re: Simple CSS made Buttons width cannot be set

Posted 30 June 2011 - 05:04 PM

Bah, any other ideas? I have tried numerous different methods with still no success :/
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1