如何使文字和按钮贴在背景上?

时间:2014-10-18 16:21:55

标签: html css3

我目前在网站上遇到问题。我想在大屏幕上查看页面或缩小页面(缩小并查看自己)时,使文本保持在同一位置。我的右侧按钮也有同样的问题。谁能告诉我如何解决这个问题?

http://ronnym.tk/

请帮我解决这个问题。我不知道该怎么做,我尝试了绝对定位,单独定位带边距的div,没有任何作用。我认为父参数会覆盖子参数或其他东西。老实说,我不知道还有什么可以尝试的。已经浪费了几天。

这是我的HTML代码

<!DOCTYPE html>
<html class="html">
 <head>

  <script type="text/javascript">
   if(typeof Muse == "undefined") window.Muse = {}; window.Muse.assets = {"required":["jquery-1.8.3.min.js", "museutils.js", "jquery.musepolyfill.bgsize.js", "index.css"], "outOfDate":[]};
</script>
  
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
  <meta name="generator" content="2014.0.1.264"/>
  <title>HOME</title>
  <!-- CSS -->
  <link rel="stylesheet" type="text/css" href="css/site_global.css?475048684"/>
  <link rel="stylesheet" type="text/css" href="css/index.css?4024854745" id="pagesheet"/>
  <!-- Other scripts -->
  <script type="text/javascript">
   document.documentElement.className += ' js';
