0

そのため、squarespace (WYSIWYG ページ クリエーター) を使用していますが、カスタム CSSを使用してこれを作成しようとしています。残念ながら、代わりにこれが起こっています。これがjsfiddleでのコードです。

ページ全体を右に 300 ピクセル押し込もうとしています。現時点では、以下のコードではそれができないためです。背景と衝突し、左側の他のテキストと重なってしまいます。body スタイルだけを使用することはできません。これは、作成しているページの残りの部分全体に影響し、左にシフトするためです。代わりに、3 つのフレーム (framecontentLeft、framecontentRight、および mainContent) をオフセットするだけでそれを実行しようとしています。

また、これらのフレームをページの水平方向の中央に配置しようとしています (見ているページが中央に配置されているのと同じ方法です) が、本文のスタイルを変更することはできません。だから私はそれがハックになると思っていますが、相対位置を使用してフレームの位置を変更しようとするたびに、何も得られないか、バグが発生し、通常のフローでフレームが垂直に左側にスタックされますページの。

これを行う方法を理解するのを手伝ってくれる人はいますか? 街の鍵をあげる…

<!--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{
    margin-top:0px;
    margin-left:0px;
    position:absolute;
    top:0; left:0; bottom:0;right:0;
    left: 0%;
    font-family:Helvetica;
    overflow: hidden; 
}

#framecontentLeft, #framecontentRight, #maincontent{
    position:absolute;
    top:0;
    height:1000%;
}
#framecontentLeft,#framecontentRight{
    overflow:hidden;
}
#framecontentLeft{

    left: 200; 
    width: 500px; /*Width of left frame div*/
    top: 20px;
}

#framecontentRight{
    position:relative;
    top: 0px;
    left: 750px;
}

#maincontent{
    left: 250px; /*Set left value to WidthOfLeftFrameDiv*/
    right: 300px; /*Set right value to WidthOfRightFrameDiv*/
    bottom: 0px;
    top: 100px;
    width: 500px;
    line-height: 1.5;
}

.innertube{
    margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
.centered{
    text-align = centered;
}

* html body{ /*IE6 hack*/
    padding: 0 150px 0 200px; /*Set value to (0 WidthOfRightFrameDiv 0 WidthOfLeftFrameDiv)*/

}

* html #maincontent{ /*IE6 hack*/
    height: 100%; 
    width: 1000%; 
}

</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>

<img src="abelinebanner.png" width="1000" height="100" />

<Font face = "helvetica">

<div id = "pagediv">
<div class = "innertube">

<div id="framecontentLeft" class = "centered">
<div class="innertube">

<table width="100%" height="100%" cellpadding="3" cellspacing="0" border="0">
<tr><td align="left" valign="top">
<br />
<br />
<br />


</td></tr>
<tr><td align="left" valign="top">
<tr><td align="left" valign="top">
<br />
<br />
<iframe width="200" height="200" src="http://www.youtube.com/embed/RR62QMlvI60" frameborder="0" allowfullscreen></iframe>


</td></tr>

<tr><td align="left" valign="top">
<tr><td align="left" valign="top">
<br />
<br />
<iframe width="200" height="200" src="http://www.youtube.com/embed/TVNfjPWzS70" frameborder="0" allowfullscreen></iframe>


</td></tr>

<tr><td align="left" valign="top">
<br />
<br />

<iframe width="200" height="200" src="http://www.youtube.com/embed/iLn-aSGs7VY" frameborder="0" allowfullscreen></iframe>


</td></tr>
</table>

</div>
</div>

<div id="framecontentRight"  class = "centered">
<div class="innertube">


<table width="100%" height="100%" cellpadding="3" cellspacing="0" border="0">
<tr><td align="left" valign="top">

<iframe width="200" height="200" 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 <br />
Hendrick Heatlh Club <br />
2110 Pine St. Abilene<br />
TX 79601 <br />

 </td></tr>
<tr><td align="left" valign="top">


<h2> Contact Us:</h2>
Phone : (325) 670-7682 <br />
Email : abeline@aos.com <br />
Website : Link

</td></tr>


<tr><td align="left" valign="top">
<br />
<br />
<img src="ropes2.jpg" width="160" height="600" />


</td></tr>





</table>

</div>
</div>


<div id="maincontent"  class = "centered">
<div class="innertube">
<table width="100%" height="100%" cellpadding="3" cellspacing="0" border="0">
<tr><td align="left" valign="top">

<p><script type="text/javascript">filltext(10)</script></p>


</td></tr>
<tr><td align="left" valign="top">

<h1>About Our Training</h1>
<p><script type="text/javascript">filltext(10)</script></p>
<img src="abilene.jpg" 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>
4

1 に答える 1

1

これを分析した後、簡単な修正はありません。パディングを追加するだけでは役に立ちません。

それで、あなたは何ができますか？

設計を完全に変更する必要があります。かなり簡単に修正できるはずです (つまり、30 分ほどで)。

3 列のテーブル レイアウトを作成し、列に要素を配置します。つまり、物事を再配置する必要があります。これまでのところ、要素が適切にネストされていないことがわかりました。これが、正しく見えるようにするために固定配置が使用されている理由です。コンテンツを並べ替え、固定位置をできるだけ削除する必要があります。それは単にコピーして過去のものにする必要があります。これには、人生をずっと楽にする優れたエディターが必要です!

于 2012-02-22T21:08:56.623 に答える