window
トップページ > 記事閲覧
*ドロップダウンメニューやスライドショーの配置について
日時： 2015/02/03 20:53
識別： ID:lqHpGIrSkxu.
名前： とんとん
こんにちは。

いつか自身でHPを作成できるようにと、先日からhtml/cssをかじり出した者です。

開発環境は【MAC OS X 10.7.5】【safari】で行っています。


現在、再下記記述のコードにてページ作成をしていますが、以下の点がわからずにいます。

１．ドロップメニューが左右センター寄せできない。

（http://makasete-web.net/dropdown-menu） 『誰でも出来る！jQueryでドロップダウンメニューをわずか7行で完成させる方法』
上記のサイトを参考に、下記のコードを記述したのですが、メニューバーがどうしても左寄りのまま動きません。
試みとして以下を行いましたが配置は左寄りのまま変わらずでした。
・html内のメニューバー設置用の(div id="topmenu")にalignでcenterをかける。
(スライドショーには効いたのに。。それも見当違い？)
・css内の#topmenuにmargin-leftとrightにautoをかける。


２．スライドショーが上下センター寄せできない。

（http://makasete-web.net/bxslider）『超簡単！jQueryスライドショーを10分で実装する方法』
上記のサイトを参考に下記のコードを記述、スライダー自体は機能しているのですが、div(topimage)内で上下の中央揃えにすることが出来ません。
試みとして以下を行いましたが配置は上寄りのまま変わらずでした。
・http://blog.3streamer.net/html5-css3/css-box-be-centerd-483/『CSSでボックスを上下左右中央に配置する第３の方法』を参考にしながら、
ネガティブマージンを用いる方法（→cssに.bxsliderの項目を作って記述しましたがブラウザで開くと画像が飛んでしまいました。しかも中央揃いにならず。。）
その他の方法は、beforeノ概念がよくわからずどこをいじればいいのか分かりませんでした。（そもそもpタグや画像を対象に記事は書かれてるけど、bxsliderって何になるんだろう。。html上ではulだからul？その場合どうなるんだ。。という情けない限りで。）


３．ドロップダウンメニューを半透明にしたい。

厳密にはドロップダウンしてくるサブメニューを半透明にしたいと考えています。
(http://black-flag.net/css/20110513-3045.html)『CSSで透明度／透過度（opacity）の指定をする方法 』を参考にしながら、
『opacity: 任意;』やwinにて『filter:alpha(opacity=任意);』などを試してみたのですが、変化しませんでした。サブメニューということでcssのul.childに記述したのですが、それが間違っているのでしょうか…。


色々なサイトや参考書を見ながら進めているため、皆様方にとりまして非常にお粗末な質問になっていれば大変申し訳ないのですが、どうかご助言頂きたく思います。


※タグが使えないのでタグは()で記載しています
---【HTML】----------------------------------------------------------------

(!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd")
(html lang="ja")
(head)
(meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS")
(meta http-equiv="Content-Language" content="ja")
(meta http-equiv="Content-Style-Type" content="text/css")
(link rel="stylesheet" type="text/css" href="css/style.css")

(title)タイトル(/title)


(script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script)
(script src="js/jquery.bxslider.min.js")(/script)
(link href="css/jquery.bxslider.css" rel="stylesheet" /)

(script type="text/javascript")
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
controls: true,
speed: 900,
pause: 5000,
slideWidth : 800,
});
});


$(function(){
$('#menu li').hover(function(){
$("ul:not(:animated)", this).slideDown();
}, function(){
$("ul.child",this).slideUp();
});
});
(/script)
(/head)

