Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Tomy BITON
1,768 PointsText on Button
I created a button for the first time on a website I am creating for my business ( www.tomybsalon.com ) . I am trying to put a phone number on the button, and for some reason I cannot do it. I would appreciate any help and suggestions. this is the code:
<div class="booknow" style="width: 231px; height: 32px; background: url('http://unexpectedways.net/tomyb/wordpress/wp-content/themes/Avada/images/booknow.jpg') no-repeat;"><a href="http://tomybsalon.com/contact-tomy-b-long-island-hair-salon/">
</a>
<h3 style="text-transform: uppercase; color: white !important; margin-top: -1px; margin-left: 18px; font-size: 17px !important;"</h3>
8 Answers
James Barnett
39,199 PointsI'd suggest a different approach.
Not using:
- so many images
- inline styles
!important- so much markup (sometimes you don't need a
<div>)
Instead try something more like this:
<a href="#">Call us at 516-621-4100</a>
a {
background: #DC1C54;
color: white;
text-decoration: none;
text-transform: uppercase;
text-align: center;
padding: 10px 50px;
border-radius: 20px;
}
That code will give you:
Here's a working demo you can play with: http://codepen.io/jamesbarnett/pen/ftIib
Tomy BITON
1,768 PointsThank you so much. I am going to try it. I will post my results. so glad I am part of this community.
Tomy BITON
1,768 PointsHey James thank you for your help. after reading your comments, i realized that i have been working too hard, i guess because I am so unexperienced, I am going to paste my homepage code, I would appreciate if you could advise me on how to recode it to get the sam look but cleaner. My site loads slowly and know this an issue. I forgot to mention i am using wordpress as my content management , any suggestions about that? ...
<style><!--
slides, #slides2, #slides3, #slides4, #slides5, #slides6, #slides7, #slides8 { height: 529px !important; }
--></style> <div style="position: relative; width: 420px; height: 200px; float: left; z-index: 999; padding-top: 20px;"> <h1 style="font-family: helvetica, arial, sans-serif !important; font-size: 14px !important;">Tomy B. Hair Salon | Old Westbury, Long Island</h1> <p style="width: 420px; text-transform: uppercase; font-size: 70px !important; line-height: 70px !important; color: #2d2d2d !important; margin: 0 0 15px 0; font-family: 'futura_stdmedium' !important;">"I was born to style hair."</p>
<h3 style="text-transform: uppercase;">- Tomy Biton, Founder & Stylist</h3> <p style="width: 420px;">My salon is very unique. I am the only stylist. And there are never more than 2 or 3 clients here at a time. But that's on purpose. I want you to feel cared for. Hair is my life's passion.</p>
<div class="booknow" style="width: 231px; height: 32px; background: url('http://unexpectedways.net/tomyb/wordpress/wp-content/themes/Avada/images/booknow.jpg') no-repeat;"><a href="http://tomybsalon.com/contact-tomy-b-long-island-hair-salon/"> </a> <h3 style="text-transform: uppercase; color: white !important; margin-top: -1px; margin-left: 18px; font-size: 17px !important;"</h3> </div> </div>
<div class="container1" style="z-index: 1; padding-bottom: 529px; margin-top: -55px; margin-right: -30px;"> <div id="slides"> <p style="width: 520px; height: 529px;"><img alt="Long Island Hair Stylist" src="http://unexpectedways.net/tomyb/wordpress/wp-content/themes/Avada/images/slide1.jpg" /></p> <img alt="Long Island Hair Salon" src="http://unexpectedways.net/tomyb/wordpress/wp-content/themes/Avada/images/slide2.jpg" />
<img alt="Long Island Hair Salon" src="http://unexpectedways.net/tomyb/wordpress/wp-content/themes/Avada/images/slide3.jpg" />
</div> </div> <div style="border-top: 1px solid #d4d4d4;">[content_boxes] [content_box title="SERVICES" link="http://tomybsalon.com/services-of-tomy-b-hair-salon-long-island/" linktext="Learn More"]Hair styling isn't a hobby here. It's our life. Get treated by a true artist.[/content_box][content_box title="REVIEWS" link="http://tomybsalon.com/reviews-tomy-b-long-island-hair-salon-2/" linktext="Learn More"]See what others are saying about Tomy B.'s salon & services.[/content_box][content_box title="OUR STORY" link="http://tomybsalon.com/about-tomy-b-hair-salon-of-long-island/" linktext="Learn More"]Learn about the eccentric Israeli hair stylist who broke all the rules.[/content_box]
[content_box last="yes" title="SCHEDULE NOW" link="http://tomybsalon.com/contact-tomy-b-long-island-hair-salon/" linktext="Learn More"]Click to schedule the most incredible hair experience of your life.[/content_box][/content_boxes]
</div> <div style="border-top: 1px solid #d4d4d4; margin-top: -20px;"><img class="alignnone size-full wp-image-95" alt="hair" src="http://unexpectedways.net/tomyb/wordpress/wp-content/uploads/2013/06/hair.jpg" width="1001" height="529" /></div> <div style="border-top: 1px solid #d4d4d4; margin-top: -20px; padding-top: 50px; margin-bottom: -10px;"> <div style="width: 800px; margin: 0 auto; padding-top: 30px;"> <p style="font-size: 12px !important;">ADDITIONAL INFO ON TOMY B. HAIR SALON IN LONG ISLAND, NY</p> <p style="font-size: 12px !important;">Tomy B. is a high-end <a href="http://tomybsalon.com/about-hair-stylist-tomy-biton/">hair stylist</a>, <a href="http://tomybsalon.com/services/cut/">haircuts</a> & <a href="http://tomybsalon.com/services/color-highlights-long-island/">coloring expert</a> located in Old Westbury, Long Island. However, men and women travel from all parts of New York for his world-renowned treatments. This includes celebrities, Long Island professionals, moms & dads, as well as New York City residents from all boros.</p> <p style="font-size: 12px !important;">WHAT AREAS DO YOU SERVE?</p> <p style="font-size: 12px !important;">While our hair salon clients come from every corner of Long Island and New York City, the most popular areas that we serve are Albertson, Bethpage, Carle Place, East Norwich, Garden City, Glen Head, Greenvale, Jericho, Manhasset, Mineola, Old Westbury, Plainview, Port Washington, Roslyn, Roslyn Heights, Sea Cliff, Syosset, Williston Park, 11040 (postal code), 11042 (postal code), 11542 (postal code), 11560 (postal code), 11568 (postal code), 11771 (postal code), Brookville, East Garden City, East Hills, North New Hyde Park, and Searingtown, NY with our haircuts, hair coloring, highlights (full and partial), straightening, glazing, conditioning, collagen-infused treatments, and hand-crafted extensions</p> <p style="font-size: 12px !important;">HOW CAN I BOOK AN APPOINTMENT?</p> <p style="font-size: 12px !important;">Simply give us a call at (516) 621-4100. We'd love to hear from you!</p> <p style="font-size: 12px !important;">WHERE ELSE CAN I LEARN ABOUT HAIR STYLIST TOMY BITON AND HIS HAIR SALON?</p> <p style="font-size: 12px !important;">Connect with us and learn more!</p> <p style="font-size: 12px !important;"><a href="https://www.facebook.com/TomyB.Salon">Tomy B. on Facebook</a> | <a href="https://twitter.com/Tomy_BSalon">Tomy B. on Twitter</a> | <a href="https://plus.google.com/+Tomybsalon/about">Tomy B. on Google+</a> | <a href="http://national.citysearch.com/profile/44413613/old_westbury_ny/tomy_b_hair_salon.html">Tomy B. on City Search</a> | <a href="http://www.merchantcircle.com/business/Tomy.B.Hair.Salon.OLD.WESTBURY.NY.516-621-4100">Tomy B. on Merchants Circle | </a><a href="http://tomyb.tumblr.com">Tomy B. on Tumblr</a></p>
</div> </div>
James Barnett
39,199 PointsCreate a codepen instead of posting your code here
Tomy BITON
1,768 PointsThank you, I will try it for the first time, you just taught me one more thing
Tomy BITON
1,768 Pointsi copied and pasted the code to codepen, how do i post that here the way your did? did you use a screenshot or upload a file?
James Barnett
39,199 PointsYou should post a link to the codepen
Tomy BITON
1,768 PointsI hope thats right http://cdpn.io/xpKeq
Tomy BITON
1,768 Pointsi am starting to get whats is going wrong. The css and the html are combined on one page not sure how to separate them any suggestions beside doing it manually, its a lot of code.
James Barnett
39,199 PointsNope, there's no easy way to refactor code
Tomy BITON
1,768 Pointsthanks so much for all of your help.Do you think you can maybe guide me on how to go about creating the same home page layout with simplified code.Believe it or not but i learned so much from just communicating with you this is the look i am trying to achieve www.tomybsalon.com
