• ベストアンサー

表示指定タグについて教えて下さい!

ウインドウの幅を変えても、 表示位置が変わらないように固定させる方法を探しています ブログ全体を指定位置に固定表示させたいです (左側に寄せて表示を希望しています) cssで使える表示指定のタグをご存知の方がいたら教えて下さい どうぞよろしくお願いします!・゜(´□`)゜・。 現在のスタイルシートのソースです ↓ /* Theme Name: omegaX Theme URI: http://blog.mukispace.com/2009/02/17/wordpress-theme-omegax/ Description: Two-columns, fixed-width, black and white color; Wordpress theme from <a href="http://blog.mukispace.com">MUKI space*</a> Version: 1.0.3 Author: muki Author URI: http://blog.mukispace.com Tags: light, white, two-columns, fixed-width */ * body { margin:0px;         ←☆数値を変えてみましたが margin-left: 0px;        表示の『固定』までは padding:0;}           できませんでした * body { font-family:arial, sans-serif; font-size:12px; line-height:180%; } ・ ・ ・ 以下、文字指定、fotterへ続く ◯使用しているブログサービス:WordPress(http://ja.wordpress.org/

  • kibi3
  • お礼率66% (4/6)

質問者が選んだベストアンサー

  • ベストアンサー
  • qandasok
  • ベストアンサー率42% (79/186)
回答No.1

全体のHTMLやCSSを見てみないことには何もいえないのですが。 とりあえず、全体の枠のpositionを指定すればいいと思います。 http://www.htmq.com/style/position.shtml

kibi3
質問者

お礼

早い回答をありがとうございました! 全体の枠にpositionが指定出来るんですね 早速、探して試してみようと思います >全体のHTMLやCSSを見てみないことには… そうですよね;; 文字数が足りそうでしたらこちらにペーストします。 どこか外部にソースを載せられる場所があれば載せられるのですが… 引き続きご存知の方、情報をご教授下さい (解決しましたらこちらに書き込みます)

その他の回答 (1)

  • 4017B
  • ベストアンサー率73% (1306/1777)
回答No.2

手っ取り早くやるなら… HTML全体を「<table width="100%" height="100%">」ですっぽり囲んで、 “TD”の部分に「min-width:***; max-width:***;」を指定してやればイイかも。 もしかしたらブラウザ依存の挙動になるかも(失念しました)?? 単純に文書の改行とかを避けたいのなら「nowrap」でOKです。 CSSで指定する時には「white-space:nowrap;」と記述します。

kibi3
質問者

補足

早い回答ありがとうございました! なるほど、「min-width:***; max-width:***;」ですね 全く知らないタグでしたので勉強になります 実は一度テーブル囲み作戦を決行したのですが失敗し… でもこのタグがあれば成功するかもしれませんね 奥の手として使わせて頂きます >単純に文書の改行とかを避けたいのなら「nowrap」でOKです。 文章の改行は避けてあります 紛らわしい書き方をしてしまってすみませんでした;

関連するQ&A

  • 指定したborderの一部が表示されない

    以下のようにboxを作りその中にフロートさせた2つ(div class="b"とdiv id="c"を作り、 div class="b"の方にdiv class="nwesbox"を作り、その中にiframeを入れました。 問題はdiv class="nwesbox"に上下左右に表示指定したborderの線の右側のみブラウザ(ie7)で表示されません? div id="c"を取り除くと表示されます、nwesboxやiframeの幅を変更したりしてみましたが 解決できなく困っています、どなたか教えていただけますでしょうか? 宜しくお願いします。 以下html記述-----↓ <div class="box"> <div class="b"> <div class="nwesbox"><iframe id="iframe" frameborder="0" scrolling="yes" src="whats.html" title="お知らせ">お知らせ</iframe></div> </div> <div id="c"> <p>*****</p> </div> 以下CSS記述------↓ .box{ width : 898px; margin-left : 0px; margin-top : 0px; padding-left : 0px; margin-bottom : 0px; } .b{ width : 575px; margin-left : 0px; margin-top : 10px; background-color : #ffffff; padding-left : 10px; float : left; margin-right : 0px; } .nwesbox{ width : 575px; height : 233px; background-color : #ffffff; border-width : 1px 1px 1px 1px;border-style : solid solid solid solid;border-color : #0080ff #0080ff #0080ff #0080ff; } #iframe{ border-width : 0px 0px 0px 0px; margin-left : 0px; width : 573px; height : 228px; padding-top : 0px; overflow : auto; margin-top : 0px; } ↓---iframe内に読み出してる先のテーブルに指定した内容(テーブル幅)--- #what{ width : 545px; background-color : #ffffff; margin-top : 0px; }

  • CSSのレイアウト指定だけが無効に。

    CSSでデザインを始めたばかりの初心者です。 Mac環境で制作しておりますが、WIN環境に限り、レイアウト指定がうまく反映されません。(MacではIEとsafariで確認済み。) というか、レイアウトの記述部分だけ、無効になっているような印象です。 文字・リンク・imageの指定はきちんと反映されています。 現象が起きているページは下記です。 http://www.artbox-int.co.jp/seek/foragent/illust_a.html CSSの問題の部分です。 /*レイアウト*/ .head { border-width:0px; } .mainhead { width:200px; height:45px; margin-top:15px; margin-left:15px; border-width:0px; } .menu { width:250px; height:45px; margin-top:-42px; margin-left:230px; border-width:0px; } .select { margin-top:-25px; margin-left:35px; border-width:0px; } .table { margin-left:15px; margin-top:15px; width:480px; height:180px; border-color:#D9D9D9; border-width:1px; border-left-width:5px; border-style:solid; background-color:#FFFFFF; } .image { margin-top:15px; margin-left:15px; border-width:0px; } .Artistname { margin-top:-148px; margin-left:180px; width:200px; height:45px; border-width:0px; } .history { margin-top:-31px; margin-left:180px; width:280px; height:100px; border-width:0px; overflow:auto; } .other { margin-left:180px; width:280px; height:30px; border-width:0px; } どうぞよろしくご教授お願い致します。

    • ベストアンサー
    • CSS
  • IEのみ表示場所がずれる。

    FC2ブログでテンプレートを編集しています。 3カラム(3段組)のレイアウトで、一番左側の少し下のほうにボックスを配置、 スクロールにあわせて追尾するようにしたいと思っています。 chromeやFirefoxでは指定の場所に問題なく配置されるのですが、 ,IEのみ表示がずれて困っています。(具体的には画面右側あたりに表示されてしまう) 他のブラウザで問題ないので、IEだけずれる要因がさっぱり思いつきません。 どなたかわかる方いらっしゃいませんでしょうか。 *ブログのテンプレート自体は1200pxで固定 HTML部分 ********************************************** <div id="wrap"> <ul id="social_box"><br> <a href="■"><img src="●" border="0"></a> <br><br> <a href="■"><img src="●" border="0"></a></ul> <div id="main"></div> <div id="side"></div> </div> ********************************************** CSS部分 ********************************************** #wrap{ width:960px; margin:0px auto; } #social_box{ background:#fff; width:60px; padding:0px; margin-left:-110px; text-align:center; position:fixed; bottom:95px; list-style-type:none; } #main{ width:660px; float:left; } #side{ width:300px; float:left; } ***********************************************

    • ベストアンサー
    • HTML
  • position:fixedが親要素に準じて表示してくれません。。

    position:fixedが親要素に準じて表示してくれません。。 <div id="relative">   <div id="flashContent"><img></div>   <div id="TopBnr"><img></div> </div> ーーCSS-ーーーーーーーーーーーーーーーーーーーーーーーーーーーー #relative {      position:relative;      width:990px;      height:374px;      margin:0px auto; } #flashContent {      width:990px;      height:374px;      margin:0px auto;      z-index:0; } #TopBnr { position:fixed; width:260px; height:90px; right:90px; top:30px; z-index:1; } Ie6対応済みです。。 なぜかIeでの配置はできているのですが、 それ以外のブラウザでは、親要素に準じて配置してくれません。 どなたか解決策を教えてください。。

  • FireFoxで見ると表示がおかしくなってしまいます

    困っています。質問させてください。 このカテゴリでいいのか分からないのですが・・・。 HPを運用しているのですが、聞きかじりのcssを利用しています。 IEだと場合によっては普通に表示されるのですが、FireFoxだと文字がどでかく表示されてしまって、レンタルスペースはFC2を使っているのですがページの最後に表示されるはずの広告が文字列の中に割り込んでいたりして、表示がめちゃくちゃになってしまいます。 ちなみに使っているcssは * { margin:0; padding:0; } html { text-align:center; height:100%; } body { width:600px; height:100%; text-align:left; } #HEADER img { display:block; } #NAV { float:left; width:200px; height:100%; margin-top:-100px; padding-top:100px; } #CONTENT { width:650px; height:100%; margin-top:-100px; padding-top:100px; margin-left:200px; } です。index.htmlのbody部分にはfontの大きさは全く指定していません。 よろしければFireFoxでご覧になってみてください。 http://clovermiwa.web.fc2.com/ 私はHTMLをかじったくらいで、cssについては全く分かりません。 HTMLが間違っているのかもしれません。 色々いじってみましたが、問題が解決されず、困っています。 よろしければご教授、お願い致します。

    • ベストアンサー
    • HTML
  • seesaaブログで背景画像の位置を指定したい

    seesaaブログで背景画像の位置を下中央に表示させたいのですが、background-position:bottom center;と指定しても、上中央に固定されていてウンともスンとも動きません。 試しにleftに指定してみたり、タグの順番をかえてみたりしましたがダメでした。 ちなみに、忍者ブログや簡単なHTMLのページでは思い通りに表示できています。 ご存知の方、是非ご教授ください。よろしくお願い致します。 body { margin:0px; padding:0px; background-image:url("画像URL") ; background-color : #210709; background-repeat:no-repeat; background-attachment:fixed; background-position:bottom center; line-height:180%; text-align:center; }

    • 締切済み
    • CSS
  • position:fixed;でメニューを右側に固定したい

    position:fixed;でメニューを右側に固定したい こちらを参考にサイドバーが固定された2カラムのサイトを作っています。 http://www.css-lecture.com/log/css/049.html 上記のサイトを見てくだされば分かると思うのですが、サイトバーはすべてを囲うwrapperボックスの左端に固定されています。 これをwrapperボックスの右端に持って行きたいのですが、うまくいきません。 position:fixed;にrightやleftを指定すると、wrapperボックスではなくブラウザの端に寄ってしまいます。 absolutoではスクロールされてしまいますし……。 自分なりに調べていろいろと試してみたのですが、解決することはできませんでした。 javascriptや疑似フレームは出来るだけ使いたくありません。 右端に持って行くことは可能なのでしょうか?現状では無理なのでしょうか? HTML <div id="wrapper"> <div id="menu"></div> <div id="main"></div> </div> CSS #wrapper{ width:700px; margin:0 auto; background-color:#FFF; position:relative; } div#menu { width: 100px; background: #CCC; padding:10px; height:100%; position:fixed; top: 0px; z-index: 20; } * html div#subContents { position: absolute; top: expression(eval(document.documentElement.scrollTop+0)); } #main{ margin-left:120px; padding:10px; width:560px; position:relative; background-color:#FFF; } よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSSでmarginを指定すると、表示の仕方がブラウザによって変わってしまいます。

    はじめまして、CSS初心者です。 お聞きしたいことがあります。 ---CSS--- body{   margin:0px;   padding:0px; } #formbox{  width:750px;  height:155px; } #box01{ margin-left:30px; width:280px; height:50px; } ---HTML--- <div id="formbox"> <div id="box">ほげほげ</div> </div> というHTMLをIE6.0とfirefox1.5で表示させたときに、 <div id="box">のmargin-leftがIE6.0だと60pxぐらいになってしまいます。firefoxでは、30pxとられているようなのですが…。 IE6.0とfirefox1.5で誤差が生じしてしまうのはなぜなのでしょうか。 どなたかご教授お願いできないでしょうか。 よろしくお願い申し上げます。

    • ベストアンサー
    • HTML
  • embed タグを用いると表示が遅い

    いつもお世話になります。 <embed src="・・・.mid" style="width:300px;height:30px;margin-right:10px;" autostart="FALSE" loop="TRUE" save="TRUE"> などとするとウェブページから音楽を聞くことができるようになりますが、このembedタグを用いると該当のページの表示が著しく遅くなってしまいます。 何か設定がおかしいのでしょうか。 また、代替の方法はございませんでしょうか。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • IEとFirefoxでの背景表示の違いについて (CSS)

    いつもお世話になっています。 CSSで枠(text_area)を作り、その背景の中央に画像表示させたいと考えています。IEでは中央に表示されるのですが、Firefoxだとtext_areaではなく画面全体の中央に配置してしまい、text_areaには一部欠けた画像が表示されます。 #text_areaに指定した内容を.contentsに書き写しても同じ状態です。 改善策をアドバイスして頂けないでしょうか? よろしくお願いいたします。 【html】 <body> <div class="contents"> <div id="text_area">あああああ・・・</div> </div> </body> 【css】 .contents{ width:760px; height:540px; margin:0px; margin-right:auto; margin-left:auto; padding:0px; border:0px; } #text_area { overflow:auto; width:600px; height:395px; margin-top:30px; margin-left:auto; margin-right:auto; background-image: url(haikei.gif);/* サイズ:456×392PX */ background-repeat: no-repeat; background-position:center; background-attachment:fixed; }

    • ベストアンサー
    • CSS