0
件名に関する多くの研究の後で私は私の問題がどこにあるか見つけることができません。私はナビゲーションバーを持っており、絶対的に設定されている画像の下にあります。私は新しいコードを書くとき、それはイメージがあることを考慮していないし、HTMLの中にイメージの下に書かれていてもナビゲーションバーの下にまっすぐに行く。ここでの私の問題のhtmlでのコードは私のdivの1つの下に行きません
スクリーンショット：http://imgur.com/di8VNTw
私はテキストは私のページの一番下に表示します。私のコードをheres。
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<link rel="stylesheet" type="text/css" href="resto.css">
<meta charset="UTF-8">
<link href='https://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>
<link rel="stylesheet" id="ci-google-fonts-css" href="http://fonts.googleapis.com/css?family=Roboto%3A400%2C400italic%2C700%7CAlegreya%3A700italic%2C400%2C400italic&ver=4.4.2" type="text/css" media="all">
<title>Restaurant</title>
</head>
<body>
<div class="body">
<div class="infohaut">
<p><a href="">Réserver dès maitenant | (418) 999-1350</a></p>
<div class="nav">
<div class="container">
<img src="logo-transparent_4.png" alt="">
<ul>
<li><a href="">Acceuil</a></li>
<li><a href="">Notre menu</a></li>
<li><a href="">Notre mission</a></li>
<li><a href="">Nous contactez</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="image">
<img src="coeur.png"/>
<h2>Situé au coeur de la ville</h2>
<p><a href="">Voir notre emplacement</a></p>
</div>
<div class="commentaire">
<h1>rftgere</h1>
</div>
</body>
</html>
のCss
html {
height: 100%;
width: 100%;
font-size:100%;
margin:0 0;
padding:0px;
}
/* le main body du site */
body {
font-weight: normal;
line-height: 1.625;
margin: 0;
padding-right: 25px;
padding-left: 25px;
background-color: rgb(245,245,245);
}
.body {
padding-right: 15px;
padding-left: 15px;
}
/* information en haut de la page */
.infohaut {
background-color: rgb(88, 116, 152);
width: 100%;
height: auto;
padding: 0px;
margin: 0px;
display: inline-block;
font-family: 'Indie Flower', cursive;
}
.infohaut a {
color: white;
padding:0px 0px 0px 0px;
margin: 0px;
font-weight: normal;
line-height: 1.625;
font-size:95%;
width: auto;
height:auto;
float: right;
}
.infohaut a {
text-decoration: none;
}
.infohaut p {
margin: 0px;
padding-right: 5px;
text-shadow:0 0 2px #000000
}
/* hover réservation */
.infohaut a:hover {
color: #E86850;
text-decoration: none;
}
/* barre de navigation */
.nav {
width: 100%;
height: auto;
padding: 0px;
margin: 0px;
overflow: hidden;
}
.nav img {
width: 14%;
height: 100%;
padding-left: 15px;
padding-top: 5px;
}
.nav ul {
list-style-type: none;
margin: 0;
float: right;
position:relative;
padding:25px 0px 25px 5px;
letter-spacing: 1.25px;
}
.nav li {
display: inline-block;
padding-top: 0px;
margin-right: 10px;
font-family: 'Dancing Script', cursive;
font-size: 22px;
}
.nav a {
text-decoration: none;
color: #000000;
border: 1px solid rgb(109, 109, 109);
border-radius: 20px;
padding: 16px;
}
.container {
background-color: white;
border: 1px solid black;
}
/* hover des links dans la barre de navigation */
. nav a:link, nav a:visited {
background-color: #ffffff;
text-align: center;
text-decoration: none;
display: inline-block;
}
.nav a:hover, nav a:active {
background-color: #E86850;
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0);
}
/* l'image fix */
.image img {
width:100%;
height: 500px;
position: fixed;
top: 147px;
left: 0;
}
.image h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
color:white;
text-align:center;
font-family: "Alegreya", "Georgia", serif;
font-size: 62px;
font-style: italic;
letter-spacing: -0.05em;
text-shadow: #000000 1px 1px, #000000 -1px 1px, #000000 -1px -1px, #000000 1px -1px;
}
.image p {
position: absolute;
top: 315px;
left: 0;
width: 100%;
color: white;
text-align: center;
font-family: 'Dancing Script', cursive;
font-size: 22px;
}
.image a {
text-decoration: none;
color: #ffffff;
border: 1px solid rgb(0, 0, 0);
border-radius: 20px;
padding: 10px;
background-color: rgba(0, 0, 0, 0.71);
}
/* hover pour lemplacement */
.image a:link, image a:visited {
text-decoration: none;
display: inline-block;
}
.image a:hover, image a:active {
background-color: rgba(255, 255, 255, 0.65);
color: #000000;
border: 1px solid rgba(255, 255, 255, 0);
}
/* Commentaire client */
.commentaire {
position: absolute;
color:red;
}
あなたの高さが最大でなかったため、コンテンツの少しはそのような結果を得ることができます。 – Fiido93