brynn
-
Posts
84 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Everything posted by brynn
-
Hi Friends, I'm still pretty much a newbie with CSS. I'm wondering if it's possible to create a sort of drop shadow effect, using CSS. I've written some code, so that I have a div tag with black background, directly underneath another div with a white background (white div 99% width inside the black div tag). But I can't figure out how to make the black div area to show just below and to the right from behind the white one, and not show at the top or left side. The other part of the problem is that the page is mostly fluid, so that I don't have to worry about fixed sizes looking different on different screen sizes/resolutions. Almost everything is in %, except for a couple of places (border width for example). I'm thinking that to achieve the offset drop shadow effect, I can't do it with a white div inside of a black div. And I can completely see how to do it, by using absolute positioning. But how to do it without the nested divs, and with perhaps relative positioning, I can't quite work it out. Here's an example of the code I have. Although again, I'm thinking this would not be the best approach. (The reason for the floats and 30% width, is because there will be 3 of these across the page.) (And another bank of 3 below them.) <style>.boxfront{background-color:#ffffff;max-width:99%;float:left;margin:0.5%;padding:0.5%;}.boxback{background-color:#000000;max-width:30%;float:left;}</style><body><div class="boxback"><div class="box"><h4>TITLE</h4><p>content </p><p>content </p><p>content </p><p>content </p></div></div></body> Does anyone have an idea how this might be done? Thank you very much
-
Ok, well thanks anyway. I appreciate your help
-
No, I don't mean a code editor that I use to write the code! (I use Notepad++, btw) This is a portal style forum which provides a means for members to write articles or whole webpages. It is an html wysiwyg editor (not bbc), similar to the message editor into which I'm presently typing this message. However, there's a button where I can switch to, idk, code mode, or something like that, where I can insert html code, or just type it out, if I wanted to, rather than using the wysiwyg buttons. So when I switch to code mode, and paste in the code, then save the page, I see that it's not working as I expected, because on the new page, I see the checkboxes, and the list won't expand/collapse (as I said). So I open it back up to edit, and I see that it has removed the <style> through </style>. So that's why I thought if I used the inline style, it might work. Also, because if I use the wysiwyg, and for example, write a heading with a certain size, font and color of text -- then if I look at the code, it uses the inline style (style attribute). (For example: <p style="text-align: center;"><strong><span style="font-family: verdana,geneva; font-size: medium;">title</span></strong></p>) That's why I thought if my collapsing list code could be written inline, it might work. So, I guess it sounds like it can't be done, in this case?
-
I mean the inline style like described here: http://www.w3schools.com/css/css_howto.asp It's because the html wysiwyg where I'm trying to insert the code, removes everything between (and including) <style> and </style> (when I save it). So if I insert that code into the editor, and save it, I get the checkboxes (display none or display block isn't recognized), and the 1st level li items won't collapse or expand. So I thought it might work if I wrote the style into the ul, ol, or li tags. As still very much a newbie with CSS, I had the impression that any CSS code can be written with an external style sheet, internal style sheet, or inline style. But apparently that's not so?
-
Hi Friends, In another (long) topic I was using the following code (which works beautifully, and just how I want). But now have a need for it to be written in the Inline Style. The problem is that it's just a bit too advanced for me to understand completely, and not quite well enough to convert it over from Internal Style to Inline Style. Could someone tell me if it's even possible for this to be written Inline? And if so, how? <!DOCTYPE html><html><head><title>test expand list without scripts</title></head><style>.collapsibleList li > input + *{display: none;}.collapsibleList li > input:checked + *{display: block;}.collapsibleList li > input{display: none;}.collapsibleList label{cursor: pointer;}</style><body><ul class="collapsibleList"> <li> <label for="mylist-node1">Click to open list 1</label> <input type="checkbox" id="mylist-node1" /> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </li> <li> <label for="mylist-node2">Click to open list 2</label> <input type="checkbox" id="mylist-node2" /> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </li></ul></body></html> Thank you very, very much! PS -- I tried to credit the author of this code in the other topic, but for some reason, this message editor would not allow me to post a text link. So I'll try again here http://bernholdtech.blogspot.de/2013/04/very-simple-pure-css-collapsible-list.html
-
Oh, ok. Yes, that does sound over my head. But I'll be interested to read more about it. But it's so late now. I'll do that tomorrow. Thank you very much
-
Where could I look to find a program like that? Do you know of any instructions or tutorials?
-
Hi Friends, I'm pretty much a newbie with CSS. I don't think I'll be able to handle putting something like a tag cloud on a webpage. But I want to learn more about it. Yes, I've searched the internet. I've found a few places which will automatically generate the html for the tag cloud, but I don't think they are exactly what I need. So I'm hoping if I can describe what I need, someone can point me to resources to learn what would be needed to make one. I'm still in the process of building the page. But when it's done, it will have several long lists of links. Each link leads to a tutorial for Inkscape (a vector graphics editor). Each tutorial creates a different SVG image, for example, a flag, a business card, a shiny web button, all sorts of icons, cartoons, etc, etc. So I'd like to come up with tags which describe what each tutorial creates, and also, not just the end product of the tutorial, but also tags which describe the tools or techniques which are involved in following each tutorial. According to Wikipedia, this is a categoration style of tag cloud. Can you all tell me where I can find instructions for making this kind of tag cloud? It doesn't need to have really fancy styling. Just different size words to indicate how many tutorials cover each tag word, and also, the word should be a text link to open up that list of tutorials. Thank you very much
-
Thanks for explaining that Dreadful_Code. I ended up not using that particular code, but the 'greater than' symbol also is used in the code I'm using now. So it's helpful to know how it works. dsonesuk, I'm not sure if I understand your last message. I'm not using this expandable list for basic site navigation.....although it is for navigation, in the end, I suppose, since the list items are links (they are 99% outside links). Once I open my site, I'll put a link to this page, so you can finally see what I've been working on. I was really shocked at how many different styles and variations of menus are available, after seeing the site that Diedre's Dad linked me to. I guess it would be possible to apply all kinds of fancy styles to my simple lists. It could probably be made to look like the flyout menus that I was looking at earlier (except they wouldn't fly out). But since I'm doing this mostly on my own, I really need to keep it simple. And since they really are lists, the bullets aren't out of place. Actually the contents of this page will change over time. I expect I'll be editing at least twice a year. So maybe once I'm more comfortable with html, I'll go for a more polilshed look. Anyway, I tried using the universal selector for margin and padding, but it messed up the whole page. I'll have to go in and put custom margin and padding for a LOT of things. But even without the universal margin and padding, the page looks ok in both Firefox and IE. Until I decide whether to get extra browsers, and which ones, I'll have to rely on friends to check it out in other browsers. I really don't expect to be doing much of this, in the future -- just the occassional webpage, now and then. Anyway, thanks to everyone who has helped me with this. I should be good to go, from now. Although, you never know. I might have to dig up this topic after a while. But hopefully it's finally ready to be closed. Thanks again PS -- I'm going to tweak this topic title slightly, since the subject changed from flyout menu to expandable list.
-
Ok. Ok, so I set the universal selector for margin and padding to 0, and then add margin and padding wherever I might need it. So.....since I had already been assuming they were already starting with 0, pretty much all I have to do for margin and padding is set it universally to 0, and all the margin and padding that I've already set, will do what I already expected them to do. Correct? But I'm a bit confused by text-indent. Oh wait, no, I just found it. If I'm not using text-indent anywhere, do I still need to set it to 0 too? Oh ok, you already answered that. Well, when you say "ul and li have a default margin, padding and in some browsers text-dent,..." you're saying that some browsers use text-indent instead of padding and/or margin? Do you know which browsers? Could this be skip-able? Although, I suppose it's not so hard to do..... Ok, so done with that, unless I said something wrong. The part that really worries me is the list-style-type setting to none. Is it a similar kind of thing, where some browsers have certain styles set by default? So that setting to none, is really the same as setting the margin and padding to 0? Where I've already been assuming there were no defaults, and I was setting it originally myself? Oh whew! If I understand all that correctly, all you're saying is to set everything to 0 or none at the beginning. And I don't have to re-do anything I've already done? I just need to add those 4 things? Can I use the universal selector for all 4 things? Thanks again Edit -- And also, do I put it in the body selector?
-
dsonesuk, sorry for the delay in responding. I don't understand which comment or question of mine that your last comments are answering. And part of that is my own fault for asking so many questions. So I apologize for that. When do I need to make margin, padding, text-indent 0, and list-style-type: none? Since the next thing you said was about the universal selector, you must mean "always"? And why would I need to set new margins for p and h1 to h6? Do they also come with some sort of unwritten default margin, which the universal selector for margin/padding eliminates? And if I've guessed and concluded and inferred correctly on all that, why in the world do we have to eliminate all the margins and paddings and everything else, just to set them all again, somewhere else? Why doesn't setting a margin on a particular selector automatically overwrite any previously unwritten margin? I'm especially concerned about setting the list-style-type to none, because the list-styles are important to this page. Then there's something else I wanted to report, in case someone else might search this out, in the future. Going back up to my reply #24, where I had used <ul id="first"> and < ul id="second"> -- later on, I decided that since I was using them so often, maybe I should make them a class. And I did that successfully, for the most part. But somewhere down the road, I noticed that I had lost the circle bullets, for the 2nd level list items, which this hidden-checkbox-form-code technique, apparently naturally creates. And I really needed those circle bullets, for the same reason I had created the custom bullet images (list-style-image:url('url'); ) i.e. just to help identify certain categories of items, within the list. (Basically, it lets me avoid a 3rd level of nested list.) So after a very long troubleshooting session, I discovered that using class with the ul tag, instead of id, causes the traditional filled in kind of bullet, instead of the circle bullet. I don't understand why that happens. Maybe it's something unique to the form code, or the label or input tags, or style. Or maybe one of you wiser, and much more experienced web designers know why that happens? I guess it's not terribly important, now that I solved the problem. But as I said, I wanted to mention it, in case someone else searches out this topic, so they'll know what to do, if they have the same problem. Thanks again for your ever-faithful support
-
Well, the only other browser I have, is IE8, which I almost never use. But I will see about getting some others. Thanks again for all your help
-
Well, technically I was using it to override indentation, rather than create it. But I did like you suggested for the ul ID, instead of relative position, and it worked quite well. Thank you very much for that However, there was another place where I used relative positioning to override indentation, and it won't work in that case. Here's the situation: At the bottom of my list are a couple of footnotes. At first, they were outside of the 2nd level uls, but still inside the 1st level uls, using span tags. But since I need them to collapse with the items in the list, I had to put them inside the 2nd level ul. That caused it to look like the footnote (starting with an asterisk, because I wanted avoid having to code the superscript number) was another list item in the 2nd level. But I wanted it to look more like a list item in the 1st level. So I used the relative position to move it over. But if I use margin and padding, it still keeps the footnote looking like the last item in the 2nd level list. If you understood that explanation, do you think it will be ok to use relative positioning? Or is there another way to do that as well? Edit Ooohhh....maybe, I could write another ul, and put the span tag with the footnote in there, instead of li. Then 0 margin and padding should work.... I'll try .... Edit #2 Oh, but that will create a ID inside a tag which uses the same ID. Because if I add another ul tag (which will be span id0), I'll have to enclose that ul tag, together with the original ul, inside another single ul tag with id0. I wonder if that might cause the world to explode...??? Heck, after the day I've had, what do I have to lose, lol!!
-
Oh ok. I was just about to report that the relative position worked. Rats! Ok, I have a couple of questions. I have margin and padding set to 0 using the body selector. I guess that only applies to the whole body, and not to other specific selectors? Does setting the margin and padding to 0 override the normal indentation that ul creates? I'll try it here in a second. But I have 1 more question first. You said How can I do that? Did you mean using margin and padding?
-
Oh hey, I might have fixed it! First I found a couple of tags that were out of order. That didn't fix it at first. But then I tried enclosing it all in a single ul tag again. And that DOES work! The only problem, is that it indents everything by 1 more step. But I think I can override that with relative positioning. I'll try it, and let you know
-
Hey guys, I ran into a little problem with this, which I'm hoping you can suggest something that would work. Because I've made some custom bullets, in order to identify certain list items, I made some special IDs with 'list-style-image:url...' Here's an example of code: #first{list-style-image:url('url1');}#second{list-style-image:url('url2');}<ul class="collapsibleList"> <li> <label for="mylist-node1">Click to open list 1</label> <input type="checkbox" id="mylist-node1" /> <ul id="first"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <ul id="second"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </li> <li> <label for="mylist-node2">Click to open list 2</label> <input type="checkbox" id="mylist-node2" /> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </li></ul> The problem is that only the items in 'ul id="first"' collapse. And I have 4 of those IDs. I tried enclosing all 4 of the 'ul id="name"' in a single ul tag, but still, only the items in the first id will collapse. I guess I could come up with some other way to identify those 4 groups of list items.... Like maybe I could make some little icons and put the image in front of the text, inside each li tag. I don't know of any reason why you couldn't put an image in a list item. But I keep thinking there must be some way to make the html part of the code work, so that all the ul ids collapse. Do you all have any ideas? Thanks again Edit -- formatted the code for easier understanding
-
You're right, that fixes it! Honestly, I could not be happier. Thank you ALL so much
-
OMG, it absolutely works!! In case the site or webpage where I found this should not be available (at some future time, when someone else might be looking for something like this) I'll post the code. This code came from this page: CSS: .collapsibleList li > input + *{display: none;}.collapsibleList li > input:checked + *{display: block;}.collapsibleList li > input{display: none;}.collapsibleList label{cursor: pointer;} HTML: <ul class="collapsibleList"> <li> <label for="mylist-node1">Click to open list 1</label> <input type="checkbox" id="mylist-node1" /> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </li> <li> <label for="mylist-node2">Click to open list 2</label> <input type="checkbox" id="mylist-node2" /> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </li></ul> And I can confirm that it's working on Firefox 21.0. Ooohh, bad news. It does not seem to work in IE9, at least not on my version, which may or may not be up to date. The page referenced above says that it is known not to work in IE8 and older, and can only be done with javascript. There's a comment at the bottom of the page: "This code is kind of a hack, but it provides the highest compatibility. It works for all modern browsers and Internet Explorer 6, 7 and 8." But I don't know if it's referring to the code above, or to the code using js. This article is fairly recent, so I'm just not sure what to make of those last comments. Interesting though, in my same IE9, the samples on that article page do appear to work in IE9. Maybe I didn't use all the proper code for IE9 to work, in my sample page. Yeah, that's probably it. If I used this: <html><head><title>test expand list without scripts</title></head><style>.collapsibleList li > input + *{display: none;}.collapsibleList li > input:checked + *{display: block;}.collapsibleList li > input{display: none;}.collapsibleList label{cursor: pointer;}</style><body><ul class="collapsibleList"> <li> <label for="mylist-node1">Click to open list 1</label> <input type="checkbox" id="mylist-node1" /> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </li> <li> <label for="mylist-node2">Click to open list 2</label> <input type="checkbox" id="mylist-node2" /> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </li></ul></body></html> That doesn't contain all the proper header info does it? Am I right in guessing that to be the reason it's not working in IE9? Edit -- Is pasteing of URLs not allowed? Maybe if I type the URL.... Ok yeah, typing it seems to work. Kind of a pain though. Edit #2 -- I'm trying to post the links to the page where I found this, and the credit that is given there to the original idea. But the URLs don't show up. At first I pasted them, and they did not appear in Preview Post. Then I found I could type them out, and they would show in Preview. But when I posted the message, they are not showing. So I tried. Actually, I really feel like I should provide the credit. But I'm really stymied here
-
Well, 1 vote of confidence is all I need to try it. I wouldn't be surprised if I run into some situation where using the form code could cause a problem. But I'm willing to give it a go. Thank you SO much -- I really appreciate your patience and your help I'll let you know what happens!
-
Ah-HA! I think I found something. Does anyone see any reason why this wouldn't work? http://bernholdtech.blogspot.de/2013/04/very-simple-pure-css-collapsible-list.html Thanks again for your help
-
Ok, well I've found 2 from that Stu Nicholls site, that might work. But I'm afraid they will be too advanced for me, at my current skill level. But just to give you some idea here are the ones that might work: http://www.cssplay.co.uk/menus/cssplay-click-slide.html and http://www.cssplay.co.uk/menus/dl-clickslide.html The problems with those: my 2nd level might have 20 or 30 items...I guess that could work. But I don't need the fancy boxes, or tiny click icon. Just the text would do. But the biggest problem for me would be wading through all the extra style code, and just finding the basic codes that make it work. When I was working on the fly-out, I had chosen the most basic version I could find. But I was having to eliminate 3/4 of the style code, that I didn't want. And that was making it hard for me to see the required code that makes it actually work. FYI - The reason the flyout wouldn't work, is that I have 3 columns of 2 level lists (which are currently what I've been calling nested lists). I think the reason I couldn't get the fly out part to work, is because each column is a div element with 30% width. There's no room for anything to fly out, unless it overlaps the next column (or the right edge of the page, in the case of the 3rd column/div). So if anyone who has been willing to read through this whole thread knows of a better alternative for me, I would really appreaciate the tip. Maybe I need to look more at different ways to manage long lists, than menus, per se. Thanks again
-
OoooooKay! Well after all this work (I did get the text to change color, and the cursor to change on mouseover/hover, and very close to Plan Z) now I realize that fly-out isn't exactly what I need. More like what I need, would be when I mouseover the main li item, all of the 2nd level ul (with it's li's) drop down below it. Sort of like when sometimes I've seen a tiny + and when you click it, everything expands down below it. Or sometimes I;ve seen a tiny, right-pointing arrow, and when you click it, it points down, and a whole list of items expands down below it. Except I don't really want the tiny symbol (....although I guess I could do that, if it has to be necessary, for some reason). I just want to mouseover, and the menu/list drops down, and pushes everything else down, temporarily. I'll go ahead and search around on the site that Dierdre's Dad posted, and maybe I'll figure out what that kind of menu/list is called. But if someone could tell me what it's called....and especially if it can't be done with CSS, I'd appreciate it. Hhmmm....I wonder if it's pretty much the same thing, except with different width and positions??? Thanks for your patience while I learn
-
Update: Hey, that worked! Happy dance Next - get the <li>s to fly out.... I'll let you know what happens
-
Update: Still struggling. But maybe if someone could explain this. .menu :hover > a {color:#fff; background:#949e7c;} Is that a correct selector (.menu :hover > a)? It must be, since their page does work. And I am still very new to CSS. But I surely don't recall a ">" in the CSS tutorials. I know ">" more as part of the tag, than part of the style. It is said to change the style of the text when the mouse hovers over it. But I haven't gotten that to happen yet. And you know, the biggest problem is adapting it to a pre-existing page (which is coded to my own, newbie needs). But if someone could just confirm that it is a proper selector, I'll move on to my next....plan B (probably up to plan G by now, lol). (No worries, I don't even think about giving up until I've gotten to Plan Z ) Thanks again Edit -- Ooohh, I'll bet I know what's wrong! The text which I want to change color on mouseover is not a link. So would I just say something like this?? .menu:hover {color:#color; background:#color}
-
Oooohh, I see! There's a tiny character similar to >> at the end of "item 3". Ok, so I can just ignore the IE references, unless I see something for IE 8, 9, or 10. Awesome. Ok, I'll move on and see what I can do. I'll let you know if I either have more questions, or manage to actually make it work, lol! Thanks again