[EDIT2]How to divide a div in..[done, now further..]

January 13th, 2009, 1:36 am

How do I divide a div, with assigned id, that's 780px long and 23px high in three equal parts, with CSS, so that in the left part there is text to the left, in the middle part, there's centered text, and in the right part, there's text to the right? oh, and the whole div is also centered plus the left and right text is <a href>-ed.

And, also, for example, if that div is INSIDE a page container div. However, is page container necessary? Won't it work the same way if there's two div-s, one under another, like, box1 and box2 for example.

Also, can I give a div a 1px #000000 solid border?

Sorry for asking so much.. the first question is most important anyway.

January 14th, 2009, 1:20 pm

hmmm. you can make three new divs inside your div - float them all to the left, make them appropriate widths/ heights and fill them with appropriate text. You don't even have to make divs though (I always do, but honestly couldn't tell you why). You can just make paragraphs of text, and then style them in the same way in which you'd style a div - like:

Code: [ Download ] [ Select ]

p { }

you href them in the html, like you would regularly. You don't necessarily need a container/ wrapper div, you can just have box under box under box, but I always like to have one wrapper just to keep a handle on things. that's just me though.

you can give the div a border through css - just like that -

Code: [ Download ] [ Select ]

#div {
border: 1px solid #000
}

1. #div {
2. border: 1px solid #000
3. }

[Bogey]

January 14th, 2009, 1:43 pm

if you just use

Code: [ Download ] [ Select ]

p { }

it would style EVERY paragraph in the document, and I'm not sure HKt0p5 would like that. Either give the paragraphs their own class or id

Code: [ Download ] [ Select ]

p.class { }
p#id { }

1. p.class { }
2. p#id { }

or put them in a div and style the p

Code: [ Download ] [ Select ]

#div p { }

or just simply style the div

Code: [ Download ] [ Select ]

#div { }

January 15th, 2009, 10:26 am

Of course, thanks! I'll make sure to try it later and even post the result because if it works out it'll be quite a leap ahead for me - successful moving on from tables to div-s! ^v^
I have one more question before that though. Since Bogey is right about the p, I'll need to use p id-s (classes are a total jungle to me), exactly in what order, and moreover how and where, do I setup this p's properties about the font colour (and the links a hover, active, visited, blah blah) IN the CSS and not the usual <style> thing that i used to put in the html in the head? I'd also ask for font face but I realized it seems to be not that necessary to define a font when you intend cross-browser/OS compatyness since I can never be sure if the font I define is available on a Mac, or that some user hasn't set up their own default font in their browser's options. Size would be good too, but again, I wonder.. So just colour.

Randomly, can there be such thing like a#id? ._.

[Bogey]

January 15th, 2009, 2:59 pm

Here... what you put in <style> would not change for the CSS file... all that would change is that you don't have to define the <style> and </style>. I mean you don't have to put those before and after the CSS.

About the paragraphs, if you want them to be in 3 seperate columns, you would probably use the float: left; available in CSS. After those, you will need to create a class or an ID clearing them (clear: both; to clear the floats.

If you want me to, I can post a simple example of what you are trying to do and you can go from there, but that would cripple your education of creating a CSS based site rather than a table based.

As for links, sure, you can do that. I do that with my sites as well, except I use classes for those rather then IDs. Because classes are... well, classes. More than one element on the page could have it, but if it's ID, your not supposed to have more than one of those present on a page... the browser renders it but your not supposed to put more than one of the same ID on one page. And I tend to re-use a style for links since there is a big possibility that there would be more than one link in that space that would need that style.

Code: [ Download ] [ Select ]

a.class {
 
}
 
a:active.class {
 
}
 
a:hover.class {
 
}
 
a:visited.class {
 
}

1. a.class {
2.  
3. }
4.  
5. a:active.class {
6.  
7. }
8.  
9. a:hover.class {
10.  
11. }
12.  
13. a:visited.class {
14.  
15. }

But if you want to use IDs even though, just replace .class with #id. (Just for clarity, an ID doesn't have to be a number )

font-size: well... font size
color: color of the text
text-align: left, center, or right (justify as well but some browsers don't do that )

January 15th, 2009, 3:12 pm

I'm trying to remake this page properly, not with tables, but div-s. You can check my source code, if it'll help. Right now I'm trying to write all that div stuff and everything but.. give me some more time to try, ok?

January 15th, 2009, 4:09 pm

I've been trying and trying but for some reason, the clear:both; doesn't clear anything. Please, Bogey, post an example so I can see how it's done to actually work.
It won't ruin my CSS learning that much since I'll try to figure it out ad then make one myself from scratch.

[Bogey]

January 15th, 2009, 9:28 pm

Here's how I would setup my CSS file (This is how I do it anyway). This example is for a width of 740px.

CSS Code: [ Download ] [ Select ]

* {
 margin: 0;
 padding: 0;
}
 
body {
 padding-top: 50px;
}
 
#container {
 width: 740px;
 margin: 0 auto;
 background-color: #cecece;
}
 
#container h1 {
 background-color: #aaa;
 color: #000;
 text-align: center;
}
 
