When I choose "Make Text Bigger/Smaller" in my browser, the text within my banner will resize on my site. I want to keep the size of the text fixed. I'd also like to learn if it's possible to alternate colors within the text. For instance, if the title were "CSS", instead of being shown as one color, I'd like to have it be a RED "C", a YELLOW "S" and a GREEN "S". Any help would be appreciated. Thank you.
You should use specific px sizes for your font attributes rather than small, large, ems or %s (for example) to stop the browser text resizing. You can use span classes for each letter in your code to colour each letter individually, such as... .style1 {color: #FF0000} .style2 {color: #FFFF00} .style3 {color: #00FF00} Code (markup): or .style1 {color: red} .style2 {color: yellow} .style3 {color: green} Code (markup): produces what you want when used with... <span class="style1">C</span><span class="style2">S</span><span class="style3">S</span> Code (markup):
Here's what I've gotten entered right now: body { background: #FFFFFF;} #pageHeader h1 {color: #000000; font-size: 3.7em; letter-spacing: -2px; font-family: Chalkboard; margin: 0px 0px 15px; text-align: center;} #pageHeader h2 {color: #000000; font-size: 1.6em; letter-spacing: -2px; font-family: Chalkboard; margin: 0px 0px 0px; text-align: center;} #pageHeader {background: white; border-right: 11px solid #0000FF; border-left: 11px solid #0000FF; border-top: 11px solid #FF0000; border-bottom: 11px solid #FF0000;} <span class="style1">T</span><span class="style2">h</span><span class="style3">e</span> .style1 {color: red} .style2 {color: yellow} .style3 {color: green} Are you saying that 3.7em & 1.6em should be changed to "something" px and that will stop the text from resizing? I did try substituting 50px & 20px for these values, but it still would resize. I have no idea what to do with the code you took the time to type down for me. As you can see, I just pasted it in and prayed it would work. I'm way out of my element here, I know. I'm trying....
hmmm, it works for me ... <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> <!-- body { background: #FFFFFF;} #pageHeader h1 {color: #000000; font-size: 50px; letter-spacing: -2px; font-family: Chalkboard; margin: 0px 0px 15px; text-align: center;} #pageHeader h2 {color: #000000; font-size: 20px; letter-spacing: -2px; font-family: Chalkboard; margin: 0px 0px 0px; text-align: center;} #pageHeader {background: white; border-right: 11px solid #0000FF; border-left: 11px solid #0000FF; border-top: 11px solid #FF0000; border-bottom: 11px solid #FF0000;} .style1 { color: red; font-size: 12px; } .style2 { color: yellow; font-size: 12px; } .style3 { color: green; font-size: 12px; } --> </style></head> <body> <div id="pageHeader"> <h1>Page header</h1> <h2>head 2</h2> </div> <span class="style1">T</span><span class="style2">h</span><span class="style3">e</span> </body> Code (markup): Note that the styles go inside your head tags and the text etc goes in your body tags as shown above
Perhaps because I'm using this code with RapidWeaver, it's not working quite right. When I pasted what you wrote into the Custom CSS Box provided in this application, I ended up with two banners, one on top of the other. The first said, "Page header" in the title area with "head 2" below that in the "slogan" line, and in between the two banners, a red yellow green "The" followed by these symbols: /*]]>*/. The second banner bar--my banner--remained unchanged. Still, if I fool around with this, maybe I can figure it out. I didn't need to enter: <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> <!-- or anything else, other than what I showed you. I really do appreciate you taking the time to help. I've learned so much in just one day, my head feels like it's going to explode. Good timing, too, for it just chimed midnight. Wow! Time really flies. Gotta get to sleep. I'll be back in the morning...or later this morning. Thanks again.
Ah! Rapdiweaver seems to be a WYSIWYG html editor with less control over the code than the usual ones (such as dreamweaver). Unfortunately I have nil experienc of it and since I use PCs only I doubt I will for the moment. This poses a few questions though ... 1. Is there somewhere for you to input code directly rather using a WYSIWYG interface? 2. Is there a way to change the method they use for setting the font sizes? Such as using px values rather than ems? That may be within the preferences somewhere. 3. You could always create the whole page, post the code here and I'll convert font styles, then you can publish it on your site using an ftp program. How about that? I'll have a deeper dig on Rapidweaver, but what I have seen so far makes it seem that it is more WYSIWYG than direct coding.
It's kind of you to help me. I usually try to find the answers to my own questions, but that can get pretty time consuming. My initial thought on solving this problem was to simply create an image of the title I wanted using Graphic Converter and attaching it to image that I was using for my homepage. This site has no traditional links. It'll be, basically, point and click on certain parts of the picture to be redirected to the other pages on the site. My idea should have worked fine, but I can't figure out how to get rid of the giant space that banner bar--which I no longer need--takes up. Course, I'm sure that's easily remedied. I guess the reason I decided to go the CSS route was because it's one of things I'd like to learn more about. There's a site I found the other day that has all these CSS/HTML/XHTML Tutorials you can do online for free. So, doing that, I'm sure, will give me a better understanding of all this stuff. As for your questions, RapidWeaver uses a Custom CSS Box for altering its themes--px & ems can be entered, and I guess HTML within the title bar of your site as well. In fact, one of the members there suggested I put: <font color=red>T</font><font color=yellow>h</font><font color=green>e</font> into the title box and that would change the colors. It worked, too. Unfortunately, my title, "The Dream" was a little squashed together, because I didn't take the space in between the "e" and "D" into account. Again, that's another thing I don't know how to do. Also, I'd like the text to be outlined, but I don't think it would work. In Graphic Converter I made bubble shaped fonts using "Chalkboard" and the style "Outline", then filled the letters in with different colors. Anyway, I like learning how to use CSS and HTML within my site. If you know the codes you can easily change whatever you want. Thanks again for all your help.
A lot of people here will say this to you ... if you really want to learn html (xhtml compient) and css, then scrap rapidweaver and just use a simple text editor instead, its the only porper way of learning it. I tend to agree. Using a WYSIWYG editor wont help you to learn it as well. There is an absolute plethora of useful tutorials on the net, its hard to recommend just one or two, so here's a few. Maybe you should approach it this way, post your code here and we'll go through it until we see the result you want?