Question

[Ninjakreborn]

[b]Solved, one thing though[/b]For people who are following this for information purposes. Wildteen told me in a pm, that all browsers but opera have default 0, for margin. He said opera does not have them defaulted at 0, so it's best to put padding:0;
margin:0;
in the body, he told me that in a pm, for people who are trying to do whatever and notice it's not going all the way to the top. Thanks for all the help.


I have finally broken through from using Absolute and Relative positioning. I dislike wrapping my websites with #wrapper divs. So I came up with other solutions, I encountered a massive problem, a misalignment issue between internet explorer and firefox, I fixed this
*Please note the homepage is still under construction, I am still working with link coloring and some other issues.
But what I did was implemented a hack, that removed the margin problem in ie, and it looked good in firefox, but there is a major error in opera. I can't get it to get off the logo, no matter what, that is my problem
www.freelancebusinessman.com
You can see my css, and Xhtml code there, everything should validate too, I have been playing with them some, but nothing should have thrown off validation. The last issue I am having is with opera, and I would like to get rid of that hack too if I could but I couldn't find any other solutions.

[b]EDIT[/b]Also is there any way for me to change around the way I am doing this. I will even redesign the whole thing from scratch, if there is a better way for me to set up this layout, right now as it is, as the content expands the bottom nav bar moves down, as it's supposed to, but I also have incorporated that hack in the css file to fix that, and I am still having the issue severely in opera, the issue comes from margin, on the logo or top of that div, but when I fix it, it severely messes up. The other thing I am trying to figure out, is it possible to create something that looks good in all the browsers I am using being Firefox, internet explorer, netscape, opera- and still have it look good in safari(which I can't see) without using css hacks. Or programming to correct errors, I want to use programming, but not to situate layout I have heard it's bad. I just want to get good at this, I know php, sql, and javascript I will get good at, as I use them, but those are useless to me, unless I am a master of css. I am alread a master almost of Xhtml, but the css, I am still working on and in the past 3 days I have learnt 200 fold from what I previously knew, and I knew a lot then. So I am doing a lot better, getting some of these issues situated will help, I know alot of the stuff I am asking here is subject to opinion, so I am seeking opinions, but anything that can be backed up with proof on accessibility, or standards compliant, would be a push I need to start working in that direction, I want to be 100% hand coded(programming, excetera except when using third party scripts in php), standards compliant, and do as much as possible to keep the code, easy to read, easy to understand, and well commented. If it's possible I would like to do any type of layout, or anything without ever using hacks, and I dug very deep into liquid design I tried my hardest to get liquid design, and I thought I had it until the design was laid out, any advice, or proof, on somethings I can do(if) I redesign my site, to make it 100% liquid I would love it, because when I Finish the homepage completely that's it, I just copy and past the html code, and then redo the content area, and fill it with the new content, I am having the same page layout for every single page, so the homepage is the most critical page on there, sorry for all the writing, but I was hoping to shed some light into the reasoning for me asking these questions, and these number of questions. Thanks for any help, greatly appreciated.
MAJOR QUESTION-SHould I follow w3 standards when using selectors or do them my way
w3
p#maincontent
{
}
h3#maincontent
{
}
p.maincontent
{
}
h3.maincontent
{
}
Excetera
MY personal preference
#maincontent p
{
}
#maincontent h3
{
}
.maincontent p
{
}
.maincontent h3
{
}
Which way is better, the way w3 shows, or my way, if it's w3, then I will go through and change all of it now, and start mastering that way as well.
again sorry for all the questions but I really need this help, I am trying my hardest to advance my career, even if I have to redesign 50 times.
THanks.[b][/b]

[Ninjakreborn]

does anyone have any ideas on this opera problem, if I can't find out any other way except to take and use php to detect the browser, and use a different stylesheet for opera, there has to be some other way.

[wildteen88]

You seem to have crap loads of CSS hacks. This is not needed at all.

Remove any hacks form your CSS. Now apply the following CSS to your #maincontent stye, basically repolace what ever you have for that style with the following:
[code]#maincontent {
float: left;
width:640px;
border-style:double;
border-color:#333333;
text-indent:1.2em;
margin: 0.5em 0 0.5em 0.5em;
padding: 0.5em;
}[/code]

Now float your menu (#mainnav) to the left, or just change the CSS to this:
[code]#mainnav {
width: 200px;
background-color: #666666;
margin: 0.5em;
border-color:#333333;
border-style: double;
float: left;
}[/code]

By now you should see that Opera, IE and FF are displaying your site correctly! Now for a small finsihing toch to make your site appear centered on screen is to change the body style to the following:
[code]body {
background-color:#7A97A5;
width: 900px;
margin: 0px auto; /* Allows the site to be centered on the screen, rather than being stuck to left of the window */
}[/code]

Your site should be cross browser compatible Opera, FF, IE (6 and 7) and hopefully others such as safari) with no CSS hacks insight!

[Ninjakreborn]

