 |
| |
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-18-2003 21:43
Good morning, Suho. I agree, Suho. But I really like drinking beer reading article. I try to read what I do next day before going bed. Beer makes me sleep well. Don't you reckon?
Hiroki Kozai
|
kuckus
Bipolar (III) Inmate
From: Berlin (almost)
Insane since: Dec 2001
|
posted 03-18-2003 22:00
Hey Hiroki - if your learning experience was only slightly related to the "wow" factor of this thread that would clearly proove that you're approaching things the right way and drinking is a valid option. Good to see you're having fun 
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-19-2003 01:36
Hi, mate! Nice to hear from Cermany.
Well, I have just finished gurus's tutorial up to lesson5. I am off to lunch now.
In my brain, CSS is hopefully sinking down. Now I am printing w3org css specification. It will be about 85pages. Oh, my goodness. Lots to study, isn't it? But will do. see ya.
Ps. div div div It so cool.
Hiroki Kozai
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-19-2003 03:04
Hi, guys. I have just finished tutorial here: www.gurusnetwork.com . I will reveiw them to make sure I can do it without seeing examples. Also I have printed out css specification to read. It has heaps. Probably glance it at tonigth with beer. Good on me!!! So thanks for your help. I have been so happy to share time with you. See you later. Have a good day.
Hiroki Kozai
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-19-2003 03:55
Hi, guys. How are you? It has been so hot in this room. It makes me feel thirsty....But not yet, not yet....
Well, do you remember I have been trying to get design effect something like: www.tantek.com/CSS/Examples/boxmodelhack.html I made something simillar to this not color but idea.
Would you please see if I am coding using right way?
My code is following:
quote:
<html>
<head>
<title>three color will be done</title>
<style type="text/css">
.test1
{
background:#00aa22;
width:400px;
height:400px;
border: 20px solid #00ff00;
}
.test2
{
background:#aa9933;
width: 200px;
border: 4px solid #334455;
position: absolute;
top: 23%;
left: 23%;
}
.test3
{
background:#22ddcc;
width: 300px;
border: 4px solid #006677;
position: absolute;
top: 30%;
left: 10%;
}
</style>
</head>
<body>
<div class="test1">
<div class="test2">
<P>Hello, guys.</p>
</div>
<div class="test3">
<P>This is Hiroki Kozai. Is this right way to code? Wow, wow,woooooo. This room is so hot but
nice smell comes from kitchen. Student cooking something. </p>
<p>I have finally figured out how to do it.</p>
</div>
</div>
</body>
</html>
what I did was put div inside of div. I didn't know I could do so.
Any advices, highly happily appreciated.
Hiroki Kozai
[This message has been edited by Hiroki (edited 03-19-2003).]
[This message has been edited by Hiroki (edited 03-19-2003).]
[This message has been edited by Hiroki (edited 03-19-2003).]
|
Suho1004
Maniac (V) Inmate
From: Seoul, Korea
Insane since: Apr 2002
|
posted 03-19-2003 05:47
Yup, you can put divs inside of other divs... that's called nesting
Now, I don't want to confuse you or anything, but you don't need to use divs for every element. For example, you could just as easily make the "Hello, guys" div an <h1> heading, and then apply the styles to that. One step at a time, though. Now that you've got nesting down pat, I'm sure you're pretty excited about the possibilities.
One suggestion, though: try out your code in various browsers and see if it works. Make sure you're in line with the CSS specs. Then, if something doesn't work the way you think it should, you can ask a question about it here. But don't be afraid to play around with the code on your own for a while and see what you can come up with. That's really the best way to learn, I think. If you get stuck you can always ask for help here.
As for beer, it depends on how many I have--one beer (for some reason) usually makes it harder for me to sleep. If I have a few more it gets easier. Once you get up into the double digits, we're not really talking about sleeping anymore, we're talking about passing out. But that hasn't happened to me in quite a while...
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-19-2003 08:06
Hi, suho. Thanks for your reply. I have been working on CSS for quite a bit. It is really cool, isn't it? I am thinking of making web site, which I can sum up what I studied so far. Probably good idea to make sure I can code CSS well.
Actually I have been building my homepage for a couple of weeks. It has not been finished yet. All elements are held into table. I am going to change it using CSS as well.
Beer....I have just had a can of beer, Suho. I also love drinking beer with cooking dinner. It is one of the best relaxation. Do you agree?
Thanks for your advice. See ya.
Hiroki Kozai
|
Perfect Thunder
Paranoid (IV) Inmate
From: Milwaukee
Insane since: Oct 2001
|
posted 03-19-2003 09:26
Sounds to me like before you become a master web designer, you're going to die of alcohol poisoning!
By the way, Hiroki, is it correct to assume from your name that you speak Japanese? I have a Japanese vocabulary question that nobody's been able to answer for me.
|
Suho1004
Maniac (V) Inmate
From: Seoul, Korea
Insane since: Apr 2002
|
posted 03-19-2003 10:40
Yup. Beer is good. Just out of curiosity, though, what's your brand?
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-19-2003 10:56
Hi, Perfect Thunder, Hi, Suho. Wonderful to hear from you.
Yes, I can speak Japanese much better than English. How can I help you, PT?
Just tell me.
And Suho! Here New Zealand, there are so many kinds of beer. To my surprised, each local people seem to drink only thier local beer. Supermarket does't cover other place's beer. In my country I can buy anything at supermaket. Interesting.
My favorite is DB, Speights, Guines and so on. Guines is Irish beer. Other two are New Zeland beer produced by Sounth Island. I don't drink this much before. Now I can drink a lot.
All right. I am off to bed now. Have a good night. See you tomorrow. Wow, wow.
Hiroki Kozai
|
Perfect Thunder
Paranoid (IV) Inmate
From: Milwaukee
Insane since: Oct 2001
|
posted 03-19-2003 11:13
On maps, there is often a marker showing which way is north. On some maps, this marker is a complex decoration of its own, with many layers of arrows pointing in eight or sixteen directions. They look like this.
In English, we call it a "compass rose," because it sort of looks like a flower.
What's it called in Japanese?
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-19-2003 21:43
Hi, PT. Good morning. How are you? Well, I never thought of the name of it. But anyway I found out. It is called RASHINZU. It is for voyage, isn't it?
This site is my compass rose to wonder around web world.
Have a good day. See ya.
Ps. Actually this is my first time to answer something on this site. It has nothing to do web but still feel good to help. Any further question, no worries.
Hiroki Kozai
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-19-2003 23:17
Hi, guys. Good morning, again. How are you?
Well, I have been building my css review site. Just small question. I made two colums setting parallel. I got white space between them. I wanted to get rid of it. My code is following.
quote:
<style type="text/css">
.css1
{
background: #11dd33;
width: 25%;
height: 100%;
position: absolute;
top: 0%;
left: 0%;
padding-top: 20px;
padding-left: 20px;
border-right: 10px solid black;
}
.css2
{
background: #556677;
width: 60%;
height: 100%;
float:right;
position: absolute;
top: 0%;
left: 24%;
padding: 20px 10px 10px 30px;
}
</style>
I set first colum like you see. The width is 25%. I set second colum top: 0% left:25%. I thought those two colums will be next to each other without any white space. When I found white space, I thought margin is causing that problem. I set it like margin: 0px; but it didn't work. Then I finally got it changed like above. But is that right way? Feel like wrong or there may be better way to set two columns put together.
Thanks in advance. Any advices will be my honor.
Hiroki Kozai
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-19-2003 23:40
Wow, I figured it out! There was an answer at http://www.glish.com/css/2.asp . float. It is cool. If I want to set colums without any white space, float will get rid of it. If I want to use white space between colums, just set border white and set width, I reckon. Do you agree, guys?
Ps. Beer made me sleep well last night. Did you have some too?
Hiroki Kozai
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-20-2003 01:30
Hi, guys. I have got a heavy problem. Please see my css following:
quote:
<style type="text/css">
body
{
background: #009999;
}
.css1
{
background: #00ffcc;
width: 25%;
height: 100%;
float:left;
padding-top: 20px;
padding-left:13px;
border-right: 2px solid #000099;
}
.css2
{
background: #66cccc;
width: 60%;
height: 100%;
float:left;
padding: 20px 10px 10px 30px;
border-right: 2px solid #000099;
}
.css3
{
background: 00ffcc;
float: left;
width: 15%;
height: 100%;
padding: 20px 10px 10px 20px;
}
.css4
{
background:#6666cc;
width: 95%;
padding: 5px 5px 5px 5px;
}
.css1, .css2, .css3, .css4
{
font-family: verdana,arial, sans-serif;
font-color: brown;
font-weitht: normal;
font-size: x-small;
}
</style>
Here is my senario. I set three colums parellel. .css1 is for right colum, .css2 is for middle colum and css3 is for right colum. I wrote heaps words in the middle colum. There are hardly any in right and left colum. Then I found that right and left colum background color didn't catch up with the middle one!!! It looks aweful. I am thinking of the way how to fix. But not yet. Would you please have a crew for me?
Now I am off to lunch now. See you soon.
Hiroki Kozai
|
Perfect Thunder
Paranoid (IV) Inmate
From: Milwaukee
Insane since: Oct 2001
|
posted 03-20-2003 02:56
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-20-2003 06:11
Hi, Perfect Thunder! Thank you for your help. I tried it but I am afraid it didn't work. Hmmm......I thougth it would work......Hmmm...
My code is following:
quote:
body
{
background: #009999;
height: 100%;
}
.css1
{
background: #00ffcc;
width: 25%;
float:left;
padding-top: 20px;
padding-left:13px;
border-right: 2px solid #000099;
}
.css2
{
background: #66cccc;
width: 60%;
float:left;
padding: 20px 10px 10px 30px;
border-right: 2px solid #000099;
}
.css3
{
background: 00ffcc;
float: left;
width: 15%;
padding: 20px 10px 10px 20px;
}
.css4
{
background:#0066aa;
width: 95%;
padding: 5px 5px 5px 5px;
}
.css1, .css2, .css3, .css4
{
font-family: verdana,arial, sans-serif;
font-color: brown;
font-weitht: normal;
font-size: x-small;
}
Hiroki Kozai
|
Perfect Thunder
Paranoid (IV) Inmate
From: Milwaukee
Insane since: Oct 2001
|
posted 03-20-2003 07:48
Hmm, I thought it would work too! I'm about to go play chess at the local bar, but when I get back, I'll try playing with your CSS to find a solution.
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-20-2003 08:48
Wow, you play chess! I want to learn how to play it. In my country, there are simillar game. Play chess having a beer, right? Good on you. See ya, PT. Have fun.
ps. Tonight I had a glass of wine. My family makes beatiful wine. In vineyard, grapes are just turing themselves ready to be picked up. Great to see them, actually.
Hiroki Kozai
|
Perfect Thunder
Paranoid (IV) Inmate
From: Milwaukee
Insane since: Oct 2001
|
posted 03-20-2003 12:18
Ah, now I remember how this works. In CSS, a containing object is at least as big as the object inside it. So if you want the left and right column to be as tall as the middle column, find a way to put the middle column DIV inside the other two. It sounds weird, but it should work.
If I remember right, I did something similar for this layout. Look at the HTML and CSS if you'd like, but watch out -- even though I wrote it as simply as I could, it's complicated.
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-20-2003 21:53
Hi, PT. Good morning. How was last night? Did you have good time playing chess and having a beer? Well, thanks for your reply. I have jsut saw your site that made me impressed. Now just five minutes to have OS class. So I will read them later. Have a good day. Really wonderful to hear from you. See you later.
Hiroki Kozai
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-21-2003 01:30
Off to lunch now. Hungry...
Cannot work on CSS druring day because I have 4 classes. Bloody Friday...But still good to know
Hiroki Kozai
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-22-2003 01:34
Reading, reading, reading, w3org specification. anyway, have a good weekend.
Hiroki Kozai
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-22-2003 08:48
Hmm....I have been reading and sleeing continuously. ID. ID. ID. CLASS CLASS CLASS.
Let me ask you something.
I jsut read this: [url]http://faq.ozoneasylum.com/FaqWiki/shownode.php?id=1045&sortby=rating[/rul].
What is the difference between making another special class and using ID? My understanding is that ID is used to difine something special for each element. But I think I can do same thing making another very special class. Am I wrong, or need to make myself more clear?
Any advices, welcome.
Hiroki Kozai
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-23-2003 05:50
Hi, guys. Would you plesae go to site review. I made my first attempt. Cheers.
Hiroki Kozai
|
Slime
Lunatic (VI) Mad Scientist
From: Massachusetts, USA
Insane since: Mar 2000
|
posted 03-23-2003 06:40
You're right; there's nothing an ID can do that a separate class can't do (until you start working with scripting). The difference is in the *meaning*.
Consider, are you labelling the element as a specific thing, or as a *class* of things?
Some examples:
specific thing: "my favorite food"
class of things: "good food"
specific thing: "example #3"
class of things: "example"
specific thing: "my web page"
class of things: "web page"
specific thing: "Windows 98"
class of things: "operating system"
If you're labelling an element as a specific thing (for instance, "sidebar", or "content area", or "main heading"), use an ID. If you're labelling it as a single instance of a class of things (for instance, "code example", "invisible", or "thumbnail image"), define a class that you can reuse later on for other instances of the same class.
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-23-2003 10:06
Thanks a lot. Your example are really good one, I reckon. And I am pleased to hear what I meant was right.
Slime, thanks for being my company. I love that more than nothing at the moment. Sorry as much as I love beer.
By the way, have you seen this my web site: http://www32.brinkster.com/sanukiudon/html/csstemplate5.htm .
I made this wihtout inline format. Just using CSS. Please have a look and give me your opinion.
Cheers,
Hiroki Kozai
[This message has been edited by Hiroki (edited 03-23-2003).]
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-25-2003 08:45
Hi, guys. I am feeling much better now. It was terrible flu actually. Well, now I am all right.
By the way, I have been studying only CSS for a couple of weeks. CSS seems to be sank into myself quite a bit ( at least more than before). Now I am working on my CSS sumary site like you know above. I just wanted to declare that I will move on to Javascript and XML next. Then I want to study PHP as well.
I really want to be able to creat rich Dymanic web site. Hope you will be with me like you have been. Any advices for that will be great.
All right. See you later.
Hiroki Kozai
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-26-2003 01:37
Just small but important question.
Pseudo-class...
I think I can do like this:
quote:
a {
font-size: 10pt;
}
:link {
color: blue;
}
:visited {
color: red;
}
I read a lot of tutorial and w3c css1 specification as well. But some people said to me that I cannot omit a in front of peudo classes. What do you think?
Hiroki Kozai
|
DL-44
Maniac (V) Inmate
From: under the bed
Insane since: Feb 2000
|
posted 03-26-2003 02:44
I'm actually unclear on that issue myself - have seen it done that way, but I always inlcude the a. Anyone have relevant info on that?
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-26-2003 03:30
Hi, DL! Thanks your reply. Anyway, it won't be big problem if I put a[, will it. By the way, I got another question here. I am trying to creat drop cap effect using pseudo-element. My code is below:
quote:
<style type="text/css">
p {font-size: 12pt; line-height: 12pt}
p:first-letter{font-size: 300%; float: left; color: red;}
p:first-line {color: blue;}
span {text-transform: uppercase}
</style>
As you expect (probably), I am not happy about the result. Becasue the first letter gets bigger and interfere with second line!!! How to solve this?
Hiroki Kozai
[This message has been edited by Hiroki (edited 03-26-2003).]
|
DL-44
Maniac (V) Inmate
From: under the bed
Insane since: Feb 2000
|
posted 03-26-2003 03:51
{{edit - Ooops...misread that. I am confused over what you want.
The idea behind what you;ve done there is for the letter to do exactly what you've described....
[This message has been edited by DL-44 (edited 03-26-2003).]
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-26-2003 06:33
Hi, DL. Thanks a lot. But I mean it was not what I expected. Becasue the first letter of the first line covered second line of the first letter. I don't want that. Is there way to solve it?
Hiroki Kozai
|
Steve
Maniac (V) Inmate
From: Boston, MA, USA
Insane since: Apr 2000
|
posted 03-26-2003 12:41
With regard to the anchor pseudoclass - all I know is that it didn't work for me on Mac IE 5 with the "a"s omitted. So be sure you put them in. Once I did that, the hover worked fine. I then found the gray unreadablem, but the effect worked!
With regard to the drop cap - please don't specify type intended for the web using "point" units - that's for print. Use px if you must, or em if you are adventerous. Using percent the way you did for the first character is fine too. I don't believe I know why the enlarged first letter covers up the line below it. What's up with that "span"? At a quick glance that looks out of place.
|
DL-44
Maniac (V) Inmate
From: under the bed
Insane since: Feb 2000
|
posted 03-26-2003 18:15
Hm, hadn't noticed the 'pt' in their - good call Steve.
I also see no need at all for the span deal to be in there - if you want the first letter capitalized, just type it that way in the first place
Not sure why it's not working properly. Try getting rid of the 'pt' measurements and the span though for starters.
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-26-2003 21:50
Hi, Steve. Hi, DL. Thanks for your reply. I will try them.
Well, I am finally feel all right. I have been sick since last weekend. Today I will work hard to make my css site.
see ya.
Hiroki Kozai
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-27-2003 03:17
Hi, guys. I have a question. Hmm...My question is getting difficult, isn't it?
Well, here is quote:
quote:
Pseudo-class can be used in contextual selectors;
a: link img {border: solid blue} from w3c css1 spec
What I am trying to do is to make img link with border, which color will change like dependent on the mouse action: link, visited, hover and active.
What I have got so far is below:
quote:
<html>
<head>
<title>img as link</title>
<style type="text/css">
a:link img {border: solid blue;}
a:visited img {border: solid red;}
a:hover img{border: solid yellow;}
a:active img{border: solid black;}
</style>
</head>
<body>
<p>
You can also use an image as a link:
<a href="pseudoclass.htm">
<img src="../images/button.gif">
</a>
</p>
</body>
</html>
But it seems not working. Especially hover effect doesn't work at all. Do you know any solution or way to do so?
Hiroki Kozai
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 03-28-2003 07:09
This thread has been quite big one, hasn't it?
Well, I have got damn silly queistion. Please see my code:
quote:
<html>
<head>
<style type="text/css">
em {
background: #cc9;
font-family: verdana, sans-serif;
font-size: x-small;
margin: 0;
border: solid black 2px;
}
</style>
</head>
<body>
<p>Hello, this is <em>interesting</em>, isn't it?</p>
</body>
</html>
Why border doesn't come up around my emphasized element???? It has been hell to figure out this easy problem. Help....wow, wow...
Hiroki Kozai
|
Steve
Maniac (V) Inmate
From: Boston, MA, USA
Insane since: Apr 2000
|
posted 03-28-2003 12:26
I have no idea why it doesn't work for you. I copied and pasted your code into a new document and t worked fine.
Do you ever run your style code through a validator? I ran your "em" code through this one:
http://jigsaw.w3.org/css-validator/validator-text.html
and all I got was a warning about there being no background specified, which in effect means it should work fine. Validators are good tools. The can be cryptic at times, but they can also save you a lot of work, and help preserve the number of hairs on your head.
The validator doesn't care for your sparse html, so I'd stick to just pasting in the css rules instead of trying to validate the whole html document.
[This message has been edited by Steve (edited 03-28-2003).]
|
Veneficuz
Paranoid (IV) Inmate
From: A graveyard of dreams
Insane since: Mar 2001
|
posted 03-28-2003 12:54
It worked for me as well when I used Opera or Mozilla, but it didn't work in IE. So it might just be little IE bug...
_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"
|