#left {
 float: left;
 width: 90px;
 padding: 5px 5px 5px 5px;
 background-color: #cccccc;
}
 
#center {
 float: left;
 width: 530px;
 padding: 5px 5px 5px 5px;
 background-color: #eeeeee;
}
 
#right {
 float: left;
 width: 90px;
 padding: 5px 5px 5px 5px;
 background-color: #cccccc;
}
 
.clear {
 clear: both;
 text-align: center;
 font-size: 12px;
 color: #000000; /* Default color */
}

1. * {
2.  margin: 0;
3.  padding: 0;
4. }
5.  
6. body {
7.  padding-top: 50px;
8. }
9.  
10. #container {
11.  width: 740px;
12.  margin: 0 auto;
13.  background-color: #cecece;
14. }
15.  
16. #container h1 {
17.  background-color: #aaa;
18.  color: #000;
19.  text-align: center;
20. }
21.  
22. #left {
23.  float: left;
24.  width: 90px;
25.  padding: 5px 5px 5px 5px;
26.  background-color: #cccccc;
27. }
28.  
29. #center {
30.  float: left;
31.  width: 530px;
32.  padding: 5px 5px 5px 5px;
33.  background-color: #eeeeee;
34. }
35.  
36. #right {
37.  float: left;
38.  width: 90px;
39.  padding: 5px 5px 5px 5px;
40.  background-color: #cccccc;
41. }
42.  
43. .clear {
44.  clear: both;
45.  text-align: center;
46.  font-size: 12px;
47.  color: #000000; /* Default color */
48. }

And here is how I would setup my HTML file

HTML Code: [ Download ] [ Select ]

<html>
<head>
 <title>Document</title>
 <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<h1>Header</h1>
<div id="left">
 <p>Left text</p>
</div>
<div id="center">
 <p>Center text</p>
 <p>Center text</p>
 <p>Center text</p>
 <p>Center text</p>
 <p>Center text</p>
 <p>Center text</p>
</div>
<div id="right">
 <p>Right text</p>
</div>
<p class="clear">Footer</p>
</div>
</body>
</html>

1. <html>
2. <head>
3.  <title>Document</title>
4.  <link href="style.css" rel="stylesheet" type="text/css" />
5. </head>
6. <body>
7. <div id="container">
8. <h1>Header</h1>
9. <div id="left">
10.  <p>Left text</p>
11. </div>
12. <div id="center">
13.  <p>Center text</p>
14.  <p>Center text</p>
15.  <p>Center text</p>
16.  <p>Center text</p>
17.  <p>Center text</p>
18.  <p>Center text</p>
19. </div>
20. <div id="right">
21.  <p>Right text</p>
22. </div>
23. <p class="clear">Footer</p>
24. </div>
25. </body>
26. </html>

That is a simple three column layout... going off a little from your site.

January 16th, 2009, 9:21 am

Bogey, I love you! Haha. Thanks very much!!
The problem was that I actually couldn't figure out how exactly to "phrase" the markup for a class. Now looking at that and actually making the page with the CSS, the codes you showed me, I think I'm starting to get it.
So now I'm going to try remember what goes where and what depends on what and see what I can do with my stupid index following this "logic". Also, i want to experiment what'll happen if I stick a !DOCTYPE to it.

