Login | Register | FAQ
Anonymous

positioning images -absolute position?

+ Post a reply

15 posts 1, 2


positioning images -absolute position?

by goodfly » Fri Nov 26, 2010 9:12 pm

Hello,

I have posted my question on the German forum and want to thank you Andreas for your first advise.
The English-forum seems to be more active, so I will try to present my problem here..

Using your helpful tutorials I have started creating my page. All together I have 4 images, which I have positioned exactly where I want them (using "absolute position", except "Co-Trainer" which is centred). My problem is, when my page is opened in a small notebook or iphone/pad the images are overlapping. The same happens when zooming (ctrl +) the page.

How can I get all the inserted images into the desired position and at the same time have a "complete picture" of the page in which all images change size and position proportionally when zooming (without any overlapping)?

http://www.aar-training.de/

Thank you in advance!
User avatar

goodfly

  • Posts: 82
  • Joined: Fri Nov 26, 2010 7:20 am

Re: positioning images -absolute position?

by goodfly » Sat Nov 27, 2010 1:22 pm

Hello CubeSquare,

thank you for the link!

Where can I find your website?

-goodfly
User avatar

goodfly

  • Posts: 82
  • Joined: Fri Nov 26, 2010 7:20 am

Re: positioning images -absolute position?

by HTML.net » Sat Nov 27, 2010 1:54 pm

goodfly wrote:How can I get all the inserted images into the desired position and at the same time have a "complete picture" of the page in which all images change size and position proportionally when zooming (without any overlapping)?


Scalable web design is a very good idea. In short you need to use procents (%) instead of pixels (px).

- Andreas, HTML.net
User avatar

HTML.net
Site Admin

  • Posts: 1185
  • Joined: Sat Sep 11, 2010 11:24 am
--
Show some love for HTML.net on Twitter, Facebook and Google: Use the buttons on top of all pages.

Re: positioning images -absolute position?

by goodfly » Sat Nov 27, 2010 7:58 pm

CubeSquare wrote:Hello goodfly,

I'm a beginner. I've been teaching myself for about 5 months. I have a basic understanding of html and css. I have the XAMPP package from apachefriends.org which affords me the opportunity of working in a developers environment through the use of a localhost. To date, and through the help I've received with the HTML.net tutorials, I've managed to dabble in PHP and separate a header design into an Include folder so that the header becomes global. But,as yet, no Website, no domain name.
I'm still trying to figure out how it's done. I am active in this Forum, because, I received so much help here, that the coin has flipped, and now as I continue to learn, I'm able to give back, or pass it along, so to speak. Your question to the Forum is a good example, I didn't know all the answer, but after looking at your code, I could see that the use of points and pixels was holding you back, so I hooked you up with a pretty good explanation, right after I googled "px vs pt vs em vs %" Then, satisfied with the explanation, I passed it along to you.

-CubeSquare


