Создание смещения страницы с помощью CSS - PullRequest
Новая
       12

Создание смещения страницы с помощью CSS

0 голосов
/ 21 февраля 2012

Итак, я пытаюсь сместить этот html на 300 пикселей сверху и слева.Ничто из того, что я пробовал до сих пор, не сработало, но если вы знаете страницу, которая может мне помочь, мне было бы очень интересно прочитать ее ... У меня уже есть три кадра, которые я хочу сохранитьздесь, и я пытаюсь создать смещение с "pagediv", но без кости.

Я украл макет фрейма (пиратская гордость), поскольку у меня ограниченный опыт работы с 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&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=2110+Pine+St.+Abilene,+TX+79601&amp;aq=&amp;sll=37.0625,-95.677068&amp;sspn=77.57349,131.132813&amp;ie=UTF8&amp;hq=&amp;hnear=2110+Pine+St,+Abilene,+Texas+79601&amp;t=m&amp;z=14&amp;ll=32.473249,-99.731684&amp;output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=2110+Pine+St.+Abilene,+TX+79601&amp;aq=&amp;sll=37.0625,-95.677068&amp;sspn=77.57349,131.132813&amp;ie=UTF8&amp;hq=&amp;hnear=2110+Pine+St,+Abilene,+Texas+79601&amp;t=m&amp;z=14&amp;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 : abeline@aos.com <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>

Ответы [ 2 ]

1 голос
/ 21 февраля 2012

Вы используете position:absolute и position:fixed.

См. Раздел 6.6. Выбор схемы позиционирования: свойство «position» :

абсолютный : Положение ящика (и, возможно, размер) задается с помощью свойств «top», «right», «bottom» и «left». Эти свойства определяют смещения относительно содержащего блока блока. Абсолютно позиционированные боксы вынимаются из нормального потока. Это означает, что они не влияют на расположение более поздних братьев и сестер. Хотя абсолютно позиционированные блоки могут иметь поля, эти поля не разрушаются вместе с другими полями.

фиксированный : Положение бокса рассчитывается по «абсолютной» модели, но, кроме того, бокс фиксируется относительно некоторой ссылки. Как и в случае «абсолютной» модели, поля коробки не разрушаются вместе с другими полями. В случае портативных, проекционных, экранных, tty и телевизионных типов мультимедиа поле фиксируется относительно области просмотра и не перемещается при прокрутке.

Так что новый блок вам совсем не поможет, так как position:absolute не заботится об этом. Вы должны установить блок на position:relative и дать ему запас, хотя это не исправит ваш position:fixed, поскольку «поле фиксировано относительно области просмотра и не перемещается при прокрутке». Следующий код CSS исправит ваши ошибки, однако ваш HTML-код представляет собой ужасную смесь злых вещей, придайте форму и отполируйте ее. Не пиратская копия плохого кода. Выучить язык. Сияние. И используйте [X] HTML-валидатор . 

body{
    margin-top:200px;
    margin-left:200px;
    position:absolute;

    top:0; left:0; bottom:0;right:0;

    font-family:Helvetica;
    overflow: hidden;
}

#framecontentLeft, #framecontentRight, #maincontent{
    position:absolute;
    top:0;
    height:100%;
}
#framecontentLeft,#framecontentRight{
    overflow:hidden;
}
#framecontentLeft{
    left: 0; 
    width: 300px; /*Width of left frame div*/
}

#framecontentRight{
    right: 0; 
    width: 250px; /*Width of right frame div*/  
}

#maincontent{
    left: 250px; /*Set left value to WidthOfLeftFrameDiv*/
    right: 300px; /*Set right value to WidthOfRightFrameDiv*/
    bottom: 0;
}

.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%; 
}
0 голосов
/ 21 февраля 2012

В общем, у вас должен быть один DIV, который оборачивает все.Затем вы применяете margin-top и margin-left к этому DIV.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...