Creating homepage. Ideas, suggestions and help all welcome

by Bleachzor January 8th 2010, 1:02 pm

The following picture should perfectly discribe what I want my homepage to look like:
Creating homepage. Ideas, suggestions and help all welcome Concep10

Creating homepage. Ideas, suggestions and help all welcome Concep10

*edit: or follow this link https://i.servimg.com/u/f19/14/69/22/94/concep10.jpg

Question sum:
-What would be the best way to pull it off?
I am thinking about using a combi of CSS and HTML
-Script generator doesn't seem to be working... firefox issue?
-Where do I start when I've had no experience at all!?
-maybe someone out there with a simular home page?
-Would the script(for some reason, whatsoever) be too big?

Any help and suggestion are appreciated.

by ankillien January 8th 2010, 3:39 pm

Hello,

I think it will require both HTML and CSS.First of all, you need to create 3 images. One for the main box background, a main image that shows up in middle and one for the background on the box in bottom of the main box.

If you provide me these images, I can code the page for you Very Happy

by Bleachzor January 8th 2010, 8:08 pm

Main banner:
Creating homepage. Ideas, suggestions and help all welcome Bigban10

https://i.servimg.com/u/f19/14/69/22/94/bigban10.png

Sub banner:
Creating homepage. Ideas, suggestions and help all welcome Smallb10

https://i.servimg.com/u/f19/14/69/22/94/smallb10.png

Gradient for big banner:
Creating homepage. Ideas, suggestions and help all welcome Gradie10

https://i.servimg.com/u/f19/14/69/22/94/gradie10.gif

Gradient for small banner:
Creating homepage. Ideas, suggestions and help all welcome Gradie11

https://i.servimg.com/u/f19/14/69/22/94/gradie11.gif

Left black corners:
Creating homepage. Ideas, suggestions and help all welcome Corner12

https://i.servimg.com/u/f19/14/69/22/94/corner12.png

Right black corners:
Creating homepage. Ideas, suggestions and help all welcome Corner13

https://i.servimg.com/u/f19/14/69/22/94/corner13.png

*Corners can still be adjusted.
*edit: The margin should be about 10 px

And thanks ofcourse

by MattLocke January 8th 2010, 8:39 pm

Nice one

by Bleachzor January 8th 2010, 9:16 pm

I suggest to use the /index.htm link for the time being.

@MattLocke: Its just a concept. All made using photoshop.
the thing doesnt exist yet but, im glad you like it Very Happy

by ankillien January 9th 2010, 10:52 am