You surly dont sound like a beginner to me! (I've only got three-day-experience) Thank you for your help!!!!
Using % makes alot of sense!! But I didnt get around to do that as yet.
Since Andreas and many others advise to work with an external style sheet, I have now created one. I have also given my four images id's, so that I can position them individually.

I must be doing something wrong?? All images are in one line next to each other..

CSS:

body {
background-color:#ccffff;
}

h1 {font-size: 25px; font-family: arial;text-align: center; }
h2 {font-size: 20px; font-family: arial;text-align: center; }
p {font-size: 15px; font-family: arial;text-align: center; }

#co-trainer {position:absolute;top:100px;right:500px; }
#const {position:absolute;top:150px;left:45px; }
#profil {position:absolute;top:585px;right:140px; }
#paint {position:absolute;top:100px;right:50px; }
________________

HTML:

<head>
<title>Anthony A. Rennalls Training</title>
<link rel="stylesheet" type="text/css" href="style.css" />



</head>

<body>
<h1>Anthony A. Rennalls <small-caps>Training</small-caps></h1>
<h2>Train the Trainer - Präsentationstraining - Cartooning</h2>
<p>Unsere Webseite wird zur Zeit erstellt. Bitte besuchen Sie uns bald wieder. </p>
<p>Email: <b>[email protected]</p>
<p><a href="http://www.youtube.com/watch?v=_noR4wytlZw&feature=channel">Click to watch me on Youtube!</a></p>
<img id="co-trainer" src="Co-Trainer.gif" alt="Co-Trainer" />
<img id="const" src = "Const.gif" alt = "Achtung Baustelle!" />
<a href="https://www.xing.com/profile/AnthonyArden_Rennalls"><img id="profil" src="Profil.gif" /></a>
<img id="paint" src="paint.gif" alt="Wet paint!!" />
</body>

</html>

Somehow the id's are not being recognized or the code is wrong?
After I get this to work, I will use %.
Any suggestions?
User avatar

goodfly

  • Posts: 82
  • Joined: Fri Nov 26, 2010 7:20 am

Re: positioning images -absolute position?

by goodfly » Sat Nov 27, 2010 9:29 pm

Well, I tried div, but the problem remains the same. When I hit ctrl + the same thing happens again :-(
How come no other website has that problem? What's the point in having absolute position, when as soon as you zoom everything moves all over?
There must be an easier way!

CSS:

body {
background-color:#ccffff;
}

h1 {font-size: 25px; font-family: arial;text-align: center; }
h2 {font-size: 20px; font-family: arial;text-align: center; }
p {font-size: 15px; font-family: arial;text-align: center; }

#co-trainer {position:absolute;top:33%;left:35%; }
#const {position:absolute;top:22%;left:3%; }
#profil {position:absolute;top:585px;right:140px; }
#paint {position:absolute;top:100px;right:50px; }

_____________

HTML:

<html>

<head>
<title>Anthony A. Rennalls Training</title>
<link rel="stylesheet" type="text/css" href="style.css" />



</head>

<body>
<h1>Anthony A. Rennalls <small-caps>Training</small-caps></h1>
<h2>Train the Trainer - Präsentationstraining - Cartooning</h2>
<p>Unsere Webseite wird zur Zeit erstellt. Bitte besuchen Sie uns bald wieder. </p>
<p>Email: <b>[email protected]</p>
<p><a href="http://www.youtube.com/watch?v=_noR4wytlZw&feature=channel">Click to watch me on Youtube!</a></p>

<div id="co-trainer">
<img src="Co-Trainer.gif" alt="Co-Trainer" />
</div>

<div id="const">
<img src = "Const.gif" alt = "Achtung Baustelle!" />
</div>

<div id="profil">
<a href="https://www.xing.com/profile/AnthonyArden_Rennalls"><img src="Profil.gif" /></a>
</div>

<div id="paint">
<img src="paint.gif" alt="Wet paint!!" />
</div>

</body>

</html>
User avatar

goodfly

  • Posts: 82
  • Joined: Fri Nov 26, 2010 7:20 am

Re: positioning images -absolute position?

by goodfly » Sat Nov 27, 2010 9:48 pm

In lesson 15 we have an example with five images (position absolute, px):
http://de.html.net/tutorials/css/lesson15_ex1.php

Now when I zoom into this page, the overlapping cards get either larger or smaller, but all stays in proportion! The cards dont go off in different directions nor do they start covering up each other.

???
User avatar

goodfly

  • Posts: 82
  • Joined: Fri Nov 26, 2010 7:20 am

Re: positioning images -absolute position?

by goodfly » Sun Nov 28, 2010 10:35 am

Could it have to do with the validation?

http://validator.w3.org/check?verbose=1 ... ning.de%2F

Although the warnings refer mainly to the links, which I just copied in. (?)
User avatar

goodfly

  • Posts: 82
  • Joined: Fri Nov 26, 2010 7:20 am

Re: positioning images -absolute position?

by goodfly » Sun Nov 28, 2010 3:38 pm

Thank you, thank you, thank you CubeSquare!

Take a look.. http://www.aar-training.de/

When you hit F11 all can be seen!

Only problem now is... 1.) "Pr?sentationstraining" instead of "Präsentationtraining"

and

2.) I have tried to layer the text. Positioning it is no problem. But when zooming it ends up behind the images.

