Need help with CSS styling

3
932 followers

Hi All,

So after watching Jay's CSS Primer Webinar I'm trying to get fancy, but it's not quite working. Here is the code I'm using:

#buynow {

width: 20%;

margin: auto;

padding: 8px;

border: 3px solid #000000;

background: #00ffff;

}

#clickhere {

width: 43%;

margin: auto;

padding: 8px;

border: 3px solid #000000;

background: #00ffff;

}

But here is what is looks like:

How do I get the box to be smaller, not as tall? What am I missing? And Jay if you are reading this I'd love to know how to make rounded edges, you teased me with that in the video but didn't tell me how! Thanks for you help!!

Jill

Founder of http://babycribssale.com/

Login
Create Your Free Wealthy Affiliate Account Today!
icon
4-Steps to Success Class
icon
One Profit Ready Website
icon
Market Research & Analysis Tools
icon
Millionaire Mentorship
icon
Core “Business Start Up” Training

Recent Comments

13

For something like a 'buy now' button, I prefer to make an image in word then save it as an image with software (something like paint or such) and then upload it to the page and link the photo to where I want them to go to buy the item.

Thank you. That's a great suggestion!

no problem :)

OK

Add this
height: 40px;

Reducing the height in px will shorten the box and use the padding px to center text where you want it.

It may take a little adjustment of both values to get the right fit.

Getting closer, that made the box the right size but now the writing is out of the box, it's below the box!

I got it!!! I played with the numbers like you said and it worked!!! Thank you soooo much for your help!

Its late here and just about to hit the off switch on my brain, if its not solved by the morn I,ll recreate your code and see what I can do.

Did the corners round off?

Yes they did! thank you! And I got the writing centered, it's just still a really tall box, I'd like to shorten it a little I just can't figure out how. Thanks so much for your help!

Here,s the round corners, insert in each div after background: #00ffff;

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

Increasing the px number in the last line makes the corners rounder.

Sorry cant help with the text position but you could try text-align: center;

Setting an absolute width in px instead of a percentage can give better control over layout but as I have no idea about the rest of your page its hard to tell whats going on.

Hope this helps

Thank you, I'll try that.

The rounded corners worked! Thank you! Now if I can only figure out how to make it shorter I'll be in good shape!

I can't say for sure, but are you missing a "height" tag? I only see width. That's just my first look impression, web languages aren't my specialty. =/ Sorry.

I tried putting in height and changing the % but nothing happened :-(

See more comments

Login
Create Your Free Wealthy Affiliate Account Today!
icon
4-Steps to Success Class
icon
One Profit Ready Website
icon
Market Research & Analysis Tools
icon
Millionaire Mentorship
icon
Core “Business Start Up” Training