January 16th, 2009, 2:07 pm

Okay, here is the result.
http://hirasawa2032.com/atarashii_index.html

Bogey's code helped me a lot, but there were some parts I had to put like he had, for example, I didn't know how to make that #container h1 thingy some other way to keep the formatting. In the CSS, I played around with the a class thingy, and finally, when it worked, I'm happy I wrote that part entirely myself.

Anyhow, now.. for some reason, it doesn't display centered in IE. here are the codes, so any suggestion how to fix this is very very welcome!
HTML:

Code: [ Download ] [ Select ]

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=EUC-JP" />
<meta http-equiv="content-language" content="ja" />
<meta name="description" content="HIRASAWA KANKAKU - Unofficial side-project website presentation for Hirasawa Susumu including Hirasawa 3D Live, Transparent Sky animation featuring him, analysis of his work, detailed information and history of P-MODEL, MANDRAKE and related; HIRASAWA NATION videogame development and much more. By Taira." />
<meta name="robots" content="index,follow" />
<meta name="keyword" content="平沢進,Susumu Hirasawa,hirasawa susumu,hirazawa,平沢,進,平ら,Taira,Ｐ－モデル,transparent,sky,project,Transparent Sky Project,トランスパレントスカイ,「トランスパレントスカイ」,TESLAKITE,Interactive live,2032,インタラクティブ・ライブショウ,プロジェクト,プレゼンテーション,P-MODEL,Mandrake,マンドレイク,Global,Trotters,核P-MODEL,KAKU,hirasawa kankaku,平沢感覚,kankaku,感覚,平沢進3Dライブ,HIRASAWA NATION,videogame,平沢ネーション,平沢ネーションビデオゲーム,ヒラサワ,ヒラサワ・ネーション" />
<meta name="author" content="平沢感覚" />
<meta name="copyright" content="平沢進、平ら" />
<title>平沢進「トランスパレントスカイ」2032プロジェクト</title>
<link rel="shortcut icon" href="http://www.hirasawa2032.com/favicon.ico" />
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div id="container">
<h1><img src="img/pi-duaicylinder.gif" alt="pi-duaiシリンダー"><img src="img/top.gif"></h1>
<div id="hidari">
<p><a class="nihongo" href="#">日本語</a></p>
</div>
<div id="mannaka">
<p>Copyright (C)1987-2008 平沢進、平ら</p>
</div>
<div id="migi">
<p><a class="eigo" href="#">English</a></p>
</div>
<p class="counter"><img src="/cgi-sys/Count.cgi?df=hirasawa.dat|display=Counter|ft=1|md=8|frgb=0;0;0|dd=G"></p>
</div>
</body>
</html>

1. <html>
2. <head>
3. <meta http-equiv="content-type" content="text/html; charset=EUC-JP" />
4. <meta http-equiv="content-language" content="ja" />
5. <meta name="description" content="HIRASAWA KANKAKU - Unofficial side-project website presentation for Hirasawa Susumu including Hirasawa 3D Live, Transparent Sky animation featuring him, analysis of his work, detailed information and history of P-MODEL, MANDRAKE and related; HIRASAWA NATION videogame development and much more. By Taira." />
6. <meta name="robots" content="index,follow" />
7. <meta name="keyword" content="平沢進,Susumu Hirasawa,hirasawa susumu,hirazawa,平沢,進,平ら,Taira,Ｐ－モデル,transparent,sky,project,Transparent Sky Project,トランスパレントスカイ,「トランスパレントスカイ」,TESLAKITE,Interactive live,2032,インタラクティブ・ライブショウ,プロジェクト,プレゼンテーション,P-MODEL,Mandrake,マンドレイク,Global,Trotters,核P-MODEL,KAKU,hirasawa kankaku,平沢感覚,kankaku,感覚,平沢進3Dライブ,HIRASAWA NATION,videogame,平沢ネーション,平沢ネーションビデオゲーム,ヒラサワ,ヒラサワ・ネーション" />
8. <meta name="author" content="平沢感覚" />
9. <meta name="copyright" content="平沢進、平ら" />
10. <title>平沢進「トランスパレントスカイ」2032プロジェクト</title>
11. <link rel="shortcut icon" href="http://www.hirasawa2032.com/favicon.ico" />
12. <link rel="stylesheet" href="index.css" />
13. </head>
14. <body>
15. <div id="container">
16. <h1><img src="img/pi-duaicylinder.gif" alt="pi-duaiシリンダー"><img src="img/top.gif"></h1>
17. <div id="hidari">
18. <p><a class="nihongo" href="#">日本語</a></p>
19. </div>
20. <div id="mannaka">
21. <p>Copyright (C)1987-2008 平沢進、平ら</p>
22. </div>
23. <div id="migi">
24. <p><a class="eigo" href="#">English</a></p>
25. </div>
26. <p class="counter"><img src="/cgi-sys/Count.cgi?df=hirasawa.dat|display=Counter|ft=1|md=8|frgb=0;0;0|dd=G"></p>
27. </div>
28. </body>
29. </html>

