Empujando CSS 300 píxeles a la derecha con diferentes divs
https://stackoverflow.com/questions/9401003
-
29-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Entonces, estoy trabajando con Squarespace (un creador de página Wysiwyg), pero estoy intentando usar algunos CSS personalizados Para crear esto. Desafortunadamente, esto esta pasando en su lugar. Aquí está el código en vivo en JSFIDDLE.
Estoy tratando de empujar todo mi página 300 píxeles hacia la derecha, porque en el momento en que el código a continuación no lo hace, choca con el fondo y se superpone el otro texto a la izquierda. No puedo usar el estilo del cuerpo, porque eso afecta a todo el resto de la página en la que estoy construyendo y lo cambiaré hacia la izquierda. En cambio, estoy tratando de hacerlo simplemente compensando los tres cuadros (FrameContentLeft, FrameContentRight y MainContent).
También estoy tratando de centrar estos cuadros en la página horizontalmente (de la misma manera que la página que está viendo está centrada) pero de nuevo, no puedo cambiar el estilo del cuerpo. Así que estoy pensando que va a ser un truco, pero cada vez que trato de usar el posicionamiento relativo para cambiar las ubicaciones de los cuadros, no obtengo nada o no molesta y apila el marco en flujo normal, verticalmente, en el lado izquierdo de la página.
¿Alguien podría ayudarme a descubrir cómo hacer esto? Te daré la llave de la ciudad ...
<!--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 : 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>
Solución
Después de analizar esto, no hay una solución directa. Simplemente agregar relleno no ayuda.
¿Entonces que puedes hacer?
Necesitas cambiar el diseño por completo. Debe ser bastante fácil de arreglar (es decir, en media hora más o menos).
Cree un diseño de tabla de 3 columnas y coloque las cosas en la columna. Eso significa que tienes que reorganizar cosas. Lo que veo hasta ahora, los elementos no están bien anidados, por lo que el posicionamiento fijo se usa para que se vea bien. Tienes que reordenar el contenido, retire la posición fija tanto como pueda. Simplemente debe ser copia y pasado. ¡Necesitas un buen editor para esto que hará la vida mucho más fácil!
