1. ホーム
  2. 質問と答え
  3. CSSでdivを移動できないため、src imgは表示されません

CSSでdivを移動できないため、src imgは表示されません

2017-11-22 3 views
-1

HTMLとCSSで私の位置を練習していますが、id=menuのdivの位置を変更できず、ソースimgが表示されません。私は行ごとに構文をチェックしましたが、問題を見つけることはできません。CSSでdivを移動できないため、src imgは表示されません

HTML：

<!doctype html> 
<html> 
<head> 
<title>dreampage</title> 
<link rel="stylesheet" type="text/css" href="./css/style.css" /> 
</head> 
<body> 



<div class="headermenu"> 
//here is my problem in html par 
<div id="menu"> 
<a href="fun.html" /><img src=<img src="./img/logo/fun.png" height="30px"  width="40px"/></a> 
<a href="home.html" /><img src=<img src="./img/logo/home.png"  height="30px" width="40px"/></a> 
<div id="partition" > 

</div> 
<a href="addrequest.html" /><img src=<img src="./img/logo/addrequest.png" height="30px" width="40px"/></a> 
<a href="message.html" /><img src=<img src="./img/logo/message.png" height="30px" width="40px"/></a> 


<a href="notification.html" /><img src=<img src="./img/logo/notification.png" height="30px" width="40px"/></a> 
<a href="help.html" /><img src=<img src="./img/logo/help.png" height="30px" width="40px"/></a> 
<a href="setting.html" /><img src=<img src="./img/logo/setting.png" height="30px" width="40px"/></a> 


</div> 
<div id="wowlogo"> 
<img src="./img/logo/wowlogo.png" /> 

</div> 


<div id="wow_meter"> 

<p>9999!</p> 
</div> 


<div id="searchlogo"> 

<img src="./img/logo/search.png" height="20px" width="15px"/> 

</div> 


<div class="searchbox"> 

<form action="search.php" method="GET" id="search"> 
    <input type="text" name="search" size="80" placeholder="Search"> 
</form> 
</div> 

</div> 
<div class="sidepic" style="height: 100%;"> 
<div class="top5"> 
<p><font color="#472b1d">top 5 in your friendlist</font></p> 
</div> 
<div class="pdframe"> 

</div> 


<div class="post"> 
<p> 

</div> 
<div class="pdpic"> 
<img src="./img/logo/profilepicdummy.png" /> 
</div> 

<div class="top5names"> 
<img src="./img/logo/profilepicdummy.png" /> 
<p>Godwin Romero</p> 
<img src="./img/logo/profilepicdummy.png" /> 
<p>Retchle Fernandez</p> 
<img src="./img/logo/profilepicdummy.png" /> 
<p>Danelie Agpuldo</p> 
<img src="./img/logo/profilepicdummy.png" /> 
<p>Cassandra Agpuldo</p> 
<img src="./img/logo/profilepicdummy.png" /> 
<p>Jay Mendoza</p> 
</div> 
<div class="usergroup"> 
<p align="right"><b>City: </b></p> 
<p align="right"><b>School: </b></p> 
<p align="right"><b>Group: </b></p> 
</div> 
<div class="usergroupanswer"> 
<p>Quezon City</p> 
<p>QCPU</p> 
<p>BSIE</p> 
</div> 
</div> 
<div class="newsbackground"> 
<div class="newsfeed"> 
<div id="top1feed"> 
<div class="pd"> 
<img src="./img/logo/profilepicdummy.png" /> 
</div> 
<div class="feedusername"> 
<p>Cassandra Agpuldo</p> 
</div> 
<div class="feeduserlastpost"> 
<p>12 hrs.ago</p> 
</div> 
<div class="postpartitionupper"> 

</div> 
<div class="feedusercomment"> 
<p>Her comment....</p> 

<div class="postpartitionlower"> 


</div> 
</div> 
<div class="feeduserlikelogo"> 
<img src="./img/logo/like.png" /> 
</div> 
<div class="feeduserlike"> 
<p>like</p> 
</div> 
<div class="feedusercommentor"> 
<p>comment</p> 
</div> 
<div class="feedusercommentorlogo"> 
<img src="./img/logo/comment.png" /> 
</div> 



