0

そのため、事前にここで検索を行い、質問に対する答えを見つけようとしましたが、見つけたすべての解決策で結果が得られませんでした。基本的に、表示したい div#wrapper に画像がありますが、それぞれの div の後の領域をテキストで埋めない限り表示されません。

私はoverflow:auto;を持っています。後続の div にフロートがあるため、#wrapper で。

CSS ファイル:

@media only screen and (min-width: 25em) {
   html {
   background: url(images/gridbg.jpg) repeat fixed center top;
   }
}

@media only screen and (max-width:25em) {
    html {
    background-color:#0c0c1f;
    }
}

img {
    border:0px;
}

textarea:focus, input:focus{
    outline: none;
}

#wrapper {
    margin:0 auto;
    width:60em;
    overflow:auto;
    background-image:url(images/cont-bg.png);
}

#content {
    text-align:justify;
    position:fixed;
    width:59em;
    height:100%;
    overflow:auto;
    padding-top: 0.4em;
    padding-bottom: 0.4em;
    padding-left: 0.4em;
    padding-right: 0.4em;
    outline:none;
    z-index:2;
    margin-top:12em;
}

#homeNav {
    position:fixed;
    float:left;
    margin-left:0.65em;
    margin-top:0.65em;
    z-index:3;
}

#primaryNav {
    z-index:2;
    float:right;
    margin-left:28em;
    margin-top:1em;
    position:fixed;
}

#navGFX {
    background-image:url(images/navGFX.png);
    background-repeat:no-repeat;
    width:60em;
    height:8em;
    float:left;
    position:fixed;
    z-index:1;
    margin-top:3em;
}

HTML ファイル:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ag Design</title>
<link href="main.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="scrollstyles.css"/>

<script type='text/javascript' src="js/flexcroll.js"></script>
</head>

<body>
<div id="wrapper">

<div id="navGFX">
<div id="homeNav"><a href="index.html"><img src="images/buttons/btn_logo.png"></a></div>
<div id="primaryNav">
<a href="index.html"><img src="images/buttons/btn_home.png"></a>
<a href="index.html"><img src="images/buttons/btn_link1.png"></a>
<a href="index.html"><img src="images/buttons/btn_link2.png"></a>
<a href="index.html"><img src="images/buttons/btn_link3.png"></a>
<a href="index.html"><img src="images/buttons/btn_link4.png"></a>
</div>
</div>

<div id="content" class="flexcroll">
This area is full of filler text
</div>
</div>
</body>
</html>

私は何が間違っているのか、最も霧の手がかりがありません。誰にもアイデアはありますか？:/

4

1 に答える 1