スポンサーサイト

一定期間更新がないため広告を表示しています

at , スポンサードリンク, -

-, -, - -

BOX 高さ揃えしていると、ページ内ジャンプタグで表示がおかしくなるよ!

float: left;を使ってBOXで横並べした時、下記のようになり、揃えたいと思いますよね。

サンプルソース
-----------------------------------------------------
<head>
  <title>test</title>
  <style type="text/css">
    <!--
      div#box {
        width: 400px;
        margin: 0 auto;
      }
      div#box_left {
        width: 200px;
        background: red;
        float: left;
      }
      div#box_right {
        width: 200px;
        background: blue;
        float: left;
      }
    -->
  </style>
</head>
<body>
  <div id="box">
    <div id="box_left">
      <p>テキスト1-1</p>
      <p>テキスト1-2</p>
    </div><!--box_left-->
    <div id="box_right">
      <p>テキスト2-1</p>
      <p>テキスト2-2</p>
      <p>テキスト2-3</p>
      <p>テキスト2-4</p>
      <p>テキスト2-5</p>
      <p>テキスト2-6</p>
      <p>テキスト2-7</p>
      <p>テキスト2-8</p>
    </div><!--box_right-->
  </div><!--box-->
</body>
</html>
-----------------------------------------------------
下記のように揃えることが出来ます。

揃える方法は、下記サンプルの赤字部分を追加しています。

サンプルソース
-----------------------------------------------------
<head>
  <title>test</title>
  <style type="text/css">
    <!--
      div#box {
        width: 400px;
        margin: 0 auto;
        overflow: hidden;
      }
      div#box_left {
        width: 200px;
        background: red;
        float: left;
        margin-bottom: -32768px;
        padding-bottom: 32768px;
      }
      div#box_right {
        width: 200px;
        background: blue;
        float: left;
      }
    -->
  </style>
</head>
<body>
  <div id="box">
    <div id="box_left">
      <p>テキスト1-1</p>
      <p>テキスト1-2</p>
    </div><!--box_left-->
    <div id="box_right">
      <p>テキスト2-1</p>
      <p>テキスト2-2</p>
      <p>テキスト2-3</p>
      <p>テキスト2-4</p>
      <p>テキスト2-5</p>
      <p>テキスト2-6</p>
      <p>テキスト2-7</p>
      <p>テキスト2-8</p>
    </div><!--box_right-->
  </div><!--box-->
</body>
</html>
-----------------------------------------------------
そこで、<a name="〜"> タグでページ内ジャンプを追加しました。


下記サンプルソースの赤字部分を追加しました。

サンプルソース
-----------------------------------------------------
<head>
  <title>test</title>
  <style type="text/css">
    <!--
      div#box {
        width: 400px;
        margin: 0 auto;
        overflow: hidden;
      }
      div#box_left {
        width: 200px;
        background: red;
        float: left;
        margin-bottom: -32768px;
        padding-bottom: 32768px;
      }
      div#box_right {
        width: 200px;
        background: blue;
        float: left;
      }
    -->
  </style>
</head>
<body>
  <a href="#2-5">2-5へジャンプ</a>
  <div id="box">
    <div id="box_left">
      <p>テキスト1-1</p>
      <p>テキスト1-2</p>
    </div><!--box_left-->
    <div id="box_right">
      <p>テキスト2-1</p>
      <p>テキスト2-2</p>
      <p>テキスト2-3</p>
      <p>テキスト2-4</p>
      <p><a name="2-5">テキスト2-5</a></p>
      <p>テキスト2-6</p>
      <p>テキスト2-7</p>
      <p>テキスト2-8</p>
    </div><!--box_right-->
  </div><!--box-->
</body>
</html>
-----------------------------------------------------
リンクをクリックしたら、画面が変な状態になりました。
テキスト2−5が上に表示されたのですが、スクロールバーがなく、テキスト2−4などが表示されなくなりました。


ではどうしたら治るのか?
色々実験していて、問題を見つけました。
これで治りました。ちゃんとスクロールバーも下の方にあり、上にスクロールすることが出来ます。

下記サンプルの赤字部分を消すことにより治ります。
原因は、overflow: hidden を指定することにより、ジャンプした先を基準に表示してしまうようで、上の部分は、座標がマイナス部分に存在しているみたいです。スクロールが出来ないよ!
主要ブラウザー全てで発生します。

サンプルソース
-----------------------------------------------------
<head>
  <title>test</title>
  <style type="text/css">
    <!--
      div#box {
        width: 400px;
        margin: 0 auto;
        /* overflow: hidden; */
      }
      div#box_left {
        width: 200px;
        background: red;
        float: left;
        margin-bottom: -32768px;
        padding-bottom: 32768px;
      }
      div#box_right {
        width: 200px;
        background: blue;
        float: left;
      }
    -->
  </style>
</head>
<body>
  <a href="#2-5">2-5へジャンプ</a>
  <div id="box">
    <div id="box_left">
      <p>テキスト1-1</p>
      <p>テキスト1-2</p>
    </div><!--box_left-->
    <div id="box_right">
      <p>テキスト2-1</p>
      <p>テキスト2-2</p>
      <p>テキスト2-3</p>
      <p>テキスト2-4</p>
      <p><a name="2-5">テキスト2-5</a></p>
      <p>テキスト2-6</p>
      <p>テキスト2-7</p>
      <p>テキスト2-8</p>
    </div><!--box_right-->
  </div><!--box-->
</body>
</html>
-----------------------------------------------------
pr:今年の夏は、省エネ対策を!売れてます!接触冷感ひんやりタッチ + アウトラスト(R)使用 快適快眠クール敷パッド

