タグ

関連タグで絞り込む (12)

タグの絞り込みを解除

floatに関するmiracle1998のブックマーク (7)

  • hail2u.net - Weblog - floatで並べたリストのセンタリング

    ページング・ナビゲーションなどでリスト項目をfloat: left;で横に並べるというのは割りと良く使われると思う。並べること自体は特に難しいわけではないが、その並べたリスト全体をセンタリングしようとするとちょっとややこしい。display: inline-block;を使う手法やdisplay: table;を使う手法という黒魔法的(私見)な手法で実現可能だが、position: relative;でもいける。 ややこしい理由は簡単で、センタリングでよく使われるtext-align: center;やmargin: 0 auto;といった手法が通用しないから。検索するとすぐ出てくる比較的メジャーなdisplayで頑張る方法もわかりやすいし悪くはないのだけど、同一セレクタ内で複数のdisplayを駆使する必要があることやzoomマジックなどを併用する必要があることからコードがややこしくなる

    miracle1998
    miracle1998 2009/06/19
    floatで並べたリストのセンタリング
    リンク

  • IE6でよく遭遇するCSSのバグとその解決方法 | コリス


    Dave Woodsのエントリー﹁IE6 -CSSのバグとその解決方法﹂から、IE6でよく遭遇する3つのCSSのバグとその解決方法の意訳です。 IE6 - CSS Bugs and Fixes Explained IE6で、マージンが2倍になってしまうバグ IE6で、hasLayoutプロパティによって起こるバグ IE6で、小さい高さを指定した場合に起こるバグ IE6で、マージンが2倍になってしまうバグ IE6で、フロートした要素のマージンが2倍になってしまうバグと解決方法の紹介です。 下記のコードで、IE6はマージンが20pxになります。 sample:バグ #navigation{ float: left; width: 200px; margin-left: 10px; } #content{ float: right; width: 500px; margin-right: 10p
    IE6でよく遭遇するCSSのバグとその解決方法 | コリス

  • スタイルシートによる崩れない　2カラム　3カラム・レイアウト

    このウェブサイトは販売用です！ desperadoes.biz は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、desperadoes.bizが全てとなります。あなたがお探しの内容が見つかることを願っています！

  • [CSS]高さの異なるカラムを揃えるスタイルシート | コリス

    Columnas 100% altas Columnas 100% altasのエントリーでは、下記のデモのように高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介しています。 sample:高さがばらばらのdiv sample:高さが揃ったdiv スタイルシートは、各divに対して「padding-bottom」と「margin-bottom」に同じ数値をプラス値とマイナス値で指定を行い高さを揃え、それらのdiv要素を包んだdivで「overflow:hidden;」を指定します。 詳しくは、最小限にしたサンプルを作成したので参照ください。 高さの異なるカラムを揃えるスタイルシートのサンプル 下記の「32768px」って、何か特別な意味があるのでしょうか。

    miracle1998
    miracle1998 2007/10/26
    高さの異なるカラムを揃えるスタイルシート
    リンク

  • にこにこ風味 :: Weblog » Blog Archive » IE6 の “Peekaboo Bug”


    このバグが有名なのか、そうでないのかは知らないけども。このバグに遭遇しても対処法を検索してもなかなかヒットしなくて悩んでしまった。 挙動としては CSS の float 属性を使用していると、float に内包されたコンテンツ、または float 要素に接する一部が一部表示されなくなるというもの。表示されないと言っても、スクロールしたり、選択すると現われる。その動きが “いないいないばぁ” と似ているので ‘Peekaboo’ と呼ばれるらしい。 詳細な説明は Position Is Everything に詳しくあります。 簡単な対処法は上記のサイトや次の evolt.org にあるように、float に含まれる要素に position: relative を指定するとバグを回避できます。 しかし、これではCSSの可読性も落ちるし、複数の要素に指定してやらなければならないので、面倒なので
    miracle1998
    miracle1998 2007/10/08
    恐ろしくはまってしまったので（泣）、ブクマします・・floatの親要素にwidth指定すると直ります。
    リンク

  • hail2u.net - Weblog - IEでフロートさせたボックスのマージンが倍になるバグ


    WindowsのIE5.5や6など(5とか5.01は知らない)にはfloatさせたボックスへ指定した左右のmarginが正常に反映されない(倍になる)というバグがあります。最近はfloatを使ってゴニョゴニョする機会も多いと思うので厄介に考えている人も多いでしょう。実はdisplay: inline;とか指定してやると回避できちゃったりとかします。ネタ元はThe IE Doubled Float-Margin Bugだったような気がしますが、別なところで見つけたような気もする。 バグの状況自体は上記CSSバグリストのURLを参照していただければわかりやすいです。と言いつつ回避手段の使用前/後を並べてみたHTMLを用意してみました。IEで見れば一目瞭然で、1つ目のコンテナ内のフロートさせたボックスの左のマージンは倍(80px)になっているのに対し、2つ目のコンテナ内のフロートさせたボックスの
    hail2u.net - Weblog - IEでフロートさせたボックスのマージンが倍になるバグ
    miracle1998
    miracle1998 2007/09/17
    [display: inline;][バグ回避]
    リンク

  • 小粋空間: CSS の after 擬似要素で回り込みを解除する


    float プロパティで設定したテキスト等の回り込みを、CSS の after 擬似要素を用いて解除する方法を紹介します︵通常の解除方法も併せて掲載しています︶。1．﹁回り込み﹂とは 例えば、画像の左︵または右︶にテキストを表示することを﹁︵テキストの︶回り込み﹂と呼びます。 マークアップ <p> <img src="hogehoge.jpg" alt="image" style="float:left" /> 回り込みテキスト～︵略︶～回り込みテキスト </p> 表示 回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト ︵X︶HTMLでこのような表示を行う場合、先に出現する要素︵ここでは img 要素︶に対して float プロパティを与えます。float プロパティは、指定された要素を左または右に寄せて配置する際に使用しま
    小粋空間: CSS の after 擬似要素で回り込みを解除する
  • 1

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.