Q&A
HTMLとCSSの各コードは、開始と終了を3連バッククオート「```」で囲んで表示させると、見易く、他の人も状況を再現しやすくなります。
###前提・実現したいこと
宜しくお願いします。
場違いでしたら、すいません。
ロゴとグローバルメニューに被るように背景画像を配置したいです。
position:absoluteやrelativeを使えば出来る？
らしいのですが理解が乏しくできていません。
###発生している問題・エラーメッセージ
エラーメッセージ
###該当のソースコード
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>無題ドキュメント</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div class="wrapper"> <div class="top"> <h1><img src="img/logo.png" alt=""/></h1> <nav> <ul class="list-nav"> <li><a href="#">Top</a></li> <li><a href="#">Concept</a></li> <li><a href="#">product</a></li> <li><a href="#">contact</a></li> </ul> </nav> </div><!---top---> <div class="topback"> <img src="img/back.jpg" width="980px"> </div><!--topback--> <div class="consept"></div><!--consept--> <div class="product"><h3>Consept</h3> <ul> <li>petit gateauのショートケーキは、茨城の老舗洋菓子店プチガトーで</li> <li>約２０年以上改良を繰り返したショートケーキから生まれました。<li> </ul> <p>特徴</p> <div class="cake1"> <img src="img/cake3.png" width="300" height="300" alt=""/> <p>1.甘さと酸味のバランスが絶妙ないちご</p> </div><!--cake1--> <div class="cake2"> <img src="img/cake2.png" width="300" height="300" alt=""/> <p>2.あっさりと仕上げた生クリーム</p> </div><!--cake2--> <div class="cake3"> <img src="img/cake1.png" width="300" height="300" alt=""/> <p>3.しっかりと したスポンジ</p> </div><!--cake3-->
</div><!---product-----> <div class="contact"> <dl> <dt>企業名</dt> <dd>株式会社</dd><h3>product</h3> <div class="ichigo"> <p>苺</p> <p>苺は、いばらきっすを使用しています。いばらきっすの最大の特徴は、糖度が 高く酸味とのバランスがよいところです。契約農家さんから毎日仕入れており新鮮 さは抜群です。等級は特選以上のものを使用し見た目や形色などが良いものを使用 しています。</p> <img src="img/ichigo.jpg" width="500" height="400" alt=""/> </div><!--ichigo--> <div class="whip"> <img src="img/whip.jpg" width="500" height="400" alt=""/> <p>生クリーム</p> <p>生クリームは、重くて食べられない。そんな方が多いと思われます。当店では軽さ ・なめらかさの中にコクを入れ、あっさりと仕上げました。軽さ、キレをだすのに有効 な内地産低脂肪クリームとコクと風味のある北海道産高脂肪クリームをブレンドしまし た。こだわりの究極の生クリームを楽しめます。</p> </div><!--whip--> <div class="cloth"> <p>スポンジケーキ</p> <p>卵の卵黄と卵白を別々に泡立てて作るスポンジケーキです。別立ての場合、卵白が 非常に泡立ちやすく、目の粗い固めの泡ができます。結果として、多くの空気を含み、 やや目が粗くコシのあるしっかりとしたスポンジになります。口どけの良さや風味の強 さが特徴です。</p> <img src="img/cloth.jpg" width="500" height="400" alt=""/>
</dl> </div><!--contact--> <footer> <img src="img/logo.png" width="100" alt=""/> <small>Gruyeres all right reserved.</small> </footer> ###試したこと 親要素？がrelativeに設定しないとできないと書いてあったので そのようにしてみました。ですが、変わりません。<dt>代表</dt> <dd>代表取締役 兼 CEO </dd> <dt>本社住所</dt> <dd>〒３０９２７８９</dd>
###補足情報
cssを記入します。
@charset "UTF-8";
/* CSS Document */
h1,h2,li,ul,img,{
padding: 0;
margin: 0;
}
li{
list-style-type: none;
}
.wrapper{
width:980px;
margin:0 auto;
}
/h１の画像*/
h1{
float:left;
margin-top:5px;
margin-left:20px;
}
/*****ここら辺がよくわかっていません。。****/
top{
position: relative;
}
topback{
position: absolute;
}
/navの設定/
nav ul{
top:10%;
left: 50%;
float: right;
}
nav li{
float:left;
margin-top:90px;
margin-right:60px;
}
ありがとうございます。次回こちらのサイトを使う際にはバックオートをつけます。
質問や回答は投稿後も、修正は可能ですので、大丈夫ですよ。CSSのポジション関連を色々使えば、表現の幅が広がりますので、大変でしょうが頑張ってください。
ありがとうございます。そのような機能があるんですね。今度、使ってみようと思います。表現の幅が広げられるように頑張ります。色々教えてくださりありがとうございました。
回答1件
0
ベストアンサー
一般的にposition: relative;は入れ子の「親div」に使用し、position: absolute;は同じ入れ子の「子div」に使用するのですが、「親div」のどこに、「子div」を配置するのかの「位置の指定」も「子div」には必要となります。上から○○px、左から△△px等です。
親divの大きさと位置を決めてから、子divをどこに配置するかを調整すれば良いかと思います。
参考リンク：https://saruwakakun.com/html-css/basic/relative-absolute-fixed
投稿2017/12/03 11:49
総合スコア3523
あなたの回答
tips
プレビュー
