KKZ Website Progress

[draken_art]

Okay after considering my options, I figured I'll stick to what I know and keep the code as clean and simple as possible. Thus when time comes to update it to HTML5, I'll be able to do it without too much fuss.

That decision made, I've been working with a modified 960 layout set up... well okay I used the 960 layout for the design and snipped some

Comments

[omnibahumut]

To make it flush with the top of the browser, in your CSS:

body {
margin: 0px;
}

and to style your text field... give the textarea an ID, like "search" in the HTML, so it would be:

and then in CSS:

#search {
width: 100px;
color: #000;
background-color: #AAA;
}

and really whatever else you wanted to apply to that.

Also for a simple sort of one-column page, like you have so far, you shouldn't need to mess with absolute/relative positioning.

[omnibahumut]

uhhh... my search box HTML got parsed... trying again:

[draken_art]

I got the text field to style nicely. It's the text inside the text field I cannot seem to reach with CSS. /Really/ weird.

I tried the body {margin:0px;} and it still hangs out. I'm going to go play How to Train your Dragon on the Wii with my kids for a bit.

If you want to look at the code to see where I f-ed up I can upload it some place to share it.

[cesarin]

tried using a span or style inside the box?
pretty sure you can style the boxes by assigning a ID.

[draken_art]

The origanization is like this

body

> wrapper (to align)

>>header graphic in a div (for the box fx)

>>clear div

>>body content div
---search div w/form (creates the top portion of the site w/ the color bg divider bar
---art wrapper - to contain the artwork w/ the textured background.
---footer - to finish the bottom of the content body area.

>>clear div

>>side bar content div
--photo box (maybe dynamic in the future so the pic changes)
--navigation
--contact

>>clear div

The idea is to get the wrapper to position the whole thing, centered and top-flush.

[draken_art]

But what I find annoying is that the wrapper, when it's position is made relative, everything lines up in the center. But when it's made absolute the margin:0px; makes no difference and it aligns flush to the left of the screen.

[omnibahumut]

You need to make the wrapper margin like this:
body {
margin: 0px;
}

#wrapper {
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 0px;
}

You can probably leave out margin-bottom... but you also need to take off all positioning properties.