How can I make my Multi-Page Photograph Gallery same width as my main 900 pixel width photo at the top on my photography website?
https://moskovita-photography.com
How to make my Multi-Page Photograph Gallery same width as my main 900 pixel width photo at the top?
Hello @jackmoskovita. Welcome to the forums.
Before looking at your query I think there are several things you need to look at first.
-
The validator reports several errors on this page. In particular you are using some deprecated HTML.
-
You shouldn’t be using an HTML table to contain your image - use a simple div, or even ested divs, if necessary.
-
If you want people on mobile devices to be able to view your website, you will need to look at making it responsive.
3 Likes
First, thanks for taking the time to help me. I’m new with CSS after using html for the past 12-15 years, so on a steep learning curve and pretty stumped at times.
I didn’t want to join/pay for one of the many website building sites as I’ve always built my own over the years. This was my last one
and it’s pretty outdated and why I’m doing the new one, to clean it all up.
http://www.moskovita-photography.com/stock_photography.htm
I’ll respond to your comments above.
Both versions are using obsolete techniques. Not something you should build on. Instead I suggest you to start all over, beginning with the HTML structure.
You know what you want to achieve in the end so the start is already done. 
To get an uptodate site, you’ll find tutorials and deeper info for both beginners and web professionals here:
And for devs (and you), web techniques references:
HTML:
CSS:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
We are here when you need advice and suggestions to get you further.
1 Like
That’s a lot of good info and will take awhile to digest and implement.
Shoot, I just built this website too.
Anyways, until I revamp this website all over again, (it took me a long time to to build this one)
Can you please help me with my original question?
How can I make my Multi-Page Photograph Gallery same width as my main 900 pixel width photo at the top on my photography website?
https://moskovita-photography.com
My current website will have to work until I build yet a new one.
Build a new one using newer techniques. Study as you go… and validate your code.
https://validator.w3.org/nu/?doc=https%3A%2F%2Fmoskovita-photography.com%2F%23Birds
Be clear about your wishes. Drawings might help.
What is special about 900px width other than it is the native width if your image?
We will be glad to work with you to assist your learning.
2 Likes
Well I fixed some things, eliminated 11 of the 18 error codes in the code check for my main “domain” website:
Seven to go.
As for the border around the main photo, I got rid of it.
I’m wondering what you used to get those two screenshots of my site on desktop and phone… I wasn’t getting that on my 42" desktop screen, nor 15" laptop, nor iPhone 8+. Everything lined up, looked perfect there?
Now for the gallery border size, I wanted it wider, bigger, preferably the same width of my 900 pixel width photo at the top or at least close to that. How do I achieve that? I’m not understanding the gallery code for that.
You have quite a few classes limiting the width of the gallery section.
Class .photo has a width of 635px; .topic has a width of 635px, and .photo ul.topic li has a width of 125, and there are probably others. Each of those will need to be changed.
1 Like
Okay then, what do I do? Meanwhile I’m finishing up those 7 errors left on my main page. It’s not a killer if I can’t but I was thinking a bigger gallery would be easier to be seen on a cell phone?
Well, you need to change those widths to values you want.
You can change .photo to 900px rather than 635. I think the width for .topic can probably be removed altogether. But you will also need to find all the other places that are limiting the widths - I mentioned one, but I suspect there will be others.
Whatever else you do, keep a copy of the original file(s) in case you mess up.
4 Likes
Well, I tried putting 900px for the only two 635px I found
.photo {width:900px; height:550px; text-align:left; position:relative; margin:0 auto;}
.photo ul.topic {padding:0; margin:0; list-style:none; width:900px; height:auto; position:relative; z-index:10;}
And all it did was move the whole gallery over to the left side? The gallery size stayed the same. I recalled I tried that already twice and that happen.
Now what do I try?
But you will also need to find all the other places that are limiting the widths - I mentioned one, but I suspect there will be others.
I doubt you’ll get anyone to locate them all for you. That’s something you’ll need to do yourself.
To be honest, if you are thinking of redeveloping the site, I think you would be better putting your time and effort into and leave your current site as it is.
2 Likes
My thoughts exactly at this point. The website doesn’t look too shabby as is.
1 Like
I opened your web page in my browser and changed the width of the browser window between full screen width and fairly narrow (whatever the width of the image shown in the screenshot is. I did not use a tool to tell my browser to simulate different widths.
Your code assumes that the user’s browser width matches the screen or otherwise does not change after the initial device query. I was testing for a fluid responsive design.
I see…
Y’all gotta admit the current website is a LOT better than my old one:
Now Renamed:
http://www.moskovita-photography.com/stock_photography.htm
1 Like
I think you could say that again in a week if you like. 
One [not so] little thing puzzles me… why do the number of errors shown by the validator increase [dramatically] with each revision of your code? Do you not validate after changing your code?.. before posting it?
How are you writing code? or what tool is writing it for you?
https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.moskovita-photography.com%2Fstock_photography.htm
1 Like
First, I’m old school and I hand built my old website which has over a hundred links it with notepad, good 'ol html. It’s at least 15 years old. That is the one you validated. That is all html. If you validate my new domain one, Moskovita Photography, I think there is only 8 or 9 errors, so vastly improved.
https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.moskovita-photography.com%2F
CSS is very confusing to me since I just started it for my new website a couple weeks ago and maybe should use a tool for that as I was just looking at different sources of wildlife websites I like and tried writing it from those. I did use a style sheet I liked for the gallery…
/* ======================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/lightbox.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
======================================================= */
I did the same thing for the buttons and slideshow too.
So maybe recommend what I do from here on out?
That’s a very nice gallery. But you would have great difficulty to change its width to e.g. 900px.
To give a hand I took that gallery CSS and made some changes in order to make it fluid so you can decide a max-width for it to fit your layout. In case you want a differnt thumbnail size I’m convinced you’ll figure out what their lenghts are that needs to adjust.
Replace the gallery CSS part you already have with this part:
/* slides styling */
.photo {max-width:930px; position:relative; margin:0 auto;}
.photo ul.topic {display:table; padding:0; margin:0; list-style:none; width:100%; height:auto; position:relative; z-index:10; text-align:center; white-space:nowrap;}
.photo ul.topic li {display:table-cell; width:1%;}
.photo ul.topic li a.set {display:block; font-size:11px; line-height:30px; color:#000; text-decoration:none; border:solid #fff; border-width:1px 1px 0 0; background:#ccc; font-family:verdana, arial, sans-serif; padding:0 2px;}
.photo ul.topic li ul {display:none; white-space:normal; list-style:none; padding:0; margin:0; }
.photo ul.topic li.active a {color:#000; background:#bbb;}
.photo ul.topic li:hover a {color:#fff; background:#aaa;}
.photo ul.topic li.active ul {display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; background:#ddd; padding:30px 45px 35px; border:15px solid #bbb; z-index:1;}
.photo ul.topic li:hover ul {display:block; position:absolute; left:0; top:31px; background:#ddd; padding:30px 45px 35px; border:15px solid #aaa; z-index:10;}
.photo ul.topic li ul li {display:inline-block; width:112px; height:87px; float:none; border:1px solid #fff; margin:1px;}
.photo ul.topic li ul li a {display:block; width:110px; height:85px; cursor:default; float:left; text-decoration:none; background:#444; border:1px solid #888;}
.photo ul.topic li ul li a img {display:block; width:100px; height:75px; border:5px solid #eee;}
.photo ul.topic li:hover ul li a:hover {white-space:normal; position:relative; z-index:100;}
.photo ul.topic li:hover ul li a:hover img {position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#fff;}
The Stu Nicholls “Cross Browser Multi Page Photograph Gallery” demo made fluid width and height for any number of images and additional pages if needed:
cssplay.co.uk_menu_lightbox.zip (2.0 KB)
Edit)
Forgot to remove the old IE hack CSS. (Those a:hover * lines for old IE)
Edit 2)
The suggested gallery also needs a “spaceholder” list at the end to claim the actual space used by the gallery. Like this:
.photo .spaceholder { display:block; padding:30px 45px 35px; border:15px solid transparent;} /* holds padding and border lengths of the active .topic list */
.photo .spaceholder li { display:inline-block; width:112px; height:87px; border:1px solid transparent; margin:1px;} /* holds width and height and border and margin lengths of .topic items */
</ul><!-- end topic list -->
<ul class="spaceholder">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div><!-- end photo div -->
Sorry I’m so lazy. 
3 Likes