View Full Version : New to CSS
Xayeus 07-31-2005, 04:32 PM Hail all,
I will try to keep this relatively short as I do understand that you are all busy, but if for any reason you would like me to show my code to you to identify the problem that can be easily accomplished.
I've messed with HTML for a while now and I have an idea of whats going on and as I was looking through Lissa's site I came across the CSS page. This is one thing I haven't learned yet and am trying to understand. I added two scripts to my new HTML page, but things are going together. I use one of the copy/paste layouts from section 3 of Lissa's CSS page and put it here:
<html>
<head>
<title>The World of X</title>
~Script~
</head>
etc.
then I copy pasted the code from section 1 to visually modify as I worked on it and pasted this under the layout I had previously pasted onto my page:
<html>
<head>
<title>The World of X</title>
~Script~
~Script~
</head>
etc.
It seems now the two are conflicting and running together. The layout script and the CSS script are combined, so if I add any new text, the text is over top of the opposite scripts text. I'm not sure how to combine the two scripts onto a site and would appriciate any help I receive, thank you in advance.
~X
Xayeus 07-31-2005, 05:05 PM I have reordered the scripts and it seems that they are working appropriately now. Yet another topic, my background color is #000000 (black) and I have all the text areas set to #cccccc (gray) but when I open the site in IE everything but the scrollbar is black, I'm wondering if there is an extra script I need to make all of my font #cccccc (gray) or am I just missing something?
Scripts conflict because you might have used a css element that lissa's script uses. Depending on which order they go determines which one decides the design / style of the element. So if you had two body elements that had different styles, the one closest to the body tag would be applied.
Second question: put this in your stylesheet:
body {
color: #cccccc !important;
}
or you could try this: (might have consequences)
* {
color: #cccccc !important;
}
Hope this helps. :D
Xayeus 08-01-2005, 05:44 AM I appriciate the effort, I've tried putting the
body {
color: #cccccc !important;
}
code in the head and body, neither have worked, must be a code issue on my part.
Xayeus 08-01-2005, 07:42 AM alright, messing around with the script I have the text now silver, but there are still some issues, I've taken a screenshot for a visual:
http://i5.photobucket.com/albums/y193/XAcord/css.jpg
the word "Testing" is aligned to the center, as one word there is no complication, the phrase "Everything that appears...." is also centered but the phrase is longer and running into the CSS script
as you can see the style of the script is the following:
http://i5.photobucket.com/albums/y193/XAcord/cssoverview.jpg
A: Menu
B: Banner
C: Body
But C and A are running together and I'm not sure why, I was under the impression that this script would make A B and C seperate by default, any help would be greatly appriciated
If this is one of lissa's scripts for layouts, change the code as follows:
On the #left, #right and #center selectors, put: margin-left: 3; margin-right: 2;
Hope this helps.
Xayeus 08-01-2005, 08:56 AM Still no luck, I appriciate the effort that you are putting into this, but it won't work for some reason, it's getting to the point where I'm about to snap so I'm going to put the entire code and see if somebody can assist me with that:
<html>
<head>
<title>The World of X</title>
<head>
<style type="text/css">
A:link
{ text-decoration: blink; color:#CCCCCC; }
A:visited
{ text-decoration: line-through; color:#BBBBBB; }
A:active
{ text-decoration: underline overline; color:#FF0000; }
A:hover
{ text-decoration: underline overline; color:#FF0000;
background-image: url(yourimage.gif);
background-color: #000000;
(Warning: the following cursor attribute is for those who use IE only!)
cursor: value; crosshair
cursor: url('yourdomain.com/cursor.ani');}
h1 {font-family: arial;
color: #cccccc; }
p {font-family: arial;
color: #cccccc; }
body
{ background: #000000;
background-image: url(value); [url of background image to be used, i.e. background.gif]
background-repeat: no-repeat;
background-position: valueI valueII; [valueI: top, center, bottom, percentage, pixel number]
[valueII: right, center, left, percentage, pixel number]
background-attachment: fixed;
font-family: serif;
color: #CCCCCC ;
letter-spacing: 2pt;
font-weight: normal;
font-size: medium;
(Warning: the following scrollbar attribute is for those who use IE only!)
scrollbar-face-color : #CCCCCC;
scrollbar-highlight-color : #000000;
scrollbar-3dlight-color : #000000;
scrollbar-shadow-color : #000000;
scrollbar-darkshadow-color : #cccccc;
scrollbar-track-color : #000000;
scrollbar-arrow-color : #CCCCCC;
margin-top: 0;
margin-bottom: 0;
margin-left: 3;
margin-right: 2;
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
}
td
{ font-family: serif;
color: #CCCCCC;
padding-left: 2cm;
padding-right: 2cm;
padding-top: 2cm;
padding-bottom: 2cm;
padding: value; [2cm this is for all four sides]
padding: value value; [2cm, 4cm : two values for four sides, add numerical value] }
input, textarea
{ background: #000000 url(yourimage.gif);
font-family: serif;
color: #CCCCCC;
border-style: inset;
border-color: #CCCCCC;
border-width: valuepx; [numerical value, 5, 6, 8...] }
</style>
<style type="text/css">
body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 3;
margin-right: 2;
padding-left: 0;
padding-right: 0;
}
#menu {
position: absolute;
left: 5px;
padding: 0px;
width: 150px;
}
#content {
margin-left: 200px;
padding: 0px;
margin-right: 15px;
}
</style>
<div id="menu">
Your menu will go here. You can place images, text links, etc. in this div. To change the properties of this layer you can change the #menu selector in the style sheet that is located on this page between the head tags.
</div>
<div id="content">
All of your content goes in this div. This side is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly. To change the properties of this div you can change the #content selector in the style sheet that is located on this page between the head tags.
</div>
</head>
<body>
<p align=center><font color="#cccccc">testing</font></p>
</BR>
</BR>
</BR>
<p align=center>---Everything that appears on your page will be entered here, text, images etc.---</P>
</body>
</html>
You can also use it yourself to see what it's doing, I have no idea how to fix it, like I've said, I'm brand new to CSS, thanx again in advance.
and yes, this was a copy/paste code I used from lissa.
Xayeus 08-01-2005, 09:04 AM and yes, this was a copy/paste code I used from lissa.
Xayeus 08-01-2005, 09:16 AM it isn't anything urgent, so please take your time getting to this, I'm sure there are more important questions. I do want to thank you though, I hate asking questions that make me sound like a noob but it seems it is inevitable at this stage.
Your not a noob...
I've spotted sereval (sp?) mistakes:
Some commenting you've done uses (brackets) , but the correct syntax for commenting is using /* Comment */...
Second, you've added multiple elements of the same type. Replace:
cursor: value; crosshair
cursor: url('yourdomain.com/cursor.ani');}
with:
cursor: crosshair url('yourdomain.com/cursor.ani');
I'm still looking for mistakes.
Xayeus 08-01-2005, 09:35 AM thanx for pointing that out, I don't think I'll be able to use the crosshair because it is black and on a black background it will be very difficult to see. I hope to create a unique cursor soon, just trying to get the layout straight before I do that, thank you once again.
Actually, you should be able to use the crosshair because it inverts its colours when on a dark background.
(Sorry for Dbl Posting)
I've spotted more mistakes:
margin-top: 0;
margin-bottom: 0;
margin-left: 3;
margin-right: 2;
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
Not really a tip but use padding: 0; instead of all those individual elements.
Move the new cursor code I gave you to the body element.
Avoid spaces beetween style classes. Replace:
scrollbar-face-color : #CCCCCC;
scrollbar-highlight-color : #000000;
scrollbar-3dlight-color : #000000;
scrollbar-shadow-color : #000000;
scrollbar-darkshadow-color : #cccccc;
scrollbar-track-color : #000000;
scrollbar-arrow-color : #CCCCCC;
margin-top: 0;
margin-bottom: 0;
margin-left: 3;
margin-right: 2;
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
with:
/* Scrollbars only compatible with IE 5.5+ */
scrollbar-face-color : #CCCCCC;
scrollbar-highlight-color : #000000;
scrollbar-3dlight-color : #000000;
scrollbar-shadow-color : #000000;
scrollbar-darkshadow-color : #cccccc;
scrollbar-track-color : #000000;
scrollbar-arrow-color : #CCCCCC;
margin-top: 0;
margin-bottom: 0;
margin-left: 3;
margin-right: 2;
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
You also have two body elements. Merge them.
Still looking out for mistakes...
Hope this helps.
Xayeus 08-01-2005, 10:20 AM everything helps, but helping me with the coding is a great benifit to myself and my website. You haved earned respect from this if nothing else.
Loads more mistakes. Replace your two stylesheets with this one:
A:link
{ text-decoration: blink; color:#CCCCCC; }
A:visited
{ text-decoration: line-through; color:#BBBBBB; }
A:active
{ text-decoration: underline overline; color:#FF0000; }
A:hover
{ text-decoration: underline overline; color:#FF0000;
h1 {font-family: arial;
color: #cccccc; }
p {font-family: arial;
color: #cccccc; }
body
{ background: #000000;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: 0 0;
background-attachment: fixed;
font-family: serif;
color: #CCCCCC ;
letter-spacing: 2pt;
font-weight: normal;
font-size: medium;
/* Warning: the following scrollbar attribute is for those who use IE 5.5+ only!! */
scrollbar-face-color : #CCCCCC;
scrollbar-highlight-color : #000000;
scrollbar-3dlight-color : #000000;
scrollbar-shadow-color : #000000;
scrollbar-darkshadow-color : #cccccc;
scrollbar-track-color : #000000;
scrollbar-arrow-color : #CCCCCC;
/* Warning: the following cursor attribute is for those who use IE only */
cursor: crosshair;
background-image: url(yourimage.gif);
background-color: #000000;
margin-top: 0;
margin-bottom: 0;
margin-left: 3;
margin-right: 2;
padding: 0;
}
td
{ font-family: serif;
color: #CCCCCC;
padding: 2cm;
}
input, textarea
{ background: #000000 url(yourimage.gif);
font-family: serif;
color: #CCCCCC;
border-style: 1px inset #CCCCCC;
#menu {
position: absolute;
left: 5px;
padding: 0px;
width: 150px;
}
#content {
margin-left: 200px;
padding: 0px;
margin-right: 15px;
}
Been editing it in Top Style lite for the last 15 minutes....
Just post if you have anymore questions..
Also: Sorry, the cursor change does not do anything. This contains a fix for a crosshair.
Xayeus 08-01-2005, 11:08 AM that looks much much better, thank you for your time. it now looks like this:
http://i5.photobucket.com/albums/y193/XAcord/improvement.jpg
it seems there is a black block between the two, not sure what that is but it looks great now.
Do you mean the space between the red box and the --This is where all your content goes-- bit. To solve that, try this. (Add it to the center element)
position: relative;
top: -21;
left: 0;
Hope this helps. :D
Xayeus 08-01-2005, 11:34 AM That it did, its perfect now, but now I don't want to add anymore coding in fear that I will once again mess it up, lol. I have one final question, I know I have asked a lot of you, but there is a code that I like to use which is:
<h1>W</h1><h2>ELCOME</H2>
I've always like having the main introduction in all caps but having the first letter larger always has been a thing of mine, I put the code into the body and I get something similiar to this:
W
ELCOME
is there any way to fix this?
Add this to your CSS.
h1:first-letter {
font-size: 26pt;
}
h1 {
font-size: 16pt;
}
And this for your HTML:
<h1>Welcome!</h1>
Or, if that doesn't work you could try this:
<font size="5">W</font><font size="3">elcome</font>
Hope this helps. :D
Xayeus 08-02-2005, 10:16 AM It did, thank you once again.
Xayeus 08-02-2005, 10:31 AM back once again, this time with a few problems. The first problem that I am running into is an html scrolling table code conflicting with the CSS script. I made a new test.html document to test this and the table works great, but when I put the same code into my index.html file with the CSS it stays "center" and I can't change its width, I can change the height but not width.
<left><form method="get" target="_top"> <textarea name="terms" cols="75" rows="20" wrap="hard"> YOUR TEXT GOES HERE</textarea></form></left>
The goal for this is to get a scrolling table that has a colspan of about 75 for my major text (left aligned), and another scrolling table to the right of that where I can post any updates to the site, new content, etc. Not sure if I can using CSS but it never hurts to ask.
I also wanted to ask if anyone knew how the .css script was uploaded so that all of your pages can be changed from that one script. I saved it and it saved as a text file, so I'm not sure how to incorporate that into the website as a hole.
Also, with my CSS script as it is I have the #content on top, #menu below that and the <body></body> below that. I was wondering if there were anyway to lock the #content and #menu so that only the body scrolls. I know I'll return but I think thats all for now. Thanx in advance yet again.
~"X"
A mistake, remove <left> and </left>
Second Question, use the following code, put it in the head.
<link rel="Stylesheet" href="theurlofthestylesheet.css">
Next, save all your code (as .CSS files) in your <style> tags and give it a codename, I.E. main.css. Change theurlofyourstylesheet.css to your codename.
Hope this helps.
Xayeus 08-02-2005, 11:23 AM thank you once again for the help. I put in the code you offered for the table and I'm still getting the same problem. the table is centered and I can't change the width. With the code to put the style onto every page, it worked to an extent, it changed my test.html's background color's, scroll bar, and text but didn't put the #content or #menu. I know this is getting pathetic but I'm trying.
You said you were using a table. You are using a textarea, so to increase the width use cols="50". This means 50 columns.
Xayeus 08-02-2005, 12:01 PM yes, but what its doing is just making it longer, if it will help I'll take screenshots of what its doing with the codes I used.
-------
if it would be easier to talk over chat I'm usually on:
yahoo: silver_wound
Aim: dnuowXhself
just an idea
Xayeus 08-02-2005, 12:32 PM if it would be easier to talk over chat I'm usually on:
yahoo: silver_wound
Aim: dnuowXhself
just an idea
Sorry I don't have YIM or AIM or MSN or easy to access email. Do you want the box to have no styles, just plain? If so, in your stylesheet change textarea to textarea.main1.
Xayeus 08-02-2005, 01:58 PM no, all I want is a black table with silver text, nothing too complicated. I'm going to have a lot of content on some pages, like a disclaimer on one, where I'd like all of the text to be in an easy table so that the info is easy to access.
the code you said, does it go here?
<left><form method="get" target="_top"> <textarea.main1. name="terms" cols="500" rows="25" wrap="hard"> YOUR TEXT GOES HERE</textarea.main1.></form></left>
Xayeus 08-02-2005, 02:26 PM got it, the table background is white and text is black but the table is working now.
No, change it for the CSS, not the tag. Remove the textarea.main1, put it in replacement for textarea in the css.
Xayeus 08-02-2005, 05:27 PM I did that, you can look at the progress at:
http://www.xworld.150m.com/home.html
the only problem with this is that I can't put html into this table, I saw a few guides on I-Frame but I didn't really want to go into frames if CSS can do the same thing, the problem is with this I can't change the background/text colors or put html in it that would solve a lot of my problems. Thanx again for the advise
I warned you that it was a textarea. Change the following. Make your textarea a table. Change cols to width, and put 20% as the value. Next change rows to height. Put 80% as the value. end the table.
Hope this helps. BTW, this should be in HTML now we are changing the other parts...
Xayeus 08-02-2005, 05:42 PM how would I change it to html now? I think its half html half CSS and I don't know what to do, lol:
<left><form method="get" target="_top"> <textarea name="terms" width="20%" height="80%" wrap="hard"> <center>welcome</center></textarea></left>
maybe I should just start over and make a table. Need to look up a code to refresh my memory, so thats where I'll be.
Change your code to this:
<table width="80%" height="50%"><center>welcome</center></table>
Revised some widths. Change the width and height to suit your needs.
Xayeus 08-02-2005, 06:02 PM well I know that you are probably getting tired of answering these innerving questions, I'll just go read a tutorial on CSS or something, eventually it'll get to the point where I just tell you to make it for me, cause I'm going to fast it seems, I'm completely lost with CSS and HTML combined. I understand tables to an extent but not well enough it seems, I hate being a noob.
Well, I tried. Sorry I can't help you more regarding this.
Ok, I got an email address. If you want more help, you can email me. It's in my profile.
|