positioning images

K

Knut Krueger

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
 
J

Jonathan N. Little

Knut said:
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.
Click to expand...

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

Knut Krueger

Jonathan said:
Knut Krueger wrote:
....
Click to expand...

<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!
Click to expand...

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

Regards Knut
 
J

Jonathan N. Little

Knut said:
<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.
Click to expand...

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.
Click to expand...

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

David Graham

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>
Click to expand...


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

Jonathan N. Little

david.graham18 said:
Why the display block? - what does that do?, can't you just float left and
right without the display block?
Click to expand...

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

Knut Krueger

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.
Click to expand...

.... 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.
Click to expand...

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!
Click to expand...

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
 
K

Knut Krueger

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
 
K

Knut Krueger

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

Regards Knut
 
K

Knut Krueger

Jonathan said:
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
Click to expand...
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
 
K

Knut Krueger

Jonathan said:
Okay, you *should* quote what you are referring to on your post to news
groups....
Click to expand...

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...
Click to expand...

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
 
J

Jonathan N. Little

Knut said:
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 ...
Click to expand...

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

Jonathan N. Little

Knut said:
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
Click to expand...

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

Knut Krueger

Jonathan said:
What manuals? The WC recommendations?
Click to expand...
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.
Click to expand...
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
 
K

Knut Krueger

Jonathan said:
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...
Click to expand...
Perfect to start up the page,
the rest of all wishes will have time.

Many thanks Knut
 
J

Jonathan N. Little

Knut said:
Jonathan N. Little schrieb:
What would be the markup part of this site? The text and some pictures
any HTML without any errors using the html validation?
Click to expand...

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
 

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. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

CSS positioning images 0
Flip-Cards with Local Images 1
Re: CSS for positioning 334
R"richard" help out: background images in mobile 5
HTML Aligning social media icons 2
Help with my responsive home page 2
Positioning of DIV tag in center of the screen 20
Markup error and dsiplay errors 0

Members online

Total: 40 (members: 2, guests: 38)
Robots: 332

Forum statistics

Threads
473,755
Messages
2,569,537
Members
45,022
Latest member
MaybelleMa

Latest Threads

Top