Question

只是练习我在HTML和CSS中的定位，但是我遇到了这个问题，我无法更改id=menu的div的位置，并且源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>

我不认为我的CSS中存在问题，因为我仔细检查了ID并且它是相同的，但似乎我放在#menu部分中的所有内容都没有显示在HTML。

CSS：

* {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;

}

Answer 1

你可以使用错误的标签 <img src=<img src="./img/logo/fun.png" height="30px" width="40px"/> 你应该使用<img src="./img/logo/fun.png" height="30px" width="40px"/>

检查Dreamweaver中的代码。

无法在CSS中移动div并且src img不显示

1 个答案: