brynn

Edit #1(Oops, I missed your last reply until I posted this. Thank you for that. And now I have another question.)/edit Next question. Since I'm not sure how much of the HTML you would need to see to answer this question, I'm posting all of it (which is much smaller than the CSS part): <div class="menu"> <ul> <li><a href="../index.html">Item 1</a></li> <li><a href="#nogo">Item 2</a></li> <li class="sub"><a href="#nogo">Item 3 »<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="../index.html">Item 3a</a></li> <li class="sub"><a href="#nogo">Item 3b »<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="../index.html">Item 3bi</a></li> <li><a href="#nogo">Item 3bii</a></li> <li class="sub"><a href="#nogo">Item 3biii »<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#nogo">Item 3biii-1</a></li> <li><a href="#nogo">Item 3biii-2</a></li> <li><a href="#nogo">Item 3biii-3</a></li> <li><a href="#nogo">Item 3biii-4</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#nogo">Item 3c</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#nogo">Item 4</a></li> <li><a href="#nogo">Item 5</a></li> <li><a href="#nogo">Item 6</a></li> </ul></div> Ok, so I've colored parts of it the same way it's colored in the source code (although I didn't color everything). My question is about the part in red and green parts. I guess the references to IE6 and IE7 indicate something related to making the code work in those browsers. But otherwise, what does the code in red mean and what does the green mean? I'm not really concerned about IE6, at this point, and maybe not even IE7.....because, didn't I hear that IE10 is either available or close to release? (I'm using Firefox, and haven't kept up with IE lately). But if I'm going to leave it out, I would want to be sure there's not something important about it. Thanks again PS -- Uh-oh, the color wasn't retained...let's see if underline will work.... Rats! Ok, let's try this. I'll use parentheses to represent the < and >. (li class="sub")(a href="#nogo")Item 3 »(!--[if gte IE 7])(!--)(/a)(!--(![endif]--> (!--[if lte IE 6])(table)(tr)(td)(![endif]--> (ul) Ok, that seems to work. That shows the red and green I mentioned. (The same string occurs 3 or 4 times, but I just copied 1.) Thanks again

Oh, so "ul ul".....oh ok, I think I understand. Does "ul li" represent all the items in the flyout? And then "ul a" represents all the links? I'd still be interested in the "descendant selectors" that Diedre's Dad mentioned, if it gives me a better understanding Thanks dsonesuk

I don't think so, no.

Ok. I wasn't sure about posting it here, because of the copyright. Here's a bit of the CSS part: /* hide the sub levels and give them a positon absolute so that they take up no room */.menu ul ul {visibility:hidden;position:absolute;top:0;left:150px;}/* make the second level visible when hover on first level list OR link */.menu ul li:hover ul,.menu ul a:hover ul {visibility:visible;} It looks like it sets up a class called "menu" for unordered lists, but I don't understand .menu ul ul or .menu ul li:hover ul or .menu ul a:hover ul Does "ul ul" represent the first fly-out?

Thanks Dierdre's Dad When you say to ask if I'm not sure about something, do you mean to ask here, or to ask over there?

Hi Friends, I'm still quite new to CSS. I have a working webpage, but I keep adding more and more and more links to several lists. What I really need is to sort of be able to close up certain sections of a long list. Let's say it's a list of authors (vertical list). I want to be able to either mouseover or click on an author's name, and have all the books they've written....show up....somehow. I'm thinking about something like a fly-out menu. Can anything like that be done with CSS? I've been all over the W3Schools site, trying to find something like that. I'm not really thrilled with the idea of learning how to write a script, but I guess that's how things get automated on webpages, with scripts. If it would be a short script, I might be able to do it. The closest thing that sounds like it might work is JS Navigation. But it turns out that does something not even close to what I need. I wonder if anyone can point me in the right direction, to learn how to do something like that? Thank you very much Edit I tweaked the title after msg #37, since the subject of the topic changed as the discussion (and my coding) progressed.

Ooooohh, ok, I understand now. Hey, good news! I have a successful page, that nothing shifts when the window is resized, and, as far as I can tell, will look relatively the same on most computer screens!! And I actually understand most of it. I'm a little fuzzy on using absolute position and relative position, but I think I have the general idea. Thank you so VERY much for your help

FYI though, the 2nd version, when I just insert my single unit image, works great, and actually looks more like I wanted. I haven't put in the denim pattern yet, but that part worked ok on the 1st version. I'll keep studying them EditThere IS still some shifting when the page is resized, with the 2nd version, but you have to make it so narrow to cause an overlap, that I don't know any reason why anyone would be trying to read the page that narrow. Still studying

Thank you dsonesuk I'm still struggling with your 1st set of code, and trying to reconcile that you mean the same thing in post #5 that you said in post #3. When you said and then I thought you meant just 1 unit of the pattern. But when I put 1 unit of the pattern image into your 1st set of code, it stretches the 1 unit all the way down the page. There is no repetition. But part of the problem is that I don't understand this:{position:absolute; /*background:url(../images/10pat.jpg) repeat 0 0;*/ left:0px; top:0; bottom:0; width:5%; height: 100%; /*required for IE7 */} I thought that text between these /* text */ were helpful comments that don't show up on the actual page. But that's the only place where anything about repeating is mentioned. So before I go to the rest of your first example, and then on to the 2nd example, I need to understand about whether the image represented in your code with "../images/10pat.jpg" is supposed to be 1 unit of the pattern, or a whole string of units. Because if it's supposed to be a whole string of units, it seems to me I'm back to the same problem I had in the beginning -- not wanting to have to make many different lengths of borders, for different lengths of many articles. So my question is how to make the image in the inner_bg div id repeat itself. Also, I should say that I really appreciate you making a whole page of code for me. (2 whole pages) While some people, I suppose, might just take it and use it, I prefer to understand it before I use it, because that makes it so much MORE useful, since I could build on it, if I wanted. So that's why I'm asking detailed questions instead of just using it. Thanks again

Ok, thank you so much! I will try it. But I'm not clear what are "child elements". Also, I want to make sure about "....and fill the and add border image to this....". Likely it's just typing error, but I just want to make sure there's not a missing word (fill the ?). I haven't actually looked at CSS3 yet, since I've just started learning CSS. But I'll be interested to look up the multiple background images, even if I can't use it here. Default margin and padding on body element? Do you mean that there is a default margin and padding that is automatically applied to CSS webpages, or HTML webpages, even though my code contains no margin or padding in the body element? Thanks again

Really? No?? Surely there must be some way to make a page like attached, so that the text doesn't shift to cover the image )when the window is resized, and that still looks relatively, generally, the same on most computer screens? (forgetting about phone and tablet sceens for the moment)

I thought I replied to this yesterday??? Ok, well this is basically what I thought was posted: Yes, that's exactly why I'm using % for everything. The problem is (I now realize) the image background is a fixed width. Since the problem about page layout is solved, I should probably close this topic, and start a new one on the remaining issue when the page is made smaller and the content overlaps the background graphic. And thanks again to everyone who contributed to the solution

Hi Friends,I've recently started studying CSS, have completed all of Basic, Styling, and Box Model tutorials, and some of the Advanced ones. And I've successfully made a simple webpage. But I'm having some trouble with the background. At first, I wanted to put a graphic pattern around the whole page as a border (think of an empty picture frame with a design on it). But since that would require an image of a fixed size, I didn't think it would work, keeping in mind all the different screen sizes and resolutions. So I made a border just for the left side, so that the page could do whatever it needs on the right side. Then it could be seen relatively the same on all kinds of screens which my site visitors might have. (I'm only thinking of computer screens, at the moment, and I'll decide what to do about smart phones and tablets later.) But then, I found an approx 1.5 inch square image that I wanted to use for a tiled background, which would fill the entire background, and the border pattern would still be on the left. But as it turns out, it looks like you can't have 2 background images.....either that, or I haven't discovered how to do it. If it can be done, can someone please tell me how? I did try putting the left side border on the page, just as regular image in the body. But since I'll have a lot of pages, it really would not be feasible to make multiple images of all different lengths, for individual pages. Since the pattern border is a repeating design, I thought I had come up with a solution. I took just 1 unit of the pattern, and cropped the background image to the same height. Then I tiled out 1 row of the background, and put the single unit of the design on the left side. So now in the background declaration, I have the new image which goes the full width of the page, and tiles vertically. I was so excited to have figured out putting the 2 images together, I didn't realize that I was back to having the same fixed width problem. For the most part, I still think the page will look ok on most computer screens, and indeed, I may have to leave it at that. But if I make the window smaller, I have a problem where the content (mostly text) overlaps the border image. And as far as I can tell, it's the fixed width image that's causing that. I've attached a small screenshot showing it. So I'm hoping someone can tell me if there's any way to accomplish what I want. It seems to me there should be a way. (I did see the tutorial for Image Sprites, but I don't see how that could help with my problem....although I didn't understand it entirely.) Thank you very much PS -- One more question which is somewhat related. There seems to be a 5 to 10 px white border around my entire page (whether maximized or smaller) (I'd say 8 px). I've never seen such a border on any other webpages, so I'm wondering what I need to do to get rid of that. Thanks again Edit -- added "tiled" to title

