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
Jake Steel
5,048 PointsHTML Source Code and Inline CSS Not Working
<p style="border: green, solid"> <span style="font-size: x-large; font-family: 'arial black', 'avant garde'; text-align: center";>Receive Free Shipping!</span> <br /> <span style="font-family: arial, helvetica, sans-serif; font-size: small; text-align: center";>YOU ARE ELIGIBLE FOR FREE SHIPPING WHEN YOU AT AT LEAST $100.00 WORTH OF PRODUCT IN YOUR SHOPPING CART.</span> <br /> <span style="font-family: arial, helvetica, sans-serif; font-size: x-small; text-align: center";>*EXCLUDES SPECIALLY MARKED PRODUCTS.</span> </p>
not sure why it is not showing but the whole code is wrapped in a <p element with styles of border= green solid;
sorry had to write it like this because this text reader keeps hiding the code.
4 Answers
Damien Watson
27,419 PointsHi Jake,
What you want to do it ideally place the spans inside a container, like a 'div'. On this 'div' you would align the text to center, this makes everything in it 'align:center'.
I also noticed you have semi colons outside of the 'style' tags. So maybe change to look like the below. Also, you havent defined a border, which is why one is not there.
<div style="margin:0 auto; text-align:center; border:1px solid #555; padding:10px; max-width:960px; ">
<span style="font-size: x-large; font-family: 'arial black', 'avant garde';">Receive Free Shipping!</span>
<br />
<span style="font-family: arial, helvetica, sans-serif; font-size: small;">YOU ARE ELIGIBLE FOR FREE SHIPPING WHEN YOU AT AT LEAST $100.00 WORTH OF PRODUCT IN YOUR SHOPPING CART.</span>
<br />
<span style="font-family: arial, helvetica, sans-serif; font-size: x-small;">*EXCLUDES SPECIALLY MARKED PRODUCTS.</span>
</div>
Also unless this is for an email, I would stay away from inline styles myself.
Jake Steel
5,048 PointsThanks so much Damien. Yea I am not a big fan of the inline styles. This just makes writing code for my magento cms easier. Especially if it is just something simple like this. Is it possible to float the last paragraph to the right?
Damien Watson
27,419 PointsYeh, but no need for 'float'. Span is inline element, so only takes as much space as needed. If you use a 'p', it will fill the entire width, then you add 'text-align:right'. Changing it to a 'p' will most likely add margin as well, so you may need to tweak it for the right look.
Jake Steel
5,048 PointsCool, Thank you so much you have been a huge help!
Damien Watson
27,419 PointsNo problems.
Jake Steel
5,048 PointsCool, Thank you so much you have been a huge help!
Damien Watson
27,419 PointsDamien Watson
27,419 PointsJust a further note to help explain the 'div'. I have set the max width to 960px, which means this will shrink with the page width. I have also added 'margin:0 auto' which means the div will have no margin top & bottom, but the left and right will be evenly split (which causes the 'div' to be in the center on larger than 960px screens.
Hope this helps. :)