On my gallery page (http://www.internationalfairtrade.com/photos.html)
I'm trying to make each of the divs look similar to this, http://apnews.excite.com/article/20.../D8G1MEJO0.html
so the width of the element depends on the image (not the containing text) and I'm also trying to make the distance bbetween the image & its text have only about 10px space between them (I tried to put margin and padding = 0 on both elements with no effect, also, why does the text not appeared to be centered?
Thanks...
I'm a deer hunter. I go all the time with my dad. One thing about deer, they have very good vision. One thing about me...I am better at hiding than they are at vision.
I took at look at your website, and you're write about your images and text. Have you thought about placing your images in a table? I looked in your code, and it looks that where your code is for your images, all images are too the left instead of centered. You should be able to center your images as well as your text, so that it will look the way you want them too. Sometimes there may be double code in your line, and that can really mess everything up. What are you using FP or DW? I hope you get everything working right.
As for what you want your webpage to look like, they probably used a two column table and hid the borders. I work with tables, images, text, allot, and I like everything centered.
You may need to put a <br /> AFTER each closing img tag, to send the text 'below' the image. Right now, they try to occupy the same baseline, but cannot due to the div's width and defaults to 'appear to be below', when in fact, it is trying to be to the RIGHT of the image...
If your text uses <.p><./p> tags (I do not remember if I saw this or not), then add a 'p' selector to your STYLE and for the declaration, say {.text-align:center;} (or align-left; or align-right; or align-justify;, for left, right or 'justify' centering.)
That is
Code:
p {text-align:center;}
to your style section, if you do not already have that.
Kudos for table-less design, btw. Always nice to see new pages going up using *css.
I'm a deer hunter. I go all the time with my dad. One thing about deer, they have very good vision. One thing about me...I am better at hiding than they are at vision.
yes, but the only thing I want to emulate is the picture
I'm a deer hunter. I go all the time with my dad. One thing about deer, they have very good vision. One thing about me...I am better at hiding than they are at vision.
It's not 'the picture' that you want to emulate, but how the picture is located on the page?? If so, try this:
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><title> New Document </title><meta name="Generator" content=""><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""></head><style>
body {padding:15px;}
h1, h2, h3, h4, h5, h6, {margin:15px 0;}
#wrapper {width:75%}
p {margin-left:10px}
</style><body><div id="wrapper"><h2>The Title of This Page</h2><div style="float:right; border:1px; width:120px; height:205px; margin:19px 10px 10px 10px"><!-- below is a picture 100-pixels wide, 60 pixels tall, floats to the right, text wrap left --><img src="images/picture_name.jpg" alt='my alt="" text: Describe this 100px by 60px image to me' style="width:100px; height:160px;" /><br /><span style="color:red">This text here is below the image, and describes the image.</span></div><p><span style="font-family:Georgia; color:chocolate;font-size:30px;
font-weight:normal; line-height:80%; letter-spacing:-3px;">L</span>orem
ipsum dolor sit amet, consectetuer adipiscing elit.Suspendisse egestas
ultricies pede. Phasellus suscipit blandit risus.Praesent nonummy. In
erat. Duis nibh pede, accumsan eu, pulvinar et,volutpat vel, elit.
Curabitur nec dui sed nunc congue tempus. Nulla acdui ac libero
fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.
Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.
</p></div></body></html>
I really wasn't sure what you were asking about and even now, still not 100% sure. Under my very worst days though, I'd probably never want to emulate a page as badly written as that one, what with it's 282 validation warnings... But this code snippette should give you a working understanding on how to emulate the way that picture is placed upon a document. Just float your div 'before' a paragraph, insert photo that is a bit smaller than, do a line-break, add text. (There are other ways of doing this, but this works too).
-Joel
Yea looking now, that site is kind of stupid. But the only thing I wanted to do (which you showed me the way) Is just to copy that image style, with a border wrapping arount both the image and its text.
Thanks...
I'm a deer hunter. I go all the time with my dad. One thing about deer, they have very good vision. One thing about me...I am better at hiding than they are at vision.
Reply With Quote
Bookmarks