var __adobewebfontsappname__ = "muse";
</script>
  <!-- JS includes -->
  <script type="text/javascript">
   document.write('\x3Cscript src="' + (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//webfonts.creativecloud.com/cambo:n4:all.js" type="text/javascript">\x3C/script>');
</script>
   </head>
 <body>

  <div class="clearfix" id="page"><!-- group -->
   <div class="clearfix grpelem" id="pu203-4"><!-- column -->
    <img class="colelem" id="u203-4" alt="ABOUT ME" width="171" height="41" src="images/u203-4.png"/><!-- rasterized frame -->
    <div class="clearfix colelem" id="u205-24" data-ice-editable="html" data-ice-options="disableImageResize,none" data-muse-uid="U205"><!-- content -->
     <p id="u205-2">My name is Ronny Minkovsky, and I'm a graphics designer and artist, currently based somewhere behind a computer screen.</p>
     <p id="u205-3">&nbsp;</p>
     <p id="u205-5">About 6 years ago, I realized my passion for art, and began a self&#45;taught career... for now.</p>
     <p id="u205-6">&nbsp;</p>
     <p id="u205-8">Ever since my childhood days, I've always loved gaming, and developed a real passion for its graphics, a passion that eventually lead me into creating, and participating in the art production of several games, one of which will be released on steam shortly, by the name of CivCraft.</p>
     <p id="u205-9">&nbsp;</p>
     <p id="u205-11">I'm majorly inspired by the Cyberpunk genre, and by authors such as Philip K. Dick, H. P. Lovecraft, Edgar Allan Poe, and Baudrillard and have been gaming since the good old days of Divine Divinity, and Ultima.</p>
     <p id="u205-12">&nbsp;</p>
     <p id="u205-14">Even though I prefer gaming graphics, I also tend to be versatile, working on web design, and advertising as well.</p>
     <p id="u205-15">&nbsp;</p>
     <p id="u205-17">I know my way around a number of digital art programs, mainly Photoshop, Illustrator, and Sketchbook Pro.</p>
     <p id="u205-18">&nbsp;</p>
     <p id="u205-20">Take a moment to browse through my Projects section, where I uploaded a few works from different fields, or skim through the Artwork tab for random art I made.</p>
     <p id="u205-21">&nbsp;</p>
     <p>&nbsp;</p>
    </div>
   </div>
   <div class="clearfix grpelem" id="pu400"><!-- column -->
    <a class="nonblock nontext museBGSize colelem" id="u400" href="mailto:portal-m@hotmail.com"><!-- simple frame --></a>
    <a class="nonblock nontext museBGSize colelem" id="u383" href="callto://portal230762"><!-- simple frame --></a>
   </div>
  </div>
  <div class="preload_images">
   <img class="preload" src="images/mail%20button1-o.png" alt=""/>
   <img class="preload" src="images/mail%20button1-m.png" alt=""/>
   <img class="preload" src="images/mail%20button1-n.png" alt=""/>
   <img class="preload" src="images/skype%20button-over.png" alt=""/>
   <img class="preload" src="images/skype%20button-mouse%20down.png" alt=""/>
  </div>
  <!-- JS includes -->
  <script type="text/javascript">
   if (document.location.protocol != 'https:') document.write('\x3Cscript src="http://musecdn.businesscatalyst.com/scripts/4.0/jquery-1.8.3.min.js" type="text/javascript">\x3C/script>');
</script>
  <script type="text/javascript">
   window.jQuery || document.write('\x3Cscript src="scripts/jquery-1.8.3.min.js" type="text/javascript">\x3C/script>');
</script>
  <script src="scripts/museutils.js?353204447" type="text/javascript"></script>
  <script src="scripts/jquery.musepolyfill.bgsize.js?323834883" type="text/javascript"></script>
  <!-- Other scripts -->
  <script type="text/javascript">
   $(document).ready(function() { try {
(function(){var a={},b=function(a){if(a.match(/^rgb/))return a=a.replace(/\s+/g,"").match(/([\d\,]+)/gi)[0].split(","),(parseInt(a[0])<<16)+(parseInt(a[1])<<8)+parseInt(a[2]);if(a.match(/^\#/))return parseInt(a.substr(1),16);return 0};(function(){$('link[type="text/css"]').each(function(){var b=($(this).attr("href")||"").match(/\/?css\/([\w\-]+\.css)\?(\d+)/);b&&b[1]&&b[2]&&(a[b[1]]=b[2])})})();(function(){$("body").append('<div class="version" style="display:none; width:1px; height:1px;"></div>');
for(var c=$(".version"),d=0;d<Muse.assets.required.length;){var f=Muse.assets.required[d],g=f.match(/([\w\-\.]+)\.(\w+)$/),l=g&&g[1]?g[1]:null,g=g&&g[2]?g[2]:null;switch(g.toLowerCase()){case "css":l=l.replace(/\W/gi,"_").replace(/^([^a-z])/gi,"_$1");c.addClass(l);var g=b(c.css("color")),h=b(c.css("background-color"));g!=0||h!=0?(Muse.assets.required.splice(d,1),"undefined"!=typeof a[f]&&(g!=a[f]>>>24||h!=(a[f]&16777215))&&Muse.assets.outOfDate.push(f)):d++;c.removeClass(l);break;case "js":l.match(/^jquery-[\d\.]+/gi)&&
typeof $!="undefined"?Muse.assets.required.splice(d,1):d++;break;default:throw Error("Unsupported file type: "+g);}}c.remove();(Muse.assets.outOfDate.length||Muse.assets.required.length)&&alert("Some files on the server may be missing or incorrect. Clear browser cache and try again. If the problem persists please contact website author.")})()})();/* body */
Muse.Utils.transformMarkupToFixBrowserProblemsPreInit();/* body */
Muse.Utils.prepHyperlinks(true);/* body */
Muse.Utils.showWidgetsWhenReady();/* body */
Muse.Utils.transformMarkupToFixBrowserProblems();/* body */
} catch(e) { if (e && 'function' == typeof e.notify) e.notify(); else Muse.Assert.fail('Error calling selector function:' + e); }});
</script>
   </body>
</html>

这是CSS代码

.version.index /* version checker */
{
	color: #0000EF;
	background-color: #E668D9;
}

.html
{
	background-color: #000000;
}

#page
{
	z-index: 1;
	max-width:100%;
	height: auto;
	border-style: none;
	border-color: transparent;
	padding-bottom: 212px;
	margin-left: auto;
	margin-right: auto;
	background: transparent url("../images/home%20back%20(smaller).jpg") no-repeat center center;
}

#pu203-4
{
	width: 0.01px;
	margin-right: -10000px;
	margin-top: 478px;
	margin-left: 138px;
        position: relative;
}

#u203-4
{
	z-index: 2;
	display: block;
	vertical-align: top;
	margin-left: 138px;
	position: relative;
}

#u205-24
{
	z-index: 6;
	min-width: 465px;
	height: auto;
	margin-top: 29px;
        margin-left: 0px;
        margin-right: 0px;
	position: relative;
        
}

#u205-2,#u205-3,#u205-5,#u205-6,#u205-8,#u205-9,#u205-11,#u205-12,#u205-14,#u205-15,#u205-17,#u205-18,#u205-20,#u205-21
{
	width:100%;
        font-size: 11px;
	line-height: 13px;
	color: #86A4B2;
	font-family: cambo, serif;
	font-weight: 400;
}

#pu400
{
	width: 0.01px;
	margin-right: -10000px;
	margin-top: 570px;
	margin-left: 892px;
}

#u400
{
	z-index: 31;
	width: 354px;
	height: 120px;
	position: relative;
	background: transparent url("../images/mail%20button1-a.png") no-repeat left top;
	background-size: contain;
}

#u400:hover
{
	margin: 0px;
	background: transparent url("../images/mail%20button1-o.png") no-repeat left top;
	background-size: contain;
}

#u400:active
{
	margin: 0px;
	background: transparent url("../images/mail%20button1-m.png") no-repeat left top;
	background-size: contain;
}

#u400.MuseLinkActive
{
	margin: 0px;
	background: transparent url("../images/mail%20button1-n.png") no-repeat left top;
	background-size: contain;
}

#u383
{
	z-index: 30;
	width: 354px;
	height: 120px;
	top: -8px;
	margin-bottom: -8px;
	position: relative;
	background: transparent url("../images/skype%20button-active%20(normal).png") no-repeat left top;
	background-size: contain;
}

#u383:hover
{
	margin: 0px 0px -8px;
	background: transparent url("../images/skype%20button-over.png") no-repeat left top;
	background-size: contain;
}

#u383:active
{
	margin: 0px 0px -8px;
	background: transparent url("../images/skype%20button-mouse%20down.png") no-repeat left top;
	background-size: contain;
}

body
{
	position: relative;
	min-width: 1280px;
        max-height:100%;
}

1 个答案:

答案 0 :(得分:0)

尝试使用页面包装器,如下所示:

<div class="wrap"> all your page content </div>

使用这个CSS:

.wrap {width=800px; margin: 0px auto;}

这将自动水平居中DIV包装器,并确保相对于包装器始终保持在同一位置的所有内容。 您仍然可以通过添加更多内容或添加高度值来垂直展开页面。

如果800px太多或太少,您可能想要更改宽度,但要确保它是一个常量(px)值。