deadseasquirrel
04-14-2004, 03:55 AM
I love CSS in someways, and in some ways it is driving me crazy because it appears to have no rhyme or reason.
First I had my doctype set as:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
And nothing seem to work. Then somebody told me to use another doctype, exactly why, I don't know, but it did the trick. It was as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
From what I understand of CSS, now is that for position (which is why a lot of people want to use it and get rid of tables) the following are the definitions.
relative - relative to where it would have been put otherwise
absolute - the absolute position from 0,0 (which is the upper left-hand corner of the most recently positioned item.
static - is just like default.
Like everybody, I am trying to do a column effect without messing with too much margin/padding hacking. I have my columns set as follows:
#mainpage {
width: 750px;
border: 1px solid #FF0000;
background-color: #eee;
position: static;
}
#mainpage #logoleft {
background-image: url(../images/pedialogo1.jpg);
background-repeat: no-repeat;
position: absolute;
height: 50px;
width: 250px;
}
#mainpage #logoright {
background-image: url(../images/pedialogo.jpg);
background-repeat: no-repeat;
position: absolute;
height: 50px;
width: 220px;
left: 300px;
}
I would think that this meant that the mainpage window would constantly center as the browser window is resized (which it does), and that the leftlogo item would always be on the left-hand margin of the mainpage window, and that logoright would always be on the right-hand margin of the mainpage. But instead what happens is, logoright is set to 300px from the left hand of the browser, NOT mainpage.
But then when I set mainpage to be positioned relative, things work as I wanted. Why is that. What is the rhyme and reason for that, what are the specs once and for all, and what type of doctype do I need to use to get those specs to happen. It is so frustrating, please somebody help a person who desparately want to get a solid handle on CSS.
First I had my doctype set as:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
And nothing seem to work. Then somebody told me to use another doctype, exactly why, I don't know, but it did the trick. It was as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
From what I understand of CSS, now is that for position (which is why a lot of people want to use it and get rid of tables) the following are the definitions.
relative - relative to where it would have been put otherwise
absolute - the absolute position from 0,0 (which is the upper left-hand corner of the most recently positioned item.
static - is just like default.
Like everybody, I am trying to do a column effect without messing with too much margin/padding hacking. I have my columns set as follows:
#mainpage {
width: 750px;
border: 1px solid #FF0000;
background-color: #eee;
position: static;
}
#mainpage #logoleft {
background-image: url(../images/pedialogo1.jpg);
background-repeat: no-repeat;
position: absolute;
height: 50px;
width: 250px;
}
#mainpage #logoright {
background-image: url(../images/pedialogo.jpg);
background-repeat: no-repeat;
position: absolute;
height: 50px;
width: 220px;
left: 300px;
}
I would think that this meant that the mainpage window would constantly center as the browser window is resized (which it does), and that the leftlogo item would always be on the left-hand margin of the mainpage window, and that logoright would always be on the right-hand margin of the mainpage. But instead what happens is, logoright is set to 300px from the left hand of the browser, NOT mainpage.
But then when I set mainpage to be positioned relative, things work as I wanted. Why is that. What is the rhyme and reason for that, what are the specs once and for all, and what type of doctype do I need to use to get those specs to happen. It is so frustrating, please somebody help a person who desparately want to get a solid handle on CSS.