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. Advertisements

  2. 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!
     
    Jonathan N. Little, May 18, 2006
    #2
    1. Advertisements

  3. Knut Krueger

    Knut Krueger Guest

    <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.
    They want Tahoma text, I just have to look if it is possible.

    Regards Knut
     
    Knut Krueger, May 18, 2006
    #3
  4. 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

    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;
     
    Jonathan N. Little, May 18, 2006
    #4
  5. Knut Krueger

    David Graham Guest

    Try:

    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. 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 N. Little, May 18, 2006
    #6
  7. Knut Krueger

    Knut Krueger Guest

    Hi Jonathan, thanks four your help and the links.
    .... quirks modes are not intended ;-)
    but I will try to prevent them ...

    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
    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. 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
     
    Jonathan N. Little, May 19, 2006
    #10
  11. Knut Krueger

    Knut Krueger Guest

    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

    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.
    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. 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'
     
    Jonathan N. Little, May 19, 2006
    #13
  14. 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...
     
    Jonathan N. Little, May 19, 2006
    #14
  15. Knut Krueger

    Knut Krueger Guest

    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
    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

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

    Many thanks Knut
     
    Knut Krueger, May 20, 2006
    #16
  17. 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
     
    Jonathan N. Little, May 20, 2006
    #17
    1. Advertisements

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.