I've coded the page. Here is the code...

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>© WebArtz Forum</title> <style> body { background : #000; text-align : center; margin : 0; padding : 0; } #wrap { margin : 60px auto; text-align : center; height : 400px; width : 600px; } #mainBox { width : 600px; height : 310px; background : url(http://i457.photobucket.com/albums/qq297/BlackAndPearl/gradie10.gif) repeat-x; -moz-border-radius : 10px; -webkit-border-radius : 10px; } #mainBox img { } #smallBox { width : 600px; text-align : center; -moz-border-radius : 10px; -webkit-border-radius : 10px; margin-top : 20px; background : url(http://i457.photobucket.com/albums/qq297/BlackAndPearl/gradie10.gif) repeat; } #smallBox table tr td { text-align : left; padding : 5px 25px; } #smallBox table tr td a { padding : 3px; display : block; } a:link , a:visited { color : #FFC; text-decoration : none; } a:hover { text-decoration : underline; } </style> </head> <body> <div id="wrap"> <div id="mainBox"> <a href="#"><img src="http://i457.photobucket.com/albums/qq297/BlackAndPearl/bigban10.png" border="0" alt="main-logo" /></a> </div> <div id="smallBox"> <table align="center"> <tr> <td> <a href="#">WebArtz Forum</a> <a href="#">Wed Design Talk</a> <a href="#">Coding Tutorials</a> <a href="#">Forumotion</a> </td> <td> <a href="#">HTML & CSS Tips</a> <a href="#">Graphic Show Off</a> <a href="#">General Discussion</a> <a href="#">Web Design & Coding</a> </td> </tr> </table> </div> </div> </body> </html>

Put it in a HTML page and see Wink

Old IE will look bad since it doesn't understand transparency.
I've used CSS3 codes for rounded corners and IE doesn't support CSS3, so it will show square corners Razz

by Bleachzor January 9th 2010, 9:50 pm

It looks nice, but it looks slightly different from what I expected.
However... I can't say im fully satisfied yet.

Is it possible to turn the background gradients into links aswell?
so that the entire panel functions as a single link.

I guess in your opinion using image-corners like in several other hitskins (with small .gif/.png images) would take too much effort for just 2 panels.

In the designsketch which I showed in the first post I also mentioned "Should be able to be devided cut 2 parts" like this for example:
Creating homepage. Ideas, suggestions and help all welcome Devide10

Creating homepage. Ideas, suggestions and help all welcome Devide10

that was the actuall idea xD.

Is it not possible to move the banner .png image down for 5 px?

sorry for the delay everytime, our timezones dont really match + I've got other things to do aswell.
I can't help it but, I still intent to reply asap everytime Very Happy

*I wanted to make a homepage which would perfectly fit even within a resolution of 600*800px and I wanted to make it usefull for people with a slower internet connection. So I decided to make 2 buttons for the time being(1 big one on top and 1 small one below). Later on I would make it 3(1 big one on top and 2 smaller ones below it left and right).
Even if the .png image banners would not load fast enough then i'd still have the gradient pieces+corners, which should load fast, even on a slow internet connection. So people would allready know where to click (when using the homepage more often) even if the banners wouldn't be fully loaded. This would be an advantage compared to using 3 images only.

I mean corners like this:

Code:: span.corners-top, span.corners-bottom, span.corners-top span, span.corners-bottom span { font-size: 1px; line-height: 1px; display: block; height: 5px; background-repeat: no-repeat; } span.corners-top { background-image: none; background-position: 0 0; margin: 0 -5px; } span.corners-top span { background-image: none; background-position: 100% 0; } span.corners-bottom { background-image: none; background-position: 0 100%; margin: 0 -5px; clear: both; } span.corners-bottom span { background-image: none; ; background-position: 100% 100%; } .post span.corners-top, .post span.corners-bottom, .panel span.corners-top, .panel span.corners-bottom, .navbar span.corners-top, .navbar span.corners-bottom { margin: 0 -10px; } span.corners-top { background-image: url("http://i19.servimg.com/u/f19/14/69/22/94/corner10.png"); } span.corners-top span { background-image: url("http://i19.servimg.com/u/f19/14/69/22/94/corner11.png"); } span.corners-bottom { background-image: url("http://i19.servimg.com/u/f19/14/69/22/94/corner10.png"); } span.corners-bottom span { background-image: url("http://i19.servimg.com/u/f19/14/69/22/94/corner11.png"); } /***************************************************************/ #cp-main span.corners-top { background-image: url("http://2img.net/i/fa/prosilver/corners_left2.gif"); } #cp-main span.corners-top span { background-image: url("http://2img.net/i/fa/prosilver/corners_right2.gif"); } #cp-main span.corners-bottom { background-image: url("http://2img.net/i/fa/prosilver/corners_left2.gif"); } #cp-main span.corners-bottom span { background-image: url("http://2img.net/i/fa/prosilver/corners_right2.gif"); } /***************************************************************/ #cp-main .panel #topicreview span.corners-top { background-image: url("http://i19.servimg.com/u/f19/14/69/22/94/corner10.png"); } #cp-main .panel #topicreview span.corners-top span { background-image: url("http://i19.servimg.com/u/f19/14/69/22/94/corner11.png"); } #cp-main .panel #topicreview span.corners-bottom { background-image: url("http://i19.servimg.com/u/f19/14/69/22/94/corner10.png"); } #cp-main .panel #topicreview span.corners-bottom span { background-image: url("http://i19.servimg.com/u/f19/14/69/22/94/corner11.png"); }

SORRY!!! (please dont mind the double post)
*=edit

by ankillien January 10th 2010, 3:32 pm

Making rounded corners like phpBB3 takes too much effort, actually. So I think we should avoid using images for corners and write a single CSS3 code that will make rounded corners though it is not supported by IE.

You want the bottom box to divide in two parts, right? I'll try to do it.

Making the whole box (including background) a link is not possible since it is added via CSS.

I don't understand the button idea but I think it will require very advanced knowledge of JavaScript so I won't be able to make it.

by Bleachzor January 10th 2010, 4:43 pm

Thank you, you've been a great help so far.

The button idea just means 1 picture/box and 1link/picture
So no text in the boxes but I intent to place text on the bottum of the site including credits and contact stuff (Ill prolly figure out how to do that myself)

greetz,

Bleachzor(how formal...)

by ankillien January 10th 2010, 5:41 pm

Well, I am inactive for about 4-5 days. SO I'll be working on your page after that. Hope you don't mind.

by Bleachzor January 10th 2010, 5:54 pm

No problem at all. I am allready glad you were ready to code it for me.

by ankillien January 19th 2010, 2:15 pm

Ok, I've made some changes as you asked.
I've cut the bottom box in two parts and shifted the main image 5px below...

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>© WebArtz Forum</title> <style> body { background : #000; text-align : center; margin : 0; padding : 0; } #wrap { margin : 60px auto; text-align : center; height : 400px; width : 600px; } #mainBox { width : 600px; height : 310px; background : url(gradie10.gif) repeat-x; -moz-border-radius : 10px; } #mainBox img { padding-top : 5px; } #smallBox { width : 600px; text-align : center; margin-top : 20px; } #smallBox table tr td { padding : 5px 0 5px 20px; -moz-border-radius : 10px; background : url(gradie10.gif) repeat; } #smallBox table tr td a { padding : 3px; display : block; } a:link , a:visited { color : #FFC; text-decoration : none; } a:hover { text-decoration : underline; } </style> </head> <body> <div id="wrap"> <div id="mainBox"> <a href="#"><img src="bigban10.png" border="0" alt="main-logo" /></a> </div> <div id="smallBox"> <table align="center" width="100%" cellspacing="2"> <tr> <td> <a href="#">WebArtz Forum</a> <a href="#">Wed Design Talk</a> <a href="#">Coding Tutorials</a> <a href="#">Forumotion</a> </td> <td> <a href="#">HTML & CSS Tips</a> <a href="#">Graphic Show Off</a> <a href="#">General Discussion</a> <a href="#">Web Design & Coding</a> </td> </tr> </table> </div> </div> </body> </html>