brynn

Hi Friends,I'm very new to CSS. I finally managed to make some code for an article for a website, which has an image background, and another image which serves as a left side border. (I had to settle on left side border, because it was going to be too much of a problem making a border all the way around the page, that would work on any kind of screen size/resolution.) The way the left side border is drawn, it appears to be raised from the surface of the page (see screenshot attachment). But it seems like it's sort of "too much"....like it overpowers the text. Of course, I could draw it so that it doesn't appear to be raised as much. But I still keep thinking I want a border around the whole page. So I want to try using the CSS border property/declaration, because that should stay with the page, no matter what kind of screen size or resolution.....right? If that's not right, then please let me know, because I won't need to know the answer to this question. Assuming I understand that correctly, I think I would want to try either the ridge or the inset border. The problem with that, is that for all of these default borders, the light appears to come from the top left. On my raised left side border, the light is coming from the top right. So I know for a fact that it will look strange having the border around the page with light from the left, while the left side border, the light is from the right. So my question: Is there a way to write the code so that the light appears to be coming from the top right? So in other words, using the ridge border as an example, the lighter colored lines are on the top and left sides, while the dark lines are on the bottom and right. What I need, is for the light color to be on the top and right, with dark colors on bottom and left. Can that be done? Actually, if there were some way to flip the border horizontally, it would work perfectly. But I don't think the border property//declaration is the same thing as an image which could be flipped. (Note that I do understand that each border can be decared separately, but it's not the same thing as the raised or ridged borders. If you look very closely, each border consists of a dark color and a light color, in the proportions needed to give the impression of being raised.) (Well....not unless you can actually create a border inside a border, with no open space in between...??) Thanks for your help PS - I don't want to change the left side border lighting to the left, because I don't like how it looks. So this whole thing can only work if I can change the border lighting

Oh, well no, I'm not trying to change or edit the SMF or Tiny Portal software. Tiny Portal offers a way for any forum member who happens to have permission, to write articles which other members can read or print or whatever. When you start to write a new article, there's a field where you can plug in your code for the article. But as I've mentioned, I think my code is somehow getting combined with the forum/portal code itself. I don't remember seeing anything about child selectors. I have read the CSS Basic, Styling and Box Model tutorials, but I don't think those tutorials mention child selectors. # is the ID selector, right? I thought the ID selector was for changing a single element. Since I don't want to change a single element, I didn't think # would be very helpful. I'll try asking in the TP forum. Thanks anyway.

Please delete this topic. I'm not sure how I managed to post it twice. But this one lacks the attachment, while the other one is complete. Thanks.

