Help with website images.

Steve M · 8 Jun 2011 at 01:04

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

Steve M · 8 Jun 2011 at 11:24

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?

Steve M · 8 Jun 2011 at 16:17

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

Steve M · 8 Jun 2011 at 16:39

Maccy said:
If you search for the image 1309610 in the hdr.html file it'll find it.

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?

Steve M · 8 Jun 2011 at 17:02

I don't know where/how to edit that though.

Steve M · 8 Jun 2011 at 17:18

I really can't stress enough how much of a novice i am. The whole site is done via weebly http://www.weebly.com. I uploaded the pics via an upload tool on the site, i've now idea how to access the files..

Steve M · 8 Jun 2011 at 17:21

Maccy said:
Do you not have access to where it is hosted though?

No i don't.

Steve M · 8 Jun 2011 at 17:26

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?