Ok, I have everything % except for the minimum width. But I'm still getting some text overlapping the left border image. Maybe it's something about how I have it set up? Here's the current code, below (it's just a practice page). I left the real URL of the background image, so you can see what I mean about the left border (if you wanted to open in your browser). But here's a screenshot for convenience. Hhmmm...... I thought I had made the background image in such a way that it's not fixed, but maybe I'm wrong. Maybe it's fixed after all? Maybe that's the problem? Oooohh....I'll bet that's it! Ok, well I've had a long day coding, so I think I shut down for the night, and pick it up fresh tomorrow. But I'll bet I can make that background image.....maybe 200 to 300 px narrower, and that will be enough to solve the problem. I'll let you know how it goes tomorrow. Everyone who's made comments in this topic, thank you very, very much! <!DOCTYPE html><html><head><style>.icbg{background-image:url('http://forum.inkscapecommunity.com/tp-files/tp-articles/images/lbbg1.png');background-repeat:repeat-y;max-width:100%;min-width:800px;font-size:100%;}.iccont{font-family:Verdana,Geneva,sans-serif;font-size:100%;margin-left:12%;}.iccont p{text-align:left;}.iccont h1{text-align:center;font-size:140%;}.iccont h2{text-align:center;font-size:120%;font-weight:bold;}.iccont h3{text-align:left;font-size:120%;font-weight:normal;text-decoration:underline;}.iccont ol{list-style-type:decimal;}.iccont ul{list-style-type:disc;}a:link {color:#442178;}.beg{max-width:30%;background-color:#ffeeaa;float:left;margin:0.5%;padding:1%;}.int{max-width:30%;background-color:#aaeeff;float:left;margin:0.5%;padding:1%;}.adv{max-width:30%;background-color:#ffaaee;float:left;margin:0.5%;padding:1%;}p.unfl{clear:both;}</style></head><body><div class="icbg"><br><br><div class="iccont"><h1>Inkscape Tutorials</h1><br><br><div class="beg"><p>paragraph and some extra text to fill out the entire width of the div element some extra text to fill out the</p><p>paragraph</p><p>paragraph</p></div><div class="int"><p>paragraph and some more extra text some extra text to fill out the entire width of the div element</p><p>paragraph</p><p>paragraph</p></div><div class="adv"><p>paragraph and some more extra text because some extra text to fill out the entire width of the div element</p><p>paragraph</p><p>paragraph</p></div><p class="unfl">paragraph</p><h2>head2</h2><h3>head3</h3><ol><li>list item</li><li>list item</li><li>paragraph and some more extra text because some extra text to fill out the entire width of the div some extra element <img class="bot" src="http://inkscapecommunity.com/img/insert.png" />. paragraph and some more extra text because some extra text to fill out the entire width of some extra the div element.</li><li>list item</li><ul><li>nested list item</li><li>nested list item</li></ul><li>list item</li><li>list item</li></ol></div></div></body></html>

