i attech 4 corner file...as well as i give u both color and and hight... i hope u help me..... here is a 4 corner.... http://gandhidhaval.googlepages.com/quero.zip inner color : #2d2c0f outer color : #5e5821 may main size is width: 150px; height: 450px; this both including inner color and outer color
----css------------- div.Article { background: url(quero/top-left-corner.gif) top left no-repeat; width:35%; } div.Article h2 { background: url(quero/top-right-corner.gif) top right no-repeat; font-size:1.3em; padding:15px; margin:0; } div.ArticleBody { background:#2d2c0f; position:absolute; width: 150px; height: 450px; top right repeat-y; margin:0; margin-top:-2em; padding:15px; left: 20px; top: 44px; } div.ArticleFooter { background: url(quero/bottom-left-corner.gif) bottom left no-repeat; } div.ArticleFooter p { background: url(quero/bottom-left-corner.gif) bottom right no-repeat; display:block; padding:15px; margin:-2em 0 0 0; } -----------html-------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>G</title> <style type="text/css"> @import url("css.css"); </style> </head> <body> <div class="Article"> <h2>Article header</h2> <div class="ArticleBody"> <p> A few paragraphs of article text.<br /> A few paragraphs of article text. </p> <p> A few paragraphs of article text.<br /> A few paragraphs of article text. </p> </div> <div class="ArticleFooter"> <p> A paragraph containing author information </p> </div> </div> </body> </html> -------i hope u help me--------------
Well, your images have a couple minor issues - while they are all technically all the same size, they are NOT placed the same inside their containers, making lining them up really tough. In addition to your borders you will likely want images for top and side borders since IE has it's head up it's backside about color matching images to drawn borders and backgrounds... because you are aiming for a fixed width of 150px, I would just make images 150x12 for top, middle-tile and bottom - and then combine them to a 450x12 image to 'slide' the background around to place them. This would result in a single 300 byte .png instead of 9 separate images of about 150 bytes apiece. I'd also make the corners transparant because again, IE doesn't do color matching all that great on images... which means one extra padding statement in our CSS. The image: The code: http://battletech.hopto.org/for_others/dhaval/corners/template.html You'll see I just wrap the 'content' with three div's. The outermost DIV sets our width and puts the left third of the image in place. The second div you'll notice uses a generic classname 'wrap1' - I do that so I can reuse multiple times for different styles. That one sets the image bottom right only showing the right 1/3rd of our image. I pad the top and bottom here so .wrap2 only puts the tiled image in the center and not over our top and bottom images. This one I slide -150px so we only see the center third of the image. I also pad it's sides so the paragraphs inside it don't overlap our borders and to give even padding the whole way around. If you want to set a fixed height (I wouldn't under most circumstances) you would do so in .wrap2 Hope this helps.
oop, posted while you were making your second post... Given your example, and assuming this style is supposed to be around your article, I'd probably do it this way instead: http://battletech.hopto.org/for_others/dhaval/corners/template2.html don't really 'need' the extra wrapper around the content - technically we shoudln't even bother putting the footer content in the footer, but it 'works' so close enough. The big change is putting the tiled background on the paragraphs and H2, and switching the padding around a little bit.
thanks a lot..but i can not fix the hight 450px please help... where i can change hight and widht bcoz i use it this in different hight and different width.. please help
aecchuly i want 4 this type box in singale page 1.) left side width: 150px; height: 450px; 2.) middle width: 500px; height: 450px; 3.) right side width: 150px; height: 365px; 4.)right side botom (under 3. the right side) width: 150px; height: 100px; i still try it but i cannot got success.... please help if possible... but i cannot set this properly
Ok, because that middle one is a different width, we'll have to switch from 8 corners to 6+2+1 - 6 images in one for four corners and top/bottom, one image for the sides, and one image for the content area. (which is STILL better than 9 separate images) If I have some time later, I'll toss you together a working example.
if u have no probs and if u have some free time please help me for middle part..... Lots of thanks for this help....
Ok, here's my take on it. Part of the 'problem' is your sizes - 365px tall + 100px tall = 465px - it's taller than your others, was that intentional? 150px+150px+800px != 800 pixel wide display friendly. I cropped those measurements down to fit 768 wide by 450px tall. I was also able to implement it using a single .gif - IE doesn't gamma correct .gif's like it does .png and .jpg, so we can use border to 'fill in the blanks'. The image is just your four corners: http://battletech.hopto.org/for_others/dhaval/corners/images/4corners.gif and the code for that whole layout as you described (assuming I understood what you were aiming for) http://battletech.hopto.org/for_others/dhaval/corners/template3.html It reuses the 'styled_border' class for all the sections, using the unique ID's to place them and set their sizes. The key are the nested .top and .bottom classes <div class="top"><div><div></div></div></div> which place the corner images and top or bottom border.
great help still some problame... please see this..... http://gandhidhaval.googlepages.com/velideter.JPG
Ignore that warning, that's just the 'htmltidy' plugin being a dink... which is why I don't use it as I write perfectly valid code and it hates every little bit of it. **** that bull. But then, as far as Firefux is concerned I still say **** it and the open sores it rode in on.
Educate the client that said program is full of **** because it's not smart enough to realize we are using 'empty' containers to apply styling via CSS? You might MIGHT be able to fake it by adding a in the middle of those div's... Though honestly any client that is so tied to such an obscure and buggy plugin you are better off educating on the REALITIES of what crap that is. I mean seriously, the page VALIDATES XHTML 1.0 strict through the REAL validator (http://validator.w3.org) - why in blazes do they care about some stupid FF plugin? Much less that it's a meaningless warning, not an actual ERROR. But then there's a reason that type of 'requirement' in a client would result in my kicking them to the curb and going to work with someone who actually has a ******* clue. Seriously, a client came back to me with that type of nonsense, they'd probably get a brick upside the head and suddenly be less one coder. -- edit -- But remember, I have the same attitude towards ALL WYSIWYG's and most 'off the shelf' CMS/blogging software. I'm willing to just walk out of a place the minute the word 'dreamweaver' is even mentioned.