0
外部スタイルページでページのスタイルを設定しようとしています。私のディビジョンのいくつかはすべてのスタイリングを拾い、いくつかはそうしない。特に、画像ファイルを持つものすべてが、高さおよび/または幅を除くすべてのスタイリングをとる。 z位置、左、上などはすべて正常に動作します。私はDOMエクスプローラをチェックして、bodyタグからサイズを継承していることを示していませんが、なぜサイズが正しくないのかわかりません。外部CSSの高さが機能しない
HTML：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8" />
<link rel="stylesheet" type="text/css" href="race_inprogress.css">
<script type='text/JavaScript' src="race.js" language=javascript></script>
</head>
<body>
<h1 class = "amazing"> The Amazing Race For an A! </h1>
<h1 class = "fordmeis"> Professor Ford Vs Michael Meis </h1>
<div id="traffic-light">
<div id="stopLight" class="bulb"></div>
<div id="slowLight" class="bulb"></div>
<div id="goLight" class="bulb"></div>
</div>
<input type=button onClick="illuminateGreen();timer();" value='Go!' style="position: absolute; left: 545px; top:265px;">
<div class = "racer1">
<img src=images/teacher.jpg id='i1'>
</div>
<br><br><br><br>
<div class = "racer2">
<img src=images/meis.png id='i2'>
</div>
<div class = "road1">
<img src=images/road.jpg>
</div>
<div class = "road2">
<img src=images/road.jpg>
</div>
<div class = "winners">
<img src=images/winner_ford.png id='image1' onclick="reset()">
<br><br><br><br>
<img src=images/winner_meis.png id='image2' onclick="reset()">
</div>
<script>
illuminateRed()
hideImage()
</script>
<div class="vertical-line">
</div>
</body>
</html>
はCSS：
html
{
height: 100%;
width: 100%;
}
body
{
font-family: sans-serif;
background: url("images/checkback.png");
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
div.racer1
{
width: 10px;
position:absolute;
left: 25px;
top: 325px;
z-index: 2;
}
div.racer2
{
width: 10px;
position:absolute;
left: 25px;
top: 500px;
z-index:2;
}
div.road1
{
position:absolute;
left: 30px;
top: 325px;
z-index: 1;
height: 133px;
width: 1180px:
}
div.road2
{
position: absolute;
left: 30px;
top: 500px;
z-index: 1;
height: 133px;
width: 1180px;
}
div.winners
{
position:absolute;
left: 5px;
top: 0px;
z-index: 3;
width: 100%;
height: 100%;
}
h1.amazing
{
font-size: 30px;
position: relative;
top: 150px;
left: 20px;
color: gold;
}
h1.fordmeis
{
font-size: 30px;
position: relative;
top: 90px;
left: 700px;
color: gold;
}
#traffic-light
{
height: 200px;
width: 100px;
left: 500px;
position: absolute;
background-color: #333;
border-radius: 40px;
margin: -100px 0;
padding: 20px;
}
.bulb
{
height: 50px;
width: 50px;
background-color: #111;
border-radius: 50%;
margin: 15px auto;
transition: background 500ms;
}
div.vertical-line
{
width: 0px;
height: 315px;
top: 55px;
position:relative;
left: 1200px;
color: gold;
border: 10px inset;
z-index: 1;
}
これは、インラインタグでうまく動作しますが、これは学校のプロジェクトのためのものであり、外部スタイルシートを使用することが当然の先頭に指定されたインストラクターが –
この1 .racer1のimg { 高試してみてください：100％; 幅：100％; } –
タグのwidth、width = ""はCSSではなく、実際のHTMLタグ属性です。ページのレンダリングとペイントを技術的に行う場合は、画像に少なくとも幅が設定されていて、複数の計算がないようにすることをお勧めします。 style = "width：100px"のような属性を追加すると、インラインスタイルと見なされます。 –