Oh, thank you so much -- what a wealth of info I've learned here! Just a couple more questions, for clarity. When I set the minimum width, should that be in percent, just like everything else? Or should it be in pixels? I've actually tried both percent and pixels, as well as a mix of both. Either way, it prevents my side by side div elements from getting stacked up, when I make the page smaller. But the one on the left, and left edge of the text, still slightly overlap the graphic border on the left. When you say use text size 100%, do you mean like in the tutorial, where you use 100% in the background element and em in the p and h elements? Or do you mean ALL percent? 100% text appears to make the 1em size of text. So for headings and stuff, I would have to use values over 100%, like 140%, for example. Is that what you meant?

Oh wow, I never even thought of smart phones and tablets! It's enough of a challenge for me, to just consider different computer screens. So you're saying that it can be written in the code, that the browser should look to see what size the screen is, and present the page accordingly? Interesting to see on the same page you linked, a poll asking for opinions on whose resposibility it should be, to see that a webpage looks good on mobile devices -- the page's designer or the mobile device. (I'm not quite sure how the device could do that, but this (mobile devices) is FAR outside my understanding. ) That would indicate to me, that perhaps the issue is debatable, even among the pros.....yes? Because this will not be a stand alone webpage, I think I can put aside the issue of mobile devices, at least for now. I have no idea how the site, for which this article is destined, handles mobile devices. And while occassionally I may have members using a mobile device, perhaps to check messages, I don't think it's likely they would be reading my article from a mobile device....at least not presently. But that's definitely something I'll want to consider in the near future! Ok, for now..... The page doesn't have to look exactly the same on all screens. I can live with little spacing issues here and there. But if an image gets shifted, or say 3 images which are supposed to be side by side, get stacked on top of each other when the window is made smaller -- that wouldn't be ok with me (.....unless every single other option has been eliminated, for whatever reason). Well, I used % as much as I thought was possible. I don't remember seeing anything about using % for padding and margins. But I'll try it. What about images, where you have to put the width and height in pixels, in the img tag? Are images the only exception to the "all percent" requirement? Or is there some way to code so that the image stays put? Ohh....maybe using float? How do you write the font size in percent? Oh wait, I already know something about that. In the Font Styling tutorial, it showed how to use percent and em together, so it will work in all browsers. Is that what you mean? Are you saying that using a min-width will prevent the layout from breaking down when the window is smaller? Thanks for your help

It's been my understanding that % should be used as much as possible, to allow the page to look ok across all different kinds of screen sizes and resolutions. So that's why I'm using %. When you suggested 990 px and 800 px, are those the best sizes for fixed widths, that will still look ok on all different kinds of screens? Unless I'm misunderstanding you, I don't think I would want to center the .icbg div, because the background graphic is a pattern type of border along the left side of the page. That's why there's a 15% left margin, so it won't cover up the graphic pattern border. The reason I decided to use a left side border, rather than something like a frame, or border around the whole page, is for the same reason I used % -- so it would still look ok on any kind of screen. If I use a graphic background that is a fixed width, it's the same problem. (I actually had a fixed width at 1 point, but it was a nightmare trying to get the background image exactly the right size so it didn't try to tile itself. And I assumed that it was only going to look right on my screen, or any screen just like mine. So I went to %.) Maybe I'm still missing something about this fixed width vs percent?

