www.webdeveloper.com
Results 1 to 8 of 8

Thread: image gallery?

  1. #1
    Join Date
    Aug 2004
    Posts
    192

    image gallery?

    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.

  2. #2
    Join Date
    Feb 2006
    Posts
    16

    tables

    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.

  3. #3
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746

    what is that second link again?

    When I click the 2nd link, I go here:

    http://errdocs.excite.com/

    and I do not think that this is what you mean...

    Re-post the second link.

    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.

    -Joel
    Last edited by WebJoel; 02-28-2006 at 07:09 PM.

  4. #4
    Join Date
    Aug 2004
    Posts
    192
    Computer problems, sorry for the delay. I'm trying to use only css, heres tthe liink
    http://apnews.excite.com/article/200...D8G3M4KG1.html (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.

  5. #5
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    your link takes me to an Excite.com newspage about U.S. President Bush and India talking about nuclear weapons...

    what was it that you wanted again??

  6. #6
    Join Date
    Aug 2004
    Posts
    192
    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.

  7. #7
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746

    a bit more specificity *grin*

    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

  8. #8
    Join Date
    Aug 2004
    Posts
    192
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles