is it possible???

[mgomez]

Hello again

I assumed that this would be impossible but I know get the impression that ANYTHING is possible......!

I want my picture to spread across the entire width of the page in the following gallery

www.merryngomezphotography.smugmug.com/gallery/1297104 (http://www.merryngomezphotography.smugmug.com/gallery/1297104)

and then the text to flow straight underneath it.

.... does that make sense?

Any assistance hugely appreciated!!

Merryn

[Mike Lane]

Hello again

I assumed that this would be impossible but I know get the impression that ANYTHING is possible......!

I want my picture to spread across the entire width of the page in the following gallery

www.merryngomezphotography.smugmug.com/gallery/1297104 (http://www.merryngomezphotography.smugmug.com/gallery/1297104)

and then the text to flow straight underneath it.

.... does that make sense?

Any assistance hugely appreciated!!

Merryn

You want which pic to stretch across the width of the page? The top row of pictures that you've got there?:ear If that's what you want, then yeah, that can be done easily. But if you're talking about some other pic, then I'll need more info...

[mgomez]

Sorry Mike, I should have been more specific....

I want all of the pictures in the 'journal' style to stretch right across the page (to the same width as the writing) but still be the same height as they are now so that I can use the picture as a way to create a heading. - does that make sense?

I would also like to know how to do the same with the pictures at the top like you said too....

[Mike Lane]

Sorry Mike, I should have been more specific....

I want all of the pictures in the 'journal' style to stretch right across the page (to the same width as the writing) but still be the same height as they are now so that I can use the picture as a way to create a heading. - does that make sense?

I would also like to know how to do the same with the pictures at the top like you said too....

I'm not 100% sure I understand (I'm kind of slow - ask anyone :uhoh). But if I do understand what you're looking for it will take a bit of a javascript hack from a dgrinner named Rutt (found here (http://dgrin.com/showpost.php?p=318417&postcount=139)). What that hack will do is make it so your images are as wide as you want them to be in the journal style. I'd call it an advanced hack so be ready for that. For specific help with that hack, write a response in that thread. The other (easier) think you could do is to adjust the width of the journal style boxes for that gallery. The downside is that you will end up with a small strip of text and such going right down the middle. That may not be what you're looking for.

Now, on to the images across the top of your page. Do you want those for all galleries on your site or do you want them just for that gallery? In either case, what we're going to do is to make that a background image of a layer that spans the width of the page and make it repeat just horizontally. That means that each of those pics will repeat several times. If that's not what you want, then you'll have to create a new graphic with a bunch of new pics in it and we can use the new graphic. It'll still repeat but not as much since it'll be larger. If you're cool with using that graphic, we can get started.

[mgomez]

As for my first question, I think I have found a better solution, I want to make it a text only page like this

www.christyparker.smugmug.com/gallery/1562743

but I have so much trouble changing the font for some reason, I will do a bit more searching and see how I go....


For the image across the top, I would like it to be on all pages across the top and for now I would like it to be the same image that is there, just repeated as long as this will be asy to change to another image later.....

[Mike Lane]

For the image across the top, I would like it to be on all pages across the top and for now I would like it to be the same image that is there, just repeated as long as this will be asy to change to another image later.....
It'll be very easy to change. So let's get started shall we? Here's what you currently have in your header html box:

<div align="center">
<img src="
http://merryngomezphotography.smugmug.com/photos/62285192-M.jpg">
</div>
<div align="center">
<img src="http://merryngomezphotography.smugmug.com/photos/61028233-M.jpg">
</div>
<div align="center">
<img src="http://merryngomezphotography.smugmug.com/photos/61028234-M.jpg">
</div>




<div id="navcontainer">
<ul>
<li><a href="http://merryngomezphotography.smugmug.com/">Home</a></li>
<li><a href="http://merryngomezphotography.smugmug.com/Portraits">Portraits</a></li>
<li><a href="http://merryngomezphotography.smugmug.com/Weddings">Weddings</a></li>
<li><a href="http://merryngomezphotography.smugmug.com/Art%20&%20Design">Art & Design</a></li>
<li><a href="http://merryngomezphotography.smugmug.com/Private%20Galleries">Private Galleries</a></li>
<li><a href="http://merryngomezphotography.smugmug.com/gallery/1567544">The Experience</a></li>
<li><a href="http://merryngomezphotography.smugmug.com/gallery/1297104">Packages & Pricing</a></li>
<li><a href="http://merryngomezphotography.smugmug.com/gallery/1319921">About Me</a></li>
<li><a href="mailto: mgomezphotos@optusnet.com.au">Contact me</li> <li><a href="http://merryngomezphotography.smugmug.com/gallery/1297103">Guestbook</a></li>
Go ahead and change it to this:

<div id="myHeader">
<img src="http://merryngomezphotography.smugmug.com/photos/61028233-M.jpg" id="title1" />
<img src="http://merryngomezphotography.smugmug.com/photos/61028234-M.jpg" id="title2" />

<div id="navcontainer">
<ul>
<li><a href="http://merryngomezphotography.smugmug.com/">Home</a></li>
<li><a href="http://merryngomezphotography.smugmug.com/Portraits">Portraits</a></li>
<li><a href="http://merryngomezphotography.smugmug.com/Weddings">Weddings</a></li>
<li><a href="http://merryngomezphotography.smugmug.com/Art%20&%20Design">Art & Design</a></li>
<li><a href="http://merryngomezphotography.smugmug.com/Private%20Galleries">Private Galleries</a></li>
<li><a href="http://merryngomezphotography.smugmug.com/gallery/1567544">The Experience</a></li>
<li><a href="http://merryngomezphotography.smugmug.com/gallery/1297104">Packages & Pricing</a></li>
<li><a href="http://merryngomezphotography.smugmug.com/gallery/1319921">About Me</a></li>
<li><a href="mailto: mgomezphotos@optusnet.com.au">Contact me</a></li>
<li><a href="http://merryngomezphotography.smugmug.com/gallery/1297103">Guestbook</a></li>
</ul>
</div>
</div>


You can probably just cut and paste. That's going to make your image go away completely and stuff will no longer be centered. Don't freak out, we're going to fix that with CSS.

[Mike Lane]

Also you need to go into your bio and find this:

<div id "mySlideshow"></div>

and make it look like what I've got below (add the red):

<div id="mySlideshow"></div>

[mgomez]

done both..... only SLIGHTLY freaking out!

[Mike Lane]

Now put this:

#myHeader {
background:url(http://merryngomezphotography.smugmug.com/photos/62285192-O.jpg) top repeat-x;
padding-top:115px;
}

#myHeader #title1,
#myHeader #title2 {
display:block;
margin:0 auto;
}

