Website alignment

greyed · 20-11-2008 1:46am #1

Hello. Im trying to create a page similar to this. What im interested in is the layout, Im wondering about how to create the alignment seen here, the white portion of the page is the main body and the darker sides expand with the window. I want my page to be aligned in the center like this, with a different colour background. Im using dreamweaver 4, but cant seem to figure it out, I can only set a colour for the entire page.

I checked out the source code and googled etc, but nothing, any help would be great:pac:

Goodshape · 20-11-2008 1:59am

Haven't a notion about Dreamweaver, but what you're looking for is a fixed-width 'container' div with margin set to auto.

Like so:

<body style="background : black;">
  <div style="width : 800px; margin : auto; background : white">
          ALL CONTENT GOES HERE, INSIDE THE DIV.
          PAGE BACKGROUND WILL BE BLACK, CONTENT BACKGROUND WILL BE WHITE.
  </div>
</body>

greyed · 20-11-2008 2:04am

Ah, nice! Thanks a lot

DonkeyStyle \o/ · 20-11-2008 2:06am

Set yourself free from the dreamweaver shackles IMO.

Here's how I'd start with it...

<html>
<head>
<style type="text/css">
body {
text-align: center;
margin: 0;
}
#blah {
text-align: left;
margin: auto;
width: 700px;
background: #555;
}
</style>
</head>
<body>
<div id="blah">hello<br><br><br><br><br></div>
</body>
</html>

Goodshape · 20-11-2008 2:10am

Donkey -- why text-align : center on the body? Is that useful somewhere? Backwards compatibility?

(or is it just there out of habbit?

)

greyed · 20-11-2008 2:12am

Only started using it for this yoke, surely you dont write everything from scratch?:eek:

I take it in that code, blah is a label and the div uses those properties?

DonkeyStyle \o/ · 20-11-2008 2:14am

Goodshape wrote: »

Donkey -- why text-align : center on the body? Is that useful somewhere? Backwards compatibility?

(or is it just there out of habbit? )

IE6

Goodshape · 20-11-2008 2:16am

greyed wrote: »

Only started using it for this yoke, surely you dont write everything from scratch?:eek:

I do.

I take it in that code, blah is a label and the div uses those properties?

DonkeyStyle's code does essentially the same thing as mine. I included the style 'in-line', he separated it out to the top of the page, which is much better practise as it's easier to maintain.

blah is an id, which can be referenced in the style sheet as #blah.

Google CSS stylesheets and have a read.

greyed · 20-11-2008 2:17am

What editors, if any, do you guys use? which is the best?

/edit, phew impressive, may I ask why?

Goodshape · 20-11-2008 2:22am

greyed wrote: »

What editors, if any, do you guys use? which is the best?

On Windows I use Crimson Editor.

Notepad++ is another popular one.

I know people who use Dreamweaver to write their code and mark-up (html, css, etc.) -- ignoring the visual WYSIWYG aspects of it. Always seemed like over-kill to me though.

Why I code it 'by hand'.... more control over the end result, better structured and nicer code (makes more of a difference than you might think - particularly when doing updates further down the line) and once you learn the basics of what you want to do I dare-say it's quicker too. No fiddling about in menus and options and bullsh*t... just hands on keyboard, writing no more than I need to.

kjt · 20-11-2008 2:22am

greyed wrote: »

What editors, if any, do you guys use? which is the best?

/edit, phew impressive, may I ask why?

Notepad is the best thing to learn in from scratch, or notepad++. Once you know how to code you could move on to dreamweaver so your not skipping steps and missing the vital mistakes you SHOULD be making at the start

greyed · 20-11-2008 2:27am

I like notepad++ alright. Ive done stuff from scratch before, both in college and before it, nothing too complex though. So I understand the code it generates for the most part. Why do you not like the WYSISYG approach goodshape?

Goodshape · 20-11-2008 2:31am

greyed wrote: »

Why do you not like the WYSISYG approach goodshape?

Not sure if you saw my edited-in explanation in the last post?

Main reason would be that I prefer to have full control over the end result, and the less time using a mouse the better (I can type fast... hate having to break away to find my mouse and access some menu when I could just be typing "color : black;".

greyed · 20-11-2008 2:37am

Ah, nope, didnt see that:D Sounds reasonable.
Thanks again for help all.

DonkeyStyle \o/ · 20-11-2008 2:38am

What editors, if any, do you guys use? which is the best?

Notepad++ here.
I started off with dreamweaver when I didn't know any html, we generated some hideous html together... empty font tags ftw :pac:
Once I learned how to actually write html/css I just never felt the need to go back.
Notepad++ open in one window, Firefox/IE open in another... refresh the browser when you want to see an update... not sure what I'd want wysiwyg for.
I'm pretty much on the same page as Goodshape with this... there isn't really that much typing involved... especially once you start dumping your CSS out to an external stylesheet and re-using it across the whole site.

Goodshape wrote: »

DonkeyStyle's code does essentially the same thing as mine.

*cough* except it works in IE6 :pac:

greyed · 20-11-2008 2:40am

we generated some hideous html together...

Website alignment

Comments