[Brian Of influx media]

not a problem =)

I didn’t get to look at the code you had absolute positioned, but is it positioned from 0,0 being the top left corner of the view port? or is it “relative” to the div (top left corner of the containing div) you are positioning from?

Brian

Brian Artka

https://www.influx-media.com
Digital Video/Digital Media Specialist
Video Production/Web Design

[Brian Of influx media]

Hi Brett,

Yeh, I have to admit that some things are pretty difficult to do especially when browsers are not consistent. Try to use this page i threw together as an example to use on your website you mentioned in this post:

https://www.influx-media.com/3coltest.html

This was tested in IE7 and IE6, and firefox. I’m pretty sure it will work with other standard browsers. We dont even try to adapt to anything below IE6 anymore on 90% of our projects, unless the client requests an older browser support.

Anyway, this layout consists of container holding the header, 3 columns (each a div) and a footer. The header is first in the container, then the left col, center col, right col, which are all floated LEFT. Last in order, is the footer, which is set to clear: both. It really only needs to clear left, but both is used in case later one were to play with a right float.

To take care of your background colors being different even when one column grows, and the others dont, I used a faux column approach. The container div has a repeat-y background image that is split into 3 colors and lengths to match the columns. that way the colors will all be the same when the content grows in a div.

Look at the code too, order of each div in the container DOES matter when you use floats. The reason they are all floated left is that one will bump right up next to each other starting at the left-most edge of the container. The container is set to always be horizontally center no matter what the size of the browser viewport and if you make the viewport small, the floats do not move and you can pan right across them without any breaking issues. Thats the beauty of the container div.

Thats all I’ll say for now, if you use this, and it works out, let me know. There are tons of other ways to arrange your content in the container and divs once you get the basic layout done.

Brian Artka

https://www.influx-media.com
Digital Video/Digital Media Specialist
Video Production/Web Design

[Brian Of influx media]

tables should not be used for any layout purposes anymore, they need to go away and be used for presenting “data” as they were intended. I know its difficult to get over the table bases layout gene, trust me, It took about 6-8 months of drilling CSS into my head to do it, but once you do…man its heaven 😉

Brian Artka

https://www.influx-media.com
Digital Video/Digital Media Specialist
Video Production/Web Design

[Brian Of influx media]

hi B,

If I am seeing your example page right, you are using divs seperately aligned via negative left margins to center them all horizontally. There is a much easier way to do this. Make div called “container” and put EVERYTHING you have already inside of that. Then apply the following CSS to that “container” div:

#container {
text-align:center;
margin: 0 auto;
width: 875px;
}

This will contain all the other divs, and all the other content inside of the “container” and whatever size the browser is resized too wont matter as long as the container is holding the content.

You might have to change some properties of the divs inside, for instance, all the negative divs will have to be changed since now these divs are child divs of the “container” div, not the body element. let me know how it goes.

Brian

Brian Artka

https://www.influx-media.com
Digital Video/Digital Media Specialist
Video Production/Web Design

[Brian Of influx media]

do you mean adobe studio 7 (or 8)? If so, the studio package is just a bunch of adobe programs bundled together including dreamweaver. It is flash, dreamweaver, fireworks, and some others.

If you were to choose, dreamweaver would be the good choice.

Brian Artka

https://www.influx-media.com
Digital Video/Digital Media Specialist
Video Production/Web Design

[Brian Of influx media]

Microsoft Frontpage is now obsolete; Bill stopped production of it and will stop supporting it next year.

They have a new web program out called Expression…

If you are serious about making websites, learn XHTML and CSS and hand code with notepad, notepad++ or the code view in dreamweaver.

If you just want to dabble, I would suggest Dreamweaver, and if you cannot afford it, there are many other less expensive WYSIWYG editors out there, just do a google search for “WYSIWYG editors”.

If you are looking for a good book to learn the basics, I HIGHLY recommend Head First HTML with CSS & XHTML

Brian Artka

https://www.influx-media.com
Digital Video/Digital Media Specialist
Video Production/Web Design

[Brian Of influx media]

try this color picker:

https://defmech.com/color/

very nice and works well.

[Brian Of influx media]

i am currently reading “Head First HTML with CSS & XHTML (Head First)” and it may be what yo uare looking for. I also heard many good things about a book called “CSS Mastery: Advanced Web Standards Solutions” but I have not read that one yet. good luck

Brian

Brian Artka

https://www.influx-media.com
Digital Video/Digital Media Specialist
Video Production/Web Design

[Brian Of influx media]

Hello,

The CSS example was moved here. The author of the article re-designed his site a little and did some house keeping.

https://www.joe2torials.com/view_tutorial.php?view=37

there are alot of good examples using CSS on his page, he added a slew of them earlier this month.

Brian Artka

https://www.influx-media.com
Digital Video/Digital Media Specialist
Video Production/Web Design

[Brian Of influx media]

https://www.joe2torials.com/view_tutorial.php?view=37

is where the example has been moved to