Hola, Ivan. Nice trick of linking the CSS file directly! I like when I can be lazy.
I'm going to try and break your questions/comments down one at a time.
Quote:
|
-I can't seem to get the "contact" button to stay top right alligned, within the white, besides placing it using pixels, which I am trying to avoid.
|
You don't seem to have one that I can see on the page now.
Quote:
|
-Can't get rid of the gray area at the top/bring the white up all the way
|
I'm going to assume that ultimately what you want is something like what I did here:
www.greenbuildingfest.com
If that's the case, then all you need is a few lines at the top of your CSS (good to define this explicitly):
Code:
body {
margin: 0;
padding: 0;
}
That's all you need.
Quote:
|
-Moving the chunk of centered links/text to the very top of the page so that they are paralell with "logo" and "contact."
|
What you'll want in this case is four divs...three with left floats and one to clear the floats (in case you need to use a left float again):
Something like this:
Code:
#logo {
float: left;
width: 58px;
margin: 0;
padding: 0; /* always define these explicitly...it's not a written hard-and-fast rule or anything, but it saves a buttload of hassle later on, I've found. */
}
#links {
float: left;
text-align: center;
width: 622px;
}
#contact-button {
float: left;
width: 100px;
}
.cleft {
clear: left;
}
....
<div id="logo">...</div>
<div id="links">...</div>
<div id="contact-button">...</div>
<div class="cleft">...</div>
You'll also notice that the three widths above add to 780 pixels, not 800. When designing for 800 x 600 resolution (as you appear to be doing), you need to take into account the scrollbar (which usually takes up 20 pixels.) No big deal though...thta's how you learn, right?
Quote:
|
-Having the "© 2007 Ivan Cash" text move relative to when the page is resized, so that it is always centered.
|
To do this, put your footer div just before the body and define it like this:
Code:
#footer {
text-align: center;
margin: 1em auto; /* normally website examples use 0px auto, but in this case it's your footer and you'll want to leave some whitespace on the top and bottom so that people can read it. */
width: 780px;
}
...
<div id="footer">...</div>
</body>
</html>
No absolute positioning (which should only be used in circumstances where an item needs to be in a precise location), no fuss, no muss.
Quote:
|
Each browser seems to handle the site differently as well, which is annoying as I thought that CSS ran smoothly in all every popular browser.
|
Young brother, you have much to learn. And that's the very first thing...CSS does not perform the same in every browser. One of the most annoying aspects about CSS is the number of ways each browser has of interpreting its little nuances.
Fortunately, you've come to the right place. There are some very qualified teachers here. You've got LadyNRed, vangogh, Chris Hirst, myself, Forrest Croce, Learning Newbie, travelagent, and a whole host of others.