Alot of css hacks?? I am confused, I thought I only had one hack in there, the one to fix internet explorer, but monday when I start to work again, I will look at your code, and apply it to my site, then dissect it to find out what you did to make it work. I have learnt 100 times what I new before In just the past 3 days, doing what you said, when I encounter a problem I run through bunches of websites, looking at there css file. I will remove that hack, but I am pretty sure, that I only have one hack in there.

[Ninjakreborn]

Ok, I looked over your stuff wildteen today. I was looking over this, and I changed everything but I didn't want to without understanding it, again I am trying to master css. I understand now what you showed me about the body, what I had was the body was set with margin's and padding earlier, now I see you set the body with a width, and margin and that centered it, to tell you the truth I was unaware that you could set a width for the body. But I see it's set and looks exactly the same with less code, the question about that which is technically better, setting the margin and padding of the body, or setting the width of it, then adjusting the position.

Another thing I didn't understand what happened with the main navigation and the content area. I floated one left, into another one, and did a few other things.
What I don't get fully is the way what I had, changed to what you had and still worked. I redid it the way you said, I don't fully understand it enough to be able to do it the same way next time I build a layout, so if you have time could you explain that too me as much as you can, so I understand better. You also dropped a couple of my border styles and somehow my border still turned out the same.

And how on earth did
margin: 0px auto; /* Allows the site to be centered on the screen, rather than being stuck to left of the window */
set my entire body to be in the center, I prefer doing it this way so I redid that part to look like
body {
background-color:#7A97A5;
width: 900px;
margin-top: 0px;
margin:auto; /* Allows the site to be centered on the screen, rather than being stuck to left of the window */
}
and what I don't get is, the margin-top I know removed the margin at the top. The auto, I am confused about, as soon as I set margin auto for the rest, it centered it, how does that happen. Does that mean by default when the left and right margins are auto then they set it into the center.
Sorry for all the questions, but any help would be greatly appreciated.
And the only thing, is it still doesn't work in opera, it doesn't even close the area between the logo, and the top. Is there a way to fix it in opera, thanks for all the help so far I greatly appreciate it.

[Ninjakreborn]

Nevermind it worked that time, I had did it wrong the first time, can you explain to me some of the code you showed me, so I understand the workings behind some of it.

[wildteen88]

Ok I will explain the CSS to you. First the body style:
[code]body {
background-color:#7A97A5;
width: 900px;
margin: 0px auto; /* Allows the site to be centered on the screen, rather than being stuck to left of the window */
}[/code]
You know about background-colour and width. But you seem to be confused about the margin bit:

[i]margin: 0px auto:[/i]

What that code does is set the top [b]and bottom[/b] margins to zero pixels. Now the clever bit, auto is basically a predifined keyword within CSS which makes the browser work out an [b]equal margin[/b] to go on the [b]left and the right side[/b] of an element. However the browser will only center your page if you actually specify a width to the element you are using auto margins with. Also [i]margin: 0px auto[/i] is shorthand for [i]margin: 0px auto 0px auto[/i].

margin: 0px auto 0px auto is setting the margin for the top, right, bottom and left sides of an element respectively it save having to type out margin-top, margin-right, magin-bottom, margin-left.

Now onto the maincontent and mainnav styles:
[code]#mainnav {
width: 200px;
background-color: #666666;
margin: 0.5em;
border-color:#333333;
border-style: double;
float: left;
}

#maincontent {
float: left;
width:640px;
border-style:double;
border-color:#333333;
text-indent:1.2em;
margin: 0.5em 0 0.5em 0.5em;
padding: 0.5em;
}[/code]
You'll notice I have floated both elements to the left. I did this so both the naviagtion and the content divs sat side by side of each other. Others if you didnt float both elements to the left none of the elements will sit side by side and instead one will be underneath the other. In both styles i applied a margin of 0.5ems to seperate the elements apart and to be seperated form the header image and the footer, aswell as appling 0.5ems of padding inside the elements too. The rest of the CSS is self explanitory.

Hope that helps.

Also CSS can style any HTML tag apart from the title and head tags as any styles you apply to these are ignored. You can even style the html tag too.

[Ninjakreborn]

Thanks now I get it, I have one more and probably final question for now. I have achieved what I wanted to rebuilt my homepage, tripled my css abilities. Now I want liquid design for the homepage, once I achieve it, I don't have to worry about the rest of the site as all I will be doing is copying and pasting the same layout. What I want to know, is do I need to redo my website to do what I am going to try to do.
1. Get a liquid design 100% liquid design.
2. Get the situated that w3schools.com has, to where when you resize the text, the content can flow with it a little bit, currently when I do this, it has a major problem, and it ends up shooting my divs all over the place, I need them to stay in place, and let it somehow adjust to the text, just like w3schools has, any advice would be greatly appreciated.
[b]EDIT[/b]Also before it's answered I was also wondering. I am going to be putting those pictured down below the navigation after it's all done, one for xhtml, one for css, maybe some others that I can find, I was wondering, can I just position those specifically with absolute positioning, and still have liquid design, since all they are is really are pictures. thanks.