SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 50
  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)

    Caption not going where I want it.

    I use "margin" to adjust the space images of various sizes take up to compensate for unsighlty text positioning where I have a variety of sizes, but this causes the caption to end up far away from the image.
    In the example below, the caption ends up half a page below the image instead of "glued to it".

    Is there a quick and easy solution that does not require to change the way I'm doing things now?


    <div class="logo"><img src="http://www.boiler-breakdown-repair-london.co.uk/pics/GSR GIF 200.gif" alt="gas safe logo" width="200" height="200"
    style="float: left; margin: .1em 1em 71em 1em; "><br> CAPTION </div>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by benbob View Post
    In the example below, the caption ends up half a page below the image instead of "glued to it".
    If I run the code you posted, the caption end up right beside the image, so there' something else in your code causing that reaction. We'd need to see the whole picture.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Sorry for delay, notification didn't seem to work.

    This is the live page where it happens.


    caption problem page


    edit

    Even stranger: Chrome and Firefox display the caption well below the image, I.E. and Opera display it on the right of the image.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    The image has a gigantic bottom margin, which is pushing the caption way down the page:

    Code:
    element.style {
    float: left;
    margin: .1em 1em 61em 1em;
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Yes, I use that to as an easy way to influence positioning. I was hoping there would be an easy way to get the positioning of the caption to "ignore" that, so I can keep using margin or padding for the time being. My site is forever being updated/extended and improved.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You could just put the bottom margin on the .logo div instead:

    Code:
    .logo {
    float: right;
    margin: 1em 0em 61em 4em;
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,088
    Mentioned
    255 Post(s)
    Tagged
    5 Thread(s)
    It seems an odd way to do things to me, but if that's how you want to carry on, can't you just add that large bottom margin to the div, instead of the image?

    Edit:

    Ninja'd by Ralph. Great minds, and all that.
    Take plenty of exercise – walk round and round the garden
    or
    sign up now for the Isle of Jura 10K or Half Marathon!

  8. #8
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You could just put the bottom margin on the .logo div instead:

    Code:
    .logo {
    float: right;
    margin: 1em 0em 61em 4em;
     }
    Alas, if it were only that easy. As it the margin is different for every image, I can't do it that way.
    It's a stop gap measure during the revamp operation integrating css in my site. There are possibly occasions where an unlucky combination of text quantity, section size and image size, where I will keep using this to make it easier to read.
    So far, the way I have styled it displays pretty consistently over a range of browsers, screensizes and resolutions. As I am far from a star at HTML/CSS, I am hesitant to impement any major changes in "style".

  9. #9
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    As I am far from a star at HTML/CSS, I am hesitant to impement any major changes in "style".
    Unfortunately, a "major change" is exactly what this page needs.

    What do you have to lose if you start another version? - a good place to start would be to produce a drawing of what you want it to look like.

    I can practically promise that you would have a lot to gain by stepping back and starting over.

    Give it some thought.

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    That right column with the logo in it is something of a mystery object. How tall is it supposed to be?... not in ems or pixels, but in terms of content. Is it supposed to go all the way to the bottom of the page, end just before the xtra-small text, maybe end above the "Read the Boiler Repair Blog" line, or end somewhere higher? I assume it's supposed to adjust to the widths of different images. The caption isn't a problem. It will reside just beneath the image.

  11. #11
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Like I said above, I use margin and padding for temporary "positioning". But part of it will be permanent, and even a 3 em marging/padding will bring the caption too far from the image I want the caption glued to the image.

  12. #12
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Yes, you repeated yourself. But you didn't describe anything new about the right column and the "positioning". Would it be desirable for the height of that right column to self-adjust, also? Just need to identify where.

  13. #13
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Is this close enough to "glued"?
    logo+caption.jpg

  14. #14
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    You didn't describe anything new about the right column and the "positioning".
    In a nutshell, I'm going from very plain html to css. On top of that, I'm adding lots of images of various sizes. Added to that, will be more text changing the amount of sections from an average of 2, to 5 or 6. To avoid having very wide areas of tex, I'm using the padding on the right hand image(s) to extend the "volume" to just above the bottom section starting with the blog announcement.

    Quote Originally Posted by ronpat View Post
    Would it be desirable for the height of that right column to self-adjust, also? Just need to identify where.
    Self adjusting sounds good. Very good.
    What would determine what/where it would self adjust to?
    For the coming couple of months, it will be either just the logo or the logo plus one image that make up the right hand side. As the blog announcement is very big on purpose, the right hand side images/padding need to stop just above "the blog" to stop that part from being squashed off a single line.

    As for the "restart" that isn't an option as the site is adjusted based predominantly on feedback, so there is not concept as such, nor can I make one.

  15. #15
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    Is this close enough to "glued"?
    logo+caption.jpg
    That is great. My captions would typically be 5-10 words in farily small text so it fits on 2 lines.

  16. #16
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    My concept of "restart" does NOT mean redesign the look of the site. Quite the contrary, I would only recommend a different html framework/structure for the page... something that makes it easier to manage. The look of the site and it's future based on user feedback would not change, as far as I can imagine.

    The idea of a self-adjusting right column length depends on knowing where it should stop and closing the container in which the right column resides. All content below that point, such as the blog announcement or a footer, will be full page width or part of another container. The content above that point will be bordered on the right by the column.

    So, if I understand correctly, the purpose of the right column is to contain the logo and maybe some other images and to reduce the width of the content text.

    What do you mean by "sections"? Are you talking about columns... growing toward a multi-column layout? Or are you describing "rows" or horizontal groups of text (similar to the present style)? And where do you expect to add more images (presumably with captions)? Would you place some of them within the text?

    My thoughts are based on the current snapshot of your site. Your future plans my prove that my ideas are very "short-sighted" and impractical. The discussion is important so I don't lead you down a short path.

  17. #17
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    My brain has gone in shut down mode for the day, or the night rather, as it is gone 1 am here.
    I'll see how I can do a concise concept discription without making it in a 200 page desertation after a bit of shut eye.
    Your help is most appreciated.

  18. #18
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    My concept of"restart" does NOT mean redesign the look of the site.Quite the contrary, I would only recommend a different htmlframework/structure for the page... something that makes it easier tomanage. The look of the site and it's future based on user feedbackwould not change, as far as I can imagine....
    That sounds good, very good actually,albeit in a rather abstract way; I've got no idea how that would bedone.

    Quote Originally Posted by ronpat View Post
    ...The ideaof a self-adjusting right column length depends on knowing where itshould stop and closing the container in which the right columnresides. All content below that point, such as the blog announcementor a footer, will be full page width or part of another container.The content above that point will be bordered on the right by thecolumn....
    My site does not use columns. Thebackbone is the text, which is “split” in 4-6 sections by h-tags.The images are used to tart the site up and “define/position” thetext blocks at the same time. The “column” is a stop gap measureto limit the text width for sections where not all images have beenaded.

    Quote Originally Posted by ronpat View Post
    ...So, if I understand correctly,the purpose of the right column is to contain the logo and maybe someother images and to reduce the width of the content text...
    Yes, albeit that there is no real column as per above.

    Quote Originally Posted by ronpat View Post
    ...What doyou mean by "sections"? Are you talking about columns...growing toward a multi-column layout? Or are you describing "rows"or horizontal groups of text (similar to the present style)? Andwhere do you expect to add more images (presumably with captions)?Would you place some of them within the text?...

    Section are the 4-6 blocks of text “separated” by h-tags. Between 100 and 400 words, but mostly between 150 and 250 words.



    Quote Originally Posted by ronpat View Post
    ....Mythoughts are based on the current snapshot of your site. Your futureplans my prove that my ideas are very "short-sighted" andimpractical. The discussion is important so I don't lead you down ashort path.
    The essence of my “future plan” isto adapt/adjust/extend/improve based on the feedback of readers.Whenever a reader tells me “I like your site, but........ or, apartfrom........” I question them and make a note.
    I have done this from the word go, andfound it much more efficacious than using market research.


    The only red thread that I can think ofthat will continue to exist, is that I want my site specifically tolook different from most other sites in my industry. Partiallybecause it matches my company usp, partially to stand out and grabpeople's attention.
    So no popular/traditional 2 or 3 columndesign with navbars top or left and “alternative info” in theremaining space. No templates, no flash and no glossed up showroomimages of things that virtually nobody has seen in real life. Ifyou're selling Fords, don't show images of people in $5000 suits thatlook like they own 3 Rollers.


    Another issue is the ongoing butirregular addition and alteration of content. Wherever practicable, Itake photos of work I do and after selecting and processing theimages, I add them to existing pages as well as new ones. The samegoes for information i.e. text. Depending on what I learn/discover, Iadd or alter existing text; sometimes one line, sometimes a paragraph.
    This has lead to page lengths varyingfrom 500 to 2000 words, and 1-8 images on a page, with no guaranteesthat those limits won't be exceeded in the future.


    Hopefully, this answers most of yourquestions.

  19. #19
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    benbob, a couple of questions.

    (1) It sounds like the images planned for the right "column" are intended to align with certain sections of text. ie: top of image aligns with top of text in that section.

    Should the text in sections without an image stretch the full width of the page or should it honor an empty space and preserve the appearance of a continuous column for images? (except for those bottom full width sections)

    (2) Right now, your page stretches to conform to very wide browser widths. Have you considered limiting the maximum width of your page to around 1040px or so? (I just picked a number.)

    If so, change your #wrapper entirely to:
    Code:
    #wrapper {
        max-width:1040px;
        margin:0px auto;
    }

  20. #20
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Another suggestion... change your !DOCTYPE from HTML4 strict to HTML4 transitional.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    The reason is because you are using target="_blank" in your anchors. That attribute is not valid in HTML4 strict.

  21. #21
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ronpat View Post
    change your !DOCTYPE from HTML4 strict to HTML4 transitional.
    As a general rule, it's better not to advise that, because there should be no transitional sites around these days. It was a bridge for old, poorly coded sites hold their head up on the modern web. It's better to face the reality that any site needing a transitional doctype should have been scrapped and rebuilt many years ago.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  22. #22
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    I hear the mantra and have a hard time buying it in the absence of supporting evidence.

    As I recall, HTML4 transitional is a bridge between HTML4 strict and HTML4 frameset. It existed *before* the "modern web", not because of it.

    What is the recommended replacement for the target attribute, and how should the coder/user handle that effect?

  23. #23
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ronpat View Post
    What is the recommended replacement for the target attribute, and how should the coder/user handle that effect?
    Things like _target are still supported by browsers, whatever doctype is used, but it's worth asking why things like _target were dropped from HTML. It's because it failed usability tests, which showed that it confused a lot of people. There are JavaScript replacements for it, but again, that still begs the question of whether it should be used at all. It's a pity it's so hard to get the message out to the general community that you can easily open a page in a new tab with a simple key stroke. That's vastly preferable to me than having it forced upon me.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  24. #24
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Indeed opening a new page in a new window may be "forced" by the coder with the target attribute. So far in my life as a user, I don't find that objectionable. I'd rather the programmer make an intelligently thought out direction rather than leave it to me to wish I'd known to open the link in another window. It is unreasonable to expect casual users to make that decision ahead of time, especially without a recommendation from the web page that effectively says "might be best to open in another window". User's rarely know if a link goes to another page on the same site, therefore the "back" button works, or links to another page with hooks to keep them there. Personally, I like the fact that SitePoint opens most links in a new tab. Javascript? or transitional _blank? who cares? I don't give a hoot about religious badges. Solid code and reliable performance, YES! If the worse thing you can say about the transitional doctype is that it is a "badge", that's weak. It IS an established doctype.

  25. #25
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ronpat View Post
    It IS an established doctype.
    And horse and cart is an established means of transport.

    Anyhow, _blank has been deprecated for a reason, so it's worth being mindful of that.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

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