positioning images

Discussion in 'HTML' started by Knut Krueger, May 18, 2006.

  1. Knut Krueger

    Knut Krueger Guest

    Hi to all,
    first, I would like to thank you for all help in the
    .... table tread ...
    Ok tables are very old fashioned style, I will promise not to abuse them
    further more ;-) .. in new pages ...


    Therefore I tried out some features of the CSS style, but there are,
    some more questions, which I didn't not find in the manual:

    http://test.konstanze-krueger.de/index.html

    It is working absolute fine with IE but not with Netscape or Firefox
    pls. see link below

    The middle image is not fitting with Netscape and Firefox.
    Seems that Netscape and Firefox are not stretching the original image
    (its 20 px width)

    Is there any other solution or anything wrong.



    Regards Knut
    Knut Krueger, May 18, 2006
    #1
    1. Advertising

  2. Knut Krueger wrote:
    > Hi to all,
    > first, I would like to thank you for all help in the
    > ... table tread ...
    > Ok tables are very old fashioned style, I will promise not to abuse them
    > further more ;-) .. in new pages ...
    >
    >
    > Therefore I tried out some features of the CSS style, but there are,
    > some more questions, which I didn't not find in the manual:
    >
    > http://test.konstanze-krueger.de/index.html
    >
    > It is working absolute fine with IE but not with Netscape or Firefox
    > pls. see link below
    >
    > The middle image is not fitting with Netscape and Firefox.
    > Seems that Netscape and Firefox are not stretching the original image
    > (its 20 px width)
    >
    > Is there any other solution or anything wrong.


    1) Avoid quirks mode and your result will more likely be more constant
    among browsers , so use *strict* doctype.

    2) Avoid *absolute* positioning whenever possible, there is usually a
    way (many times simpler) without and your document will be more flexible.

    Try:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>More Flexible Layout</title>
    <style type="text/css">
    #banner { margin: 30px 0 0 5px; border: 0; padding: 0; color: #fff;
    background-color: #00a000; height: 100px; }
    #banner IMG { border: 0; display: block; }
    #banner #logoRight { float: right; }
    #banner #logoLeft { float: left; }
    </style>

    </head>
    <body>
    <div id="banner">
    <img id="logoRight" src="clipart/bar2_right.jpg" width="180"
    height="100" alt="------">
    <img id="logoLeft" src="clipart/bar2_left.jpg" width="330" height="100"
    alt="------">
    </div>
    </body></html>

    Food for thought: I would get rid of image for text on left and use
    plain text, just a plain sans-serif font anyway and would be readable
    for text and aural browsing!

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, May 18, 2006
    #2
    1. Advertising

  3. Knut Krueger

    Knut Krueger Guest

    Jonathan N. Little schrieb:
    > Knut Krueger wrote:
    >....


    <img id="logoRight"
    that's what i was looking for
    I must look in my manual where is something written about the ID and
    with which tags I could use it.

    >
    > 1) Avoid quirks mode and your result will more likely be more constant
    > among browsers , so use *strict* doctype.
    >
    > 2) Avoid *absolute* positioning whenever possible, there is usually a
    > way (many times simpler) without and your document will be more flexible.
    >
    > Try:

    .... thx much better :)
    >
    > Food for thought: I would get rid of image for text on left and use
    > plain text, just a plain sans-serif font anyway and would be readable
    > for text and aural browsing!


    They want Tahoma text, I just have to look if it is possible.

    Regards Knut
    >
    Knut Krueger, May 18, 2006
    #3
  4. Knut Krueger wrote:
    >
    >
    > <img id="logoRight"
    > that's what i was looking for
    > I must look in my manual where is something written about the ID and
    > with which tags I could use it.


    Basically, in order of specificity:

    ELEMENT {...} e.g., P {...} means applies to all P's on page

    ..className {...} means applies to all elements of class "className"

    ELEMENT.className means applies to only element speified of class
    "className"

    #idName {...} means applies the *single* element of id "idName"

    see http://www.w3.org/TR/CSS21/selector.html for more info


    > They want Tahoma text, I just have to look if it is possible.
    >


    Yes, but you should give alternatives for folks without Tahoma on their
    systems such as Linux system

    font-family: Tahoma, Arial, Helvetica, Lucida, sans-serif;

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, May 18, 2006
    #4
  5. Knut Krueger

    David Graham Guest

    > Try:
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    > <html>
    > <head>
    > <title>More Flexible Layout</title>
    > <style type="text/css">
    > #banner { margin: 30px 0 0 5px; border: 0; padding: 0; color: #fff;
    > background-color: #00a000; height: 100px; }
    > #banner IMG { border: 0; display: block; }
    > #banner #logoRight { float: right; }
    > #banner #logoLeft { float: left; }
    > </style>



    Why the display block? - what does that do?, can't you just float left and
    right without the display block?
    bye
    David
    David Graham, May 18, 2006
    #5
  6. In article <ED3bg.63$>, david.graham18
    @ntlworld.com says...
    > > Try:
    > >
    > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > > "http://www.w3.org/TR/html4/strict.dtd">
    > > <html>
    > > <head>
    > > <title>More Flexible Layout</title>
    > > <style type="text/css">
    > > #banner { margin: 30px 0 0 5px; border: 0; padding: 0; color: #fff;
    > > background-color: #00a000; height: 100px; }
    > > #banner IMG { border: 0; display: block; }
    > > #banner #logoRight { float: right; }
    > > #banner #logoLeft { float: left; }
    > > </style>

    >
    >
    > Why the display block? - what does that do?, can't you just float left and
    > right without the display block?


    IMG's are inline by default, float applies to block elements not inline
    elements. I guess floating may 'imply' setting IMG to block...need to
    research if so, else it just might be good practice such as return(void)
    for subroutines in programming....

    --

    Jonathan
    Jonathan N. Little, May 18, 2006
    #6
  7. Knut Krueger

    Knut Krueger Guest

    Jonathan N. Little schrieb:

    > Knut Krueger wrote:
    >
    >>


    Hi Jonathan, thanks four your help and the links.
    >
    > 1) Avoid quirks mode and your result will more likely be more constant
    > among browsers , so use *strict* doctype.


    .... quirks modes are not intended ;-)
    but I will try to prevent them ...


    >
    > 2) Avoid *absolute* positioning whenever possible, there is usually a
    > way (many times simpler) without and your document will be more flexible.
    >


    There I have a couple of problems
    http://uni-regensburg.konstanze-krueger.de/
    the picture and the text above and below are fixed.
    first I was not able to get them centered - it did not work , sure it
    was wrong, and I was not able to set them relative together

    > Food for thought: I would get rid of image for text on left and use
    > plain text, just a plain sans-serif font anyway and would be readable
    > for text and aural browsing!


    I tried to get the text above the image, but it was all the time in the box.

    Ok maybe anywhere i could find it but I didn't - and I'm in a hurry.
    I have to get the first design online this weekend.

    i would be very glad if you would so kind to get me any further advise.

    and the last problem ( in my eyes sure you will find more ..)is the
    background image.
    I was only able to define working background images either for a class
    or for the hole background but not in the repeat-y.
    In the first case the background fits only the image and link area but
    not more down if the text is bigger than the link area.

    Maybe if you would like to explain the problem we should divide it in
    new treads to make it easy for other to find the question in google.

    Regards Knut
    Knut Krueger, May 19, 2006
    #7
  8. Knut Krueger

    Knut Krueger Guest

    did not try it in IE before sending the last message.

    does not work in IE

    Will try to change it, but must leave now.

    Regards Knut
    Knut Krueger, May 19, 2006
    #8
  9. Knut Krueger

    Knut Krueger Guest

    I did not find the difference why IE is not working.
    Maybe I did something against the conventions .. I don't know

    Regards Knut
    Knut Krueger, May 19, 2006
    #9
  10. Knut Krueger wrote:
    > I did not find the difference why IE is not working.
    > Maybe I did something against the conventions .. I don't know
    >


    Okay, you *should* quote what you are referring to on your post to news
    groups....

    I'm being a nice guy here and I have set up a temp page to get you
    started...

    http://www.littleworksstudio.com/temp/alt.html20060519.html
    More Flexible Layout


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, May 19, 2006
    #10
  11. Knut Krueger

    Knut Krueger Guest

    Jonathan N. Little schrieb:

    > I'm being a nice guy here and I have set up a temp page to get you
    > started...
    >
    > http://www.littleworksstudio.com/temp/alt.html20060519.html
    > More Flexible Layout
    >

    Hi Jonathan,

    .... no words .... thanks a lot.


    Now I am able to bring the page online and after that I will study the
    manuals.
    I id software development with more than 60.000 lines in end of the 80th
    and get problems with 20 lines of css/html ... time is running ...

    Regards Knut
    Knut Krueger, May 19, 2006
    #11
  12. Knut Krueger

    Knut Krueger Guest

    Jonathan N. Little schrieb:

    > Knut Krueger wrote:
    >
    >> I did not find the difference why IE is not working.
    >> Maybe I did something against the conventions .. I don't know
    >>

    >
    > Okay, you *should* quote what you are referring to on your post to news
    > groups....


    oops I deleted my first post where I wrote that I did not find why the
    code works in netscape and firefox but not in IE

    Jonathan, I do not expect you to do my work, so I would of course not be
    angry if you would reject now. you did enough and very friendly.
    >
    > I'm being a nice guy here and I have set up a temp page to get you
    > started...


    May I further another 3 questions .....
    I've got the problems with the following requirements.
    without them it was more easy ...

    If the text (page Stuff) is bigger it flows to the left
    I had the same problem so I used a big image to prevent the text to
    float left.
    http://uni-regensburg.konstanze-krueger.de/temp1.html
    That's the only .. big .. problem


    I have time for both following issues to find out how it works:

    I tried to fix the block from Dr. Konstanze Krüger, the picture,
    including the links
    see
    http://uni-regensburg.konstanze-krueger.de
    with netscape or firefox it works

    As you mentioned i tried to get the blank (but with color flow) image
    http://uni-regensburg.konstanze-krueger.de/clipart/blank_bar2_left.jpg
    under the

    Universtät
    Regensburg

    And that did not work.

    Have a nice weekend

    Regards Knut
    Knut Krueger, May 19, 2006
    #12
  13. Knut Krueger wrote:
    >
    >
    > Jonathan N. Little schrieb:
    >
    >> I'm being a nice guy here and I have set up a temp page to get you
    >> started...
    >>
    >> http://www.littleworksstudio.com/temp/alt.html20060519.html
    >> More Flexible Layout
    >>

    > Hi Jonathan,
    >
    > ... no words .... thanks a lot.
    >
    >
    > Now I am able to bring the page online and after that I will study the
    > manuals.
    > I id software development with more than 60.000 lines in end of the 80th
    > and get problems with 20 lines of css/html ... time is running ...


    What manuals? The WC recommendations? If you, yes do so, they will help
    a lot. Also start simply first. Get your markup 'The HTML part' down and
    correct. It should be legible without any styling first, then use CSS to
    'pretty it up'


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, May 19, 2006
    #13
  14. Knut Krueger wrote:
    >
    >
    > Jonathan N. Little schrieb:
    >
    >> Knut Krueger wrote:
    >>
    >>> I did not find the difference why IE is not working.
    >>> Maybe I did something against the conventions .. I don't know
    >>>

    >>
    >> Okay, you *should* quote what you are referring to on your post to
    >> news groups....

    >
    > oops I deleted my first post where I wrote that I did not find why the
    > code works in netscape and firefox but not in IE
    >
    > Jonathan, I do not expect you to do my work, so I would of course not be
    > angry if you would reject now. you did enough and very friendly.
    >>
    >> I'm being a nice guy here and I have set up a temp page to get you
    >> started...

    >
    > May I further another 3 questions .....
    > I've got the problems with the following requirements.
    > without them it was more easy ...
    >
    > If the text (page Stuff) is bigger it flows to the left
    > I had the same problem so I used a big image to prevent the text to
    > float left.
    > http://uni-regensburg.konstanze-krueger.de/temp1.html
    > That's the only .. big .. problem
    >


    As the text grows, there will be some distortion especially at the
    extremes, using font proportional units like 'em' help minimize the
    effect because you should let folks scale the text, some people have
    less the perfect eye sight. If you want to maintain a straight left-hand
    margin on the content wrap the main page content in a 'content' div and
    set the left hand margin see this example...

    http://www.littleworksstudio.com/temp/alt.html20060519-2.html
    More Flexible Layout

    More to your liking? Works in both IE and gecko...

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, May 19, 2006
    #14
  15. Knut Krueger

    Knut Krueger Guest

    Jonathan N. Little schrieb:
    > Knut Krueger wrote:
    >
    >>
    >>
    >> Jonathan N. Little schrieb:
    >>
    >>> I'm being a nice guy here and I have set up a temp page to get you
    >>> started...
    >>>
    >>> http://www.littleworksstudio.com/temp/alt.html20060519.html
    >>> More Flexible Layout
    >>>

    >> Hi Jonathan,
    >>
    >> ... no words .... thanks a lot.
    >>
    >>
    >> Now I am able to bring the page online and after that I will study the
    >> manuals.
    >> I id software development with more than 60.000 lines in end of the
    >> 80th and get problems with 20 lines of css/html ... time is running ...

    >
    >
    > What manuals? The WC recommendations?

    yes and there is a german site (or download manual) (only a part of the
    CSS style sheet is already translated to
    english)http://en.selfhtml.org/css/index.htm
    http://www.selfhtml.org/#en

    If you, yes do so, they will help
    > a lot. Also start simply first. Get your markup 'The HTML part' down and
    > correct.

    What would be the markup part of this site? The text and some pictures
    any HTML without any errors using the html validation?

    Regards Knut
    Knut Krueger, May 20, 2006
    #15
  16. Knut Krueger

    Knut Krueger Guest

    Jonathan N. Little schrieb:

    > Knut Krueger wrote:
    >
    >
    >
    > As the text grows, there will be some distortion especially at the
    > extremes, using font proportional units like 'em' help minimize the
    > effect because you should let folks scale the text, some people have
    > less the perfect eye sight. If you want to maintain a straight left-hand
    > margin on the content wrap the main page content in a 'content' div and
    > set the left hand margin see this example...
    >
    > http://www.littleworksstudio.com/temp/alt.html20060519-2.html
    > More Flexible Layout
    >
    > More to your liking? Works in both IE and gecko...
    >

    Perfect to start up the page,
    the rest of all wishes will have time.

    Many thanks Knut
    Knut Krueger, May 20, 2006
    #16
  17. Knut Krueger wrote:
    >
    >
    > Jonathan N. Little schrieb:


    >> a lot. Also start simply first. Get your markup 'The HTML part' down
    >> and correct.

    > What would be the markup part of this site? The text and some pictures
    > any HTML without any errors using the html validation?


    The HTML with no styling, just layout your content, your headings h1,
    h2, h3, ... your paragraphs P, images IMG, and lists UL, OL..., LINKS
    A.... Don't worry about colors, backgrounds, fonts, etc. If you have
    specific sections in mind you may want to enclose in DIV at this time.
    It should 'work' as a page without any styling. Validate to clear out
    and markup errors. Then attach a stylesheet and style the fonts, colors,
    backgrounds, floats whatever. The beauty of this approach is that you
    will not be locked into one style, you could make alternate stylesheets
    that when applied could radically change the look of the site without
    changing a bit of the markup! A fun demonstration of this concept can be
    found at:

    http://www.csszengarden.com/
    css Zen Garden: The Beauty in CSS Design


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, May 20, 2006
    #17
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Guest
    Replies:
    4
    Views:
    896
    Eliyahu Goldin
    Jan 4, 2005
  2. Luis Esteban Valencia Muñoz
    Replies:
    0
    Views:
    770
    Luis Esteban Valencia Muñoz
    Jun 3, 2005
  3. Peter
    Replies:
    2
    Views:
    455
    Jonathan N. Little
    Mar 26, 2006
  4. Knut Krueger

    CSS positioning images

    Knut Krueger, May 18, 2006, in forum: HTML
    Replies:
    0
    Views:
    361
    Knut Krueger
    May 18, 2006
  5. wardemon

    Cache Images vs Static Images

    wardemon, Jun 14, 2007, in forum: ASP .Net
    Replies:
    3
    Views:
    660
    bruce barker
    Jun 14, 2007
Loading...

Share This Page