0
У меня возникли проблемы с веб-сайтом. Я пытаюсь, чтобы текст оставался в том же месте, когда страница просматривается на больших экранах или при масштабировании (уменьшайте масштаб и смотрите сами). У меня такая же проблема с кнопками с правой стороны. Может ли кто-нибудь сказать мне, как я могу это решить?Как сделать текст и кнопки палкой на задний план?
Пожалуйста, помогите мне с этим. Я понятия не имею, что делать, я пробовал абсолютное позиционирование, индивидуально позиционируя divs с полями, ничего не работает. Я думаю, что параметры родителя перезаписывают дочерние параметры или что-то в этом роде. Я честно не знаю, что еще попробовать. Прошлые дни уже.
Вот мой 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"> </p>
<p id="u205-5">About 6 years ago, I realized my passion for art, and began a self-taught career... for now.</p>
<p id="u205-6"> </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"> </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"> </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"> </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"> </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"> </p>
<p> </p>
</div>
</div>
<div class="clearfix grpelem" id="pu400"><!-- column -->
<a class="nonblock nontext museBGSize colelem" id="u400" href="mailto:[email protected]"><!-- 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 */
{
\t color: #0000EF;
\t background-color: #E668D9;
}
.html
{
\t background-color: #000000;
}
#page
{
\t z-index: 1;
\t max-width:100%;
\t height: auto;
\t border-style: none;
\t border-color: transparent;
\t padding-bottom: 212px;
\t margin-left: auto;
\t margin-right: auto;
\t background: transparent url("../images/home%20back%20(smaller).jpg") no-repeat center center;
}
#pu203-4
{
\t width: 0.01px;
\t margin-right: -10000px;
\t margin-top: 478px;
\t margin-left: 138px;
position: relative;
}
#u203-4
{
\t z-index: 2;
\t display: block;
\t vertical-align: top;
\t margin-left: 138px;
\t position: relative;
}
#u205-24
{
\t z-index: 6;
\t min-width: 465px;
\t height: auto;
\t margin-top: 29px;
margin-left: 0px;
margin-right: 0px;
\t 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
{
\t width:100%;
font-size: 11px;
\t line-height: 13px;
\t color: #86A4B2;
\t font-family: cambo, serif;
\t font-weight: 400;
}
#pu400
{
\t width: 0.01px;
\t margin-right: -10000px;
\t margin-top: 570px;
\t margin-left: 892px;
}
#u400
{
\t z-index: 31;
\t width: 354px;
\t height: 120px;
\t position: relative;
\t background: transparent url("../images/mail%20button1-a.png") no-repeat left top;
\t background-size: contain;
}
#u400:hover
{
\t margin: 0px;
\t background: transparent url("../images/mail%20button1-o.png") no-repeat left top;
\t background-size: contain;
}
#u400:active
{
\t margin: 0px;
\t background: transparent url("../images/mail%20button1-m.png") no-repeat left top;
\t background-size: contain;
}
#u400.MuseLinkActive
{
\t margin: 0px;
\t background: transparent url("../images/mail%20button1-n.png") no-repeat left top;
\t background-size: contain;
}
#u383
{
\t z-index: 30;
\t width: 354px;
\t height: 120px;
\t top: -8px;
\t margin-bottom: -8px;
\t position: relative;
\t background: transparent url("../images/skype%20button-active%20(normal).png") no-repeat left top;
\t background-size: contain;
}
#u383:hover
{
\t margin: 0px 0px -8px;
\t background: transparent url("../images/skype%20button-over.png") no-repeat left top;
\t background-size: contain;
}
#u383:active
{
\t margin: 0px 0px -8px;
\t background: transparent url("../images/skype%20button-mouse%20down.png") no-repeat left top;
\t background-size: contain;
}
body
{
\t position: relative;
\t min-width: 1280px;
max-height:100%;
}
Извините, по телефону прямо сейчас и трудно набрать полный ответ, но чтобы сохранить текст в том же месте, вы можете использовать фиксированное положение: фиксированное, а для увеличения масштаба вы можете использовать обратное масштабирование. Другими словами: 1/zoomlevel. – trnelson
Не будет «исправлена» сохранить текст в фиксированном положении на экране независимо от прокрутки/увеличения? Мне также интересно посмотреть сайт на больших экранах. Разве он не будет масштабировать фон, делающий пиксели видимыми? –