0
Итак, я пытаюсь компенсировать этот html на 300 пикселей, сверху и слева. Ни одна из вещей, которые я пробовал до сих пор, не сработала, но если вы знаете страницу, которая может мне помочь, мне было бы очень интересно ее прочитать ... У меня уже есть три кадра, которые я хочу сохранить здесь, и я пытаюсь создать смещение с «pagediv», но без кубиков.Создание смещения страницы с помощью CSS
Я украл фреймворк (пиратская гордость), так как у меня ограниченный опыт работы с CSS. Опять же, я возился с ним, чтобы попытаться отобразить его на 300 пикселей вниз и справа от верхнего левого угла окна.
Но он не сдвинется с места! Как бы вы это сделали? Пожалуйста, имейте в виду, что я могу только вставить html в редактор моего хоста - это довольно плохо. Я не могу управлять своими файлами на сервере. Ой! да. И в идеале, кадры, которые я использую для смещения, были бы ясными - поскольку место, где я помещаю этот HTML, уже имеет все виды меню и сумасшедшего бизнеса слева и выше, что я не хочу скрывать ,
<!--Force IE6 into quirks mode with this comment tag-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Left and Right Frames Layout</title>
<style type="text/css">
body{
padding-top:200px;padding-left:200px;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
#pagediv{
padding-top:300px;
padding-left:300px;
}
#framecontentLeft, #framecontentRight{
position: absolute;
top: 0;
left: 0;
width: 300px; /*Width of left frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: white;
color: black;
}
#framecontentRight{
left: auto;
right: 0;
width: 250px; /*Width of right frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: white;
color: black;
}
#maincontent{
position: fixed;
top: 0;
left: 250px; /*Set left value to WidthOfLeftFrameDiv*/
right: 300px; /*Set right value to WidthOfRightFrameDiv*/
bottom: 0;
overflow: auto;
background: #fff;
}
innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
* html body{ /*IE6 hack*/
padding: 0 150px 0 200px; /*Set value to (0 WidthOfRightFrameDiv 0 WidthOfLeftFrameDiv)*/
}
* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}
</style>
<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is a test page for a gym", "We wholly believe in the art of strength", "Ipso liptum facto freako."]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>
</head>
<body>
<Font face = "helvetica">
<div id = "pagediv">
<div class = "innertube">
<div id="framecontentLeft">
<div class="innertube">
<table width="100%" height="100%" cellpadding="3" cellspacing="0" border="0">
<tr><td align="left" valign="top">
<h1>Videos</h1>
</td></tr>
<tr><td align="left" valign="top">
<img src="video sample.png" width="200" height="200" />
</td></tr>
<tr><td align="left" valign="top">
<img src="video sample.png" width="200" height="200" />
</td></tr>
<tr><td align="left" valign="top">
<img src="video sample.png" width="200" height="200" />
</td></tr>
</table>
</div>
</div>
<div id="framecontentRight">
<div class="innertube">
<table width="100%" height="100%" cellpadding="3" cellspacing="0" border="0">
<tr><td align="left" valign="top"><h1><b> Location: </b></h1> <br />
<iframe width="200" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=2110+Pine+St.+Abilene,+TX+79601&aq=&sll=37.0625,-95.677068&sspn=77.57349,131.132813&ie=UTF8&hq=&hnear=2110+Pine+St,+Abilene,+Texas+79601&t=m&z=14&ll=32.473249,-99.731684&output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=2110+Pine+St.+Abilene,+TX+79601&aq=&sll=37.0625,-95.677068&sspn=77.57349,131.132813&ie=UTF8&hq=&hnear=2110+Pine+St,+Abilene,+Texas+79601&t=m&z=14&ll=32.473249,-99.731684" style="color:#0000FF;text-align:left">View Larger Map</a></small> <br />
Art of Strength Abilene @ Hendrick Heatlh Club <br />
2110 Pine St. Abilene, TX 79601 <br />
(325) 670-7682
</td></tr>
<tr><td align="left" valign="top">
<h1> Contact </h1>
Phone : 1 390 232 2323 <br />
Email : [email protected] <br />
Website : Link
</td></tr>
<tr><td align="left" valign="top">
<img src="advertisement1.jpg" width="150" height="250" />
</td></tr>
<tr><td align="left" valign="top">
<img src="advertisement1.jpg" width="200" height="200" />
</td></tr>
<tr><td align="left" valign="top">
<img src="advertisement1.jpg" width="175" height="100" />
</td></tr>
</table>
<
</div>
</div>
<div id="maincontent">
<div class="innertube">
<table width="100%" height="100%" cellpadding="3" cellspacing="0" border="0">
<tr><td align="left" valign="top">
<h1>About AOS Abeline, Texas </h1>
<p><script type="text/javascript">filltext(25)</script></p>
</td></tr>
<tr><td align="left" valign="top">
<h1>Our Training</h1>
<p><script type="text/javascript">filltext(300)</script></p>
<img src="../../Documents/punch/new aos site/Screen shot 2011-12-07 at 10.12.27 AM.png" width="307" height="243" />
</td></tr><tr><td align="left" valign="top">
<h1>Staff</h1>
<p><script type="text/javascript">filltext(10)</script></p>
</td></tr>
</table>
</div>
</div>
</div>
</div>
</FONT>
</body>
</html>
ли вы попробовать 'тело {обивка-топ: 300px; обивка налево: 300px;}' или 'тело {маржа-топ: 300px; маржа налево: 300px;}' вместо нуля значения? – Zeta
Если вы хотите просто добавить его в раздел тела CSS, тогда да, я только что попробовал - первый из них заставляет все выравнивать влево, избавляясь от фреймов. А второй, похоже, ничего не влияет ... извините. – Catlard
К нижней части вашего кода, после примерно 175 строк, существует паразитный '' '. Кроме того, у вас есть тег шрифта. Не используйте тег шрифта, применяйте шрифты с CSS. Это не ваша проблема с позиционированием - это просто усталость. Наконец ... вы * хотели * режим quirks? Этого я пытаюсь избежать. –