Hi I have used CSS to diplsy images around my text However the topband (repeat-x) is rather too much on top (of what i have in mind) I want this to be positioned just adjacent to the first yello band ( repeat-y) Please see attched HTML file and jpg file Left me know if i have not made myseld clear Any help is great help thanks in advance
Edit, I need to rethink on this one... but you still have a ton of divs... and photobucket's still being a pain. Okay, look at these: http://i34.photobucket.com/albums/d136/schroedingerscat/bottom-leftimage.gif and http://i34.photobucket.com/albums/d136/schroedingerscat/top-leftimage.gif If you insist on having the width change all the time, this give you 5 images: topleft corner, bottomleft corner, leftside, top and bottom. This means you need 5 elements, and while one of them can be a <p> nested inside one of the divs, the rest are always divs... If this were only for one page, I'd be able to use the body itself and a wrapper for two of the images, with a div holding another an p with one, and a footer div or something for the bottom... Is there any reason you can't set a width? If you had a set width, you could combine the repeat top and bottom with the top-left and bottom-left images I've made... that makes three images total: <div class="wrapper"> with top image <div class="textwrapper"> with the bottom image and a <p>with the text and side image to repeat-y</p> </div><!--textwrapper--> </div><!--wrapper> And if you make the images as long as the biggest most common resolution, you can always make the image shorter by setting a smaller width... the background image shouldn't overflow the width. So, you would have the ability to change widths without needing to always change the image. Granted, now your visitors will have a bigger image to download, but I think this may work better, plus now your original problem is solved (the sides will line up so llong as you play with the padding and margins on the <p> and the textwrapper div).
Thanks for the response The reason for so many div's is coz.. the text that is being enclosed may be just a few lines or 1-3 paragraphs.. hence i cannot use a "fixed" picture So the yellow band seen is infact a repeated image (repeat-y) while the top band is also a repeat-x image What do think,.. would it be possible to reposition my topband img ( small rect in a grey background) at the position indicated in the jpeg and then repeat it along the x axis ? ? ? Thank you Deepa
Sorry, I was editing again and it took too long... : ) In any case, if the top and bottoms don't also have to shift with text width, then you only need the piano keys to resize (height of the text container)...
Sorry.. i dont understand... what do u mean by ? ?? the text area is the entire width of the page. the piano-key image is appearing inline with the "imgage with the knob"... i want to have the pianokey image to be shifted a little down... at the same time not appearing over the text ? ??.. am i confusing too much ? ?..
No, what I meant was, right now you are using repeat-x for the little grey box and that is why you have it seperately. But, if you took the top-leftimage.gif I made and extend the little grey box for like 1024 pixels, then you've combined the top left image and the top-repeating image. With only one image instead of two, you would only need one div or whatever to hold it. If you set the width of the image really long like I said (1024 pixels or something like that) then you just put it at the top of the div, and in the CSS you set the width of the div to what you really want it to be (600px, 1000px, whatever) and the image will just stop at that length. http://i34.photobucket.com/albums/d136/schroedingerscat/topimage.gif
I added the image I was talking about. You said the paragraphs will always be the width of the page-- repeat-x could be used for this, but because you already know what the width of the paragraph will be, you can use a static image that doesn't repeat. Now the only part that changes is the height, and the pianokeys on the left will repeat-y to take care of that. So, now you only have three images! : ) And that means only three containers-- two divs and one <p> You'd have to give a left padding to the <p> so that the image is left and the text is right. What I meant earlier about lining the images up... some browsers do the math for box sizes and they get off (wrong) by a pixel or two. This can make a little gap between your top image and side image. So, you let the boxes overlap just a little. Check your site in IE, FF, Opera and Safari if you can and check for little gaps between the images. Yeah, you can move them up and down by changing the margins of, for instance, the div with the top repeating image. But, they may not line up perfectly in all browsers. All this talk I've made about reducing your divs... you don't have to do that, but generally one tries not to have soooo many of them. If you really still want to keep the images all seperate, then yes, to make the top corner and the top band line up, you'd have to do something like make the margin-top of the div bigger, to push the image down so it sits next to the corner like you want.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>The quick red fox jumped over the lazy brown dog.</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="example" /> <meta name="generator" content="vi" /> <style rel="stylesheet" type="text/css"> * { margin: 0; padding: 0; } body { background-color: #dfdfdf; } div.top { background: url(http://i34.photobucket.com/albums/d136/schroedingerscat/topimage.gif) no-repeat left top; margin: 10px; width: 1024px; position: relative; padding-top: 40px; } div.bottom { background: url(http://i34.photobucket.com/albums/d136/schroedingerscat/LeftRepeat.jpg) repeat-y left; width: 1024px; position: relative; } p { background: url(http://i34.photobucket.com/albums/d136/schroedingerscat/bottomimage.gif) no-repeat left bottom; margin-top: 10px; padding: 2px 2px 50px 100px; } </style> </head> <body> <div class="top"> <div class="bottom"> <p>The quick red fox jumped over the lazy brown dog.The quick red fox jumped over the lazy brown dog.The quick red fox jumped over the lazy brown dog.The quick red fox jumped over the lazy brown dog.The quick red fox jumped over the lazy brown dog.The quick red fox jumped over the lazy brown dog.The quick red fox jumped over the lazy brown dog.The quick red fox jumped over the lazy brown dog.The quick red fox jumped over the lazy brown dog.The quick red fox jumped over the lazy brown dog.</p> </div> </div> <div class="top"> <div class="bottom"> <p>The quick red fox jumped over the lazy brown dog.The quick red fox jumped over the lazy brown dog.The quick red fox jumped over the lazy brown dog.The quick red fox jumped over the lazy brown dog.</p> </div> </div> </body> </html> Code (markup): If the images don't work, that's something to do with the photobucket... I got it to work when the images were on my machine locally. Increasing the text size still works. So then you should download the images and change the addresses. Now if you want the image to be even wider (my screen resolution is wider than 1024) then the image will have to be changed and made longer. But if you take the code above and shorten both top and bottom divs to like 700px, the image will look shorter. Also, if you want something on the right side... I would give the "top" div a right black border so it looks closed... if you want an image... dude, dunno if that's worth it... http://stommepoes.jobva.nl/Deepa/example.html <--- you can download/copy the images and html/css here!
thanks a ton for your patience and time Things a making sense.. little by little. however i need to read this thread again and again and again so will getback to you as soon as i get a grip thanks a ton again Regards Deepa
I can't say I've been terribly clear. What I would do if I were you is copy my code and play with it to see how it works. That I think it the best way to learn what I did, and then you can see if it will work with you.