(body)
(div id="header")
(p align="center">ホームページ(/p)
(/div)

(div align="center" id="topmenu")
(ul id="menu")
(li)メニュー1(/li)
(li)メニュー2
(ul class="child")
(li)(a href="#")サブメニュー1(/a)(/li)
(li)(a href="#")サブメニュー2(/a)(/li)
(/ul)
(/li)
(li)メニュー3
(ul class="child")
(li)(a href="#")サブメニュー1(/a)(/li)
(li)(a href="#")サブメニュー2(/a)(/li)
(/ul)
(/li)
(li class="menu")メニュー4
(ul class="child")
(li)(a href="#")サブメニュー1(/a)(/li)
(li)(a href="#")サブメニュー2(/a)(/li)
(li)(a href="#")サブメニュー3(/a)(/li)
(/ul)
(/li)
(/ul)
(/div)

(div align="center" id="topimage")
(ul class="bxslider")
(li)(img src="images/example-slide-1.jpg" /)(/li)
(li)(img src="images/example-slide-2.jpg" /)(/li)
(li)(img src="images/example-slide-3.jpg" /)(/li)
(li)(img src="images/example-slide-4.jpg" /)(/li)
(/ul)
(/div)

(div id="main")
(/div)

(div id="footer")
(a href="sitemap.html")サイトマップ(/a)　(a href="privacy.html")プライバシーポリシー(/a)　(a href="about.html")当サイトについて(/a)　(a href="company.html")会社概要(/a)(br /)
&copy;サンプル All Rights Reserved.
(/div)
(/body)
(/html)

---【CSS（style.css）】----------------------------------------------------

html,body {
height: 100%;
font: normal normal 14px/1.6 Lucida Grande,Hiragino Kaku Gothic ProN,Meiryo, sans-serif;
margin: 0px;
padding: 0px;
}

#header {
width: 980px;
height: 50px;
font-size: 30px;
margin-left: auto;
margin-right: auto;
}

#topmenu{
width: 100%;
height: 50px;
margin: 0px;
padding: 0px;
margin-left: auto;
margin-right: auto;
}


ul{
list-style-type: none;
z-index: 9999;
margin: 0;
padding: 0;
color: #fff;
}
ul#menu li{
float: left;
position: relative;
margin: 0;
padding: 5px;
width: 200px;
background-color: #555555;
display: block;
}
ul.child{
display: none;
position: absolute;
margin-left: -5px;
padding: 0;
}
ul.child li a{
padding: 5px 10px;
margin-left: -5px;
margin-right: -5px;
margin-bottom: -5px;
display: block;
color: #fff;
}
li a:hover{
background: #ff0000;
}


#topimage {
background-color: #EEEEEE;
width: 100%;
height: 600px;
}

#main {
background-color: #F0FFF0;
width: 100%;
height: 700px;
margin-left: auto;
margin-right: auto;
}

#footer{
background-color: #CCCCCC;
width: 100%;
height: 50px;
font-size: 12px;
text-align: center;
padding-top: 20px;
padding-bottom: 10px;
clear: both;
margin-left: auto;
margin-right: auto;
}
メンテ

Re: ドロップダウンメニューやスライドショーの配置について ( No.1 )
日時： 2015/08/27 19:07
名前： ふんころがし

DOCTYPEの違いで扱われ方が変わってるとか、大抵のjQueryプラグイン側にも
cssがあるので、そちらと競合（どちらかが優先）してるとかかもしれないです。

中央揃えは内容物のサイズが決まってないとmarginのautoでは中央に来ないです。
サイズが決まってない場合、対象の要素をdisplay:inlineにするとか、
table-cellを使うとかありますが、色々試されてる記事があるので、
探してみてください。

Firefoxのプラグイン、Firebugは実際にブラウザで表示しながら試せるので、
正しく表示される状態を探るのにおすすめです。
メンテ

　返信フォーム　（上記スレッドに返信する場合は以下のフォームから投稿します）
題名 ※必須 スレッドをトップへソート
名前
E-Mail
URL
パスワード 記事メンテ時に使用します （メンテは該当記事のメンテアイコンをクリック）
返信内容
※必須
エラーメッセージや内容などは省略せず詳細にご記入下さい
状態の設定

・問題が解決したら 解決 を選択して投稿して下さい HELP(新しいウィンドウが開きます)
・既存記事の状態設定はメンテ（メンテアイコン）から修正する事ができます。


投稿内容をご確認下さい（記事の削除は出来ません）

   クッキー保存