</div> 

<div id="top2feed"> 
<div class="pd"> 
<img src="./img/logo/profilepicdummy.png" /> 
</div> 
<div class="feedusername"> 
<p>Lougen Valenzuela</p> 
</div> 
<div class="feeduserlastpost"> 
<p>2 hrs.ago</p> 
</div> 
<div class="postpartitionupper"> 

</div> 
<div class="feedusercomment"> 
<p>Her comment.... <3</p> 

<div class="postpartitionlower"> 


</div> 
</div> 
<div class="feeduserlikelogo"> 
<img src="./img/logo/like.png" /> 
</div> 
<div class="feeduserlike"> 
<p>like</p> 
</div> 
<div class="feedusercommentor"> 
<p>comment</p> 
</div> 
<div class="feedusercommentorlogo"> 
<img src="./img/logo/comment.png" /> 
</div> 



</div> 
</div> 
</div> 

</div> 

</div> 
</div> 

</body> 
</html>

私は二重のIDをチェックし、それは同じであるので、私は私のCSSに問題があるとは思わないが、それは、私はdoesnの私の#menuセクションに置くすべてのものと思われますHTMLには表示されません。

CSS：あなたは間違っているタグ <img src=<img src="./img/logo/fun.png" height="30px" width="40px"/> を使用することができます

* {margin: 0px; 
padding; 0px; 

font-family:comic sans ms; 


} 
body {background-color: #f1ead7; 
overflow: scroll;} 
.newsbackground { 
position: fixed; 
top: 38px; 
left: 200px; 
height: 100%; 
width: 660px; 
# background-color: red; 

} 

.newsfeed { 
position: fixed; 
top: 38px; 
left: 225px; 
left: 225px; 
height: 100%; 
width: 600px; 
color: #472b1d; 

} 

#top1feed{ 
position: relative; 
top: 5px; 
left: 0px; 

margin-bottom: 20px; 
width: 100%; 
background-color: #d2c195; 

} 
#top2feed{ 
position: relative; 
top: 5px; 
left: 0px; 

margin-bottom: 20px; 
width: 100%; 
background-color: #d2c195; 

} 
.pd img { 
position: absolute; 
height: 50px; 
width: 75px; 
top: 10px; 
left: 10px; 
} 

.feedusername { 
font-weight: bold; 
font-size: 20px; 
position: relative; 
left: 100px; 
top: 3px; 
color: #97752b; 
} 

.postpartitionupper { 
position: absolute; 
top: 59px; 
left: 100px; 

Width:500px; 

height: 1px; 
background-color: #472b1d; 
} 

.postpartitionlower { 
position: relative; 
top: 0px; 
left: 0px; 

Width: 500px; 
height: 1px; 
background-color: #472b1d; 
} 
.feeduserlastpost{ 
position: absolute; 
left:100px; 
top: 33px; 
font-size: 15px; 
color: #8f7c5b; 
} 
.feeduserlikelogo img { 
position: relative; 
left:100px; 
top:36px; 
height: 30px; 
width: 30px; 

} 
.feeduserlike { 
position: relative; 
left:140px; 
top: 8px; 
height: 30px; 
width: 30px; 

} 
.feedusercomment { 
    position: relative; 
left:100px; 
top: 30px; 
font-size: 18px; 
} 

.feedusercommentorlogo img { 
    position: relative; 
left:180px; 
top: -50px; 
height: 30px; 
width: 30px; 
} 


.feedusercommentor { 
    position: relative; 
left:220px; 
top: -25px; 
font-size: 18px; 
} 
.top5names { 
position: fixed; 
top: 325px; 
left: 10px 
} 