In your CSS. The parts in yellow are what you will be changing in the event that you ever want to use a different image. You just upload that new image to smugmug, copy the URL and paste it into the first part. Then if the new image is something other than 115px tall, simply change the 115 to reflect the new height. All in your CSS, no problemo.

Now, let's talk about that header of yours. It's freaking huge. It's 289 pixels tall!!! :huh And it's on every single page. Blah. If I were you, I'd start considering an alternate for your galleries. You can most definitely leave it the way it is for your home page and category pages and all that kind of stuff. But for gallery pages, I'd make it no taller than 100px tall total (smaller if you can). The beauty is that we can probably just do it all with CSS even if you want to use different images. So you just come up with the look, I'll help you implement it.

[mgomez]

he he he

I didnt realise it was freaking huge! I just did what worked and left it!!

The problem is now my pictures have disappeared from across the top, what I had done previously (as I could not figure out how to make a header bigger than 115 high) was create a number of different ones and line them up beneath each other.

To get the pics on there as well, should I go back into photoshop and create the photos and the text in one image??

[mgomez]

I would like to have the whole lot as my header for Home page and info pages etc but like you said it is a bit much for the gallery pages, so I think Ill just have the Merryn Gomez Photography bit for them SO...

I am guessing I need to create 2 images, one with the lot and one with what I want for the gallery pages?

[Mike Lane]

I bet there are a few things that aren't working like you want them to huh? There's a very simple explanation for that. Here is your CSS:

FILMSTRIP GETS RID OF NUMBERS ETC
.filmstrip #albumNav_top, .filmstrip #albumNav_bottom {display: none;}
#sizePicker {display: none;}


ABOUT ME
/* html only page for gallery 1319921 */
.gallery_1319921 .nophotos { display: none; }
.gallery_1319921 .opening { display: none; }
.gallery_1319921 #photos, .gallery_1319921 .albumNav { display: none; }
.gallery_1319921 #breadcrumb {display: none;}


CHANGING TO ARIAL
#navcontainer {font-family: verdana, arial;}
#breadcrumb .nav{font-family: verdana, arial;}
#albumTitle .title{font-family: verdana, arial;}

HEADER
#myHeader {
background:url(http://merryngomezphotography.smugmug.com/photos/62285192-O.jpg) top repeat-x;
padding-top:115px;
}

#myHeader #title1,
#myHeader #title2 {
display:block;
margin:0 auto;
}


See in CSS you can't just have extra words that are there to explain things. So the words that you have above:

ABOUT ME
CHANGING TO ARIAL
HEADER