Ignore that for links I put only #, that's just for now until I manage to keep it centered in all browsers.

CSS:

Code: [ Download ] [ Select ]

*{
margin: 0;
padding: 0;
}
body { font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3";
padding-top: 35px;
background:#333333;
}
 
a.nihongo:link
{
text-decoration:none;
font-weight:bold;
font-size: 14px;
color:#ffffff;
}
a.nihongo:visited
{
text-decoration:none;
font-weight:bold;
font-size: 14px;
color:#ffffff;
}
a.nihongo:active
{
text-decoration:none;
font-weight:bold;
font-size: 14px;
color:#ffffff;
}
a.nihongo:hover
{
text-decoration:underline overline;
font-weight:bold;
font-size: 14px;
color:#ffffff;
}
 
a.eigo:link
{
text-decoration:none;
font-size: 14px;
color:#ffffff;
}
a.eigo:visited
{
text-decoration:none;
font-size: 14px;
color:#ffffff;
}
a.eigo:active
{
text-decoration:none;
font-size: 14px;
color:#ffffff;
}
a.eigo:hover
{
text-decoration:underline overline;
font-size: 14px;
color:#ffffff;
}
 
#container {
width: 782px;
height: 373px;
margin: 0 auto;
background-color: #333333;
}
 
#container h1 {
background-color: #666666;
border: 1px solid #000;
}
 
#hidari {
float: left;
width: 220px;
padding: 5px 5px 5px 5px;
background-color: #000000;
}
 
#mannaka {
float: left;
text-align: center;
width: 312px;
padding: 5px 5px 5px 5px;
background-color: #000000;
font-size: 14px;
color: #666666;
}
 
#migi {
float: left;
text-align: right;
width: 220px;
padding: 5px 5px 5px 5px;
background-color: #000000;
}
 
.counter {
clear: both;
text-align: center;
background-color: #333333;
}

1. *{
2. margin: 0;
3. padding: 0;
4. }
5. body { font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3";
6. padding-top: 35px;
7. background:#333333;
8. }
9.  
10. a.nihongo:link
11. {
12. text-decoration:none;
13. font-weight:bold;
14. font-size: 14px;
15. color:#ffffff;
16. }
17. a.nihongo:visited
18. {
19. text-decoration:none;
20. font-weight:bold;
21. font-size: 14px;
22. color:#ffffff;
23. }
24. a.nihongo:active
25. {
26. text-decoration:none;
27. font-weight:bold;
28. font-size: 14px;
29. color:#ffffff;
30. }
31. a.nihongo:hover
32. {
33. text-decoration:underline overline;
34. font-weight:bold;
35. font-size: 14px;
36. color:#ffffff;
37. }
38.  
39. a.eigo:link
40. {
41. text-decoration:none;
42. font-size: 14px;
43. color:#ffffff;
44. }
45. a.eigo:visited
46. {
47. text-decoration:none;
48. font-size: 14px;
49. color:#ffffff;
50. }
51. a.eigo:active
52. {
53. text-decoration:none;
54. font-size: 14px;
55. color:#ffffff;
56. }
57. a.eigo:hover
58. {
59. text-decoration:underline overline;
60. font-size: 14px;
61. color:#ffffff;
62. }
63.  
64. #container {
65. width: 782px;
66. height: 373px;
67. margin: 0 auto;
68. background-color: #333333;
69. }
70.  
71. #container h1 {
72. background-color: #666666;
73. border: 1px solid #000;
74. }
75.  
76. #hidari {
77. float: left;
78. width: 220px;
79. padding: 5px 5px 5px 5px;
80. background-color: #000000;
81. }
82.  
83. #mannaka {
84. float: left;
85. text-align: center;
86. width: 312px;
87. padding: 5px 5px 5px 5px;
88. background-color: #000000;
89. font-size: 14px;
90. color: #666666;
91. }
92.  
93. #migi {
94. float: left;
95. text-align: right;
96. width: 220px;
97. padding: 5px 5px 5px 5px;
98. background-color: #000000;
99. }
100.  
101. .counter {
102. clear: both;
103. text-align: center;
104. background-color: #333333;
105. }

