I'm redesigning the site that I recently did. Heres the link http://www.atriskstoriesofhope.com


I want to design the site to look like this below. Note: This is just a rough draft of the site that I want to go after.



I want to keep away from an all flash site. The only flash that I want is the one at the bottom.

1) Whats the best/simplest method to design this (css/etc?)

Also, I'm looking into possibly using adobe golive to position everything on the site.

Please offer any help that you can, as this is totally new to me.

Thanks

oh, and one last thing, I also want to position the site in the middle of a browser...

Here's a great list of horizontal CSS Menus:

http://www.dynamicdrive.com/style/cs...y/category/C2/

and a CSS layout that fits your needs:

http://www.dynamicdrive.com/style/la...1-fixed-fixed/

Originally Posted by NateL

Here's a great list of horizontal CSS Menus:

http://www.dynamicdrive.com/style/cs...y/category/C2/

and a CSS layout that fits your needs:

http://www.dynamicdrive.com/style/la...1-fixed-fixed/

Thanks. You understand what I'm going after right? I want to position the buttons to hang over the left side...and to have my dads picture hang over the left side as well. How would this be done?


Check this site out http://workbench-music.com/. I want to do something like that (having my dads site centered in the middle of the page). How can this be done? (css/html???)

Thanks

Yes the positioning of the menu at the side, the pic on the left and the centering of the entire site can be done with CSS.
To center your site I believe setting body to

body{
     text-align:center;
}

should do it.

The centering thing is easy. You can just create a container div to hold everything and define "margin: auto" in your stylesheet for the container.
The other part is more difficult. I believe you will have to use absolute positioning to get the buttons and picture to hang off of the edge of the main container. You may have to get into the z-index property to create layers.

What you can do is make a background-image pic for your container div where the left side of the background-image is the same color as the color of your document body.
It's best to do this as a repeating image on the y-axis so no matter the length of your container div the image will fill it. You can then position the container div as you wish for effect.

I believe you will have to use absolute positioning to get the buttons and picture to hang off of the edge of the main container.

Not necessarily.

Given that the tabs for the menu are partially overlapping the left side, you can achieve that without absolute positioning and using floats.

The bottom section can be a separate div, with the background set as the bottom portion with the photo off to the side, but as shown above, still inside the container. You could then either put the message directly in that div, or even add another div inside it to contain and position the message/flash.

This example uses absolute positioning for the side tabs, but it is done that way because the tabs don't overlap the left column, they just meet it:
http://tinyurl.com/2fazqj

Originally Posted by angele803

The centering thing is easy. You can just create a container div to hold everything and define "margin: auto" in your stylesheet for the container.
The other part is more difficult. I believe you will have to use absolute positioning to get the buttons and picture to hang off of the edge of the main container. You may have to get into the z-index property to create layers.

Ok, I'm totally new to this. I recently got a copy of Adobe Golive as I've heard that you can edit a website/html/css with it quite easily. Right now, I need to create the website from scratch.

Can anyone give me a run down of how I should go about in the creation of a website that will resemble the picture that I posted? (and I mean a close to step by step if its at all possible)

Thanks

First you need to create the GRAPHIC MOCKUP of the site in some graphics program.

Once you have that, then you 'slice' the graphics into the pieces you need for header, footer, background, menu buttons, etc.

Lastly, and this may be the hard part for you, you set up the layout with the HTML and then do the CSS.

If you ask 10 people here, you're likely to get 10 different answers as we all tend to do things a bit differently.

Ok, here is a very BASIC example - this is but one possible way to do this.

I used colors to illustrate the sections.

Originally Posted by angele803

The centering thing is easy. You can just create a container div to hold everything and define "margin: auto" in your stylesheet for the container.
The other part is more difficult. I believe you will have to use absolute positioning to get the buttons and picture to hang off of the edge of the main container. You may have to get into the z-index property to create layers.

Can you explain how to do this. I'm redesigning my dads website, and I'm using div tags to position everything. Once I do this, can I create one big div tag and wrap this around every other tag.