Hi again,Ok, I guess it's not as solved as I thought I've made a simple layout using 3 div elements, but I still have 1 problem with it. This seems like an easy question that you've probably heard a hundred times. When I resize the page, the div elements move and change dimensions. Also, both the div elements and other text on the page moves so that it overlaps the left graphic border. Is there any way to prevent that? Thank you very much Here's the code, in case you need it: <!DOCTYPE html><html><head><style>.icbg{background-image:url('url-of-img');background-repeat:repeat-y;font-size:100%;}.iccont{font-family:Verdana,Geneva,sans-serif;font-size:1.0em;margin-left:15%;}.iccont p{text-align:left;}.iccont h1{text-align:center;font-size:1.4em;}.iccont h2{text-align:center;font-size:1.2em;font-weight:bold;}.iccont h3{text-align:left;font-size:1.2em;font-weight:normal;text-decoration:underline;}.iccont ol{list-style-type:decimal;}.iccont ul{list-style-type:disc;}a:link {color:#442178;}.beg{max-width:30%;background-color:#ffeeaa;float:left;margin:3px;padding:10px;}.int{max-width:30%;background-color:#aaeeff;float:left;margin:3px;padding:10px;}.adv{max-width:30%;background-color:#ffaaee;float:left;margin:3px;padding:10px;}p.unfl{clear:both;}</style></head><body><div class="icbg"><br><br><div class="iccont"><h1>Inkscape Tutorials</h1><br><br><div class="beg"><p>paragraph and some extra text to fill out the entire width of the div element</p><p>paragraph</p><p>paragraph</p></div><div class="int"><p>paragraph and some more extra text because the background colors didn't work</p><p>paragraph</p><p>paragraph</p></div><div class="adv"><p>paragraph and some more extra text because the background colors didn't work</p><p>paragraph</p><p>paragraph</p></div><p class="unfl">paragraph</p><h2>head2</h2><h3>head3</h3><ol><li>list item</li><li>list item</li><li>list item</li><li>list item</li><ul><li>nested list item</li><li>nested list item</li></ul><li>list item</li><li>list item</li></ol></div></div></body></html>

Ah-HA!! Yes, I've gotten it working, more or less. Still a few tweaks needed, but I've got 3 side by side "boxes" which are div elements! We can close this topic now or call it solved or whatever. And thank you very much!

Well, I've come up with a couple of ideas. 1 would be to set absolute positions. But I just found the float tutorial, and that seems to be a good solution, at the moment. I'll let you know how it goes But I'd still be interested to learn how webpage layouts should be approached, with CSS Thanks again! EditOh sorry, Goodthing07. I don't know how I missed your message. Thank you very much. I will have a look at that right away! Edit #2Oh yes, that exactly what I mean. I used to do that with tables. Hhmmm....I guess it looks like it can be done with div elements too, along with float. So that's what I'm working on. I'll let you know how it goes

Hi Friends,Several years ago, I learned the most basic version of HTML, where you could create a webpage layout using tables to define various sections on the page. Having recently learned that some of the tags I learned are no longer supported (in HTML5), I've set about to learn CSS. (I'll never need to code a really complex page -- just a few fairly simple pages now and then.) I've completed the Basic, Styling and Box Model tutorials here, and a few of the Advanced ones. And I've successfully made a simple page with background image and mostly text. What I haven't discovered yet, is how to define various sections of a webpage. It looks like, with CSS, tables are really only used for traditional tables. (I have that impression, because webpage layout isn't mentioned at all, in the Tables tutorial.) It looks like you could use boxes to lay out a webpage, but unless I somehow missed it, I don't see any examples throughout all the CSS tutorials. So my questions: How do you create a webpage layout using CSS? Do you use tables, like with the basic kind of html? Or boxes maybe? I found the display:inline declaration, and tried to use a span class to set 2 boxes side by side, but it didn't work. (div neither) Here's a copy of part of another page I made, which I'm just using for practice now. The boxes are on top of each other. Assuming boxes are a reasonable way of making a webpage layout, I would want 3 boxes side by side, with a little space in between. (Actually, what I want the 3 boxes for, is to contain 3 columns of text links, maybe without any borders or background. So if there's a better way than what I'm thinking, I'd be interested to hear about it.) Thanks for your help Edit -- I removed the code in this msg because it wasn't even close to what I needed. Now I've made something closer to what I need, but I have some more questions. Please see msg #5.

Oh, yes that works very well! That makes the code easier to read and to write. I don't remember seeing that in the tutorials that I worked on. Oh I see, it's the first lesson in the Advanced section. Nice! And also, the way I had it written, the margins were all doubled. So I had to use very small values for the margins. But this way, I can just use the original values. Thank you very much newseed! I learned a few new things here

Actually I fixed it pretty easily. I just got rid of the <ul> class style, and <ul> class . The page seems to be working ok with SMF/Tiny Portal. So thank you very much, newseed, for explaining how the values got doubled I still am curious about the different ways of writing the class: "p.class" vs ".class p" though. So if you (or someone) has a chance, I'd be interested to know about it. Thanks again

Oh, well there's a reason that I'm using so many classes and ids. The ultimate goal for this code is a website which is built with CSS. If I don't define a class for everything, I run the risk of my code messing with the rest of the site. See another recent topic of mine: http://w3schools.invisionzone.com/index.php?showtopic=47723 which contains a screenshot of what happens if I don't use the classes. As a follow up to that topic, when I contacted support for SMF and Tiny Portal, that's what they told me -- to use classes so that my code doesn't interefere with the code for the site itself. I actually had some code written in that topic, that works perfectly, alone in the browser. But when loaded into that forum's articles feature, compromised the code of the site itself. But, I think I understand what you mean about the doubling of....well, it affects the font size and the margin, apparently. What I'm not sure about is how to resolve it. But with the concept of doubling in mind, I'll see what I can come up with. Let me ask this -- I have classes written "p.class" (because that's how the tutorials show it), while you wrote it ".class p". Do both of those formats have the same result? Or what is the differences of these 2 ways to write the style classes?