Are all making it so the following CSS definitions won't work. Fortunately for everyone the makers of the CSS spec have seen fit to include a way to insert comments into your CSS files. All you need to do is to add a /* before the comment and a */ after the comment. So if you make the changes in red below your site will work much better:

body.homepage {
background-attachment: fixed;
background-image:
url(http://merryngomezphotography.smugmug.com/photos/62286170-M.jpg);
background-repeat: no-repeat;
background-position: left bottom;
}

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #919191;
background-color: #000000;
}
#navcontainer ul li a:hover
{
color: #33A1C9;
background-color: #000000;
}

#categoriesBox .boxTop { display: none; }
/* turn off the login link on the minifooter */
.loginLink { display: none; }


/* turn off the cart link on the minifooter */
.cartlink_footer { display: none; }


a.title, .title, .imgBorderOn {
color: #919191;
}

#caption_bottom {
display: none;
}

/* hides your name (including any 's) */
#userName {
display: none;
}
/* hides the word home */
#userHome {
display: none;
}
/* removed the 's */
.possess {
display: none;
}

#feeds { display: none; }
#photoKeywords { display: none; }
.play_slideshow { display: none; }
.top_border, .bottom_border { border: 0px; }
.left_border, .right_border { border: 0px; }
.cartlink_footer { display: none; }
#userHome { display: none; }
.possess { display: none; }
.box { background-color: #000000; }
.categoriesBox .boxTop { display: none; }
/* kill filename in all galleries */
.galleryPage #imageInfo {display:none}

.homepage #galleriesBox {display:none;}
.loggedIn #galleriesBox {display:block;}
.homepage #categoriesBox {display:none;}
.loggedIn #galleriesBox {display:block;}
#bioBox {display:block;}

.box .miniBox .albumTitle a.nav {
font-size: 32px;
color:#33A1C9;
font-family: french script mt, arial, verdana, tahoma, helvetica, arial, sans-serif;
}

#userBio {
width: 800px;
display: inline;
float: center;
position: relative;
font-size: 18px;
font-family: verdana, tahoma, helvetica, arial, sans-serif;
}
#userBio h3 {font-size:18px;}


.imgBorder {
border-color: black;
}

#userBio {text-align:center;}
#bioBox { background-color: transparent; border-style: none; }
#bioBox {
text-align: center;
}

/* journal */
#journal .caption {
padding-top: 1px;
}
.journal_entry {
padding: 1px 0px;
border-bottom: none;
}
#journal .photo.center{
clear: center;
float: center;
text-align: left;
margin: 0px 2px 2px 0px;
height: 100%;
}
#journal {text-align:justify;}
#journal {font-size: 14px;}
#journal {font-family: verdana, tahoma, helvetica, arial, sans-serif;}
#journal h3 {font-size:14px;}

#comment_header {
padding: 20px 0px 10px 0px;
}
#comment_header h3 {
display: inline;
}
#commentBox {
display: inline;
float: left;
}

a:hover .imgBorder, .imgBorderOn {
border: solid 1px #33A1C9;
}

.gallery_1297103 #photos {display:none; }
.gallery_1297103 #albumTitle { display: none; }
.gallery_1260182 .toolsbox {display: none;}



.gallery_1239948 #albumTitle { display: none; }
.gallery_1239948 .toolsbox {display: none;}


.gallery_1515382 #albumTitle { display: none; }
.gallery_1515382 .toolsbox {display: none;}



/*FILMSTRIP GETS RID OF NUMBERS ETC*/
.filmstrip #albumNav_top, .filmstrip #albumNav_bottom {display: none;}
#sizePicker {display: none;}


/*ABOUT ME*/
/* html only page for gallery 1319921 */
.gallery_1319921 .nophotos { display: none; }
.gallery_1319921 .opening { display: none; }
.gallery_1319921 #photos, .gallery_1319921 .albumNav { display: none; }
.gallery_1319921 #breadcrumb {display: none;}


/*CHANGING TO ARIAL*/
#navcontainer {font-family: verdana, arial;}
#breadcrumb .nav{font-family: verdana, arial;}
#albumTitle .title{font-family: verdana, arial;}

/*HEADER*/
#myHeader {
background:url(http://merryngomezphotography.smugmug.com/photos/62285192-O.jpg) top repeat-x;
padding-top:115px;
}

#myHeader #title1,
#myHeader #title2 {
display:block;
margin:0 auto;
}




