Fixed home page width

[TonyStewart]

Hi chaps

Could I have some code please to fix my home page width in place. At the moment my site is completely flexible but I want my home page to remain a fixed width and not be flexible.

anthonyjstewart.smugmug.com

Is this possible?

Many thanks

[TonyStewart]

Anyone? Please

I just want to stop my home page/front page from expanding and stay at a fixed width.

Thanks

[jfriend]

Hi chaps

Could I have some code please to fix my home page width in place. At the moment my site is completely flexible but I want my home page to remain a fixed width and not be flexible.

anthonyjstewart.smugmug.com

Is this possible?

Many thanks

I'm guessing that what you want is for your banner image and navbar to be centered. If that's what you want, you can try this:

Fix the declaration of the divs around your banner image so that it looks like this below. You currently have some invalid HTML.

<div id="ppa_logo">
<img src="http://anthonyjstewart.smugmug.com/photos/329250726_uPsyw-M.png">
</div>

and make sure there is exactly one matching </div> for every <div> tag you added.

Then add this CSS:

#ppa_logo {width: 500px; height:59px; margin: 0 auto;}
#navcontainer {width: 770px; margin: 0 auto;}


The logo width is exact. You might have to fiddle with the navcontainer width a bit to make sure it fits on all systems with the fonts that they would choose. If you make it too wide, then it won't center right. If you make it too small, then it will wrap onto two lines.

[TonyStewart]

Hi No thats not what I wanted.

My theme is all stretchy, I just want the front page to be non stretchy but the rest of the site to remain the same?

Thanks

[jfriend]

Hi No thats not what I wanted.

My theme is all stretchy, I just want the front page to be non stretchy but the rest of the site to remain the same?

Thanks

Please describe what you want it to look like on your homepage. I don't understand what non-stretchy means in this context.

Right now your banner lines up with the left edge of the window and your navbar with the right edge of the window. What you do want them to line up with?

[TonyStewart]

Hi

Well my site uses the entire width of the web page, if I make the page smaller it fits appropriately and bigger the site stretches to fit the space.

On the front page I want it to fit into a fixed width say 800 pixels or 75%. Simple as that hopefully.

Do you see what I mean.

Thanks

Tony

[Allen]

Hi

Well my site uses the entire width of the web page, if I make the page smaller it fits appropriately and bigger the site stretches to fit the space.

On the front page I want it to fit into a fixed width say 800 pixels or 75%. Simple as that hopefully.

Do you see what I mean.

Thanks

Tony
Try this in CSS

#homepage {
margin: 0 auto;
width: 800px;
}

The width of the page is dependent on the visitors monitor size, browser size and screen
resolution so do not base your customization on your monitor and browser window.
If you do everyone else could be seeing a wonky site.

[TonyStewart]

Hi Al

I expected that to work but it didn't. Most odd. My menu still will take up the whole browser nomatter how big. Perhaps its just my menus that need altering although maximising the home page width would be my preference.

Cheers

[Allen]

Hi Al

I expected that to work but it didn't. Most odd. My menu still will take up the whole browser nomatter how big. Perhaps its just my menus that need altering although maximising the home page width would be my preference.

Cheers
You have a very wide/large navbar but it does slide under the banner on
smaller page widths.

[TonyStewart]

My menu line is set to 98% of the screen width but if I set the front page max width to 800 pixes why wouldn't that force the menu to comply with the restriction?

Cheers

[TonyStewart]

I'm still having issues with this one? I would really like to put this cutomisation to bed if at all possible.

I need to work out how to restrict my menu/line and logo within a box or width specific to just the home page. The home page width command seems not to work and my menu on this page remains stretchy and uses up the whole screen.

Anyone know how I can restrict the home page to say 800px.

Maybe I am going at this the wrong way. I see loads of other web sites with a fixed width menu incorporating a logo but I guess I did mine differently. I do want the menu to stretch on all other pages except the home page.

Cheers

[jfriend]

I'm still having issues with this one? I would really like to put this cutomisation to bed if at all possible.

I need to work out how to restrict my menu/line and logo within a box or width specific to just the home page. The home page width command seems not to work and my menu on this page remains stretchy and uses up the whole screen.

Anyone know how I can restrict the home page to say 800px.

Maybe I am going at this the wrong way. I see loads of other web sites with a fixed width menu incorporating a logo but I guess I did mine differently. I do want the menu to stretch on all other pages except the home page.

Cheers
First, you need to fix your HTML which is making it impossible to apply CSS rules and add one more div for some width control. The <div_id="ppa_logo"> you have is really messing things up as that is not the proper format.

Change all of your header HTML to this:

<div id="PPA_header">
<div id="PPA_Logo">
<img src="http://anthonyjstewart.smugmug.com/photos/329250726_uPsyw-M.png">
</div>
<BR>

<div id="navcontainer_outer">
<div id="navcontainer" style="letter-spacing: 2px;text-align: right">

<ul>
<li><a href="http://anthonyjstewart.smugmug.com">HOME</a></li>
<li><a href="http://anthonyjstewart.smugmug.com/Public%20Galleries">VIEW GALLERIES</a></li>
<li><a href="http://anthonyjstewart.smugmug.com/gallery/6774142_J8PPp#433498887_ZwFrM">365 DAYS</a></li>

<li><a href="http://anthonyjstewart.smugmug.com/gallery/5787921_XoWWy">BUY MY PRINTS</a></li>
<li><a href="http://anthonyjstewart.smugmug.com/gallery/5702370_wMSwV">EXHIBITIONS</a></li>
<li><a href="http://anthonyjstewart.smugmug.com/gallery/4695762_L96JZ">GUEST BOOK</a></li>
<li><a href="http://anthonyjstewart.smugmug.com/gallery/5787223_NzfLF">ABOUT ME</a></li>
</ul>
</div>
</div>
</div>

Once you make that change, we can then do lots of different things with the CSS. I'm not 100% sure I know what you want, but you can start with this which will restrict the overall width of banner and navbar to 900 pixels width and center that and only apply the change on the homepage (and other screens derived from the homepage).

.homepage #PPA_header {
width:900px;
margin: 0 auto;
}

[TonyStewart]

Looks like this did the trick for the home page so you are an absolute star and thanks for that.

Of course now I have done this I will probably muck around with the rest of the site now. I shall see if I can apply what you provided above to other parts of my site i.e. a few sub pages would benefit from being restricted to that width too.

Thanks a lot and cheerio for now.

[TonyStewart]

How would I apply the logo position to the whole site? I managed to implement the menu with but not the logo. Thanks

[jfriend]

How would I apply the logo position to the whole site? I managed to implement the menu with but not the logo. Thanks

If you want it the same on the whole site, then change:

.homepage #PPA_header {
width:900px;
margin: 0 auto;
}

to this:

#PPA_header {
width:900px;
margin: 0 auto;
}

The original CSS was limiting the effect of the rule to only instances of #PPA_header inside a container class of "homepage". The second CSS just removes that restriction so the #PPA_header object gets this rule everywhere it exists.

[TonyStewart]

Gotchya. I thikn the site looks much better this way.

Thanks so much for your help!

That all worked fine

T