What files do you need for a website?

[synergy]

Here's another site I did that uses a border with a gradient. The wrapper is the only element with a border.

SUMMA Energy Services - Total Energy Managementâ„¢ | Energy Engineering, Mechanical Retrofit, Behavior!

 

[Spit-wad]

waffle, put the rest of your stuff inside your wrapper div

<div class="wrapper">
->insert all your other junk here
</div>

this will force everything else to stay inside the restraints of the wrapper.

 

[joelm3103]

Now came to mind, I always wondered how to make websites look like they're in the middle of the page with shadows on the side. Tried it without CSS, but it failed miserably. I'll try it out again sometime, hopefully I'll get it correct .

 

[synergy]

The shadow was a tricky one. It actually uses a combination of CSS and JS. The CSS doesn't validate however, so it kinda sucks in that regard. What client wants, client gets though.

The key to a "floating page", as I said earlier, is the wrapper. Give it a margin: 0 auto; and a desired width size and that will tell it to center on the page.

 

[Spit-wad]

Now came to mind, I always wondered how to make websites look like they're in the middle of the page with shadows on the side. Tried it without CSS, but it failed miserably. I'll try it out again sometime, hopefully I'll get it correct .

Take a look at another site I run: North American DotA Syndicate
I assume that's what you mean by the shadows on the sides (although a bit harder to see because of the dark striped background on the sides).

It's all about an image: http://nadota.com/templates/ja_sanidineii_light/images/wrapper-bg.png

That background accounts for the light (almost white) background that the text is on, and also the shadows on the sides. It repeats vertically, but not horizontally (because it's already the width of the wrapper). So to achieve that, the wrapper div would have this background image, and no border (because the border is already in the image). This is why it's really nice to have some Photoshop experience when doing website development.

 

[joelm3103]

Take a look at another site I run: North American DotA Syndicate
I assume that's what you mean by the shadows on the sides (although a bit harder to see because of the dark striped background on the sides).

It's all about an image: http://nadota.com/templates/ja_sanidineii_light/images/wrapper-bg.png

That background accounts for the light (almost white) background that the text is on, and also the shadows on the sides. It repeats vertically, but not horizontally (because it's already the width of the wrapper). So to achieve that, the wrapper div would have this background image, and no border (because the border is already in the image). This is why it's really nice to have some Photoshop experience when doing website development.

Yeah! That's exactly what I was talking about, I love how that looks lol. Photoshop is already installed on this system so I'll give it a try, any special resolution though? Like a standard? Not sure when I would actually build a website, but I want to try sometime ; also waffle got me in the experimenting mood.

 

[Spit-wad]

1000px wide wrappers are becoming somewhat standard, but it's completely up to you. I definitely wouldn't go any wider than 1200px. It really depends on what your site is, how much content you need to fit on it, etc.

800-1000 would do just fine.

 

[wafflehammer]

ohhh okay I figured out what was going on...had to different "div." things...so I just moved them together and now it works. Thanks. for the help Should be enough stuff to keep me going for a bit lol

 

[Spit-wad]

yep, divs have pretty much replaced tables, aka they're the positional structuring blocks of your website - so get used to them

let me know when you get stuck again - this thread keeps my mind active when i'm in boring classes

 

[wafflehammer]

okay..how do I get it to have like

links across the top, links down the side...but text still in the middle? from what i've tinkered with so far..i can only get the text to be at the top, center, or left/right...but can't have it like

link link link link link link
link text
link text
link text
link text
link text