After all these years, I still haven't learned CSS layout, so bear with me. I'm trying to create a container with rounded corners that I generated in Photoshop. The background of the container is white, so I have eight images: top-left-corner, top, top-right-corner, right, bottom-right-corner, bottom, bottom-left-corner, and left.
The edges have a drop shadow around them so yes, I do need 8 sides. How would I lay this out in CSS? I tried and failed miserably to do it with a table + CSS. How would I do it using divs?
EDIT:
Simply speaking, how would I lay something out like the pseudo code below
[IMG][IMG WIDTH="100%"][IMG]
If I write this in HTML, my images are split over three lines. How do I get it all to fit on one line?
I like the tutorials that have been put together by Matthew James Taylor. These tutorials won't help much with rounded corners, but they are great for CSS layout ideas.
http://matthewjamestaylor.com/blog/ultimate-multi-column-liquid-layouts-em-and-pixel-widths
Check out: Curvy Corners, it's a jQuery plugin that will look at your CSS and find any CSS3 properties for webkit: -webkit-border-radius: 10px; and make any corners with that CSS property round, in every browser.
I use it for IE and it works great! All you have to do is add the .js file to your directory and link it at the bottom of your HTML and it does all the work for you :)
There are a bunch of ways to do this, http://www.devwebpro.com/25-rounded-corners-techniques-with-css/.
Related
I'm aware of this hack for inline-block property, but as it really is a hack for the poor browser support, I was wondering if there is a more elegant solution to use CSS sprites without the necessary line-break of block elements.
To illustrate the idea: in the footer of this website the icons which are inside the footer-text paragraph at the very right bottom of the page should get a nice rollover image. The most elegant technique I know for this is CSS sprites, but that would of course add a line break before the images.
Am I missing something?
Any insight is much appreciated!
Best, Alex
Personally I inline-block hack stuff all over the place, but if you're looking for an alternative, the answer is right on the page you use for an example, in the other social icons list nearer to the top of the page.
Just use display: block and float the links.
my question is a bit tricky and I'm not really sure if it is possible, but I think I have a memory of doing it before or seeing it somewhere.
So, I am making a horisontal menu. I have a div block of size 980x36px. It has a background image:
Inside I have links text) which I made block elements (display: block;) and floated left. So now it would look more like this:
Now I want all active links and all links that are mouse-overed to have a different background, like this:
The problem here is that my background image (on hover) is again 980x36 px and is different in the different horisontal positions just like the first background, blue on the left and red on the right:
So, now when I hover on a link I must set the background position some negative horisontal value, for example for the third link I should set something like background-position: -233px 0px; so the colors of the two backgrounds would fit.
My question is how can this be acomplished automaticaly? Here is the tricky part: I don't know the width of all links since they are text and should support multi-language (so they obviously cannot be pre-made images). I don't want to use PNG (I could easily make a semi-transparent 'glass' which would overlay with the first background and create the same effect) - because of.. guess who, yes IE6. And finally I want this to be done with a nice, clean and widely supported technique, so JavaScript is out of the question (I know it's easy, I can make it, I just don't want to use it).
The thing that is familiar in this situation is the background-attachment: fixed; method. In this case it would be great if I could fix the position of the background of each link to the position of the container div. That would be perfect! Just what I need! Each link will be on it's place, but the background would render as if it was on the container div! Well, that's the problem, if anyone knows a good solution.. If not I should consider the less pain, which in my opinion, currently is to try the PNG way with some IE fixer maybe?
You should just use a .png as you described in your question.
To fix IE6, you should use one of the many available JavaScript-based .png fixes, such as:
http://www.dillerdesign.com/experiment/DD_belatedPNG/
It's just not worth crippling yourself by pandering to the minuscule percentage of users that are using IE6 and have JavaScript disabled.
(yes, I realise the question is old, and you've probably already created your menu)
The quickest solution that comes to my mind is using jQuery to position the background accordingly (you can check each element's position and just change its CSS background position).
I use css to apply rounded corners to li navigation elements. This elements have a border too.
So this is how it looks like:
Like you can see the quality of the rounded corner - border combination is strange, there is a bit of white shining through.
Any idea how to fix that? Do I have to use bg-images?
Unfortunately, yes, you should use background images. Some browsers don't properly handle actual borders with border-radius. You can even see this happening to Stack Overflow's badge styles (which also use border-radius) on Firefox. I don't think you can do anything to fix the border-radius issue other than to report bugs to the respective vendors.
Yes it can be done using this jquery plugin.
http://jquery.malsup.com/corner/
No corner images, uses nested divs to draw borders. It's flexible and easy to use. It also has Added support for native border-radius so it only executes on browsers that do not support supports border-radius.
In the bottom cap of this page (bottom with corners) I seem to be having a weird IE6 issue. I've tried Google with no luck, as really, how do you ask this question.
In IE6, the corner images that are floated left and right seem to cause the whitespace to drop.
http://www.duncanhadleytriathlon.ca/
Any suggestions for why this may be?
Are you using paddings? If so, you must subtract the padding from your other values (left/right).
I don't know if it helps or not but I noticed that there is also an issue (probably the same one that you said) in Firefox 3.6.3.
I suggest you use the DD_roundies javascript for making rounded corners in IE browsers. It can be found at:
www.dillerdesign.com/experiment/DD_roundies/
[Edit]: The issue that i said is about the green panel's rounded corner at the bottom of the page.
My suggestion would be to use position: absolute to place the images instead.
Other ideas would be:
Drop #mtmi and just make the background of #mtm white (you'd need to modify the images to make the background black instead of transparent.
Even possibly drop #mtm and but the images directly in #main
Ignore old browers and use CSS3 rounded corners.
I am working on a div which should show a drop shadow at the bottom and right. Here is the link to the html page. I dont know why the classes are not getting applied to the div. Your help is highly appreciated.
Tooltip.html
Here is the image mock-up which shows the Drop shadow affect
Image-mockup
This might help...
You can also drew shadows using css3 in the browser that supported it. Like:
-moz-box-shadow