• 締切済み

HP作成での質問です

HP作成にて 画面をスクロールした時に常に追いかけてくるメニューを作成しているのですが 画面左上に表示するところまではできたのですが それを左下のポジションに固定するようにしたいのですが どうすればいいのか教えていただきたく思います。 中途半端な知識の為、各所より探したもので作りましたが この部分だけがどうにも分かりません。 <STYLE type="text/css"> <!-- #tono001{ position:absolute; left:100px;} .tc{ width:140px; font-size:14px; color:#7799ff; border-style:solid; border-color:#7799ff; border-width:1px; text-align:center; padding:2px; } a{ color:#5588ff; text-decoration:none; } a:hover{ color:#5588ff; text-decoration:underline; } --> </STYLE> ここのどこをてなおしすればよいのか?&そうではなく根本が違うのか どなたか教えてください

みんなの回答

回答No.1

これだけで想像できるのは、ナビがあるボックスが画面の左100pxから始まる、、くらいしかわかりません。 スタイルシートだけではわからないので、htmlなど、もっと詳細を記入されると、回答してくれる人が増えると思いますよ。 どんな手段でそのようにしたいのかにもよると思います。

関連するQ&A

  • CSSでリンクの表示をテキストと画像で変えたい

    CSSを使って、 ・テキストのリンクのときは、 a:link で 常に点線のアンダーラインを表示 a:hover で マウスを重ねたとき色を変える ・画像のリンクのときは、  アンダーラインをださない  a:hoverの動作をさせない という風にしたいのですがうまくいきません。 a:link { color: black; text-decoration: none; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #333333; } a:hover { background-color: black; text-decoration: underline; color:white; } といった指定をして、テキストからのリンクに適用しています。そのうえで、画像には上記の設定が生きないようにしたいと思っていますがうまくいきません。 .bordernone { border: none; } と書いて、リンクの画像に <img src="image/xx.jpg" class="bordernone" style="border-style:none"> などとしてもうまくいきません。 よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • 外部CSSでリンクカラー指定

    外部CSSでwebサイトを作っています。 リンクカラーの指定をbody全体にしているのですが、 フッターだけ色を変えることはできますか? その際フォントカラーも変えられればと思っています。 現在のCSSは a{/*リンクされた文字*/ color:#002AD1; font-style:normal; text-decoration:underline; } a:link {/*未訪問のリンク*/ color:0000ff; font-style:normal; text-decoration:underline; } a:visited {/*訪問後のリンク*/ color:#002AD1; text-decoration:underline; } a:hover {/*マウスをのせたとき*/ color:#335BFF; font-style:normal; text-decoration:underline; } a:active {/*クリック中*/ text-decoration:none; } 現在サイト全体のフォントカラーはグレーで、 リンクは上記の通り青系です。 footerは白から濃い紺の帯にするので、 文言やリンクが見えなくなってしまうのです。 フッターのCSSに個別にカラー指定しても変わりません。 .footer { border : none; width : 838px; heigth : 100%; text-align: left; padding : 0px 0px 0px 20px; color: #ffffff; ←このようにフォントを白にしても変化がないです line-height: 160%; font-size: 11px; } 何が原因でしょうか? またそのようにする方法があれば教えてください。 よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • CSSで表示が異なってしまう

    下記のようなCSSを使っているのですが、リンクが入ると表示が異なってしまいます。 画像の下のようにしたいのですが、どうすればよろしいでしょうか? よろしくお願いします。 ■ CSS A:link{ color:#0095ff; text-decoration: none;} A:visited{ color:#0095ff; text-decoration: none;} A:hover{ color:#00efff; text-decoration: underline;} A:active{ color:#00efff; text-decoration: underline;} .style02{ padding:3px 0 0 6px; margin-bottom: 5px; font-size:16px; font-weight:bold; background-image:url(../_images/h_02.gif); background-repeat:repeat-x; border: 1px solid #000000; color: #000000; } ■ ソース <a class="style02" href="http://www.hogehoge.com">トップページ</a> <div class="style02">トップページ</div>

    • ベストアンサー
    • HTML
  • スタイルシートの適応のやり方

    現在ドリームウェーバーでHPを作っていますが CSSを使いメニューボタンをへこむボタンにしたいのですが うまく反映されません。 ソフトが最近から使い始めたのでうまく理解できていないところです。 a.sample{ text-decoration:none; } a:hover.sample{ color:#CC0000; border-width:0px 1px 1px 0px; border-style:solid; border-color:#990000; position:relative; top:-2px; left:-2px; } a:active.sample {/*クリック中の色*/ color:#CC0000; border-width:1px 0px 0px 1px; border-style:solid; border-color:#990000; position:relative; top:2px; left:2px; padding-left:3px; } こちらです。 手順を教えて頂けないでしょうか?

    • ベストアンサー
    • HTML
  • はじめて利用します。質問の上で至らぬところがあればご指摘願います。

    はじめて利用します。質問の上で至らぬところがあればご指摘願います。 スタイルシートでリンクの色を変更しているのですが、どうしても未訪問のリンクの色が変わりません。 こんな感じの例で設定しています a{ color:0000ff; font-style:normal; text-decoration:underline; } a:link { color:0000ff; font-style:normal; text-decoration:underline; } a:visited { color:#934C7B; text-decoration:underline; } a:hover { color:#ff0000; font-style:normal; text-decoration:underline; } a:active { text-decoration:none; } link要素も試してみましたが、どうしても未訪問のリンクの色だけかわりません。 同じような質問がありましたが、実際に解決策、納得がいかなく質問させていただきました。 昨日今日でサイト作りをはじめたばかりで、色々と疎いです。 解決方法を探しています、なにとぞよろしくお願いします。

  • CSS backgroundが反映されません

    CSS初心者です。 CSSレイアウトで問題にぶつかりました。 下記CSSをIE6で見るとbodyに書いた 「background-image:url(images/flower.png); 」が反映されません。 IE10では反映されました。 いったい何故でしょうか。。。 調べてみたのですがいまいち分かりませんでした。 よろしくお願いいたします。 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ * { margin:0; padding:0; } body { background-image:url(images/flower.png); background-repeat:no-repeat; background-position:bottom; background-attachment:fixed; background: rgb(#00000); color: rgb(76, 76, 76); } body{ text-align:center; } div#container { background-image:url(images/sora.jpg); background-repeat:no-repeat; box-shadow: 10px 10px 10px rgba(0,0,0,0.4); #000; box-shadow: 10px 10px 10px rgba(0,0,0,0.4); #000; } div#container{ width: 770px; margin: 0 auto; text-align: left; border: 3px solid rgb(228, 225, 219); } .photo{ margin: 0px; padding: 0px; left: 600px; top: 970px; width: 141px; position: absolute; } .photo2{ margin: 0px; padding: 0px; left: 400px; top: 970px; width: 141px; position: absolute; } p { line-height: 2em; font-size: 0.8em; } .p1{ font-weight: bold; letter-spacing: 0.1em; } .h1{ text-align: center; } h1 span { display:none; } h2 span { display:none; } h3 { line-height: 1.2em; padding-top: 2.4em; padding-bottom: 1em; font-size: 1em; font-weight: bold; } h3 { background-image:url(images/h3.png); background-repeat:no-repeat; background-position:0px 35px; padding-right: 40px; padding-left: 30px; } h2 { line-height: 1.3em; padding-top: 1em; padding-bottom: 1em; font-size: 1em; font-weight: bold; } a{ color:#0000ff; font-style:normal; text-decoration:underline; } a:link { color: rgb(90, 120, 255); font-style:normal; text-decoration:underline; } a:visited { color: rgb(165, 188, 255); text-decoration:underline; } a:hover { color:#ff0000; font-style:normal; text-decoration:underline; } acronym { border-bottom-color: currentColor; border-bottom-width: medium; border-bottom-style: none; } #intro { padding: 0px 79px 0px 86px; } #participation p { padding-right: 40px; padding-left: 10px; } #intro { padding-top: 50px; } #preamble p { padding-right: 40px; padding-left: 15px; } #explanation p { padding-right: 40px; padding-left: 15px; } #preamble { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #explanation { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #participation { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #benefits { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #requirements { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #quickSummary p{ padding-right: 40px; padding-left: 10px; } #footer { text-align: center; line-height: 1.5em; padding-top: 10px; padding-bottom: 40px; font-size: 0.9em; } #footer a:link { color: rgb(133, 126, 112); } #footer a:visited { color: rgb(133, 126, 112); } #footer a:hover { color: rgb(133, 126, 112); } #footer a:active { color: rgb(133, 126, 112); }

    • ベストアンサー
    • CSS
  • CSSについて

    カーソルがルンク先文字にふれた時に色が変わり、 リンクしたあとリンク済みになるCSS( スタイルシート)はこれでいいでしょうか? リンク済みの色が変わりません。 <!-- <style type="text/css"> --><!--A:HOVER{position : relative;top:2px; left:2px;} </style> --> <style type="text/css"> <!--A:link {color:#000055; text-decoration:none; } A:visited {color:#000055; text-decoration:none; } A:hover {color:#ff3300; text-decoration:underline; }--></style>

    • ベストアンサー
    • HTML
  • divでくくった中の要素にa link

    以下のdivでくくった中の要素にa link等の カラーの指定をしたいのですが、どのように記述したらよいでしょうか。 div.main { width: 560px; padding-top: 15px; padding-left: 20px; line-height: 130%; } --------------- div指定していないところでは a:link, a:visited { color: #000000; font-size: 12px; line-height: 120%; text-decoration: none; } a:hover { color: #0066CC; text-decoration: underline; } a.navia:link, a:visited { font-size: 8pt; color: #666666; text-decoration:none;} a.navia:hover { color: #FF6633 ; text-decoration:underline } の2つを記述しています。

    • ベストアンサー
    • HTML
  • ホームページの作成(CSS)について

    「Dreamwever独習ナビCS3/8対応」でホームページの勉強をしているものです。 質問内容はプレビューで見ると、リンクの表示が想定しているものと、 違うのです。具体的にはにじんで見える感じです。文字は読めません。 CSSの設定をしたところ、この現象となりました。 プレビューのリンクの箇所を反転させると、読むことができます。 環境はWindowsXP、IE6です。firefoxでも同様の症状です。 お忙しいところお手数ですが、ご教授願います。 CSSの内容は以下のとおりです。 ------------------------------- body{ font-family: sans-serif; font-size: 75%; line-height: 1.6; color:#333333; background-color: #999999; background-image; url(image/bg.gif); background-repeat: repeat; } hr{ display: none; } aimg{ border-style: none; } a:link{ color: #333333; text-decoration: underline; } a:visited{ color: #999999; text-decoration: underline; } a:hover{ color: #000000; text-decoration: underline; } a:active{ text-decoration: none; position: relative; left: +1px; top: +1px; } ------------------------------- ※テキストP60の「リンクをCSSで設定しよう」という箇所です。

    • ベストアンサー
    • HTML
  • ホームページ作成

    ナビゲーションを作成中なのですが、教えてください。 CSSで作ってみたんですが一番右と左の白の線の1pxを消したいんですが なにかいい方法ありますか? CSSは #navi { list-style-type:none; width:750px; margin: 0; padding: 0; border-left-width: 1px; border-left-style: solid; border-left-color: #FFF; } ul#navi li { float:left; width:150px; font-family: "A-OTF 新ゴ Pr5 EL"; font-size: 14px; } ul#navi li a { display:block; padding-top:5px; padding-bottom:5px; text-align:center; text-decoration:none; color:#FFF; width:149px; border-right-width: 1px; border-right-style: solid; border-right-color: #FFF; background-image: url(../images/templete/navi2.gif); です。 よろしくお願いします。

専門家に質問してみよう