Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > positioning images

Reply
Thread Tools

positioning images

 
 
Knut Krueger
Guest
Posts: n/a
 
      05-18-2006
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


 
Reply With Quote
 
 
 
 
Jonathan N. Little
Guest
Posts: n/a
 
      05-18-2006
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
 
Reply With Quote
 
 
 
 
Knut Krueger
Guest
Posts: n/a
 
      05-18-2006


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
>


 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      05-18-2006
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
 
Reply With Quote
 
David Graham
Guest
Posts: n/a
 
      05-18-2006
> 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




 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      05-18-2006
In article <ED3bg.63$(E-Mail Removed)>, 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
 
Reply With Quote
 
Knut Krueger
Guest
Posts: n/a
 
      05-19-2006


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



 
Reply With Quote
 
Knut Krueger
Guest
Posts: n/a
 
      05-19-2006

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

 
Reply With Quote
 
Knut Krueger
Guest
Posts: n/a
 
      05-19-2006
I did not find the difference why IE is not working.
Maybe I did something against the conventions .. I don't know

Regards Knut

 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      05-19-2006
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/tem...l20060519.html
More Flexible Layout


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS positioning images Knut Krueger HTML 0 05-18-2006 11:33 AM
css and positioning images repeating Peter HTML 2 03-26-2006 04:52 PM
DataList with RadioButtons + Images: How to click on the images to activate the radiobutton? Luis Esteban Valencia Muņoz ASP .Net 0 06-03-2005 03:22 PM
Track Images added to images folder and subfolders - send out email alerts ASP .Net 4 01-04-2005 10:01 PM
Can recover old images from SmartMedia card, but not recent images Stephen Stormont Digital Photography 9 10-20-2003 07:59 PM



Advertisments