Hi Friends,Lol, I've started 3 different messages tonight, and each time, I've discovered and solved the problem while writing out all the details to explain the problem. But my luck on that seems to have run out this time. I'm very new to CSS, and have completed the Basic, Styling and Box Model tutorials here. I've made a webpage which is a tutorial, which has a lot of numbered lists. Within some of the numbered lists are nested bulleted lists. For some reason, the font size for those nested lists is different, and I can't figure out why. Would someone please have a look at my code and tell me what I've done wrong? I had it working at one point, but I just can't see the problem. I've removed all the relevant text, and just left some sort of place fillers for text. But you can see that bullet list's text is larger than the rest of the page. Also, the bullet items seem to be indented too far (although that's not a major issue). I'll put my code below. I wanted to attach a screenshot, but it's too big for some reason. So hopefully if someone would be so kind, they could load the code into their own browser, if they need to see the problem. Thanks for your help <!DOCTYPE html><html><head><style>.icbg{background-image:url('image.png');background-repeat:repeat-y;font-size:100%;}.iccont{font-family:Verdana,Geneva,sans-serif;font-size:1.1em;margin-left:7%;margin-right:2%;}p.iccont{text-align:left;}h1.iccont{text-align:center;font-size:1.4em;}h2.iccont{text-align:center;font-size:1.2em;font-weight:bold;}h3.iccont{text-align:left;font-size:1.2em;font-weight:normal;text-decoration:underline;}ol.iccont{list-style-type:decimal;}ul.iccont{list-style-type:disc;}a:link {color:#442178;}#icftn{vertical-align:super;}</style></head><body><div class="icbg"><br><br><div class="iccont"><h1 class="iccont">head1</h1><p class="iccont">paragraph</p><p class="iccont">paragraph</p><p class="iccont">paragraph</p><p class="iccont">paragraph</p><p class="iccont">paragraph</p><h2 class="iccont">head2</h2><h3 class="iccont">head3</h3><ol class="iccont"><li>list item</li><li>list item</li><li>list item</li><li>list item</li><ul class="iccont"><li>nested list item</li><li>nested list item</li></ul><li>list item</li><li>list item</li></ol><h3 class="iccont">head3</h3><ol class="iccont"><li>list item</li><li>list item</li><li>list item</li><li>list item</li><li>list item</li><li>list item</li></ol><br><h2 class="iccont">head2</h2><p class="iccont">paragraph</p><h3 class="iccont">head3</h3><ol class="iccont"><li>list item</li><li>list item</li><li>list item</li><li>list item</li><li>list item</li><li>list item</li></ol><h3 class="iccont">head3</h3><ol class="iccont"><li>list item<span id="icftn"> footnote1</span></li><li>list item</li><li>list item</li><ul class="iccont"><li>bullet list item</li></ul><li>list item</li><li>list item</li><li>list item</li><ul class="iccont"><li>bullet list item</li></ul><li>list item</li><li>list item</li></ol><p class="iccont"><span id="icftn">1</span>paragraph</p><p class="iccont">paragraph</p><p class="iccont">paragraph</p><p class="iccont">paragraph</p><p class="iccont">paragraph</p><p class="iccont">paragraph</p><br><br></div></div></body></html> Thanks again Edit -- PS - 1 more question. Why is there an approx 3 to 5 px wide white border around my page, when opened in browser?