HTML:

<!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" lang="de">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Anthony A. Rennalls Training<title>
<link href="index.css" rel="stylesheet" type"text/css" />
</head>
<body style="background-color:#ccffff;">

<div id="container">

<div id="text">
<h1>Anthony A. Rennalls Training
</h1>
<h2>Train the Trainer - Präsentationstraining - Cartooning</h2>
<p>Unsere Webseite wird zur Zeit erstellt. Bitte besuchen Sie uns bald wieder.</p>
<p>Email: <b>[email protected]</b></p>
<p><a href="http://www.youtube.com/watch?v=_noR4wytlZw&feature=channel">Click to watch me on Youtube!</a>
</p>
</div>

<div id="paint">
<img src="paint.gif" alt="Wet paint!!" />
</div>

<div id="co-trainer">
<img src="Co-Trainer.gif" alt="Co-Trainer" />
</div>

<div id="const">
<img src="Const.gif" alt="Achtung Baustelle!"/>
</div>

<div id="profil">
<a href="https://www.xing.com/profile/AnthonyArden_Rennalls"><img src="Profil.gif" /></a>
</div>

</div>
</body>
</html>

CSS:

#container {
width: 100%;
position: relative;
}

h1 {
font-size: 150%;
font-family: arial;
text-align: center;
}

h2 {
font-size: 125%;
font-family: arial;
text-align: center;
}

p {
font-size: 100%;
font-family: arial;
text-align: center;
}

#text {
position:absolute;
top:5px;
left:430px;
z-index: 1;
}

#paint {
position: absolute;
top: 100px;
left: 1110px;
z-index: 2;
}

#co-trainer {
position: absolute;
top: 220px;
left: 470px;
z-index: 3;
}

#const {
position: absolute;
top: 160px;
left: 40px;
z-index: 4;
}

#profil {
position: absolute;
top: 620px;
left: 1000px;
z-index: 5;
}

it's almost solved! :-)
User avatar

goodfly

  • Posts: 82
  • Joined: Fri Nov 26, 2010 7:20 am

Re: positioning images -absolute position?

by goodfly » Sun Nov 28, 2010 8:45 pm

Thanks CubeSquare!
You're really of much help!!
Where are you from?
I'm from Germany.

I've made the images smaller, so there is no need to scroll that much any longer.
All I have to figure out now is how I can layer my text.
The images are staying in proportion, only the text gets covered when zooming.

cheers,
goodfly
User avatar

goodfly

  • Posts: 82
  • Joined: Fri Nov 26, 2010 7:20 am

Re: positioning images -absolute position?

by goodfly » Mon Nov 29, 2010 2:56 pm

Hey CubeSquare,

that's a fantastic video! It's just what I needed! The tutorials from Andreas are really good for getting to know some background information, the build-up of basic codes and the framework of a website. I have learned different codes here, now how do I put it all together? The video came in just right. You have a good sense of timing, because I needed to see how someone actually writes a html file and css sheet.

Sorry to hear about your medical condition, but I am sure you're looking after yourself.

You say you take long to digest things and take it step-by-step. I think that's the best way of going about complex matters. You don't come across as you describe yourself. I am moved to say that you are very positive, encouraging and helpful. Your postings show that you have a high degree of emotional intelligences (which is much underestimated in our society).

cheers,
goodfly
User avatar

goodfly

  • Posts: 82
  • Joined: Fri Nov 26, 2010 7:20 am


+ Post a reply

1, 2

?>