This is a plea for help. I have bought into laying out sites with CSS and not using tables and Javascript menus and after two texts and more than a month of full-time effort there is something fundamental about CSS that I just "don't get." Elements are moving all over the map in ways that I am totally unable to predict, and the things that work in articles simply don't do for me what the article says they will do.
I am not a stupid person. I have been programming successfully in C/C++ for more than 20 years, and doing internet programming for more than 8 years using HTML and laying sites out with tables. I can honestly say that I have never in all that time had a customer who was anything less that happy with what I produced for them. So I do know more than a little bit about programming terms and technology.
Unless I make some kind of breakthrough of comprehension I am going to have to drop this project in favor of something that will get sites on the web and money into my bank account. It's not that my sites don't work well now or that my customers are not happy with them; I've just been rather wanting to be using more modern technique in producing them.
My "state of my knowledge" work is here (<!-- m --><a class="postlink" href="http://www.sonora-sw.com/eight/">http://www.sonora-sw.com/eight/</a><!-- m -->) and you will see that the menu "sort of" works between "Home" and "About Us."
The menubar is pushing the other <divs> down below where I wouild expect them to be, and I cannot understand why. Between the bottom of the image (and of the menubar) and the top of the "contents" <div> is a gap of approx 20px. I am correcting that by positioning that div and the footer with a "top: -22px;" but have no idea why that is needed. (I've posted this question a couple of times with no answer. I wouldn't start a new thread if this were my only question.)
It seems primitive and unreliable to me to be locating elements on the website by this kind of experimentation. "Well, guess at a location, see how it looks and then adjust based on the appearance."
The article was this one (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/taminglists/">http://www.alistapart.com/articles/taminglists/</a><!-- m -->) CSS Design: Taming Lists: A List Apart.
The link on my menu is limited to the text because trying to make the whole <div> containing the link become active never behaved anything like the article said it would.
#button li a {
display: block;
width: 100%
}
html>body #button li a {
width: auto;
}
That trashed the menu bar display completely and nothing I could do would make it work. The "Home" item was centered and the other four disappeared as soon as I included the above lines in the CSS.
Trying to make a dropdown produced even less success. This code is supposed to prevent the sublist from being displayed when not "moused over:
li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
}
But it does not. The sublist is displayed inline where the main menu should be and the main menu list is pushed down and mostly concealed behind the "content" div.
Can anyone offer input into what it is that I am missing? Help with these specific issues, but more important, what basic facet of CSS am I not getting?
The CSS for my page:
#outer {
border: 1px solid #0000B0;
width: 760px;
height: 490px;
background: #FFFFFF;
margin: auto;
}
#menubar {
position: relative;
top: -22px;
left: 8px;
}
#menubar ul {
margin-left: 0;
padding-left: 0;
display: inline;
}
#menubar ul li {
margin-left: 0;
margin-bottom: 0;
margin-right: 30px;
padding: 1px 10px 1px;
border: 1px solid #FFFFFF;
list-style: none;
display: inline;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: bold;
color: #FFFFFF;
}
#menubar ul li.here {
border: 1px solid #FFFF00;
color: #FFFF00;
}
#menubar li:hover {
border: 1px solid #FFFF00;
color: #FFFF00;
}
#menubar li a {
color: #FFFFFF;
text-decoration: none;
}
#menubar li a:hover {
color: #FFFF00;
}
#content {
position: relative;
top: -22px;
height: 400px;
width: 760px;
font: bold 10pt Arial, Helvetica, sans-serif;
color: #0000B0;
text-align: center;
}
#footer {
position: relative;
top: -22px;
height: 30px;
width: 760px;
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: normal;
color: #0000B0;
text-align: center;
}I don't think you fully understand just how positioned elements interact with each other and how the CSS box model works. In fact, start out by understanding the CSS box model (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/box.html#box-dimensions">http://www.w3.org/TR/CSS21/box.html#box-dimensions</a><!-- m -->). Once you understand that, read the three posts I linked to in your previous topic.
Also, there are two different basic classifications of elements: Block and inline.
Block elements are rendered on a different line than any other element, hence they are stacked on screen like blocks. By default, they are only as tall as their content and as wide as their containing block allows. Examples are <p>, <div> or <li>.
Inline elements are the antithesis of block elements, so to speak. Inline elements appear side by side and are rendered on a text line. Things like height and width do not apply to them. Instead, line-height, vertical-align and font-size do. Examples are <span>, <strong>, and <a>.
And the biggest thing to understand is that CSS Design does not have rows or columns. It has boxes that have no relation to one another. They fit where they have room to fit.
Bottom line: You aren't going to learn CSS Design in a couple months. If you really work at it, you could be an expert at it in about a year to a year and a half. CSS Design has a very sharp learning curve, but then again, think how long it took you to really learn all the tricks you routinely use in table-based layouts.
CSS Design is different enough in philosophy and technology that you're basically relearning Web design. If it comes down to eating or starving, design sites with tables. But keep at this in your free time. If you have any
I know many existing professional Web designers have little time outside of work to learn something new like this. But the march of progress waits for no one. As someone who's programmed in C/C++ I know I'm preaching to the choir.The menubar is pushing the other <divs> down below where I wouild expect them to be, and I cannot understand why. Between the bottom of the image (and of the menubar) and the top of the "contents" <div> is a gap of approx 20px. I am correcting that by positioning that div and the footer with a "top: -22px;" but have no idea why that is needed.
I was/am having similar problems understanding CSS. To my understanding, the reason you had to position the menu/content -22px is because they are positioned relatively. If the positioning were eliminated, the position of the menu on the page would be right under your banner image - which is the normal document flow in HTML. Because you want the menu superimposed on the image, you are positioning it 'relative' the image and -22px from its original position. Because the subsequent divs are also positioned relatively, they must be positioned -22px from where they would occur normally.
Again, that is my understanding. I am sure there are people here who could shed more light on the subject, but I hope this helps. It may also be helpful to you to view your content without the styles just to see where the elements would occur without the positioning.Here's one problem :#menubar {
position: relative;
top: -22px;
left: 8px;
}
It's not a good idea to use 'top' and 'left' with 'position:relative'. What happens is that the element appears to have moved but it actually takes up the same space that it would in the natural flow of the page. To move it up, use 'margin-top:-22px'. This is an important thing to be aware of.
What effect do you want exactly with the menu links?
How about the dropdown ? Something like this : <!-- m --><a class="postlink" href="http://bonrouge.com/test/dropdown.htm">http://bonrouge.com/test/dropdown.htm</a><!-- m --> ?
CSS isn't so difficult when you get the hang of it. When it comes to positioning, I think most things can be done with relative positioning, floats and margins (positive or negative).Between the bottom of the image (and of the menubar) and the top of the "contents" <div> is a gap of approx 20px.
margin-top: 20px; in .subcont
height: 30px; in #spacer
Don't use height to 'move' elements, use their margins.Fang, before I put the menubar into place the gap was not there (all four .subcont elements, #spacer and .footer were). The gap appeared when I added the menu.
BonRouge said use "margin-top: -22px" instead, and I did that and it fixed the problem. I was able to remove the positioning from the subsequent <div>'s. But I don't really understand why. The positioning moved the <menubar>, but at the same time it didn't move it.
toicontien, I need to study your input a bit. I think absorbing it will help. I do recall than when I was making the transition from C to C++ I thought the latter was the height of insanity, now it's about as automatic as breathing. I needed to be reminded of that. At 62 my mind is not as flexible as it was then.
I am not a stupid person. I have been programming successfully in C/C++ for more than 20 years, and doing internet programming for more than 8 years using HTML and laying sites out with tables. I can honestly say that I have never in all that time had a customer who was anything less that happy with what I produced for them. So I do know more than a little bit about programming terms and technology.
Unless I make some kind of breakthrough of comprehension I am going to have to drop this project in favor of something that will get sites on the web and money into my bank account. It's not that my sites don't work well now or that my customers are not happy with them; I've just been rather wanting to be using more modern technique in producing them.
My "state of my knowledge" work is here (<!-- m --><a class="postlink" href="http://www.sonora-sw.com/eight/">http://www.sonora-sw.com/eight/</a><!-- m -->) and you will see that the menu "sort of" works between "Home" and "About Us."
The menubar is pushing the other <divs> down below where I wouild expect them to be, and I cannot understand why. Between the bottom of the image (and of the menubar) and the top of the "contents" <div> is a gap of approx 20px. I am correcting that by positioning that div and the footer with a "top: -22px;" but have no idea why that is needed. (I've posted this question a couple of times with no answer. I wouldn't start a new thread if this were my only question.)
It seems primitive and unreliable to me to be locating elements on the website by this kind of experimentation. "Well, guess at a location, see how it looks and then adjust based on the appearance."
The article was this one (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/taminglists/">http://www.alistapart.com/articles/taminglists/</a><!-- m -->) CSS Design: Taming Lists: A List Apart.
The link on my menu is limited to the text because trying to make the whole <div> containing the link become active never behaved anything like the article said it would.
#button li a {
display: block;
width: 100%
}
html>body #button li a {
width: auto;
}
That trashed the menu bar display completely and nothing I could do would make it work. The "Home" item was centered and the other four disappeared as soon as I included the above lines in the CSS.
Trying to make a dropdown produced even less success. This code is supposed to prevent the sublist from being displayed when not "moused over:
li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
}
But it does not. The sublist is displayed inline where the main menu should be and the main menu list is pushed down and mostly concealed behind the "content" div.
Can anyone offer input into what it is that I am missing? Help with these specific issues, but more important, what basic facet of CSS am I not getting?
The CSS for my page:
#outer {
border: 1px solid #0000B0;
width: 760px;
height: 490px;
background: #FFFFFF;
margin: auto;
}
#menubar {
position: relative;
top: -22px;
left: 8px;
}
#menubar ul {
margin-left: 0;
padding-left: 0;
display: inline;
}
#menubar ul li {
margin-left: 0;
margin-bottom: 0;
margin-right: 30px;
padding: 1px 10px 1px;
border: 1px solid #FFFFFF;
list-style: none;
display: inline;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: bold;
color: #FFFFFF;
}
#menubar ul li.here {
border: 1px solid #FFFF00;
color: #FFFF00;
}
#menubar li:hover {
border: 1px solid #FFFF00;
color: #FFFF00;
}
#menubar li a {
color: #FFFFFF;
text-decoration: none;
}
#menubar li a:hover {
color: #FFFF00;
}
#content {
position: relative;
top: -22px;
height: 400px;
width: 760px;
font: bold 10pt Arial, Helvetica, sans-serif;
color: #0000B0;
text-align: center;
}
#footer {
position: relative;
top: -22px;
height: 30px;
width: 760px;
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: normal;
color: #0000B0;
text-align: center;
}I don't think you fully understand just how positioned elements interact with each other and how the CSS box model works. In fact, start out by understanding the CSS box model (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/box.html#box-dimensions">http://www.w3.org/TR/CSS21/box.html#box-dimensions</a><!-- m -->). Once you understand that, read the three posts I linked to in your previous topic.
Also, there are two different basic classifications of elements: Block and inline.
Block elements are rendered on a different line than any other element, hence they are stacked on screen like blocks. By default, they are only as tall as their content and as wide as their containing block allows. Examples are <p>, <div> or <li>.
Inline elements are the antithesis of block elements, so to speak. Inline elements appear side by side and are rendered on a text line. Things like height and width do not apply to them. Instead, line-height, vertical-align and font-size do. Examples are <span>, <strong>, and <a>.
And the biggest thing to understand is that CSS Design does not have rows or columns. It has boxes that have no relation to one another. They fit where they have room to fit.
Bottom line: You aren't going to learn CSS Design in a couple months. If you really work at it, you could be an expert at it in about a year to a year and a half. CSS Design has a very sharp learning curve, but then again, think how long it took you to really learn all the tricks you routinely use in table-based layouts.
CSS Design is different enough in philosophy and technology that you're basically relearning Web design. If it comes down to eating or starving, design sites with tables. But keep at this in your free time. If you have any
I know many existing professional Web designers have little time outside of work to learn something new like this. But the march of progress waits for no one. As someone who's programmed in C/C++ I know I'm preaching to the choir.The menubar is pushing the other <divs> down below where I wouild expect them to be, and I cannot understand why. Between the bottom of the image (and of the menubar) and the top of the "contents" <div> is a gap of approx 20px. I am correcting that by positioning that div and the footer with a "top: -22px;" but have no idea why that is needed.I was/am having similar problems understanding CSS. To my understanding, the reason you had to position the menu/content -22px is because they are positioned relatively. If the positioning were eliminated, the position of the menu on the page would be right under your banner image - which is the normal document flow in HTML. Because you want the menu superimposed on the image, you are positioning it 'relative' the image and -22px from its original position. Because the subsequent divs are also positioned relatively, they must be positioned -22px from where they would occur normally.
Again, that is my understanding. I am sure there are people here who could shed more light on the subject, but I hope this helps. It may also be helpful to you to view your content without the styles just to see where the elements would occur without the positioning.Here's one problem :#menubar {
position: relative;
top: -22px;
left: 8px;
}
It's not a good idea to use 'top' and 'left' with 'position:relative'. What happens is that the element appears to have moved but it actually takes up the same space that it would in the natural flow of the page. To move it up, use 'margin-top:-22px'. This is an important thing to be aware of.
What effect do you want exactly with the menu links?
How about the dropdown ? Something like this : <!-- m --><a class="postlink" href="http://bonrouge.com/test/dropdown.htm">http://bonrouge.com/test/dropdown.htm</a><!-- m --> ?
CSS isn't so difficult when you get the hang of it. When it comes to positioning, I think most things can be done with relative positioning, floats and margins (positive or negative).Between the bottom of the image (and of the menubar) and the top of the "contents" <div> is a gap of approx 20px.
margin-top: 20px; in .subcont
height: 30px; in #spacer
Don't use height to 'move' elements, use their margins.Fang, before I put the menubar into place the gap was not there (all four .subcont elements, #spacer and .footer were). The gap appeared when I added the menu.
BonRouge said use "margin-top: -22px" instead, and I did that and it fixed the problem. I was able to remove the positioning from the subsequent <div>'s. But I don't really understand why. The positioning moved the <menubar>, but at the same time it didn't move it.
toicontien, I need to study your input a bit. I think absorbing it will help. I do recall than when I was making the transition from C to C++ I thought the latter was the height of insanity, now it's about as automatic as breathing. I needed to be reminded of that. At 62 my mind is not as flexible as it was then.