Images at the same distance ....?

[boen_robot]

Oh. That page. Sorry, I thought we were talking about your home page (as we usually do). I hadn't followed the full conversation to see that we're talking about a different page. Anyway... that page seems to already have the images at equal distances from the edge. As for the images being larger than the div... I actually noticed Chrome has the inspect element option too... it looks like a magnifying glass, near the bottom left corner of the dev tools.Click that, and hover under the text that's between the two images, and you'll see an outline that's smaller than the two images. It is because of it that the text appears slightly above the images, and the copyright appears so close to the right image's bottom.The easiest fix is to add "overflow:hidden;" to #main.

[eduard]

Oh. That page. Sorry, I thought we were talking about your home page (as we usually do). I hadn't followed the full conversation to see that we're talking about a different page. Anyway... that page seems to already have the images at equal distances from the edge. As for the images being larger than the div... I actually noticed Chrome has the inspect element option too... it looks like a magnifying glass, near the bottom left corner of the dev tools. Click that, and hover under the text that's between the two images, and you'll see an outline that's smaller than the two images. It is because of it that the text appears slightly above the images, and the copyright appears so close to the right image's bottom. The easiest fix is to add "overflow:hidden;" to #main.

Many thanks! I'll do that tomorrow (sunday)!

[eduard]

Oh. That page. Sorry, I thought we were talking about your home page (as we usually do). I hadn't followed the full conversation to see that we're talking about a different page. Anyway... that page seems to already have the images at equal distances from the edge. As for the images being larger than the div... I actually noticed Chrome has the inspect element option too... it looks like a magnifying glass, near the bottom left corner of the dev tools. Click that, and hover under the text that's between the two images, and you'll see an outline that's smaller than the two images. It is because of it that the text appears slightly above the images, and the copyright appears so close to the right image's bottom. The easiest fix is to add "overflow:hidden;" to #main.

I tried 'overfllow:hidden; to #main, but it didn't work! But isn't that also the wrong page?

[boen_robot]

Just to be sure, we're talking about this page, right?I don't see overflow:hidden in #main.And just to make sure we're talking about the same effect - what's the intended result here? What are we after? Like I said, the images are already at equal distance from the edge of the screen.What overflow:hidden should do is make the top edge of the text in the middle be on the same line with the top edges of the images, and hide anything that goes beyond the dimensions of #main. Actually, that reminds me... you might want to remove the "height" of #main, as otherwise, you're cutting off the bottoms of the images... Plus, if you were to add more text, you'll be cutting off that text too.Is the above the intended effect, or are you after something else, which is why you're saying it doesn't work?

[eduard]

Just to be sure, we're talking about this page, right? I don't see overflow:hidden in #main. And just to make sure we're talking about the same effect - what's the intended result here? What are we after? Like I said, the images are already at equal distance from the edge of the screen. What overflow:hidden should do is make the top edge of the text in the middle be on the same line with the top edges of the images, and hide anything that goes beyond the dimensions of #main. Actually, that reminds me... you might want to remove the "height" of #main, as otherwise, you're cutting off the bottoms of the images... Plus, if you were to add more text, you'll be cutting off that text too. Is the above the intended effect, or are you after something else, which is why you're saying it doesn't work?

No, wrong page (that one is ok!). I'm talking about www.eduardlid.net/nicolas/hospedaje/hospedaje.html!I want the images equally spread on the page! Edited September 23, 2012 by eduardlid

[boen_robot]

I see.... that's tricky...One way is to simply force only one image on each side. You can do that with a CSS like:

#imga > img:nth-child(odd) {float:right;clear:left;}#imga > img:nth-child(even) {float:left;}

This will make every odd numbered image (1st, 3rd, etc.) aligned with the right edge, while every even numbered image (2nd, 4th, etc.) will be aligned with the left edge. Thus the images will be evenly distributed between the left and the right, but there will be no images in between, even if there is enough space for a 3rd image to fill the gap.If you want to also fill in the middle, the formulas will be a lot trickier. In fact, I'm not sure if it's possible using currently implemented CSS properties. There's a "grids" proposal at W3C which addresses concerns like this, but it's not yet implemented in browsers.Note also the above solution only works in the latest browsers. It won't work, for example, in IE7.

[eduard]

I see.... that's tricky... One way is to simply force only one image on each side. You can do that with a CSS like:

#imga > img:nth-child(odd) {float:right;clear:left;} #imga > img:nth-child(even) {float:left;}

This will make every odd numbered image (1st, 3rd, etc.) aligned with the right edge, while every even numbered image (2nd, 4th, etc.) will be aligned with the left edge. Thus the images will be evenly distributed between the left and the right, but there will be no images in between, even if there is enough space for a 3rd image to fill the gap. If you want to also fill in the middle, the formulas will be a lot trickier. In fact, I'm not sure if it's possible using currently implemented CSS properties. There's a "grids" proposal at W3C which addresses concerns like this, but it's not yet implemented in browsers. Note also the above solution only works in the latest browsers. It won't work, for example, in IE7.

