Positioning Images On Webpage HTML |
Positioning Images On Webpage HTML |
vt.2015 |
Sep 15 2018, 08:10 AM
Post
#1
|
Group: Members Posts: 3 Joined: 15-September 18 Member No.: 26,715 |
Hello all,
I am relatively new to this and am struggling with what I am thinking is a seemingly easy process. I'm hoping it's just a change of syntax that will fix this. I need to place multiple images on a webpage using HTML that need to move and change size with the size of the browser window. So if I shrink the browser window, it should scale down the image but keep it so it is visible on the webpage. Below is the current code that I have for one of the images and I know my issue is with using Absolute positioning. As of right now, when I move the browser window, it just falls off the page. I would like to be able to customize exactly where they are on the page, which is why I am using Top and Left, instead of aligning it. I have also tried using fixed, relative, and sticky. The other issue that I have is the website builder that I am using allows me to place slideshow images centered on the page, so I do not want my images to cross over this if I scale down the browser window. Any help would be appreciated! Thanks so much! <p><img style="position: absolute; top: 10px; left: 1034px; width: 350px; height: 501px;" src="/image.jpg" alt="Image" /></p> This post has been edited by vt.2015: Sep 15 2018, 08:44 AM |
pandy |
Sep 15 2018, 09:33 AM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
So don't use AP. Images are text level elements, so they flow like words on a line. If you downsize the window they just form a new line, just as text. Depending on how the page looks you may need to put the images in a common DIV and somehow position that. That doesn't need to mean AP. Margins are often enough.
I don't know if this fits your layout. Another option is to float the images. If you link to the page we can offer more adequate advice. To make the images themselves scale you can give them a width in % and no height. The image will keep its aspect ratio. |
vt.2015 |
Sep 15 2018, 10:01 AM
Post
#3
|
Group: Members Posts: 3 Joined: 15-September 18 Member No.: 26,715 |
So don't use AP. Images are text level elements, so they flow like words on a line. If you downsize the window they just form a new line, just as text. Depending on how the page looks you may need to put the images in a common DIV and somehow position that. That doesn't need to mean AP. Margins are often enough. I don't know if this fits your layout. Another option is to float the images. If you link to the page we can offer more adequate advice. To make the images themselves scale you can give them a width in % and no height. The image will keep its aspect ratio. Hi Pandy, thanks for the info. Here is the webpage I am working with http://bnakidsagency.com/test I also reverted back to a simpler code for now just to align left and right, which I have included below. I would still like to be able to put the images in a certain location on the page, but I am not sure how to do that. Also, by AP, are you referring to the <p>? If so, the website builder that I am using automatically inserts those even if I don't put them there. Anytime I've tried to use DIV (from what I've read online) it automatically removes it when I go to save it. So using what I have below, how would you suggest I modify it so I can put it where I would like on the page as well as not run into the images in the center? And as far as the aspect ratio goes, would I say something like width:70%; height: 0%? <p><img style="width: 350px; height: 501px;" src="http://i1152.photobucket.com/albums/p488/vt2015/Final%203_zpsogu5wdac.png" alt="Image" align="right" /></p> Thanks again! |
vt.2015 |
Sep 15 2018, 01:13 PM
Post
#4
|
Group: Members Posts: 3 Joined: 15-September 18 Member No.: 26,715 |
UPDATE: So I took your advice with the Width % and that seemed to fix half the problem. Thanks so much for that! I still have one other problem though. I am trying to designate where to go on the page but my image on the right hand side of the page isn't cooperating. It is not going where I am telling it to go and I'm not sure why. I think is has to do with the fact that I can't use an Absolute position, but I am not sure what else to do. Below is my code for both images, and you can visit the site that I mentioned above to see where I am at. Thanks! <p><img style="position: static; top: 35px; left: 170px; width: 25%;" src="http://i1152.photobucket.com/albums/p488/vt2015/Final%203_zpsogu5wdac.png" alt="Image" /></p> <p><img style="position: static; top: 10px; left: 500px; width: 25%;" src="http://i1152.photobucket.com/albums/p488/vt2015/Final%203_zpsogu5wdac.png" alt="Image" align="right" /></p> This post has been edited by vt.2015: Sep 15 2018, 01:14 PM |
pandy |
Sep 15 2018, 09:43 PM
Post
#5
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
UPDATE: So I took your advice with the Width % and that seemed to fix half the problem. Thanks so much for that! I still have one other problem though. I am trying to designate where to go on the page but my image on the right hand side of the page isn't cooperating. It is not going where I am telling it to go and I'm not sure why. I think is has to do with the fact that I can't use an Absolute position, but I am not sure what else to do. Below is my code for both images, and you can visit the site that I mentioned above to see where I am at. Thanks! <p><img style="position: static; top: 35px; left: 170px; width: 25%;" src="http://i1152.photobucket.com/albums/p488/vt2015/Final%203_zpsogu5wdac.png" alt="Image" /></p> <p><img style="position: static; top: 10px; left: 500px; width: 25%;" src="http://i1152.photobucket.com/albums/p488/vt2015/Final%203_zpsogu5wdac.png" alt="Image" align="right" /></p> I'll look tomorrow, too sleepy now. Just wanted to say that you don't need to specify position: static since it's the default. And top and left does nothing when the box isn't positioned (other than static). And please, do something about that music or at least warn about it. I probably just woke my neighbours up! |
pandy |
Sep 15 2018, 09:51 PM
Post
#6
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
I took a quick look anyway.
Get rid of the Ps you have the images in. Paragraph is block level so it will move below the preceding block, "to the next line" if you wish. Also, put the width of the image in the HTML rather than in the CSS. That will make the page load nicer. I don't think it matters with this page, but it does if you have a lot of text that flows around. It's good practice. And don't use the align attribute. It's antiquated. Use CSS float instead. float: left, float: right. And later, consider using an external style sheet instead of style attributes everywhere. It's much easier to edit the CSS that way. |
Lo-Fi Version | Time is now: 29th March 2024 - 12:13 AM |