-2
두 개의 제목을 변경하면 내 홈페이지의 기초가 완성 된 것으로 보입니다. 다음으로 내가 아는 바로는 상단의 배너/배경 이미지가 사라졌고 그 위에 로고가 사라졌습니다.이미지가 사라집니다. 배경 및 로고
저는 CSS와 관련하여 문제가 있다고 확신합니다. 그러나 나는이 문제를 일으킨 변화된 것을 볼 수 없다. 어떤 도움을 주시면 감사하겠습니다.
업데이트 : CSS 대신 HTML 이미지를 사용한 후 배경 이미지가 다시 나타납니다. 배너의 z- 인덱스를 0으로 변경 한 다음 배너를 표시했습니다. 그래서 자연스럽게 Z- 인덱스 : 1과 z- 인덱스로 로고 (흰색 상자)가 있습니다. :
그렇다면 모두 Z- 인덱스에 연결 되었다면 이론적으로 내 로고와 헤더 상자는 지금 배너 위에 표시하십시오. 아직 그들은 아직 실종 상태입니다.
@fontface {
font-family: Swisz;
src: url(fonts/swisrg.ttf);
}
@fontface {
font-family: Swiszt
src: url(fonts/swist.ttf);
font-weight: thin;
}
body, html {
background-color: #d83030;
margin: 0;
padding: 0;
}
/* the first missing images is the background of the banner container below */
#container {
position: fixed;
top: 0px;
left: 0px;
background-image: url:"images/banner.jpg";
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
content: 60px;
padding: 0px;
border: 5px #73008C;
margin-left: 0px;
margin-right: 0px;
z-index: -3;
}
#header {
position: static;
background-color: rgba(255, 255, 255, 0.4);
width: 100%;
height: 12%;
margin: auto;
z-index: 1;
}
/*as well as the logo that can be found in the HTML*/
#logo {
position: relative;
border: 0px;
margin-top: 9px;
z-index: 2;
}
#nav01 {
position: absolute;
background-color: #374754;
width: 100%;
height: 40px;
padding: 0px;
margin-left: 0px;
margin-top: 85px;
margin-right: 0px;
border-radius: 0px 0px 6px 6px
}
ul#menu {
font-family: "Swisz";
position: relative;
background-color: #374754;
padding: 0;
margin-top: 13px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
}
ul#menu li {
display: inline;
margin-right: 5px;
}
ul#menu li a {
background-color: #374754;
padding: 10px 10px;
text-decoration: none;
color: #ffffff;
border-radius: 4px 4px 4px 4px;
}
ul#menu li a:hover {
color: white;
font-style: bold;
background-color: #d83030;
}
#overlay {
font-family: "Swisz";
position: relative;
margin-left: auto;
margin-right: auto;
top: 250px;
bottom: 200px;
width: 30%;
height: 30%;
background-color: #d83030;
padding: 15px 15px;
color: #ffffff;
border-radius: 8px 8px 8px 8px;
}
#info {
position: relative;
padding-left: 450px;
top: 410px;
}
body {
font-family: "Swisz", Helvetica;
font-size: 12px;
background-color: #ffffff;
color: #ffffff;
text-align: center;
padding: 0px;
}
#main {
position: absolute;
top: 800px;
padding: 0;
width: 100%;
background-color: #d83030;
margin: 0;
}
h1 {
text-align: center;
font-size: 26pt;
}
h2 {
font: "Swiszt";
font-variant: "thin";
color: #ffffff;
text-align: center;
font-size: 14pt;
}
h4 {
font-family: Swisz;
color: #374754;
text-align: center;
}
h5 {
font-family: Helvetica, sans-serif;
color: #374754;
text-align: center;
font-size: 16px;
}
#sub {
position: relative;
color: #374754;
top: 920px;
background-color: #ffffff;
padding: 0;
margin: 0;
size: 40;
}
#hiddenbox {
position: relative;
width: 100%;
height: 298px;
background-image: url("hidden_bg.jpg");
background-repeat: repeat-x;
padding: 0;
margin: 0;
color: #ffffff;
}
p {
margin-left: 200px;
margin-right: 200px;
}
.pagedown {
position: relative;
width: 100%;
padding-top: 0;
margin: 0;
}
#footer {
position: relative;
color: #ffffff;
margin-bottom: 0px;
margin-top: 100px;
}<!DOCTYPE html>
<html>
<head>
<title>SITE- This is our website</title>
<link href="Site.css" rel="stylesheet">
<script src="Script.js"></script>
</head>
<body>
<div id="container">
\t <div id="header">
\t \t
\t \t <div id="logo">
/* the logo is below*/
<img src="images/logo.png" alt="SITE" style="width: 321px; height: 72px"></img>
\t \t </div>
\t </div>
</div>
<nav id="nav01"></nav>
<div id="overlay">
\t
\t <h1>SPECTACULAR BIG HEADING<h1>
\t <h2>THE FUTURE IS HERE</h2>
</div>
<div id="info">
<img src="seehow.png" alt="See How" style="width: 345px; height: 240px">
</div>
<div id="main">
<h1>WELCOME TO WEBSITE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut turpis sapien. Proin tempus nibh ac rhoncus congue. Nullam pretium placerat vestibulum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed sed est vitae libero placerat tristique. Aliquam pulvinar convallis mi, vitae consequat tortor pellentesque ut. In lacinia, ex vel accumsan viverra, est ex efficitur justo, pulvinar luctus mi leo nec risus. Sed nec tellus bibendum, convallis enim at, elementum lectus. Fusce eu enim blandit, volutpat eros lobortis, auctor odio. Praesent tristique sem elit, nec consequat tortor placerat at.</p>
<img src="wilfcent.png" alt="Wilf" style="width:345px;height:428px">
</div>
<div id="sub">
<div id="hiddenbox">
\t \t <br>
\t <br>
\t \t <p2>Open up new business avenues</p2>
\t <br>
\t \t <p2>Review your acquisitions</p2>
\t <br>
\t \t <p2>Monitor events</p2>
\t \t <img src="promo.png" alt="Promotion" style="width:321px;height:176px"></img>
\t </div>
\t <img src="pagedown.gif" alt="Page down" style="width:100%;height:68px"></img>
\t <h1> How It Works </h1>
<br>
\t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut turpis sapien. Proin tempus nibh ac rhoncus congue. Nullam pretium placerat vestibulum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed sed est vitae libero placerat tristique. Aliquam pulvinar convallis mi, vitae consequat tortor pellentesque ut. In lacinia, ex vel accumsan viverra, est ex efficitur justo, pulvinar luctus mi leo nec risus. Sed nec tellus bibendum, convallis enim at, elementum lectus. Fusce eu enim blandit, volutpat eros lobortis, auctor odio. Praesent tristique sem elit, nec consequat tortor placerat at. Nullam eu arcu et ex iaculis feugiat ut quis enim. Nulla quis libero placerat, accumsan nulla et, laoreet magna. Sed congue ut nunc maximus gravida.</p>
<br>
<br>
<br>
<br>
<br>
<br>
\t <footer id="foot01"></footer>
</div>
<script src="Script.js"></script>
</body>
</html>
은 어쩌면이 줄과 같다 : 'URL : "이미지/banner.jpg 이미지"' url ("images/banner.jpg")와 같은 괄호가 있어야합니다. – lemieuxster
나는 그것을 시도했지만 여전히 그런 행운은 없습니다. 나는 그것이 로고에도 왜 영향을 미치는지에 대해 당혹 스럽다. 그래도 답장을 보내 주셔서 감사합니다. –