Итак, я работаю с squarespace (создателем страницы WYSIWYG), но я пытаюсь использовать какой-то пользовательский CSS to create this. К сожалению, this is happening instead. Here's the code live on jsfiddle.Нажатие CSS 300 пикселей вправо с разными DIVs
Я пытаюсь подтолкнуть всю мою страницу 300 пикселей вправо, потому что на данный момент код ниже этого не делает - он сталкивается с фоном и перекрывает другой текст слева. Я не могу просто использовать стиль тела - потому что это влияет на всю оставшуюся часть страницы, в которой я создаю, и сдвиг ее влево. Вместо этого я пытаюсь сделать это, просто компенсируя три кадра (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&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 <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 : [email protected] <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>
Рамы и столы? Ewww. Это в 1997 году? –
По общему признанию, тот факт, что вы используете фреймы и таблицы, указывает на серьезный недостаток дизайна ... – mWillis
Кадры, я считаю, все «внедряются» с таких сайтов, как Youtube и Google Maps. Конечно, простительно. Таблицы ... не так много. –