Wrapping my whole smugmug site inside a "frame" with CSS... [Sitemap]

scwalter

Jul-11-2007, 11:40 PM

I'm trying to wrap my whole site inside of a window, kinda like a frame, but using CSS. I've been reading up on CSS and I think I got it working,but I was wondering if one of the wizards could look and see if this is the correct way to do it before I apply it to my real site.

Basically, I added two new divs, #SCWheader and #SCWleft that will be my new header and navbar, respectively. I used fixed positioning per the CSS2.1 examples in the W3C document.

In order to get them before the #bodyWrapper, I added a custom body tag, which includes the standard smugmug one, plus my two new divs, which I close in the footer.

My body tag is:
<body onload=" smugLoad();" class="homepage bodyColor_Black"><div id="SCWheader"><div id="SCWleft">
My footer is:
</div>
</div> http://scwalter2.smugmug.com/

Is this the right way to do this?

Thanks,
Scott

PS. I plan to add a vertical navbar down the left side and a custom header, similar to http://www.photoworkshop.com/

scwalter

Jul-12-2007, 12:22 AM

Just checked in IE and it's totally broken, looks okay in FF though. Looks like I need to keep looking at it.

Mike Lane

Jul-12-2007, 12:48 PM

My body tag is:
<body onload=" smugLoad();" class="homepage bodyColor_Black"><div id="SCWheader"><div id="SCWleft">
:nono Don't put any html elements in the body tag part of your customization page. This is for body tag-related elements only. You need to put this in your header html box. You may have done it this way, but it's difficult to tell since it isn't in there at the moment.

While I'm in there poking around, I noticed that you've got this:

<table id="bulkzoom_toolbox" cellspacing="10" border="0" cellpadding="0" class="toolbox" style="display:none">
<tr align="center" valign="middle">
<td align="center" valign="middle"><strong class="headmd black">bulk zoom<br/>thumbnails</strong></td>
</tr>
<tr align="center">
<td align="center" valign="middle"><input id="bulkSave" type="submit" value="save changes" class="buttons" onclick="zoomThumbnails();"/></td>
</tr>
<tr align="center" valign="middle">
<td align="center" valign="middle">
<strong class="black">ratio:</strong><br />
<select name="ratio" onChange="changeRatioBulk(this.value);">
<option value="0,0" selected="selected">none</option>
<option value="1,1">1 x 1</option>
<option value=".6,1.67">3 x 5</option>
<option value=".67,1.5">4 x 6</option>
<option value=".72,1.4">5 x 7</option>
<option value=".8,1.25">8 x 10</option>
<option value=".56,1.78">9 x 16</option>
</select>
<div id="customRatio" style="display: none;">
<input type="text" name="ratioH" value="1" maxlength="4" size="2" onblur="changeRatio('custom');" />h
<strong class="black"> x </strong>
<input type="text" name="ratioW" value="1" maxlength="4" size="2" onblur="changeRatio('custom');" />w
</div>
</td>
</tr>
<tr align="center" valign="middle">
<td align="center" valign="middle"><input type="button" value="rotate crop" onclick="rotateBulk();" class="buttons" /></td>
</tr>
<noscript>
<tr align="center" valign="top">
<td align="center" valign="middle">
<strong class="red">You must enable javascript in order to use this tool.</strong>
</td>
</tr>
</noscript>
</table>

in your head tag box. :nono That needs to move somewhere else. Your footer would be a good place for it. :deal

So tell me what it is you're trying to accomplish exactly? I'm not sure I follow 100%, and if I do, I think you can do what you're trying to do with just the div#bodyWrapper.

Is this element going to be liquid or fixed? Is it going to stay fixed with a scroll bar or something? Fill us in (mock ups never hurt :wink).

scwalter

Jul-12-2007, 04:16 PM

So tell me what it is you're trying to accomplish exactly? I'm not sure I follow 100%, and if I do, I think you can do what you're trying to do with just the div#bodyWrapper.

Is this element going to be liquid or fixed? Is it going to stay fixed with a scroll bar or something? Fill us in (mock ups never hurt :wink).
Thanks for the help on the other stuff, I've fixed that up.

Now, back to the other issue, I want a header/logo/banner up top 100% wide (fixed in size, but it will scroll with the page), left column for a vertical navbar of about 120px wide (fixed size) and a liquid center, containg the main smugmug content. This main column would hopefully still respond to the viewport size that it is in and automagically adjust between smugmug small and smugmug. The footer can either span 100% of the width like the header (kinda like what I have now) or be left inside the main smugmug window.

Here's a mockup.

Thanks.

scwalter

Jul-12-2007, 04:33 PM

I've setup a trial account at

http://scwalter2.smugmug.com

and I'm trying to follow the hints here:

http://www.dynamicdrive.com/style/layouts/category/C13/

CSS Liquid Layout #2.1- (Fixed-Fluid)

-Scott

Mike Lane

Jul-13-2007, 01:26 AM

hrm...

I'm not super crazy about using javascript for layouts when you don't have to. But I don know how challenging a pure xhtml/css layout like this can be. It looks like scwalter2 is coming along reasonably well. Do you need more help with it?

scwalter

Jul-13-2007, 10:44 PM

hrm...

I'm not super crazy about using javascript for layouts when you don't have to. But I don know how challenging a pure xhtml/css layout like this can be. It looks like scwalter2 is coming along reasonably well. Do you need more help with it?

Not right now, thanks for your help so far. As you say, there is some jiggery pokery for in there right now for resizing the columns and it's totally hosed in IE (curse you Microsoft). I'm happy I could get this far, but I'm debating whether I want to spend the time to fix it in IE. I'll holler back if I need any more help.

Cheers,
Scott

FormerLurker

Jul-29-2007, 09:19 AM

We've had discussions about something similar in months and years past, but I don't know if anyone has come up with a way to do what I'm looking for (which a slight variation on the original post): I am looking to have my SM gallery in the main area of the screen, but with a right or left column (about 25% of the screen size) where I could put other content such as links to related sites, calendars related to the content in the gallery, etc.

I have played around with the extra div's SM builds in but haven't been successful in getting this to work. The content would be static per gallery, not unique to each photo, so if there was a way to do this for selected galleries, that would be ideal. Any thoughts? Thanks!

Mike Lane

Jul-29-2007, 09:49 AM

We've had discussions about something similar in months and years past, but I don't know if anyone has come up with a way to do what I'm looking for (which a slight variation on the original post): I am looking to have my SM gallery in the main area of the screen, but with a right or left column (about 25% of the screen size) where I could put other content such as links to related sites, calendars related to the content in the gallery, etc.

I have played around with the extra div's SM builds in but haven't been successful in getting this to work. The content would be static per gallery, not unique to each photo, so if there was a way to do this for selected galleries, that would be ideal. Any thoughts? Thanks!Your best bet will be to start your own thread and in very great detail tell us what you'd like your page to look like.

:deal