.top5names img 
{height: 50px; 
width: 75px; 

min-height: 100%; 
max-height; 300%; 

} 
.top5 { 
position: fixed; 
font-weight: bold; 
top: 300px; 
left: 10px; 

} 
.usergroup { 
position: fixed; 
top: 230px; 
left: 10px 


} 
.usergroupanswer { 
position: fixed; 
top: 230px; 
left: 80px 
} 
.sidepic { 
position: fixed; 
top: 38px; 
left: 0px 
height: 100%; 
width: 200px; 
background-color: #d2c195; 
margin-top: 0px; 
margin-left: 0px; 

padding-left: 0px; 
padding_right: 0px; 
padding_bottom: 0px; 
padding_top: 0px; 
} 
.pdframe { 
position: fixed; 
top: 58px; 
left: 0px; 
height: 150px; 
width: 200px; 
background-color: #857d66; 
} 
.pdpic { 
position: fixed; 
top: 68px; 
left: 8px; 

    margin-top: 0px; 
margin-left: 0px; 

padding-left: 0px; 
padding_right: 0px; 
padding_bottom: 0px; 
padding_top: 10px; 

} 
.pdpic img { 
height: 130px; 
width: 180px; 
min-height: 100%; 
max-height; 300%; 
} 



.headermenu { 

position: fixed; 
left: 0px; 
top: 0px; 
background-color: #472b1d; 
height: 38px; 
border-bottom; 0px; 
padding-left: auto; 
padding_right: auto; 
width: 100%; 
color: #f8f6f5; 

} 


#searchlogo { 
position: fixed; 
left: 184px; 
top: 6px; 


padding-left: 1px; 
padding_right: 2px; 
padding_bottom: 0px; 
padding_top: 0px; 


background-color: #f1ead7; 
} 
#searchlogo img { 

min-height: 100%; 
max-height; 200%; 
} 
.searchbox{ 
position: fixed; 
top: 6px; 
left: 200px; 

background-color: #f1ead7; 


#search { 


} 
//here is the style for menu 
#menu { 

position: fixed; 
left: 870px; 
top: 3px; 


padding-top: 10px; 
padding-left: 10px; 
margin-left:100px; 


} 

#menu img { 
height:30px; 
width: 40px; 

}

出典

2017-11-22 Godwin Romero

+0

始めることができます：＃1 - あなたのCSSコードを整理します。 ＃2 - 属性をaで値で区切ってどこでも修正できます。代わりに：＃3 put;各行の最後に＃4を使用する - "padding-left"のような場合には_の代わりに – Boris

+1

あなたの 'img'タグには' 'という' img'タグがあります。 ' flv imgは表示されません。<fb：flv src = "" ..... img = 'img url' ...>

  • 3. getImage.phpの画像はimg srcに表示されません
  • 4. img ng-srcを使用できません（imgのプロパティとして知られていないため、ng-srcにバインドできません）
  • 5. CSS divエリアが表示されません（ファイヤーバグで表示されます）
  • 6. ブラウザで動作しますが、コードブラウザのアプリケーションではimg srcに表示されません
  • 7. CSSトランジションでdivを移動
  • 8. vue + webpackプロジェクトimgは静的なsrcをロードできません
  • 9. アレイからのイメージは表示されません<img src>
  • 10. CSSローダーコンテナを移動できません
  • 11. CSSイメージを移動できません
  • 12. imgがsrcタグ経由でアップロードされていません
  • 13. 2 img src、1つのイメージが表示され、もう1つは表示されません。
  • 14. divはdivで100％幅で表示されません。#portofolio
  • 15. サファリブラウザに表示されないimg srcタグ画像
  • 16. img src = ""画像が表示されない
  • 17. 関数のImg src引数です。画像を表示していません
  • 18. 有線で表示されたCSSがChromeでレンダリングされました（Safariでは表示されません）
  • 19. CSSプレビューでは動作しませんが、Dreamweaverで表示されるCSSファイル
  • 20. CSSトランスフォーム：移動の移動postion：固定された内部Div
  • 21. symfony 3はアップロードされたファイルを移動できません
  • 22. CSS - その前に表示されていないクリックでdivを上に移動
  • 23. イメージはimgタグで表示できませんinhtml
  • 24. d3.js - マウス移動に追加された円は表示されません
  • 25. divが適切なCSSスタイルで表示されない
  • 26. CSS - 表示プロパティがimgと連携していません
  • 27. Html imgタグでブラウザに画像が表示されません
  • 28. ドロップダウンメニューは表示されません
  • 29. div内にamp-imgが表示されない
  • 30. imgが別のdivにあっても表示されない

    •  関連する問題