at 15:41, tom7650, ホームぺージ

comments(0), trackbacks(0), - -

ファビコンをphotoshop elements 9 で作りたい!


elements 9 でホームページのアイコン『ファビコン』を作ろうと思いました。
しかし、標準では作る事が出来ません。
色々ぐぐっていると photoshop 用でプラグインがあることが分かりました。
elementsでも使えるそうで、下記アドレスよりダウンロードしました。
 http://www.telegraphics.com.au/sw/product/ICOFormat#icoformat
しかし、インストール方法がelements用で説明がない、ググっても無い!
どうしたらいいの?
色々調べてようやく分かりました。

編集>環境設定>プラグイン を選択


追加プラグインフォルダーのチェックをし、フォルダーを指定して下さい。フォルダーは存在するフォルダーで、無ければ作って下さい。わかりやすいフォルダー名にしておきましょう。
photoshop
設定は、これで完了なので、photoshop elements を再起動して下さい。

インストールされているか確認は、
ヘルプ>プラグインについて のところでICOが入っているか確認して下さい。



インストールできていたら、ファイルのダイアログに、ICOが選択できるようになっています。



これで作成出来るようになったのですが、ここで問題が・・・・
アイコンは、16×16,32×32,48×48のサイズを一個のファイルに入れる事が出来るはずなのだが、このプラグインはどう見ても出来そうにないです。何か方法があるのか分かりません。
と言うことで、photoshop elements 9で作るのは諦めて違う方法を考えました。
ググっていると便利なサイトを見つけました。
http://ao-system.net/favicon/
こちらのサイトで3サイズのアイコンが作成出来ます!
便利ですね!
photoshop elements 9でGIFファイルを3サイズ作ってアップすればOK、ダウンロードすればアイコンファイルが出来てます!

あとは、設置方法です。
htmlファイルのHEAD内に下記記述を入れるだけ!
<link rel="shortcut icon" href="http://www.アドレス/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="icon" href="http://www.アドレス/favicon.ico" type="image/vnd.microsoft.icon">

ファビコン作っていないサイトが結構あるので、是非アイコンを付けましょう!
ブログでも付けれるのかな?・・・





ドロップシッピング関連ブログ一覧
人気ブログランキングへ

at 16:31, tom7650, ホームぺージ

comments(1), trackbacks(0), - -

FirFox で box が中央寄せ出来ないよ!

JUGEMテーマ:HTML,XHTML、CSS

前回はIEで上手くいかなかったのですが、今回はFirfoxで上手くいかない問題にぶち当たりました。
左右余白あるサイズでboxを指定し、text-align:center で中央寄せしようとしたらどうしても左寄せになります。
文法の間違いか確認したけど問題無さそうです。IEで確認すると正しく表示される。



サンプルソース
-------------------------------------------------------------------
<html>
  <head>
    <style>
      body{
        width:200px;
        text-align:center;
      }
      .box{
        width:100px;
        border-style:solid;
      }
    </style>
  </head>
  <body>
    <div class="box">
テストテストテストテストテストテストテストテストテストテスト
    </div>
  </body>
</html>
-------------------------------------------------------------------

色々調べた結果、下記パラメータを追加すれば中央寄せ出来るようになりました。(微妙に中央じゃないんだけど たぶんbodyのwidth:200pxが効いてるからでしょう)



body{
  width:200px;
  text-align:center;
  margin:auto;        ←この行を追加する
}

人気ブログランキングへ

at 13:03, tom7650, ホームぺージ

comments(0), trackbacks(0), - -

ie box float で閉じた時に前の文字が表示される!バグってるよ!

JUGEMテーマ:HTML,XHTML、CSS



サンプルソース
-----------------------------------------------------------------<html>
<head>
  <title>test</title>
  <style type="text/css">
    <!--
      div#box {
        width:600px;
      }
      div#float_box {
        width:200px;
        float:left;
      }
    -->
  </style>
</head>
<body>
  <div id="box">
    <div id="float_box">
      <p>テキスト1</p>
    </div><!--float_box-->
    <div id="float_box"> 
      <p>テキスト2</p> 
    </div><!--float_box-->
    <div id="float_box"> 
      <p>テキスト3</p> 
    </div><!--float_box-->
  </div><!--box-->
</body>
</html>
-----------------------------------------------------------------
こういう感じで作ってみると、box閉じたところで、最後の文字「ト3」が勝手に付いてしまいます。
なぜ?
Explorer 6 Duplicate Characters Bug と言うバグで、前から改善されていないようですね。

バグが起こる原因は下記条件です。
float使っている子要素と子要素の間にコメントが2つ以上あり、子要素のwidthの合計>親要素のwidth - 3px 未満の時、起こるそうです。

では、解決させるにはどうすればよいか?
1.子要素のコメントを消す。(構造が複雑になる場合コメント入れたいですよね。消すなんて・・・)
2.親要素の幅を600pxから603pxに変更する。(レイアウトきっちり作ってると増やせないですよね)
3.子要素の合計幅を3px以上減らす。サンプルの場合は3個あるので200pxから199pxにすれば良いです。(これもレイアウトの関係で減らせない場合あるよね。)

と言うことで、バグを直してもらうのが一番だけど、IE6から8まで発生しているので、直ったとしても世の中にバグのIEがあるって事は、上記3種類のどれかで対応しておかないと皆さんがページを正しく表示されないですね!

人気ブログランキングへ

at 09:00, tom7650, ホームぺージ

comments(0), trackbacks(0), - -