Spingendo CSS 300 pixel a destra con Div diversi
https://stackoverflow.com/questions/9401003
-
29-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Quindi, sto lavorando con Squarespace (un creatore di pagine Wysiwyg), ma sto cercando di utilizzare alcuni CS personalizzati per creare questo. Purtroppo, Questo sta accadendo invece. Ecco il codice in diretta su JSFIDLE.
Sto cercando di spingere la mia intera pagina 300 pixel a destra, perché al momento il codice seguente non lo fa-si scontra con lo sfondo e si sovrappone all'altro testo a sinistra. Non posso semplicemente usare lo stile del corpo, perché ciò influisce su tutto il resto della pagina in cui sto costruendo e lo sposterò a sinistra. Invece, sto cercando di farlo solo compensando i tre frame (FrameContentLeft, FrameContentRight e MainContent).
Sto anche cercando di centrare questi fotogrammi nella pagina in orizzontale (allo stesso modo in cui la pagina che stai guardando è centrata) ma di nuovo, non posso cambiare lo stile del corpo. Quindi penso che sarà un hack, ma ogni volta che provo a usare il posizionamento relativo per cambiare le posizioni dei telai, non ottengo nulla o si infrange e impila il telaio in flusso normale, verticalmente, sul lato sinistro della pagina.
Qualcuno potrebbe aiutarmi a capire come farlo? Ti do la chiave per la città ...
<!--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>
Soluzione
Dopo aver analizzato questo, non esiste una soluzione semplice. La semplice aggiunta di imbottitura non aiuta.
Che cosa si può fare?
Devi cambiare del tutto il design. Dovrebbe essere abbastanza facile da risolvere (che significa tra mezz'ora circa).
Crea un layout della tabella a 3 colonne e metti le cose nella colonna. Ciò significa che devi riorganizzare le cose. Quello che vedo finora, gli elementi non sono correttamente nidificati, qual è il motivo per cui il posizionamento fisso viene utilizzato per farlo sembrare giusto. Devi riordinare il contenuto, rimuovi la posizione fissa il più possibile. Dovrebbe essere semplicemente copia e passata. Hai bisogno di un buon editore per questo che renderà la vita molto più semplice!
