Forum Groups
  All forums
    Help & Feedback
      Questions
      Work in progress
      Finished Art
      Non-Max related
    Community
      Offtopic
      News
    Hardware
    Photography


Featured Threads
  inspiration alert!!!
(36 replies)
  Indespensible MaxScripts, Plugins and 3rd Party Tools
(37 replies)
  The allmighty FREE Resources Thread !
(17 replies)
  spam alert!!!
(4886 replies)
  Maxforums member photo gallery index
(114 replies)
  Maxforums Member Tutorials
(89 replies)
  three cheers to maxforums...
(240 replies)
  101 Things you didnt know in Max...
(198 replies)
  A Face tutorial from MDB101 :D
(95 replies)
  Maxforums.org Members Gallery
(516 replies)
  SON OF POST YOURSELF
(637 replies)
  Dub's Maxscript Tutorial Index
(119 replies)

Maxunderground news unavailable

Rebuilding wesite
show user profile  Bobbyboy
I know, I do this all the time, and it has never really looks all that great, but I started redoing it again last night, after doing up a full design in photoshop. I wasn't sure i knew how to make it happen on the web but it has come together pretty good! I have only done the home page so far, all the other pages are broken, but I will get around to that.

The only issue I am having on the home page at the moment is that the page is huge, looks good when it loads but there are scroll bars going off into nothingness, I don't know why, the site has been doing it for ages and I can't track down the code responsible. But I am not very experienced with this kind of stuff and learn as I go.

Ambient Focus Photography

Would love to know your opinion on the site, any pointers or constructive crits would be awesome too :)

Cheers guys


http://img.photobucket.com/albums/v322/bob9909/xmassig.jpg


read 1055 times
2/5/2011 9:02:17 AM (last edit: 2/5/2011 9:12:11 AM)
show user profile  Stephen R.
The overall design and layout is decent.

For the album bit, cut from the center outward, and then set the background position property to center top, that way there is always an even amount on both sides, then overlay the corner art in a sperate div that's been positioned relatively. This way it won't matter what size the browser window is, it will display properly.

Also, if you wanted to get fancy, you could do that shadow effect with CSS3, it woudn't look exactly the same, but it would work.

the markup would be something like:

-webkit-box-shadow: inset 0 0 15px rgba(0,0,0,.5);
-moz-box-shaow: inset 0 0 15px rgba(0,0,0,.5);


I am a div with inset shadow using CSS3




For that div, the scrollwork is an image by itself, and the shadow is handled by css3, tiny file size, quick loading time ;)

markup:
-webkit-box-shadow: inset 0 0 15px rgba(0,0,0,.5); (this handles safari and chrome)
-moz-box-shaow: inset 0 0 15px rgba(0,0,0,.5); (this handles mozilla browsers)
box-shadow: inset 0 0 15px rgba(0,0,0,.5); (for when css3 becomes standard and supported by all browsers. Future support so you don't have to go back and do it again)
background: url('http://i188.photobucket.com/albums/z6/Cutless1/scroll-bottom-corner.png') no-repeat left bottom;"



note that the shadow will only display in IE8+, because IE sucks and should be wiped from the face of the planet.





read 1039 times
2/5/2011 10:28:39 AM (last edit: 2/5/2011 10:48:20 AM)
show user profile  Bobbyboy
Thanks mate, good to hear a slightly more positive response from you to this version :)
I appreciate the suggestions, especially for the album pages. Still not too sure how I can go about getting different background images on these pages (I can't have the home page picture on every page).

That css3 is pretty cool, was looking at rotation transforms earlier, but I need this to be cross browser compatible as most people who will be looking at it will probably be using old versions of IE, I live in a pretty backwards country town =P

Cheers


http://img.photobucket.com/albums/v322/bob9909/xmassig.jpg


read 1009 times
2/5/2011 3:27:37 PM (last edit: 2/5/2011 3:28:17 PM)
show user profile  Stephen R.
If you need it to be completely backwards compatible, you have a couple of options.


Multiple background images (ie7+)
Layered Divs (ie7+)


achieving this look in ie6 simply isn't possible because of it's poor support for CSS and complete lack of support for transparency.


To layer in multiple backgrounds, you can use a css statement something like the following:

#mydiv {
background-image: url("image1.jpg"), url("image2.jpg");
background-position: left top, right top;
background-repeat: none, none;
}


you can add as many layers to this as you need to. Images added first (image1) will be on the bottom, followed in order by those placed afterward (2 will be on top of 1, 3 will be on top of 2 and 1, etc). They can all be positioned and repeated in whatever manner is necessary.




To achieve the same effect by stacking divs, you would create your markup to look something like this:

pie id="contentDiv1">
pie id="contentDiv2">
pie id="contentDiv3">
/pie >
/pie>
/pie>

where pie = div.



Since div's are all block level, they will be contained inside each other, with the contentDiv1 determining the max size of the element, with the other two being able to be set at 100% as long as a hard value is set for contentDiv1 (ie 860px, but not 42%).

In this set up, div1 would be your main background, div2 would be the layer on top of that, and so on.





read 993 times
2/5/2011 8:15:17 PM (last edit: 2/5/2011 8:17:37 PM)
show user profile  Bobbyboy
That's awesome stuff man, I'm going to play around with some of those ideas and see how they work! :)
Thanks for taking the time to make a few suggestions, believe it or not it hasn't all gone over my head (just some) =P


http://img.photobucket.com/albums/v322/bob9909/xmassig.jpg


read 973 times
2/5/2011 9:51:45 PM (last edit: 2/5/2011 9:51:45 PM)
show user profile  Stephen R.
no problem, this layout is worth working with for sure, so i'll be glad to help anywhere I can :)





read 969 times
2/5/2011 9:59:03 PM (last edit: 2/5/2011 9:59:03 PM)
show user profile  jStins
Hate the header/logo font. But I'm no font guru...
-Joel


joelstinson.com

read 956 times
2/6/2011 12:50:24 AM (last edit: 2/6/2011 12:50:24 AM)
show user profile  Bobbyboy
Hey, thanks for the crit. I picked it out pretty quickly and it wouldn't take much to change, but I'm not very good at this kind of thing either so I am pretty easily pleased. If you could suggest something better I would love to see it.

Actually I would like some proper branding in the way of a logo and good solid banner, but it just isn't something I am good at.


http://img.photobucket.com/albums/v322/bob9909/xmassig.jpg


read 942 times
2/6/2011 2:21:15 AM (last edit: 2/6/2011 2:21:15 AM)
show user profile  jStins
I think the current font clashes with the style of the rest of the site. It has a chunky playful feel to it that, i dunno, reminds me of cartoony robots or something.

I might looks for something that has elements of the flourishes that you've incorporated elsewhere. Maybe like an art deco something?

http://www.google.com/images?um=1&hl=en&client=firefox-a&rls=org.mozilla%3Aen-US%3Aofficial&biw=1378&bih=843&tbs=isch%3A1&sa=1&q=art+deco+font&aq=f&aqi=g4g-m1&aql=&oq=

But, like I said, I'm an amateur when it comes to typography.

-Joel


joelstinson.com

read 922 times
2/6/2011 11:05:29 PM (last edit: 2/6/2011 11:05:29 PM)
show user profile  Bolteon
-1 on the (combo) type font your using right now for the header.

-Marko Mandaric



read 918 times
2/6/2011 11:09:55 PM (last edit: 2/6/2011 11:09:55 PM)
show user profile  Bobbyboy
Hey, thanks for the suggestions guys :)

I've been working pretty hard to get the different backgrounds on different pages to actually work and it finally does, but I think the code is pretty ugly, but I have someone from another forum who does this kind of website skinning going over it. But right now all I care about is the fact that it works! :D
hehe, so happy!

Ambient Focus Photography


let me know what you think, the other pages aren't finished yet, but it is getting a bit more refined.

I have also changed the type face for the header, let me know what you think of that too please :)

Thanks guys


http://img.photobucket.com/albums/v322/bob9909/xmassig.jpg


read 892 times
2/8/2011 4:22:58 PM (last edit: 2/8/2011 4:23:26 PM)
show user profile  Stephen R.
now resize your browser window t 1024x768 and tell me everything still looks right ;)





read 884 times
2/8/2011 6:26:26 PM (last edit: 2/8/2011 6:26:26 PM)
show user profile  jStins
Much better on the header/logo font imho. I do think the text below it is a little hard to read. Maybe use a simpler sanserif font there. I know there's some typography rules about combining different types of fonts... but I'm not sure what they are ;).

-Joel


joelstinson.com

read 877 times
2/8/2011 8:21:24 PM (last edit: 2/8/2011 8:21:24 PM)
show user profile  Bobbyboy
@Stephen R., I know man, and I don't know how I could make it work, but it does work at most standard resolutions above that.....


http://img.photobucket.com/albums/v322/bob9909/xmassig.jpg


read 861 times
2/9/2011 12:00:45 AM (last edit: 2/9/2011 12:00:45 AM)
show user profile  Stephen R.
Slice the image in two, and float one div next to the another, and set them both to 50% width, then they will resize equally, then put the image as a css background for each side, voila?





read 855 times
2/9/2011 2:59:16 AM (last edit: 2/9/2011 2:59:16 AM)
#Maxforums IRC
Open chat window


Support Maxforums.org