Hallo guys... I have problems with cSS and I really need your help Well I have got this html code <div> <span></span> <span></span> <span></span> <span></span> </div> and I should make CSS style which should give me this result (see photo): http://img518.imageshack.us/my.php?image=css1xk3.gif I appreciate your help!
I am not sure as well actually. I think it is 4 squares which goes over each other and create that image. Maybe some positioning would make it.
Test this code, and let me know if this is what you wanted: <html> <body> <div style="width: 410px; height: 410px;"> <div style="width: 200px; height: 200px; float: left; border: solid 1px black;"> 1 </div> <div style="width: 200px; height: 200px; float: left; border: solid 1px black; margin-left: -20px;"> 2 </div> <div style="width: 200px; height: 200px; float: left; border: solid 1px black;margin-top: -20px;"> 3 </div> <div style="width: 200px; height: 200px; float: left; border: solid 1px black;margin-left: -20px;margin-top: -20px;"> 4 </div> </div> </body> </html> Regards
Thanks, works like a charm! I tried to solve similar problem, but without any good final result. Check it please if you have some free time: http://img507.imageshack.us/my.php?image=css2jc1.gif
But i have the solution for you: <html> <body> <div style="width: 404px; height: 404px; border: solid 1px black; margin-left: 50px; margin-top: 50px;"> <div style="width: 100px; height: 100px; float: left; border: solid 1px black; margin-left: -50px; margin-top:-50px;"> 1 </div> <div style="width: 100px; height: 100px; float: right; border: solid 1px black; margin-right: -50px; margin-top: -50px;"> 2 </div> <div style="width: 300px; height: 300px; border: solid 1px red; margin-left: 51px; margin-top: 51px;"> </div> <div style="width: 100px; height: 100px; float: left; border: solid 1px black; margin-left: -50px; margin-bottom:-50px;"> 3 </div> <div style="width: 100px; height: 100px; float: right; border: solid 1px black;margin-right: -50px; margin-bottom: -50px;"> 4 </div> </div> </body> </html>