Help with website images.

Steve M

Steve M

Steve M

Associate
Joined
14 Dec 2007
Posts
1,586
I'm looking for some help. I've made my first ever website through weebly: www.stevemillwardphotography.com. It's a photography website but i'm having some issues getting my vertical images to display correctly using their photo gallery.

If you go into one of the galleries here: http://www.stevemillwardphotography.com/hdr.html all of the horizontal images are scaled to fit the screen (when enlarged) when i view them on different displays with different resolutions, which is great, but the 2 taller vertical images in there are always displayed at full size and therefore don't fit the screen when viewed say from a laptop.. how can i fix this?

I'm happy to post the pages HTML / CSS code here if this is needed?

Ideally i would like to have a slide show rather than a gallery but when i use the slideshow code provide by weebly NONE of the images are scaled to fit the screen and so look stupid when viewed on a smaller resolution as they go off the screen...
 
Last edited:
I'd guess the routine that checks if the image fits the window is only working on the width of the image, as opposed to the height. Therefore any landscape images won't be affected.

If you have a look at the documentation of the lightbox you're using there may just be a setting you need to change.
 
How would i do that? I really am a novice and this is the first time i've ever done anything like this.

Are you able to provide more details on where to edit this and what values to change please?
 
You'll need to go into the hdr.html file and edit the inline style (I think). For the two images in question you have the width set to 100% but no height value.

For image 1309610, the div code is currently -

Code: 
<div style='position:relative;width:100%;padding:0 0 75.08%;'>

Change it to -

Code: 
<div style='position:relative;width:100%;height:100%;padding:0 0 75.08%;'>

Do the same for the other image.

I could be wrong, but I think this will solve it...!
 
EDIT: given up on that. I now have a slide show of my photos. Same question applies though, how do i get the slideshow to autosize for the resolution they are viewed in?

This is all the text from the CSS tab of the slideshow page:

*|* {
margin:0pt;
padding:0pt;
}
body {
background-color:#fff;
font-family:"lucida sans", arial, sans-serif;
font-size:.75em;
color:#333333;
margin:0;
padding:0;
}
p {
line-height:1.5;
}
h1, h2, h3{
line-height:1.5;
}
#wrapper {
width:100%;
height:100%;
margin:0pt auto;
}
#contents {
width:960px;
height:100%;
margin:0pt auto;
}
*html #contents {
width:920px;
}
#header {
float:left;
width:960px;
height:91px;
text-align:middle;
margin:0pt auto;
}
#sitename {
position:relative;
float:left;
padding-top:25px;
font-family:"times new roman",garamond, serif;
color:#333333;
font-size:2.5em;
text-align:center;
}
#navigation {
float:left;
background: transparent url(nav_background.jpg) no-repeat center top;
float:left;
width:960px;
height:40px;
margin:0 auto;
font-family:"lucida sans", arial, sans-serif;
font-size:1em;
}
#navigation ul {
float:left;
padding-left:20px;
padding-top:12px;
margin-left:0px;
width:940px;
height:28px;
}
*html #navigation ul {
margin-left:-12px;
}
#navigation li {
float:left;
display:inline;
font-size:1em;
padding:12px 20px 13px 20px;
margin-top:-12px;
height:15px;
}
*html #navigation li {
margin-right:4px;
}
#active {
float:left;
background: transparent url(activetab_background.jpg) no-repeat center top;
color:#fff;
text-align:center;
}
#navigation a:link {
color:#fff;
text-decoration:none;
}
#navigation a:hover {
color:#fff;
text-decoration:none;
}
#navigation a:visited {
color:#fff;
text-decoration:none;
}
#active a:link {
color:#fff;
text-decoration:none;
}
#active a:hover {
color:#fff;
text-decoration:none;
}
#active a:visited {
color:#fff;
text-decoration:none;
}
a:link, a:hover, a:visited {
color:#198bef;
font-weight:normal;
text-decoration:underline;
}
#main {
clear:both;
width:920px;
min-height:400px;

height:400px;
padding:30px 20px 30px 20px;
}
img.image-left {
margin-right:15px;
float:left;
}
img.image-right {
margin-left:15px;
float:right;
}
/* Footer */
#footer {
visibility:hidden;
color: #C6DDEE;
background: #CCC url(footer.jpg) no-repeat center top;
}
#footer-contents {
float:left;
color:#333;
font-family:"lucida grande", "lucida sans", arial, sans-serif;
padding:15px 0 0 20px;
width:940px;
height:28px;
}
*html #footer-contents {
margin-top:-5px;
}
input {
background-color:#fff;
border:1px solid #999;
font-size:12px;
}
textarea {
background-color:#fff;
border:1px solid #999;
font-size:12px;
}
 
Last edited:
Maccy said:
If you search for the image 1309610 in the hdr.html file it'll find it.
Click to expand...

Sorry to be a pain but i really want to get this sorted, its driving me mad! I've now edited the post you've replied to. Can you help regarding getting my slideshow to autosize?
 
I'll have to give up then. Doing it through weebly using their themes and doing basic editing is about my limit.

Is there definately nothing i could edit in the CSS code i posted to get the images to autosize to fit the page?
 
You must log in or register to reply here.
Back
Top Bottom