自分のサイトではてなダイアリーのようにメインとサイドバーに分けて、2つともsectionで囲いました。しかしsectionの上の線をはてなダイアリーのように揃えたいのですが揃いません。どうすれば揃うようになるのでしょうか?

意味が分からなかったらごめんなさい

回答の条件
  • 1人3回まで
  • 登録:2011/09/27 21:34:05
  • 終了:2011/10/04 21:45:02

回答(0件)

回答はまだありません

  • id:isako4423
    回答が三日たっても来ないから鴉後は頼んだ(ゑ
    コメントでも回答でもいいから教えてくれ
  • id:flandlescarlet
    そもそも
    サイトがどのような感じになっているのかが分からんorz
  • id:isako4423
    俺のサイトは→http://lightbughp.iza-yoi.net/
    だがしかし今はサイドバーを付けていない
    だから下記のサイト(Skydriveのオンラインストレージ)にアクセスしてほとむる.htmlをダウンロードしてみてくれ
    https://skydrive.live.com/#cid=0EEE332D1480870B&id=EEE332D1480870B%21137
    出来なかったら↓
    http://loda.jp/lightbug/?id=4
  • id:flandlescarlet
    >>
    sectionの上の線
    <<

    と来たからついHTML5の新タグかと思ったら
    クラス名だったのね

    揃えるということは
    上に開いた空白を双方埋めたいということかね!?!?

    ついでにお絵かき機能かなんでもいいから
    構図が分かると操作しやすい
  • id:isako4423
    つhttp://f.hatena.ne.jp/isako4423/20111001201209
  • id:flandlescarlet
    ゚(∀) ゚ エッ?
    もしかして普通にメインとサイドバーを分けるというのか

    いわゆる単純に...
    http://cdn-ak.f.st-hatena.com/images/fotolife/f/flandlescarlet/20111001/20111001203546.jpg?1317468956


    >>
    (Skydriveのオンラインストレージ)にアクセスしてほとむる.html
    <<

    つまりここにある通りに移植をするという事なのか...
  • id:isako4423
    目が出てるぞいwww

    >>
    もしかして普通にメインとサイドバーを分けるというのか
    <<
    うむ、ずれるからちゃんと合わせたいという意味で分けたい訳だよ(駄洒落乙
  • id:flandlescarlet
    成るほど理解

    いわゆるタイトルを付けたらメイン側が下に落されるというわけか

    フレームタグでボーダー消した方がいいような気もした...

    CSSで上左右分割式か...
    何かといろいろ操作してみよう
  • id:isako4423
    フレームだとフレーム未対応のブラウザ使用者が可哀想ジャマイカ
    だから普通にそうしたいんだ
  • id:flandlescarlet
    一応CSS指定もいいのだが
    座標値指定をしているから

    画像系統は大きいとそのままサイドに突き進んでしまうぞ
    はてなもよくあるけど

    ゴリ押しで微調整するのが無難だと悟った
    タイトルの長さに応じて下がったメインの分
    サイドバーの[margin-top: XXXXpx;]を調整するしか
    で調整後

    http://cdn-ak.f.st-hatena.com/images/fotolife/f/flandlescarlet/20111001/20111001210132.png?1317470512

    タイトルだけ調整しておけば後のメインとサイドに影響は
    無いようである




  • id:flandlescarlet
    まぁCSSってなにかとクロスブラウザの問題はよく分からないんだ
    大抵のユーザーは大方IEだろうけどそのIEで確認がとれないorz

    何れか初めにソースでどのブラウザで見ているかを確認して
    それに応じてCSSの値を変えるという結果になりそうだ

    FireFox、Chrome、Operaで若干文字のフォントの影響でピクセルのズレが上下した
  • id:isako4423
    >>
    http://cdn-ak.f.st-hatena.com/images/fotolife/f/flandlescarlet/20111001/20111001210132.png?1317470512
    <<
    なぜか”これはライトバグが~”の所の下の画像に吹いてしまったwww


    もしわかったら回答にCSSよろ
  • id:flandlescarlet
    想像以上に鬼畜だった

    多分、バグが幾つか発生するだろうから(IEの状況が不明)
    ソース長くなりそうだから別途に貼るつもりだったりする
  • id:flandlescarlet
    http://jsfiddle.net/9hLHc/12/

    正直CSSに関しては各ブラウザで違いが出るし
    プロのサイトでも結構微妙なズレが出るからな...

    とりあえずあげたサイトでサイドを合わせてみたが実際にズレるなら
    CSSの欄にある注釈の部分にどこを変えるかをさりげなく書いておいた
  • id:flandlescarlet
    一人で語っちゃってるけど
    ブラウザ判別したら繰り下げまで
    ズレがあってBODY要素を読み終えるまでズレているという...
    読み込みが終るまで表示をしないとか無かったかなぁ....


    とりあえず多分クロスブラウザは回避して
    どのブラウザでも段差ズレは無いと思うが...


    もっと簡単な方法があったはず!?!?....

    http://jsfiddle.net/9hLHc/15/

    これが限界だ....
    またJavaScriptに頼らない簡潔な方法を探す
    しかし異常に遠まわしな設定となってしまった
  • id:isako4423
    ありがとう
    実は俺、AA貼り付けてるから合わないんだよね・・・(ゑ
  • id:ay123698745
    遅くなりましたがこんな感じで良いでしょうか?
    http://loda.jp/usually/?mode=pass&idd=18
    pass=lightbughp

    はてなのサイドバーをまねて
    floatをsectionとsidebarにそれぞれ配置させて
    回り込ませてみた
  • id:isako4423
    usuallyさん
    ありがとうです

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません