2 CSS questions/problems

[ppetree]

I'm sure these are easy for someone but I am having problems with them.

Background Image Placement
On this first problem, I have an image of some 36 point quote marks and I need to have next to the text. As my css manages this, it only happens when the text is not centered but I want the text centered. You can see the problem here.

Here's the HTML

<blockquote class="quote" align='center'>
<i>According to research, Neighborhood Watch programs reduce crime, on average<br>
by 16%. Adding e-Alerts to your neighborhood could add another 10% reduction!</i>
</blockquote>

The CSS looks like this:

.quote {
  margin: 0px;
  display: block;
  background-image: url('/images/quote.gif');
  background-repeat: no-repeat;
  padding-top: 2px;
  padding-right: 80px;
  padding-bottom: 5px;
  padding-left: 80px;
  text-align: center;
  color:blue;
}

Shaded Area Width
With this problem, I'm trying to set a shaded area to a consistent width and so far I am limited to the width of the text plush some padding. You can see the problem here.

The HTML code looks like this:

<a class='faq' name='cost'>How much does this cost?</a>

The CSS code looks like this:

a.faq {
  background-color: #ff6e00;
  font-weight: bold;
  color: #FFFFFF;
  padding-left:7px; 
  padding-right:14px; 
  padding-top:6px; 
  padding-bottom:6px;
  min-width: 250px; 
}

Suggestions?

Thanks,

Pete

[Ritesh_4]

For your first problem, your text is already centered, but to the div, since after the div you have a code (debugged using firebug on firefox):
<td width="25%" valign="top" align="right" class="content-right">
</td>

the above code is thus going to the right of the whole div, acting as a right sidebar if I may say so... I believe removing this <td> statement will do what you really want

[Ritesh_4]

For the secodn one, if you remove the padding (or set all to 0), you will get the color exactly from the start of a phrase to its end, if this is how you want to do it, cos I did not understand too well what you really want to do for the shading

[ppetree]

For your first problem, your text is already centered, but to the div, since after the div you have a code (debugged using firebug on firefox):
<td width="25%" valign="top" align="right" class="content-right">
</td>

the above code is thus going to the right of the whole div, acting as a right sidebar if I may say so... I believe removing this <td> statement will do what you really want

Thanks for the tip. The text is exactly where I want it, it's the blue " image that's all the way over on the left that I want to move up next to the text.

[ppetree]

For the secodn one, if you remove the padding (or set all to 0), you will get the color exactly from the start of a phrase to its end, if this is how you want to do it, cos I did not understand too well what you really want to do for the shading

What I want to do is extend the padding on the right so that all the padded items are the same width.

[Ritesh_4]

Thanks for the tip. The text is exactly where I want it, it's the blue " image that's all the way over on the left that I want to move up next to the text.

Have you tried playing with the image itself? like using photoshop to make the quotes more to the right end as image itself has a size of 67*56 px, with the quotes centered, while moving the quotes more to the right of the image frame in photoshop can give you the effect wanted.

As currently, when you are using it as background image, it is using the full 67*56 with the quotes centered, thus the reason for the spacing between them and the text, thus no need for css modifs I believe

[Ritesh_4]

What I want to do is extend the padding on the right so that all the padded items are the same width.

If you want to extend the color to the right, irrespective of the phrases length, then I will suggest you to try use a <div width="100%; background:#FF6E00;"> tag just in front of your <a> tag (but beware of height of the div).

Hope this is what you want, else if am wrong again try to make an image of what you want to achieve and attach it here...

[ppetree]

If you want to extend the color to the right, irrespective of the phrases length, then I will suggest you to try use a <div width="100%; background:#FF6E00;"> tag just in front of your <a> tag (but beware of height of the div).

Hope this is what you want, else if am wrong again try to make an image of what you want to achieve and attach it here...

I think the <div> might be the best way to do this... I didnt think of that! LOL

[ppetree]

Have you tried playing with the image itself? like using photoshop to make the quotes more to the right end as image itself has a size of 67*56 px, with the quotes centered, while moving the quotes more to the right of the image frame in photoshop can give you the effect wanted.

As currently, when you are using it as background image, it is using the full 67*56 with the quotes centered, thus the reason for the spacing between them and the text, thus no need for css modifs I believe

The image is too small for that to make any real difference as there is atleast 300px between the right side of the image and the text... I know I could set an absolute px value but that would only work right if the entire world had my same screen resolution! LOL

[Ritesh_4]

The image is too small for that to make any real difference as there is atleast 300px between the right side of the image and the text... I know I could set an absolute px value but that would only work right if the entire world had my same screen resolution! LOL

Lol well I can tell u that between the image and the text, there is 22px (if my photoshop is not failing me :P ) and between the last quote and the text there is 43px difference...
I would again recommend to try play with the image unless you manage to get a better solution in the end :cool:

for the shading part is it ok?

[ppetree]

My screen resolution is 1280x800 and here is a screen capture:
[img]http://www.neighborhoodwatchalerts.com/images/quote_sample.jpg[/img]

Here is the quote image (67x56):
[img]http://www.neighborhoodwatchalerts.com/images/quote.gif[/img]

[Ritesh_4]

well the image posted does seem to differ from the webpage link you posted earlier, and am viewing this on a 1600x1200 monitor.
But irrespective of the resolution, the spacing between them should be same, if you open in photoshop you will see what i mean, and pay attention to your photoshop ruler scales
From the pic u posted, I see about 87px difference between the last quote and the text (photoshop view at 500% for correct scaling...see for yours)
And also since you are using blockquote, some extra styling may be added in the background to show it is a blockquote, try to reference some html sources on this

Edit: read this here - http://www.w3schools.com/tags/tag_blockquote.asp
Accordingly, blockquote does add some extra spacing...:icon_mrgreen:

[ppetree]

How does it show up in your browser now? In mine its perfect...

I set the background-position: 12% 50%; where the 50% centers the image top-to-bottom and the 12% indents it. At 15% the image is in the text and at 10% its too far away.

My laptop wont go up to your screen resolution so it'll be interesting to see what happens when you view it...

[Ritesh_4]

Hi, find attached what I got when viewed in both Firefox and IE

[Ritesh_4]

I've tried playing with the background-position in firebug, and i get the quotes + text position correctly with 7-8% instead of 12%
changed my resolution to 1280*768 but still same with 12%

[ppetree]

Really wierd... 12% it is. Thanks for doing that!

Now, I think I am gonna move that blockquote to a <div>. I want the div centered but the text left aligned... and I'm just not getting there doing it this way.

[Ritesh_4]

SO hows it going on? managed to solve the problems encountered previously?

[ppetree]

I think its working well enough for now... still some issues that were driving me crazy like the spacing on the <p> tags as no where in any part of my .css have I mucked with the <p> tags so it was inheriting from the <td> tags... also can't figure out how to line up the radio buttons on the 'Send' form and thats more apparent at 125% than at 100% and may not even be noticeable at your resolution.

So, all in all I think its looking good with just a few things that are still a little wonky but it gets the site into test.

Thanks for your help in figuring that all out! I really appreciate it!

Pete

[TonyHardy]

Hi All,
If you face any problem with coding you may take help through online. Many of site provides programs with coding. you can also take a help and idea from these site.

Thanks,