 |
| |
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-11-2003 21:10
Hi, guys. How are you? I am a wee bit suspiscious what I did. I want to make three paragraphs parallel. I used to use table to do so. But now I think I have to move on new way to do so using CSS. Here is my code:
quote:
<html>
<head>
<style type="text/css">
h1
{
position: absolute;
top: 100px;
left: 300px
}
h1.tom
{
position: absolute;
top: 200px;
left: 50px
}
h1.ken
{
position: absolute;
top: 3%;
left: 70%
}
p
{
position: absolute;
top: 40%;
left: 40%;
right: 40%
}
p.tim
{
position: absolute;
top: 60%;
left: 5%;
right: 65%
}
p.kim
{
position: absolute;
top: 20%;
left: 70%;
right: 5%
}
</style>
</head>
<body>
<h1>A heading</h1>
<h1 class="tom">Hiroki Kozai</h1>
<p>
The <b>heading</b> is placed 100px
down from the top of the document,
and 100px to the right from the
left side of the document.
The <b>paragraph</b> is placed 200px
down from the top of the document,
and 100px to the right from the
left side of the document.
</p>
<p class="tim">
Hello, this is hiroki. How are you todya? I am well thank you.Hello, this is hiroki. How are
you todya? I am well thank you. Hello, this is hiroki. How are you todya? I am well thank
you. Hello, this is hiroki. How are you todya? I am well thank you. Hello, this is hiroki.
How are you todya? I am well thank you. Hello, this is hiroki. How are you todya? I am well
thank you. Hello, this is hiroki. How are you todya? I am well thank you. Hello, this is
hiroki. How are you todya? I am well thank you. Hello, this is hiroki. How are you todya? I am well thank you. Hello, this is hiroki. How are you todya? I am well thank you. Hello,
this is hiroki. How are you todya? I am well thank you. Hello, this is hiroki. How are you
todya? I am well thank you. Hello, this is hiroki. How are you todya? I am well thank you.
Hello, this is hiroki. How are you todya? I am well thank you. Hello, this is hiroki. How
are you todya? I am well thank you. </p>
<h1 class="ken">Aran and Colin</h1>
<p class="kim">
This is Hiroki! I am dying to beat Aran and colin. They are so good that I cannot win yet.
But tomorrow! I will win. This is Hiroki! I am dying to beat Aran and colin. They are so
good that I cannot win yet. But tomorrow! I will win. This is Hiroki! I am dying to beat
Aran and colin. They are so good that I cannot win yet. But tomorrow! I will win. This is
Hiroki! I am dying to beat Aran and colin. They are so good that I cannot win yet. But
tomorrow! I will win. </p>
</body>
</html>
Any advices are the most welcome. Thanks.
Hiroki Kozai
|
Dracusis
Maniac (V) Inmate
From: Brisbane, Australia
Insane since: Apr 2001
|
posted 03-11-2003 21:46
Ok, firstly, you should be including a <doctype>... Browse through www.webstandards.org for some tips on which one you shoud be using.
Secondly, your using a mixture of fixed and relative positioning which makes the page to some really funky things when you re-size the page. Are you checking this in different screen resolutions?
Anyways, if your after the three column effect then I suggest you check out www.glish.com/css or www.bluerobot.com/web/layouts/ for a template to start with. Study how they aproach various different methods for setting up CSS layouts and use them to build one that best suits your needs.
[This message has been edited by Dracusis (edited 03-11-2003).]
|
Slime
Lunatic (VI) Mad Scientist
From: Massachusetts, USA
Insane since: Mar 2000
|
posted 03-11-2003 22:21
Dracusis: be careful about using the phrases "fixed positioning" and "relative positioning" when you're really referring to absolute positioning measured in pixels and percents.
Hiroki:
1. Dracusis is right in that using percents for the heading tags, but pixels for the paragraph tags, will misalign the document when the user resizes their browser.
2. Your document order doesn't make any sense. You must remember to consider what the document will look like *without* CSS applied. You have two headers, followed by two paragraphs, then one header, then a paragraph. Structure the document in the way that makes sense when it's layed out linearly! I suggest the following structure:
1. heading #1
2. paragraph that goes with heading #1
3. heading #2
4. paragraph that goes with heading #2
5. heading #3
6. paragraph that goes with heading #3
Because that makes sense *without* the CSS. Now, if I misunderstand your document's structure, maybe you did mean to lay it out like that. However, having two <h1> tags in a row makes no sense. You might mean to use an <h1> followed by an <h2>. (This would be equivalent to a main heading followed by a sub heading.)
Now, in order to simplify the positioning, I would actually recommend *this* structure:
<div id="part1">
<h1>...</h1>
<p>...</p>
</div>
<div id="part2">
<h1>...</h1>
<p>...</p>
</div>
<div id="part3">
<h1>...</h1>
<p>...</p>
</div>
Then you can use CSS to position the #part1, #part2, and #part3 divs respectively, and allow their contents to flow naturally within them.
|
Nethermind
Bipolar (III) Inmate
From: under the Milky Way tonight
Insane since: Feb 2003
|
posted 03-11-2003 22:32
Dracusis!
This is exactly what I was looking for (bluerobot.com) to help me learn how to use css instead of HTML for alignment that used to work with tables.
Thanks!
~N
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-12-2003 00:17
Hi, Slime! Wonderful to hear from you. Thank you very much for your advices. It is really fun to controll layout using CSS even I am not good at it yet. I am off to lunch now so that I will try your code later on. Actually I couldn't find <div> in w3schools.com tutorial. I am sorry if I was blind. But I have been looking for how to use <div> for ages.
I am very happy now. See you later, Slime.
Hiroki Kozai
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-12-2003 02:22
Hi, Slime. I am back to the library to try what you said. I have coded the way you told. But it seems to be wrong because doesn't work at all. Please help me.
Here is my code.
[quote]
<html>
<head>
<title>CSS practice</title>
<style type="text/css">
div.part1
{
position: absolute;
top: 3%;
left: 20%
}
div.part2
{
position: absolute;
top: 20%;
left: 40%
}
div.part3
{
position: absolute;
top: 40%;
left: 70%
}
</style>
</head>
<body>
<div id="part1">
<h1>Tom is hero!</h1>
<p>
Tom went ot Afganistane to save people.
</p>
</div>
<div id="part2">
<h2>Hiro is hero!</h2>
<p>Hiro saved a wee girl in the fire. He did well.
Hiro saved a wee girl in the fire. He did well.
</p>
<div id="part3">
<h3>Aran and Colin</h3>
<p>
Aran and Colin are unbeaten. But pretty soon will be by Aleki and I.
</p>
</body>
</html>
I expected three colums were set parallel. But nothing happned yet. Wow, wow, wow. Why?
Hiroki Kozai
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-12-2003 02:35
Wow, guys. It worked. I put <div class> instead of <div id>.
But pardon me. What is the difference between id and class?????
Dracusis, I saw the site you told me. It is good site, a?
But I found <div class> and <div id> at the same time on here: http://bluerobot.com/web/layouts/layout3.html
I guess there will be big difference I don't know. Do you have any idea, guys?
Plus this question, please.
The third paragraph doesn't listen to my CSS at all. It alwasy stick to the middle paragraph. The rest of all working well. Do you know why?
Here is my code.
quote:
<html>
<head>
<title>CSS practice</title>
<style type="text/css">
div.part1
{
position: absolute;
top: 3%;
left: 10%;
right: 70%
}
div.part2
{
position: absolute;
top: 20%;
left: 40%;
right: 30%
}
div.part3
{
position: absolute;
top: 40%;
left: 80%;
right: 10%
}
</style>
</head>
<body>
<div class="part1">
<h1>Tom is hero!</h1>
<p>
Tom went ot Afganistane to save people.
</p>
</div>
<div class="part2">
<h2>Hiro is hero!</h2>
<p>Hiro saved a wee girl in the fire. He did well.
Hiro saved a wee girl in the fire. He did well.
</p>
<div class="part3">
<h3>Aran and Colin</h3>
<p>
Aran and Colin are unbeaten. But pretty soon will be by Aleki and I.
</p>
</body>
</html>
There will be a lot more questions. Pretty interesting to me.
Hiroki Kozai
[This message has been edited by Hiroki (edited 03-12-2003).]
|
DL-44
Maniac (V) Inmate
From: under the bed
Insane since: Feb 2000
|
posted 03-12-2003 04:08
This is a good time to point out that the W3C specs are something that *really* need to be read.
you *NEED* to use class='" in your divs, because in your style sheet you specify them as a class by using the '.'
A class and an id are defined rather logically -
a class can be applied to any number of elements of any type throughout the page/site.
An ID can only be specified once by one element.
So, a class is a general style that you will use for more than one type of element, or on the same element more than once.
An ID identifies one specific thing, and only once.
|
Slime
Lunatic (VI) Mad Scientist
From: Massachusetts, USA
Insane since: Mar 2000
|
posted 03-12-2003 04:23
Hiroki: the problem with that last example you posted is that you forgot to close the second and third <div> tags. Close them and things should work better. (You're missing two "</div>"s.) DIV tags, unlike P tags, must always be closed.
For the differences between class, and ID, i'm going to refer you to the FAQ, since we've had some pretty thorough discussions on it in the past and they cover more of the details than I will in a single post:
http://faq.ozoneasylum.com/FaqWiki/shownode.php?id=1045&sortby=rating (be sure to check out the "relevant threads" links.)
That will also show you how to apply style information to an element with a particular ID (in short, you use # instead of . )
[This message has been edited by Slime (edited 03-12-2003).]
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-12-2003 07:52
Hi, DL! Hi, Slime! It is working propery what I expect.
Now I am going to read that thread Slime told me.
Thanks for your help.
I really adore you, guys.
Cya.
Hiroki Kozai
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-12-2003 08:50
Hi, guys. I have jsut read that thread. I quite don't understand <div id>.
Excuse me, DL. You said:
quote:
An ID can only be specified once by one element.
An ID identifies one specific thing, and only once.
Would you give me an example of <div id>. I cannot figure out the situation to use it.
Also that thread Slime told me:
quote:
html =
<div id='nav' class = 'auxillary'>;aldfjdsljfsd</div>
<div id='links' class = 'auxillary'>;aldfjdsljfsd</div>
<div id='sidenote' class = 'auxillary'>;aldfjdsljfsd</div>
<div id='whatever' class = 'auxillary'>;aldfjdsljfsd</div>
What the hell is going on here? I thougth I was able to use <b>id</b> only once for each elemement. Wow, wow, wow~. Confused......
Hiroki Kozai
|
Suho1004
Maniac (V) Inmate
From: Seoul, Korea
Insane since: Apr 2002
|
posted 03-12-2003 08:56
They didn't mean that you can only use one ID on each page... if you define an ID in your style sheet, it only refers to one element on the page, but you can define many IDs (like "navs," "links," "sidenote," etc.).
And I would stress DL's advice: you really need to read through the CSS specs. They may not be the most exciting reading, but take your time to go through them carefully and it may clear up a lot of things.
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-12-2003 09:33
All right. Thanks very much. I will read it.
Ps. I really concern about North Korea, Suho. Hope the situation around there will be all right.
Hiroki Kozai
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-12-2003 09:35
All right. Thanks very much. I will read it.
Ps. I really concern about North Korea, Suho. Hope the situation around there will be all right.
Hiroki Kozai
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-12-2003 21:07
I feel myself damn......
I surfed through http://www.w3.org/Style/CSS/ .
I found a lot of list of book or web link or something like that.
Actually which part do you recommend me to read.
Wow, wow......
Help.
Hiroki Kozai
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-13-2003 20:55
Hi, guys. good morning. Just five minutes to Operating System class. I just wanted to say that I have started to study CSS tutorial from gurusnetwork.com by briggle.
I have been stick to CSS, HTML, and XHTML like Slime said me before.
All right. Better go.
Hiroki Kozai
|
Slime
Lunatic (VI) Mad Scientist
From: Massachusetts, USA
Insane since: Mar 2000
|
posted 03-14-2003 00:08
"Would you give me an example of <div id>. I cannot figure out the situation to use it."
On my website, I have two main <div>'s. One holds the content, the other holds the menu bar, which I originally called the sidebar. The code for this is:
<div id="sidebar">...menu bar links here...</div>
<div id="content">...content here...</div>
"I thought I was able to use id only once for each element."
That is correct. I'm not sure what the confusion is, but let me point out a few things which may clear it up:
1. In the example you showed, the "id" attribute was only used once for each element. The other attribute in each element was "class", and there is no restriction about using classes and id's on the same element (it's quite common).
2. Perhaps you're confused about the meaning of "element." This is an element: <div>...</div> This is another element: <p>...</p> This is yet another element: <div>...</div> Keep in mind that an element is a *single instance* of an opening tag, a closing tag, and its contents. So you can have hundreds of <div> tags, and they're all separate elements. The concept of the general "div" tag is a *type* of element, but it is not an actual element until it's used on the page. What I'm trying to say here is that you can have multiple elements on a page created with the same type of HTML tag.
As for http://www.w3.org/Style/CSS/ , the specific part that you should read is the "CSS Specifications" section, which is at the bottom of the page. It links to the CSS2 Technical Reports, at http://www.w3.org/TR/REC-CSS2 . That is what you should read. Read the abstract, then scroll down to the Quick Table of Contents, go into the first one, and just begin reading. It's long. If you spend a few hours reading it every night, you'll probably finish within a week or so. Take it slowly, and don't overwhelm yourself by reading too much information at once. You can skip the parts that look unnecessary, like "Acknowledgements" and "Copyright Notice," etc. The appendices are optional. Good luck =)
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-14-2003 05:17
Hi, Slime. Thank you very much. I am very happy to hear from you. Now I have jsut seen the list of all those W3org site. It is daunting, isn't it? Well, long way to go, I guess. Never mind. I will do my best. Have a good weekend. see ya.
Hiroki Kozai
|
DL-44
Maniac (V) Inmate
From: under the bed
Insane since: Feb 2000
|
posted 03-14-2003 18:30
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-15-2003 09:18
Hi, DL. How are you? Thanks for your advice! Yes, I have already printed out whole those tutorial. I have actually finished up to lesson three of part one. It is really clear so that I can pick up the details easily. I really thank Briggle. I will knock it off first then move to www.w3c.org.
Well, have a good time for rest of your weekend.
Bye.
Hiroki Kozai
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-16-2003 23:48
Hi, guys. How are you today? Did you have a good weekend? Yes, I did. Hope you did too, people.
Well, I have been stucking to CSS for a while. I got a wee confusion. Please see this.
quote:
body { background: #87cefa color: red}
What??? I got a blue background and black text. I expected red text. I got red text when I delete background: *87cefa. What is that for to put color: red?
Please help me........wow, wow, wow...
Hiroki Kozai
|
Slime
Lunatic (VI) Mad Scientist
From: Massachusetts, USA
Insane since: Mar 2000
|
posted 03-16-2003 23:57
You're missing a semi-colon after the background property!
use
body { background: #87cefa; color: red}
instead of
body { background: #87cefa color: red}
As a general practice, I put a semi-colon after *every* property, because then it's harder to forget doing it:
body { background: #87cefa; color: red;}
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-17-2003 00:26
Good morning, Slime. How are you? Thanks for your help. I should have done it more carefully, haven't I?
Well, this time I got more serious problem. Please see following:
My link, Here2 and Here3 gets blue but Here1 and Here4 gets green color. It is Monday mistery to me. Do you have any idea or do you see silly mistake?
quote:
<html>
<head>
<title>Pseudo-Class</title>
<style type="text/css">
a
{
font-family: verdana, arial, sans-serif;
font-size: 10pt;
font-weight: normal;
}
:link
{
color:blue;text-decoration: none;
}
:visited
{
color:green;text-decoration: none;
}
:hover
{
color: red;text-decoration: none;
}
:active
{
color: yellow;text-decoration: none;
}
</style>
</head>
<body>
<p>If you are interested in, please click below.<br />
<a href="test.htm">Here1</a>
<a href="text2.htm">Here2</a>
<a href="text3.htm">Here3</a>
<a href="test.htm">Here4</a>
</p>
</body>
</html>
wow, wow, wow, agian.....
Hiroki Kozai
|
DL-44
Maniac (V) Inmate
From: under the bed
Insane since: Feb 2000
|
posted 03-17-2003 00:44
you have blue specified for :link. Green specified for :visited.
So, obviously, if something is showing as green, you have visited that link.
I have to add here, that while I admire your tenacity, I think you would benefit from a *lot more* trial and error on your own, and a lot less asking everytime something doesn't work the way you expected...
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-17-2003 05:14
Hi, DL. Thank you for your comment.
Well, I understand what you mean. But I am afraid this is the msot difficult to understand.......
I mean how browser knows if it has been visited or not. I found that there were blue and green link. After that I closed IE then opened my html file again. What I expected was that those link became all blue. But they were still blue and green. Why browser still knows I have visited that link even I closed it.
And refresh button!!! When I found those green and blue link, I pressed refresh button to make them all blue. But as you know, it didn't work at all. But I am afraid I don't understand why it not.
Would you have any idea about them?
I really respect you and people on this site. I'd like to be like you. Again, thank you for your help. It has been my honor to be on this site.
Wow, wow, wow,
Hiroki Kozai
|
Slime
Lunatic (VI) Mad Scientist
From: Massachusetts, USA
Insane since: Mar 2000
|
posted 03-17-2003 06:42
The only way to make the browser forget what links you've visited is to clear the browser history.
|
Suho1004
Maniac (V) Inmate
From: Seoul, Korea
Insane since: Apr 2002
|
posted 03-17-2003 08:54
OK, I've also got to ask... what difference does it make if the links show up green or blue? Isn't that why you specified different colors for the default links and the visited links? I'm not sure why you want all the links to be blue, since that will only reflect the current state of your browser's history, and will have no effect on what other people see. I'm a bit confused as to what you're trying to do...
[Edit: Oh, and thanks for asking about my situation. As of now I am still alive, so this is good. Hopefully things will continue in this fashion.]
[This message has been edited by Suho1004 (edited 03-17-2003).]
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-17-2003 10:51
Thanks guys. Hi, Suho. I have been just tring to understand pesudo class. When I coded like above, I expected all the links blue. I made four links. There were two greeen links. I thougt they should have been blue. I tried figured out why I got that green link when I opened html file in my broser.
Well, I have had a can of beer. I am off to bed soon. See you tomorrow. Thanks for your help. Good night.
Hiroki Kozai
|
Suho1004
Maniac (V) Inmate
From: Seoul, Korea
Insane since: Apr 2002
|
posted 03-17-2003 13:57
Ah, OK, I get it now...
quote:
Well, I have had a can of beer. I am off to bed soon. See you tomorrow.
You crack me up. 
|
DL-44
Maniac (V) Inmate
From: under the bed
Insane since: Feb 2000
|
posted 03-17-2003 14:21
I assume the file that these links are in is called "test.htm"?
In that case, as soon as you've loaded the page, you have visited those two links.
So, in this *particular* case, even if you clear your browser history, the links wil always show green becuase you're *on* the page that they link to.
So, if you want them to always be blue, specify blue for a:visited.
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-17-2003 21:31
Hi, everyone. Good morning. How are you? Winter is coming here. It is being bloody chilly here.
Thanks for your reply and help. This thread is the first one I made, which become fire file. I am so pleased to feel myself knowing more everyday. Really really thank you.
Today I will move on to gurus's tutorial css part2. Last night, I had a quick look having Australian beer. See what I can get. All right. Have a good day. See you on the internet sometimes.
Hiroki Kozai
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-17-2003 23:44
Hi, guys. I have just been trying to figure out how to make the effect like: http://www.tantek.com/CSS/Examples/boxmodelhack.html . You will see there are 4 colors on your screen, which is white, black, light yellow, and dark yellow, right?
I guess white is background color, black is border color, light yellow is background of What???? Even I have no idea how to get those dark yellow around the text!!! I reckon light yellow is background of paragraph???
If I can get this, it will be huge advantage. Please help me,,,wow,wow,wow.....
ps. I am off to database class now. I am learing data desing also access. It is a bit boring, gosh.
Hiroki Kozai
[This message has been edited by Hiroki (edited 03-17-2003).]
|
Slime
Lunatic (VI) Mad Scientist
From: Massachusetts, USA
Insane since: Mar 2000
|
posted 03-17-2003 23:53
Right click -> view source
You can figure that one out yourself =)
|
DL-44
Maniac (V) Inmate
From: under the bed
Insane since: Feb 2000
|
posted 03-18-2003 00:17
doesn't he explain it in the code that is on the page.....?
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-18-2003 02:23
Hi, Slime, Hi, DL. Good afternoon, here.
Well, I cannot see css code of it. It is showing only quote:
<style type="text/css" media="all">@import "boxmodelhack.css";</style>
.
Wow, wow, wow........
Anyway, I will figure out myself surfing web, thanks for that.
Hiroki Kozai
|
DL-44
Maniac (V) Inmate
From: under the bed
Insane since: Feb 2000
|
posted 03-18-2003 02:58
if that's where the style sheet is, that's where yo go - http://www.tantek.com/CSS/Examples/boxmodelhack.css
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-18-2003 03:00
Hi, guys. I guess I hit the right web site to figure it out. I am sure but probably "floting element" will be my answer. Now I am reading it. Then I will report to you later. Cheers. wow, wow, wow.
Hiroki Kozai
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-18-2003 03:42
Hi, DL. Thanks for that. I got that css! I didn't know I can get it that way. Cool.
Hiroki Kozai
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-18-2003 09:10
I am going to haave a beer. Then work for css tutorial again, again, again, like drink beer, beer and beer. I love beer. Wow, wow,wow...
Hiroki Kozai
|
Suho1004
Maniac (V) Inmate
From: Seoul, Korea
Insane since: Apr 2002
|
posted 03-18-2003 09:47
Hmm... something tells me that drinking a lot of beer before trying to figure out new stuff might not be the best idea...
|
