Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 22
  1. #1
    New Coder
    Join Date
    Mar 2003
    Location
    San Francisco
    Posts
    83
    Thanks
    0
    Thanked 0 Times in 0 Posts

    adorable float (?) problem

    I have an image that I want flush-left, plus text that I want flush-right, but I want both to be aligned on their bottom edge. Like this:
    Code:
    IMAGE
    IMAGE
    IMAGE                             TEXT
    --------------------------------------
    Ideas?

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Is image content or presentation???
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #3
    New Coder
    Join Date
    Mar 2003
    Location
    San Francisco
    Posts
    83
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Content.

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try this:
    Code:
    <!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" xml:lang="en" lang="en">
    <head>
    <title>Test</title>
    <style type="text/css">
    body
      { font-family: Arial, sans-serif;
      }
      
    .slide
      { border-bottom: solid 1px black;
        padding: 0px;
      }
      
    .slide img
      { float: left;
      }
      
    .slide div
      { position: relative;
        margin: 0px 0px 0px 300px;
        height: 300px;
      }
    
    .slide p
      { position: absolute;
        right: 0px;
        bottom: 0px; 
        margin: 0px;
        padding: 0px;
      }
    </style>
    </head>
    <body>
    
    <div class="slide">
    <img src="image.gif" width="300" height="300" alt="image" />
    <div><p>Image Caption</p></div>
    </div>
    </body>
    </html>
    Assumed image 300x300 - change margins accordingly
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #5
    New Coder
    Join Date
    Mar 2003
    Location
    San Francisco
    Posts
    83
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks so much for the fully working solution. I'm still a little confused, but now understand that (a) making a containing DIV "relative" allows me to absolutely position its child P with respect to the parent's coordinates, and (b) setting that child P's "right" and "bottom" attributes to "0" positions it in the bottom right of the parent DIV.

    I optimized things a bit... anything in my solution that raises any flags?
    Code:
    <div style="border-bottom: 1px solid black; height: 100px; position: relative;">
    	<img alt="image" height="100" src="image.jpg" width="100">
    	<p style="bottom: 0px; position: absolute; right: 0px;">heya</p>
    </div>
    Thanks again... I learned a bunch.

  • #6
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, you shouldn't use inline styles, and <img> needs to be <img /> if you're using XHTML (whih you should be).
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #7
    New Coder
    Join Date
    Mar 2003
    Location
    San Francisco
    Posts
    83
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What's bad about inline styles? Can you point me to some discussion on that? Thanks...

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    There is nothing wrong with inline styles.

    The negativity towards inline styles stems from the banwidth optimization.

    At a glance, it seems like putting all your style information in an external stylesheet allows to save bandwidth, because in can be downloaded once and then applied to all your pages. Considering graphical browsers, this is true for the styles that are used on multiple pages or those used with dynamic pages (the ones that are not cached).

    For a style within a single static page, it makes no difference if it is specified within an external stylesheet or within the HTML page. Since both are downloaded once and cached, there is no gain in performance (actually there can be a loss in performance if you decide to create a separate external stylesheet for such definitions since it would require an extra server request).

    Same logic can be applied to styles defined within <style> element and inline style. If a style within a page is applied to a single element there is no gain in assigning a class to it.

    Another possible reasoning is reduction of bandwidth for non-graphical browsers which can ignore external stylesheet all-together. In this case it can be successfully argued that any style definitions within HTML file increases the bandwidth.
    Last edited by Vladdy; 01-25-2004 at 07:34 PM.
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #9
    New Coder
    Join Date
    Mar 2003
    Location
    San Francisco
    Posts
    83
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I agree. I prefer inline styles for "one-off" style definitions, as I find it's easier to understand/maintain the CSS. Definitions grouped at the top add a layer of indirection that makes the code a little harder to grasp (constantly paging up/down within the source to toggle between the HTML and the CSS). Strictly for one-offs, though, as duplicating inline code for multiple elements with the same style is definitely bad. At this point, I move the code out and up into a <style> element, or, if it's used across pages or in a template, into a .css file.

  • #10
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    There is everything wrong with inline styles. <span style="color: #f00"> is as bad as <font color="#ff0000">. In fact the <font> method is better because <font> has richer semantics for what you're trying to achieve there. There's one underlying theme that drives the advancement of CSS and XML.

    The seperation of content and style!

    Leave your content in *ML, and use CSS for the style! The amount of problems this gets rid of, benefits it carries! It's not just bandwidth saving. It's ease of updateability, cleaner code for alternate devices, etc.

    In my opinion, all presentational markup should be obselete (not just deprecated). That includes the style attribute.

    This is exactly what the id attribute is for.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #11
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Originally posted by me'
    It's ease of updateability, cleaner code for alternate devices, etc.

    In my opinion, all presentational markup should be obselete (not just deprecated). That includes the style attribute.
    Don't you think that's taking things a bit too far? What about webpage whose content is style, such as a design house? Or a webpage whose redesign only occurs as content changes? Not to mention some of the most beautiful websites I've seen (okay, if not the most accessible ) were designed in Flash. No separation of style or content there...
    Last edited by rmedek; 01-27-2004 at 03:42 AM.

  • #12
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What about webpage who's content is style, such as a design house?
    Tricky. Their content should be displayed as semantically as possible, and you might be able to squeeze a semantic use out of <img/>, but that's still no reason for inline styles.
    No separation of style or content there...
    No indeedy, but that's because Flash is compiled binary format (I think). With something like SVG you'd have that, though.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #13
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think you are confused, me'

    <font> tag is an HTML element that has no semantical meaning and therefore is rightfully depreciated. If you are an ultimate purist, then you can lobby for removal of the generic elements (<div> and <span>) from (X)HTML specification as well, since they do not carry any semantical meaning either.

    Neither of the above have anything to do with inline styles. Inline style is CSS specified within the style attribute of an element. It is separate from the content and does not affect the presentation of the code on alternative devices.

    Association of id attribute with a particular style declaration is only one of the uses of id attribute. Polluting markup with id attributes just to style a single element on a static page is hardly a good practice compared to an inline style.
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #14
    Regular Coder
    Join Date
    Jan 2004
    Location
    Georgia
    Posts
    306
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Not to be rude but its not called "inline styles" its called an internal style sheet
    ~Designer's Toolz~

  • #15
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeå, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    You are wrong on that first point - div and span carry semantic meaning, but it's weak. Div means a division, or a section, of a document. Span is even weaker, and means a span of content that belong together. Note that both of those actually have some meanig as to the nature of the content. The font element carries ONLY presentational data, and no meaning as to the nature of the content.

    The reason for using embedded or external styles instead of inline styles for an element, and instead polluting the class and id attributes of elements that needn't have those, is that you make one large win: One way you pollute the content with structure and the structure with presentation, one way you pollute the content with structure and the structure with superflous structure, but keep the presentation separated. They key is that it is better to make the structure addressable and let the presentation be separate, then to include the presentation with the structure, because you that way pollute the content less.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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