質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.39%

  • HTML

    6144questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    3860questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

ロゴとグローバルメニューに被るよう背景画面を配置したい

解決済

回答 1

投稿 2017/12/03 19:52

  • 評価
  • クリップ 0
  • VIEW 72

hikari

score 4

前提・実現したいこと

宜しくお願いします。
場違いでしたら、すいません。

ロゴとグローバルメニューに被るように背景画像を配置したいです。
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">    

<h3>Consept</h3>

<ul>
<li>petit gateauのショートケーキは、茨城の老舗洋菓子店プチガトーで</li>
<li>約20年以上改良を繰り返したショートケーキから生まれました。<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><!--consept-->

<div class="product">

<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=""/>

</div><!---product----->

<div class="contact">

<dl>
<dt>企業名</dt>
<dd>株式会社</dd>

<dt>代表</dt>
<dd>代表取締役 兼 CEO </dd>

<dt>本社住所</dt>
<dd>〒3092789</dd>

</dl>

</div><!--contact-->
 
 
 
<footer>

<img src="img/logo.png" width="100" alt=""/>
<small>Gruyeres all right reserved.</small>

</footer>

試したこと

親要素?がrelativeに設定しないとできないと書いてあったので
そのようにしてみました。ですが、変わりません。

補足情報

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;
}

/***h1の画像****/

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;
}

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • yoshinavi

    2017/12/03 20:30

    HTMLとCSSの各コードは、開始と終了を3連バッククオート「```」で囲んで表示させると、見易く、他の人も状況を再現しやすくなります。

    キャンセル

  • hikari

    2017/12/03 22:23

    ありがとうございます。次回こちらのサイトを使う際にはバックオートをつけます。

    キャンセル

  • yoshinavi

    2017/12/04 02:00

    質問や回答は投稿後も、修正は可能ですので、大丈夫ですよ。CSSのポジション関連を色々使えば、表現の幅が広がりますので、大変でしょうが頑張ってください。

    キャンセル

  • hikari

    2017/12/05 00:09

    ありがとうございます。そのような機能があるんですね。今度、使ってみようと思います。表現の幅が広げられるように頑張ります。色々教えてくださりありがとうございました。

    キャンセル

回答 1

checkベストアンサー

+1

一般的に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 20:49

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

ただいまの回答率

91.39%

関連した質問

  • 解決済

    コンテンツの作成方法

    下記参考サイトの様に、 画像をマウスオーバーすると、 キャプションが現れるコンテンツを作成したいと考えております。 【 参考サイトURL 】 http://www.basicag

  • 受付中

    画像の配置に関して

    こちらの複数の様々なサイズの画像同士の隙間を 均等にしつつ、尚且つ画像やテーブルはウィンドウサイズによって 可変する様に作成したいと考えておりますが、 どのように作成すればいいかが

  • 解決済

    画像上に文字を乗せるとき良い方法を教えてください

    <img src="./img/top.png" alt="topimg">       <span style="position: absolute; top: 80px; l

  • 解決済

    box-shadow<div>要素内の画像に。

    例えば以下の様にマークアップした画像があります。 <div class="Wrapper">         <img src="home" alt="" height="600

  • 解決済

    wordpress テーマstinger5のナビゲーションをカスタマイズしたい。

    wordpressテーマstinger5を使ってサイト構築中です。 ヘッダーのナビゲーションをカスタマイズしたいのですが、うまくいきません。                  

  • 受付中

    CSSでのリキッドレイアウトの作り方

    縦横比を固定しながらwindowサイズに追従する一般的な書き方を教えてください。 比率を保ちたいのは画像要素、divなどで囲った要素、それらを並べたときなどです。 よろしくお願

  • 解決済

    【html】float:left;しても左にずれない

    このように「自由」「オリジナルロゴ」がアイコン、ヘッダー、壁紙の下にくるはずが重なってしまってます。どういうことでしょうか。 <div class="contents">    

  • 解決済

    ボックスの重なり

    レスポンシブデザインのwebsite作成をしているところで、Tabletでのわからない点があるため、質問させていただきます。 下の画像を見ていただくとお分かりいただけると思い

同じタグがついた質問を見る

  • HTML

    6144questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    3860questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。