かずばんBBS

今までのBBS、Spamが多いので新しくしてみました。
特に話題は特定していません、お気軽に投稿してください

5軸の話題はこちらで・・
490 / 524     ←次へ | 前へ→

【float:left】
 かずばん  - 12/5/7(月) 13:17 -
【float:left】

思ったようにレイアウトするのは難しい
以前は、<table>要素を使ってレイアウトしたりしていましたが
デフォルトではボーダー線がでたり
隣とスペースが開いたり修正している内にずれてしまったり・・・
実際、tableは表作成が目的なので、それをレイアウトに使うのはどうなの?
という考えもあります
ネットでHPテンプレートなどを探して調べてみると<div>を使っている例が多いです
<div>はブロック要素で囲まれた範囲をひと固まりとして扱うとの事なので
なるほど、レイアウトにはいいのでしょうね
通常ホームページのレイアウトは、「タイトル・ヘッダ」「内容」「フッタ」で構成して
「内容」の部分を1〜3に区切るのが一般的なようです
その各々を、<div>でひと固まりにすればいいと言う事です
そこで、3列のレイアウトを作ってみる
横幅:900px、左:200p、中央:500px、右:200px
これをスタイルシートで明記して、<div>で囲ってみる

http://www.geocities.jp/sako_sho_kei/test/index001.html

う〜ん、だめだぁ・・
幅は指定したようになるけど、レイアウトは、ただ、縦に列挙されるだけ!


/*************************************************/
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
body{
width:900px;
text-align:center;
}
/* ------------------------------
Hedder
------------------------------ */
.headder{
color:white;
background-color: blue;
}
.headder h1{
font-size:30pt;
text-align:center;
}
.headder h2{
color:skyblue;
font-size:12pt;
text-align:right;
padding-right:40px;
margin-top:35px;
margin-bottom:0.0em;
}
/* ------------------------------
left
------------------------------ */
.left{
width:200px;
background:red;
}
.left a{
width:200px;
}
.left a:hover{
background:blue;
color:white;
}
/* ------------------------------
center
------------------------------ */
.center{
width:500px;
background:yellow;
}
/* ------------------------------
right
------------------------------ */
.right{
width:200px;
background:gray;
color:black;
}
*/------------------------------ */
-->
</style>
</head>

<!-- HTML ------------------->
<body>
<div class="headder">
<h1>TEST_Page</h1>
<h2>by kazuban</h2>
</div>
<div class="left">
<a hlef="#">Page01</a>
<a hlef="#">Page02</a>
<a hlef="#">Page03</a>
<a hlef="#">Page04</a>
</div>
<div class="center">
<h1>内容</h1>
 <p>hogehoge hogehoge</p>
 <p>hogehoge hogehoge</p>
 <p>hogehoge hogehoge</p>
 <p>hogehoge hogehoge</p>
</div>
<div class="right">
<h1>link</h1>
 <a href="#">link01</a>
 <a href="#">link02</a>
</div>
</body>
</html>

引用なし

パスワード


<Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB7.3; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CL...@aa2006021391d2c49af2.userreverse.dion.ne.jp>
・ツリー全体表示

HTML & CSS 覚書 かずばん 12/5/7(月) 10:40
【float:left】 かずばん 12/5/7(月) 13:17
Re:【float:left】 かずばん 12/5/7(月) 13:25
【a a:hover】 かずばん 12/5/8(火) 9:56

490 / 524     ←次へ | 前へ→
 22305
ページ:  ┃  記事番号:  

C-BOARD Moyuku v1.03b5