Mobile Friendly Website

CSSPLAY

Doing it with style

More snazzy borders COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}cssplay.co.uk.

Post a comment


Current posts

Oliver:-
I am using IE 6 and I scrolled down the page so the boxes were out of view, and when I scroll back up the left and right borders of the box containing the smaller ones are broken? very strange?
(25.08.2006, 16:09)

Stu:-
Oliver, fixed :)
(25.08.2006, 16:43)

Martin:-
WOW this is great!!!
(26.08.2006, 00:51)

st:-
Great work. I am new to CSS/HTML (though very exp. in other techs) and didnt quite like using images for rounded edges.

In IE7 when you change the text to something else, the boxes were broken. Is this a known problem with other rounded boxes in other versions too ?

I could fix it by given the same width in the xboxcontent section in CSS... ie..

.xboxcontent
{
:
:
etc
width: 240px; or equal to whatever width in xsnappy section
}

This corrected the problem.
(28.08.2006, 19:27)

st:-
sorry xsnappy above = xsnazzy section
(28.08.2006, 19:29)

Stu:-
st, you have to be careful of the padding values of text at the top and bottom of the container as this may push the corners away from the content.
(29.08.2006, 21:17)

Jimmy:-
My compliments for this great site! I'd like to ask if it is possible to add a background image in these wonderful snazzy boxes...? Thanks!
(13.11.2006, 10:02)

Stu:-
You could specify a background image for the xsnazzy div, but you would need to watch the corners.
(13.11.2006, 17:37)

deb:-
Hi,
The Snazzy border with the boxes does not work in Mozilla. Works fine in IE. is there a workaround?
(16.11.2006, 17:56)

Stu:-
This demo works fine in my version 1.7.13 of Mozilla
(17.11.2006, 07:58)

Jimmy:-
Stu, I don't know how strange this may sound to you (especially after deb's post) but snazzy boxes do NOT work in Internet Explorer 6-at least for me! E.g. I have created some snazzy borders in my personal site and snazzy boxes work in some pages whether they don't work is some other pages-they seem to float right (e.g. the content of the main div exceeds the borders of the right side)! Why is that? My website has some php and java scripts-perhaps this cause the problem? Or is it because I haven't the right doctype? I have tested all doctypes out there but none of them was a solution to my problem. Stu, I would greatly appreciate a response of yours. Thank you! :)
(21.11.2006, 21:29)

Doug:-
Awesome site-excellent work!!! Is it possible to add some shadow behind those boxes? Thanks for any help.
(17.12.2006, 02:30)

Agam:-
Hello Stu,
The examples on your site are just absolutely fantastic! Thanks so much!
Stu, is it possible to make a large snazzy box with other boxes floating in them at different places? For some reason, I am unable to control locations of content inside snazzys. An example would be much appreciated. Happy Holidays and thanks again!
(23.12.2006, 00:42)

Ty Stallard:-
I am new to CSS and would love to understand how you did rounded corners without images. (It's great)

I have a question regarding the .xbox1 are with margins.

I noticed you have {margin:0 5px; background:#444;}

Do I need a comma between 0 and 5?

e.g. {margin:0, 5px; background:#444;}


From what I read on W3C, The first number is Top and Bottom and the second number is LEFT and Right sides. Is this correct?

Is it better for safe practices to use a comma between the two?

It is obvious that the CSS is working, and I appreciate your examples immensely. But I just wanted to be sure that I understand that I don't need a comma between the two numbers. Or is it written this way for another reason that I am not aware of?
(18.01.2007, 16:49)

Ty Stallard:-
One more question.

I don't understand what this is doing.

* html .xboxcontent {
height:1px;
}


Can you explain what the *.html is for?
(18.01.2007, 19:12)

Stu:-
Ty, I would suggest you get a basic book on CSS if you want to understand the complexities of some of my demos.
margin:top right bottom left; does not require comma separators. In fact the only time commas are used in defining values in this way is in the 'clip' style and even then some browsers allow this without the commas.
margin:0 5px; means top and bottom borders are zero with right and left borders 5px.
* html in front of a style is a 'hack' which is used to target IE browsers only. Other browsers will ignore this style.
There a many hacks used in stylesheets to target browsers in one way or another.
(18.01.2007, 20:34)

Steve:-
I'm trying to figure out how to set these to a fixed height?
(20.06.2007, 02:17)

Charlotte:-
Hi Stu,
Love the snazzy boxes with colored headings. I've been trying to modify them to have a colored footer (e.g. a mirror image of the heading), so that square cornered background images can sit nicely between header and footer. I haven't managed it yet, can you tell me how?
(04.08.2007, 15:34)

Charlotte:-
Ooh, cracked it! If anyone else wants to know here's how:
/*Add this into the css*/

.xsnazzy h2, .zsnazzy h2 {
margin:0;
font-size:1.2em;
padding:5px 10px 0 10px;
border-top:1px solid#444;

/*And add this after your div content*/
<h2 class="color_a">Blah Blah Title</h2></div>
<b class="xbottom"><b class="xb4 color_a"></b><b class="xb3 color_a"></b><b class="xb2 color_a"></b><b class="xb1"></b></b>
</div>

/* e.g. you have to add the color attribute to "xb2" "xb3" and "xb4" */

In response to Doug's question, I am also have trouble adding a shadow to this type of box!
(04.08.2007, 18:20)

Javier:-
Hi Stu, great site!

BTW this demo doesn't display correctly in IE 6 (outer box right border is 1 extra pixel to the right).
In other browsers is fine.
(28.08.2007, 14:23)

Lisa:-
This method is brilliant!! Am I the only one though who has trouble sometimes (not all the time) to get them to display properly in NS 8.0.2? They seem to break on me every once and awhile... :(
(14.10.2007, 03:49)

Scott:-
Stu,

You have an excellent site. You have helped me in learning quite a bit about CSS. I am trying to use the snazzy boxes, but I am wanting to have them on top of each other, not next to each other. Can you please help? Thanks
(16.11.2007, 06:00)

Juan:-
Hey, do you still help out here?
(28.07.2010, 10:22)

Philip:-
What is the easiest way to separate css control of the "outer" box from the "inner" boxes? (So that the outer box is a big "page box" and the smaller ones can be used inside it at different places.) Actually, is there a way to do that?
(19.03.2012, 22:35)



Post

Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'

Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page