Do I´ve to do that 4 times (4 images)? (Sorry, the sun was on my screen!) I{ ve another question to you! (after this problem!)I want to make also a html contact form + php. Can I then (finally) say my website is ready? Edited September 23, 2012 by eduardlid

[boen_robot]

You could say your site is ready even now. After all, you define the requirements for your own site, not other people. If your requirements to yourself end up with a contact form, then yes, you can say your site is done then. If you don't want a contact form, you can declare your site "ready" right now. If after the contact form, you expand the requirements towards yourself, you'll again redeclare your site "not ready" until you meet those new requirements.Seriously, what's "ready"?

[eduard]

You could say your site is ready even now. After all, you define the requirements for your own site, not other people. If your requirements to yourself end up with a contact form, then yes, you can say your site is done then. If you don't want a contact form, you can declare your site "ready" right now. If after the contact form, you expand the requirements towards yourself, you'll again redeclare your site "not ready" until you meet those new requirements. Seriously, what's "ready"?

Ready? You gave the answer! Thanks!

[dsonesuk]

img are inline, i.e. act like text, plus you have to allow for different screen sizes so i suggest something similar to

#imga {text-align:center; min-width:960px;}img {width:20%; margin:2%; border: 3px solid #D3D3D3;}

[eduard]

img are inline, i.e. act like text, plus you have to allow for different screen sizes so i suggest something similar to

#imga {text-align:center; min-width:960px;}img {width:20%; margin:2%; border: 3px solid #D3D3D3;}

Ok, thanks!

[eduard]

I see.... that's tricky... One way is to simply force only one image on each side. You can do that with a CSS like:

#imga > img:nth-child(odd) {float:right;clear:left;} #imga > img:nth-child(even) {float:left;}

This will make every odd numbered image (1st, 3rd, etc.) aligned with the right edge, while every even numbered image (2nd, 4th, etc.) will be aligned with the left edge. Thus the images will be evenly distributed between the left and the right, but there will be no images in between, even if there is enough space for a 3rd image to fill the gap. If you want to also fill in the middle, the formulas will be a lot trickier. In fact, I'm not sure if it's possible using currently implemented CSS properties. There's a "grids" proposal at W3C which addresses concerns like this, but it's not yet implemented in browsers. Note also the above solution only works in the latest browsers. It won't work, for example, in IE7.

I´ve tried, but without success! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <head> <meta http-equiv="content-type" content="text/ html; charset=UTF-8"> <title>Hospedaje</title> <link rel="stylesheet" type="text/css" href="../ex3.css"> </head> <body> <div id="top"> </div> <h2>Hospedaje</h2> <div id="images"> <img id="image_1" src="1.JPG" alt="image hospedaje"> <img id="image_2" src="2.JPG" alt="image hospedaje"> <img src="3.JPG" alt="image hospedaje"> <img src="4.JPG" alt="image hospedaje"> </div> </body> </HTML> #images > img:nth-child(odd) {float:right;clear:left;} #images > img:nth-child(even) {float:left;}

[dsonesuk]

use

#imga {text-align:center; min-width:960px;}#imga img {width:20%; margin:2%; border: 3px solid #D3D3D3; min-width:240px;}

They will be alligned to centre, therefore the outer images edges (1 and 4) distance from the edge of browser will always be equal.

[eduard]

use

#imga {text-align:center; min-width:960px;}#imga img {width:20%; margin:2%; border: 3px solid #D3D3D3; min-width:240px;}

They will be alligned to centre, therefore the outer images edges (1 and 4) distance from the edge of browser will always be equal.

This I don´t understand! I suppose I must also have an imga id in my html, but I´ve id ´images?

[dsonesuk]

I used the example boen used didn't even check your site to see what you used, but it would not be hard to figure out that you don't have id ref 'imga', but 'image' instead, so change it to match.

[eduard]

Do I´ve to do that 4 times (4 images)? (Sorry, the sun was on my screen!) I{ ve another question to you! (after this problem!)I want to make also a html contact form + php. Can I then (finally) say my website is ready?

What´s wrong with this? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <head> <meta http-equiv="content-type" content="text/ html; charset=UTF-8"> <title>Hospedaje</title> <link rel="stylesheet" type="text/css" href="../ex4.css"> </head> <body> <div id="top"> </div> <h2>Hospedaje</h2> <div id="images"> <img id="image_1" src="1.JPG" alt="image hospedaje"> <img id="image_2" src="2.JPG" alt="image hospedaje"> <img src="3.JPG" alt="image hospedaje"> <img src="4.JPG" alt="image hospedaje"> </div> </body> </HTML> *{ margin:0px; padding:0px; } body { background-color:#FAFAD2; }#imga {text-align:center; min-width:960px;}img {width:20%; margin:2%; border: 3px solid #D3D3D3;} #h1 { font-family:arial,verdana,helvetica; font-size:30px; color:blue; text-align:center; } #images > img:nth-child(odd) {float:right;clear:left;} #images > img:nth-child(even) {float:left;} I finally found the cause of this problem (1 week!) In my html I refer to ex3.css! But it must be ex4.css! However, my images aren´t still good! Edited September 24, 2012 by eduardlid

[eduard]

What I don´t understand is that image 3 is beteen image 1 and 2! That´s not what I want: (image 3 left, under image 1)? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <head> <meta http-equiv="content-type" content="text/ html; charset=UTF-8"> <title>Hospedaje</title> <link rel="stylesheet" type="text/css" href="../ex4.css"> </head> <body> <div id="top"> </div> <h2>Hospedaje</h2> <div id="images"> <img id="image_1" src="1.JPG" width="400" height="300" align="left" alt="image hospedaje"> <img id="image_2" src="2.JPG" width="400" height="300" align="right" alt="image hospedaje"> </div> <div id=""> <img id="image_3" src="3.JPG" width="400" height="300" align="left" alt="image hospedaje"> <img id="image_4" src="4.JPG" width="400" height="300" align="right" alt="image hospedaje"> </div> </body> </HTML>

[boen_robot]

Before we continue, please update the copy on your site , and paste a URL to the updated page here.And don't do such bait&switch again, OK? Both me and dsonesuk used "imga" because that's what you have published on your site. It's a lot easier diagnosing a "live" copy, because that way, we can be sure we're looking at the same things.

[dsonesuk]

just to point out! this

#imga {text-align:center; min-width:960px;}#imga img {width:20%; margin:2%; border: 3px solid #D3D3D3; min-width:240px;}

is ONLY designed to be applied to 1 row OR multiple rows of 4 images, with #imga or #image depending on what you finally decide to use as id ref. 20% + (2 x 2%) = 24% means it will fit 100% 4 times, the remaining 4% is used to allow for border of image. if you want less or more images in a row you will have to calculate a percentage size that will allow it to fit, while being a suitable size to be shown on the page, this can be controled using min-width as used in example.

Edited September 25, 2012 by dsonesuk

[eduard]

Before we continue, please update the copy on your site , and paste a URL to the updated page here. And don't do such bait&switch again, OK? Both me and dsonesuk used "imga" because that's what you have published on your site. It's a lot easier diagnosing a "live" copy, because that way, we can be sure we're looking at the same things.

Why should I? Post nr. 1 was very clear, but if you don´t read this post carefully! By this I´ve lost much time and won much frustration! And no excuse (like argentinians!)

[boen_robot]

The 1st post says one URL, the one you finally led me to was a 2nd one, and you're now asking us to talk about a 3rd file that isn't even published anywhere. I'm sorry, but that's the furthest thing from "very clear".

[eduard]

The 1st post sayds one URL, the one you finally led me to was a 2nd one, and you're now asking us to talk about a 3rd file that isn't even published anywhere. I'm sorry, but that's the furthest thing from "very clear".

I´ve clearly written that you´ve to go to ´hospedaje´! and ´hospedaje´ is the 3 rd URL!Not published? Why do I refer to a web page that isn´t good??? Edited September 25, 2012 by eduardlid

[thescientist]

I´ve clearly written that you{ ve to go to ´hospedaje´! and ´hospedaje´ is the 3 rd URL! Not published? Why do I refer to a web page that isn´t good???

well, your site is already live.... but more to the point, it's because of this

It's a lot easier diagnosing a "live" copy, because that way, we can be sure we're looking at the same things.

Edited September 25, 2012 by thescientist

[eduard]

Wasn´t such a clear and simple answer not possible at W3Schools? Why didn't you just post the URL http://www.eduardlid.net/nicolas/hos...hospedaje.html to make it easy for people to go right to the page in question. Any minute you save us will be use to try to solve the issue at hand. 2) Your CSS ex4.css cannot be found. So you need to solve the path. 3) Create a container div(<div id="imgecontainer">....your images go here</div>) then:- solution a: set its let and right margins to the specific pixels value you desire.#imageoontainer{margin:0 40px; /* 0 for top and bottom, 40px fro left and right margins. Change to whatever values */overflow:hidden;} - solution b: set the width of #imagecontainer to a certain percentage of the page width then set its margins to auto#imagecontainer{width:90%; /* change to whatever percentage can accommodate your images */margin:0 auto;overflow:hidden;}

Edited September 26, 2012 by eduardlid

[dsonesuk]

That is 2 of many examples that could have been given, but it depend on set width images to fit small screen size/resolution, it looks fine in wide screen, in smaller will cause it to stack and look a mess unlessimage width, if fixed or fluid, and set min-width to control layout of images, is taken into account. AND answer to your question 1) YOU did not give direct access link to page, just go here, then here, then here, and which caused some to go wrong location and gave wrong solution as your site is a utter mess.2) YOU change from row of 4 images to row of 2 or 33) YOU can't be bothered to do the work yourself and always really just to do the work for YOU.4) That link shows a messed up display of broken images that are all over the place which is just what i expected to see from YOU.5) SO why 'Wasn´t such a clear and simple answer not possible at W3Schools?' BECAUSE OF wait for it!.... YOU!