Hi Friends,I'm very new to CSS, and fairly new to coding webpages as well. But I do know the very most basic kind of HTML. However, some of the tags I would have been using are not supported in HTML5. So I'm trying to learn CSS. The problem I'm having, is that I'm trying to use CSS code to write an article, in the Simple Machines Forum's, Tiny Portal mod's articles feature. The code I've written, both in the Internal Style format, and Inline Style format, work in the browser by itself. But when I insert it into a Tiny Portal article, it ends up picking up parts of the portal itself, and putting it into the article as well. I'll put my code below, and then I'll attach a screenshot of the result. The site where I want to put the articles isn't open yet, so you wouldn't be able to see the articles via direct link. What I think is happening, is that the code I've written is somehow affecting the code that creates the site itself. I was thinking that I could maybe use the class selector, to make the article sort of separate from the rest of the site. But I'm not sure exactly where to start using class. My 1st thought was using with the <body> tag, like <body class=whatever>. But something tells me that's not quite the best solution. And I realize that whoever reads or answers this may have not idea how the SMF Tiny Portal articles feature works. I'm just hoping the screenshot will show you what's going wrong. Internal style: <!DOCTYPE html><html><head><style>body{background-color:#ffffff;background-image:url('http://forum.inkscapecommunity.com/tp-images/img/a-art2.png'); background-repeat:no-repeat;background-position:center top;font-size:100%;font-family:Verdana,Geneva,sans-serif;margin-right:20%;margin-left:20%;}h1{text-align:center;font-size:1.5em}p{font-size:1.2em}</style></head><body><br><br><br><h1>How To Make A Screenshot</h1><p>text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article</p><p>More text.</p></body></html> Inline style: <!DOCTYPE html><html><head><title>How To Make a Screenshot</title><head><body style="background-color:#ffffff;background-image:url('http://forum.inkscapecommunity.com/tp-images/img/a-art2.png');background-repeat:no-repeat;background-position:center top;font-size:100%;font-family:Verdana,Geneva,sans-serif;margin-right:20%;margin-left:20%;"><br><br><h1 style="font-size:1.5em;text-align:center;">How To Make a Screenshot</h1><p style="font-size:1.2em;text-align:left;">text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article</p><p style="font-size:1.2em;">More text.</p></body></html> EditPS - I thought I would add another screenshot (csstp2.png) of what a normal article might look like, although this would be a very simplified one. But you can see how my code sort of co-opts other parts of the page (in cssTP.PNG) Thanks again. (and let's see if I can save this msg without making a duplicate post ) Edit #2I think the key is going to be not using the body tags, which is why I was thinking about <body class=whatever>. I just like the idea of declaring all the margin, font, background image, all at once. While waitig for a reply, I'm going to try the Inline style, but without any <body> tags, and see how that works. Also, if you just don't have enough info about SMF's Tiny Portal, to be able to help, I can also try posting in their forum. But I would be curious about using class selector on the body element anyway, even if that's all you can answer for me

Hi Friends,I'm very new to CSS, and fairly new to coding webpages as well. But I do know the very most basic kind of HTML. However, some of the tags I would have been using are not supported in HTML5. So I'm trying to learn CSS. The problem I'm having, is that I'm trying to use CSS code to write an article, in the Simple Machines Forum's, Tiny Portal mod's articles feature. The code I've written, both in the Internal Style format, and Inline Style format, work in the browser by itself. But when I insert it into a Tiny Portal article, it ends up picking up parts of the portal itself, and putting it into the article as well. I'll put my code below, and then I'll attach a screenshot of the result. The site where I want to put the articles isn't open yet, so you wouldn't be able to see the articles via direct link. What I think is happening, is that the code I've written is somehow affecting the code that creates the site itself. I was thinking that I could maybe use the class selector, to make the article sort of separate from the rest of the site. But I'm not sure exactly where to start using class. My 1st thought was using with the <body> tag, like <body class=whatever>. But something tells me that's not quite the best solution. And I realize that whoever reads or answers this may have not idea how the SMF Tiny Portal articles feature works. I'm just hoping the screenshot will show you what's going wrong. Internal style: <!DOCTYPE html><html><head><style>body{background-color:#ffffff;background-image:url('http://forum.inkscapecommunity.com/tp-images/img/a-art2.png'); background-repeat:no-repeat;background-position:center top;font-size:100%;font-family:Verdana,Geneva,sans-serif;margin-right:20%;margin-left:20%;}h1{text-align:center;font-size:1.5em}p{font-size:1.2em}</style></head><body><br><br><br><h1>How To Make A Screenshot</h1><p>text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article</p><p>More text.</p></body></html> Inline style: <!DOCTYPE html><html><head><title>How To Make a Screenshot</title><head><body style="background-color:#ffffff;background-image:url('http://forum.inkscapecommunity.com/tp-images/img/a-art2.png');background-repeat:no-repeat;background-position:center top;font-size:100%;font-family:Verdana,Geneva,sans-serif;margin-right:20%;margin-left:20%;"><br><br><h1 style="font-size:1.5em;text-align:center;">How To Make a Screenshot</h1><p style="font-size:1.2em;text-align:left;">text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article</p><p style="font-size:1.2em;">More text.</p></body></html> EditPS - I understand if you can't answer this. I can try posting in the Tiny Portal forum, if you all can't help Thanks

Ok, I will keep that in mind. I guess span must be in the advanced part of the tutorial. Span and div are 2 tags I've seen used a lot in html, but haven't actually learned what they are or how to use them. Maybe I'll have a look at some of the advanced lessons. Thank you very much for your help (I haven't learned whether you like topics marked as solved, in this forum. So I'll look around and try to figure it out. But in case I don't find it, this can be marked solved )

Ok, the code seems to be working now. I'm not sure if I understand completely. But I still lack very much experience at this. Eventually I'll get it. Thank you, Deirdre's Dad Can I ask another newb question while I'm here? It's still about fonts. Do you have to use font-weight:bold declaration, to make the font bold? Can't you just use <b></b> tags?

Thanks Deirdre's Dad. :)You mean you can put text declaration and font family declaration together? Can there be only 1 set of brackets for each selector? I must have missed that somewhere along the way. "Error console".....hmmm, I'll look for that. "...when the page loads..."....Ok, where's the error console? "...the browser actually tells you...." ...Ooohh, is it, in Firefox, Tools > Web Developer > Error Console? Hah, yeah I never would have looked at something labelled "web developer"! I just want to make a few simple pages. I'll try putting them together and let you know how it goes. Thanks again EditI wonder why removing the background image causes the font to display correctly? Or why the font is the proper size if I don't use margins?

Hi Friends,I apologize for the vague topic title. It's just that I'm so new at this, I'm not sure where the problem lies. I've completed CSS Basic, CSS Styling and CSS Box Model in the CSS Tutorial. I have a simple page written, but can't get the text to display as I expect it should. (Since I'm so new at this, it's possible I have some unreasonable expectation.) I'll put my code below. I'm trying to make an Internal Style Sheet. So far, it's just a very simple page. It has a background image, which you can think of as an empty picture frame, and I'd like the text to be inside of the frame -- so that the page will appear to have a border around it. I can't get the font family that I want to work, at all, except if I don't use the image background. If I use margins to make the text fit inside the border, it no longer responds to the text size that I want. The reason I have text size in percent in the body selector, and in em in the h1 and p selectors, is because of the recommendation on Styling Fonts > Use Combination of % and em, which is said to allow text resizing in all browsers, when people open the page in their browsers. Note that the fonts in the code will not be the final ones. I just need them different, to easily see if the code is working properly (which it's not). Also, I'm trying to write all the properties in 1 declaration. I know I'm not writing the code the same way that's suggested in the Tutorial. It just seems weird to have 1 curly bracket, alone on a line. But at least for now, it's an arrangement that seems to be easy for me to understand. And being such a newb, perhaps I don't have the proper text editor. Notepad++ seems to do what I need. But if it's inappropriate, please let me know I don't have the resulting page uploaded anywhere so you can see the results. But I can do that pretty quick, if you need it. Oh wait....I guess I could attach the HTML file....right? Ok, here's the code: <!DOCTYPE html><html><head><style>body{background:#ffffff url('http://forum.inkscapecommunity.com/tp-images/img/art5.png') no-repeat center top;}{font-size:100%;}h1{text-align:center;}{font:2.0em Verdana,Geneva,sans-serif;}p{margin-right:20%;margin-left:20%;}{font:1.5em "Times New Roman",Times,serif;}</style></head><body><br><h1>Screenshots</h1><p>text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article</p><p>More text.</p></body></html> And here comes the attached HTML file: Please let me know if you need any further info.And thank you very much