Web Design Forums

thastrom · 08-06-2008, 07:47

How do you do so your website stretch over whole page?

Like it does on this one: Panic - Coda - One-Window Web Development for Mac OS X

Also how do you do so the shadow fades on the left and right side. Like it does in this picture:

karmedic · 08-06-2008, 10:43

The typical method is to use a block container with a background.

STYLE

Code:

<style type="text/css">

body {
  margin: 0;
  padding: 0;
}

#header {
  height: 200px;
  background-color: #f0f0f0;
}

</style>

CONTENT

Code:

<body>
  <div id="header">
    header!
  </div>
</body>

The background in the example you've given is a little different from the method above. They have a background image on the body instead of an explicit container. Both valid approaches depending on what you want to achieve.

The dropshadow effect was done in a graphics program.

thastrom · 08-06-2008, 16:41

Quote:

Originally Posted by karmedic

The dropshadow effect was done in a graphics program.

Yes, but how ?

hyperzzzz · 08-06-2008, 17:58

w-e graphic design package you use, its simply a drop shadow.

karmedic · 08-06-2008, 18:17

There are many ways to do it. In Photoshop two easy ways are:

1) select layer
2) blending options - dropshadow
3) create layer from blend
4) transform

OR

1) create new layer
2) draw black ellipse in the shape of the dropshadow
3) position
4) gaussian blur to your liking and play with opacity

chulainn · 12-06-2008, 22:39

Hey Karm, thanks for this info.

Instead of a background color, what if I wanna use a pattern I made, but repeat itself across the top of the screen?

karmedic · 12-06-2008, 22:44

For a pattern you'd use the following instead:

Code:

#header {
  height: 200px;
  background-image: url('path/to/pattern/image');
}

By omitting the background-repeat property it will automatically repeat in both the x and y axes.

chulainn · 12-06-2008, 22:55

Awesome, one last thing hopefully, I have now these small gaps between each pattern, I'm sure theres a code for that you could supply me with, and if you do, you just made my day, sad huh.

Thanks

karmedic · 12-06-2008, 22:57

There shouldn't be any gaps when tiling in this manner. Can you verify that your image doesn't have a border of some sort?

chulainn · 12-06-2008, 22:59

Alright, that's done thanks alot. =D

chulainn · 12-06-2008, 23:44

So pattern is good now, next I have to insert an image/logo over this, which has the same pattern so it will flow, BUT this logo has a larger heigth... how would I go about making space above the pattern so it will fit? Thanks

thastrom · 14-06-2008, 09:04

Ok. So how do I do if I want a picture to repeat on top and the bottom ?

karmedic · 14-06-2008, 09:19

Re: picture repeat top and bottom - see comment 7.

thastrom == chulainn? I just realized two different people are asking questions ...

08-06-2008, 07:47	#1 (permalink)
thastrom Senior Member Join Date: Feb 2008 Posts: 110	Website stretch over whole page How do you do so your website stretch over whole page? Like it does on this one: Panic - Coda - One-Window Web Development for Mac OS X Also how do you do so the shadow fades on the left and right side. Like it does in this picture: Attached Thumbnails

08-06-2008, 10:43	#2 (permalink)
karmedic id Join Date: May 2008 Location: Ottawa Posts: 217	The typical method is to use a block container with a background. STYLE Code: <style type="text/css"> body { margin: 0; padding: 0; } #header { height: 200px; background-color: #f0f0f0; } </style> CONTENT Code: <body> <div id="header"> header! </div> </body> The background in the example you've given is a little different from the method above. They have a background image on the body instead of an explicit container. Both valid approaches depending on what you want to achieve. The dropshadow effect was done in a graphics program.

12-06-2008, 22:44	#7 (permalink)
karmedic id Join Date: May 2008 Location: Ottawa Posts: 217	For a pattern you'd use the following instead: Code: #header { height: 200px; background-image: url('path/to/pattern/image'); } By omitting the background-repeat property it will automatically repeat in both the x and y axes.

12-06-2008, 22:59	#10 (permalink)
chulainn Registered User Join Date: Jun 2008 Posts: 7	Alright, that's done thanks alot. =D Last edited by chulainn : 12-06-2008 at 23:13.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

08-06-2008, 17:58	#4 (permalink)
hyperzzzz Registered User Join Date: Mar 2008 Posts: 41	w-e graphic design package you use, its simply a drop shadow.

08-06-2008, 18:17	#5 (permalink)
karmedic id Join Date: May 2008 Location: Ottawa Posts: 217	There are many ways to do it. In Photoshop two easy ways are: 1) select layer 2) blending options - dropshadow 3) create layer from blend 4) transform OR 1) create new layer 2) draw black ellipse in the shape of the dropshadow 3) position 4) gaussian blur to your liking and play with opacity

12-06-2008, 22:39	#6 (permalink)
chulainn Registered User Join Date: Jun 2008 Posts: 7	Hey Karm, thanks for this info. Instead of a background color, what if I wanna use a pattern I made, but repeat itself across the top of the screen?

12-06-2008, 22:55	#8 (permalink)
chulainn Registered User Join Date: Jun 2008 Posts: 7	Awesome, one last thing hopefully, I have now these small gaps between each pattern, I'm sure theres a code for that you could supply me with, and if you do, you just made my day, sad huh. Thanks

12-06-2008, 22:57	#9 (permalink)
karmedic id Join Date: May 2008 Location: Ottawa Posts: 217	There shouldn't be any gaps when tiling in this manner. Can you verify that your image doesn't have a border of some sort?

12-06-2008, 23:44	#11 (permalink)
chulainn Registered User Join Date: Jun 2008 Posts: 7	So pattern is good now, next I have to insert an image/logo over this, which has the same pattern so it will flow, BUT this logo has a larger heigth... how would I go about making space above the pattern so it will fit? Thanks

14-06-2008, 09:04	#12 (permalink)
thastrom Senior Member Join Date: Feb 2008 Posts: 110	Ok. So how do I do if I want a picture to repeat on top and the bottom ?

14-06-2008, 09:19	#13 (permalink)
karmedic id Join Date: May 2008 Location: Ottawa Posts: 217	Re: picture repeat top and bottom - see comment 7. thastrom == chulainn? I just realized two different people are asking questions ...

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)