And one more little thing, in Safari, my counter doesn't display properly. Check it with Safari to see what it says. Any ideas why that happens?

[Bogey]

January 16th, 2009, 5:17 pm

I don't know why it doesn't center in IE. All of my sites that are centered, and divided, I use the same technique as I provided here... but I don't know why it's doing that... I have tried quite a few things and none of them worked. I gotta go now so when I leave, I'll provide more input to this.

January 16th, 2009, 6:05 pm

Wait, Bogey! I figured it.. I think. Although I know very well this is definately NOT the way, for now I think this works (at least on my IE 7):

Code: [ Download ] [ Select ]

<!--[if lt IE 7]><div align="center"><style type="text/css">
#hidari {text-align: left; width: 220px;}
#migi {text-align: right;width: 250px;}</style><![endif]-->
<!--[if gte  IE 7]><div align="center"><style type="text/css">
#hidari {text-align: left;width: 220px;}
#migi {text-align: right;width: 250px;}</style><![endif]-->

1. <!--[if lt IE 7]><div align="center"><style type="text/css">
2. #hidari {text-align: left; width: 220px;}
3. #migi {text-align: right;width: 250px;}</style><![endif]-->
4. <!--[if gte  IE 7]><div align="center"><style type="text/css">
5. #hidari {text-align: left;width: 220px;}
6. #migi {text-align: right;width: 250px;}</style><![endif]-->

See where I changed the property for the width, since on Firefox, for example, the normal width is rendered properly but on IE, it seems it needed more pixels to fit. Also, I added my everlasting deprecated, haha, favourite <div align="center"> and it DID center but then I had to additionally define in #hidari, that is, the left (in Japanese) that the text ALSO has to be the left (initially it put the text in the center of #hidari).
Here, I uploaded one with this small change, feel free to compare the two.
http://hirasawa2032.com/atarashii_index.html
http://hirasawa2032.com/index_with_ifs.html

I read a lot about that actually this is some bug or something in IE with floating divs and remembered the if-things I fought a lot on phppBB3 and XOOPS so I thought I might try it. I also thought about absolute positioning but then, how would I know where to position the thing so it's in the center of someone's.. say, 50-inch monitor for example.

[Bogey]

January 16th, 2009, 9:18 pm

Well, both of them work perfectly in Firefox, but in IE the second one is the only one that is centered.

But I think that IE8 is deprecating the IFs thing... I think they are removing them because they don't want you messing with the IFs... they want it way harder on you

January 17th, 2009, 12:39 am

Yes, the second one is the one with the if-s. But then.. honestly, I don't think that many people use IE, especially, wow, 8. Another thing is that my site is a bit biased - I mean, targeted mostly at Japanese audience who are mostly on Macs, or the few on Windows honestly prefer Firefox or Opera.
Although for now, is it OK to leave it like that, and continue on with my next pages?

[Bogey]

January 17th, 2009, 9:35 am

Its, it's ok, since I'm sure that the error is an CSS error and since all of the pages use one CSS, if you fix one page then you fix all of them at once... unless I'm wrong and this is actually an HTML error, you can go ahead and work on your other pages.

Also, I would suggest to go for XHTML Valid site... just look through the validator at W3 and see the errors you get.. they're not biggie errors and are easily fixed. Such as the ALT attribute to images.