Also you had a few missing {'s and }'s I added those in red too.

[Mike Lane]

I would like to have the whole lot as my header for Home page and info pages etc but like you said it is a bit much for the gallery pages, so I think Ill just have the Merryn Gomez Photography bit for them SO...

I am guessing I need to create 2 images, one with the lot and one with what I want for the gallery pages?

if you just want to have the same merryn gomes photography image then you don't need to do anything. We can easily do that with CSS and what you've already got. Fix up your CSS from my previous post first and then we'll get you all set up with that.

[mgomez]

WOW!!! That has all worked a treat!!!

So now all I need to do is get rid of the photos across the top on all the photo gallery pages eg the following pages

Portraits
Weddings
Art and Design
Private Galleries

and all the galleries within them........

if you show me one, Im sure I can do the rest!!!

You are a STAR :thumb

[Mike Lane]

I think you should keep it how it is in the categories. All you need to do is to remove it from the galleries IMHO. Give it a try and see what you think. Add the following to your CSS:

/*GALLERY HEADER*/
.galleryPage #bodyWrapper #title2 {display:none;}
.galleryPage #myHeader {background:none; padding:0 0 20px}

[mgomez]

I think you should keep it how it is in the categories. All you need to do is to remove it from the galleries IMHO. Give it a try and see what you think. Add the following to your CSS:

/*GALLERY HEADER*/
.galleryPage #bodyWrapper #title2 {display:none;}
.galleryPage #myHeader {background:none; padding:0 0 20px}

Yes I agree, I think that does look better that way, only one little problem now...
the 'images to cherish bit' doesnt show up on the gallery pages and I would like it to. Should I create an image in photoshop that has the title and the 'images to cherish' bit in one or can we make it reappear only on those pages.

[mgomez]

oh dear, actually its not quite how I had wanted it. The following pages I do want the header with the photos on (which are gallery pages) but at the moment it is not showing up I assume because we just took it off all of the gallery pages.....

www.merryngomezphotography.smugmug.com/gallery/1567544 (The Experience)

www.merryngomezphotography.smugmug.com/gallery/1297104 (Packages and Pricing)

hwww.merryngomezphotography.smugmug.com/gallery/1319921 (About Me)

hwww.merryngomezphotography.smugmug.com/gallery/1297103 (Guestbook)

is there a way to put it on an off for individual galleries?

sorry....im being a bit fussy I know :D

[mgomez]

hwww.merryngomezphotography.smugmug.com/gallery/1319921 (About Me)

hwww.merryngomezphotography.smugmug.com/gallery/1297103 (Guestbook)

typo... here are the links

www.merryngomezphotography.smugmug.com/gallery/1297103 (http://www.merryngomezphotography.smugmug.com/gallery/1297103) (guestbook)

www.merryngomezphotography.smugmug.com/gallery/1319921 (http://www.merryngomezphotography.smugmug.com/gallery/1319921) (About Me)

[mgomez]

ummmm, so.. can you help me get the 'imags to cherish' bit back on all pages?!

[Mike Lane]

ummmm, so.. can you help me get the 'imags to cherish' bit back on all pages?!

Just checking in for a second. It'll be easy to get this back on there, but I don't have time to look at it just now. Maybe one of the other helpers can chime in and if not maybe I'll have time later today or tomorrow to help.

[Mike Lane]

Okay, I got a work release :lol3

So here's what we've got for your header:

/*GALLERY HEADER*/
.galleryPage #bodyWrapper #title2 {display:none;}
.galleryPage #myHeader {background:none; padding:0 0 20px}

/*HEADER*/
#myHeader {
background:url(http://merryngomezphotography.smugmug.com/photos/62285192-O.jpg) top repeat-x;
padding-top:115px;
}

#myHeader #title1,
#myHeader #title2 {
display:block;
margin:0 auto;
}




I want you to make that look like this:


/*GALLERY HEADER*/
.galleryPage #myHeader {background:none; padding:0 0 20px}

/*HEADER*/
#myHeader,
.gallery_1297103 #myHeader,
.gallery_1319921 #myHeader {
background:url(http://merryngomezphotography.smugmug.com/photos/62285192-O.jpg) top repeat-x;
padding-top:115px;
}

#myHeader #title1,
#myHeader #title2 {
display:block;
margin:0 auto;
}



You can see I removed one part that was hiding the sub-title (sorry I thought that's what you wanted earlier). And I added the exceptions for the 2 galleries you posted earlier - I highlighted those in yellow. So if you need to make exceptions for any other gallery all you have to do is add something similar to that. Find the gallery number in the address bar and add it just like that. Don't forget to add a comma after the last one in there and make sure you add all the periods and #'s and capital letters and all too. Of course if you want to do that and have trouble, just let us know and we'll help you out:thumb

[mgomez]

Thank you so much!!! :thumb