Facebook と Twitter のボタンを移動して、一時的なサイトで見やすくしたい:
現在、それらはフッターの下にあり、誰も見ることができません。最初のテキスト列の隣に移動したいと思います。そのテキスト ボックスの外で...そうすれば、人々はそれをよりよく見ることができます。
デモ:
Facebook と Twitter のボタンを移動して、一時的なサイトで見やすくしたい:
現在、それらはフッターの下にあり、誰も見ることができません。最初のテキスト列の隣に移動したいと思います。そのテキスト ボックスの外で...そうすれば、人々はそれをよりよく見ることができます。
デモ:
わかりました。私の理解が正しければ、あなたは Facebook と Twitter の画像を列の左側に移動しようとしています。それではcolumnSocial
、CSS で and と呼ばれる新しい列を作成しましょう。
#columnSocial {
line-height:120px;
background-color:#394046;/*background: url(black.jpg) no-repeat 0 0;*/
width:64px;
height:250px;
float:left;
position:relative;}
そのほとんどを既存の列からコピーしました。他の列の幅の 1 つを編集して、この新しい列に対応できるようにしてください (列コンテナーでは 900px しか許可されていないため、別の場所で 36px を削る必要があります)。この属性は、div 要素でline-height
は使用できないため、垂直方向のスペースを取得するのに役立ちます。vertical-align
HTML に、次を追加する必要があります。
<div id="columnSocial">
...
</div>
コンテナーの開始後、column1 の開始前。好きなように数字を自由に切り替えてください。
一般的なデザイン ノートとして、適切な構造 (列のコンテナーなど) を作成すると、このような変更から多くの作業を省くことができます。桁。
必要なものは次のとおりです。- フッターは次のようにする必要があります
<div id="footer" style="text-align: center;">
<p>© 2012 Angloesfera. Todos los derechos reservados.</p>
<div id="snetworks">
<a class="show" href="https://www.facebook.com/pages/Academ%C3%ADa-AngloEsfera/190496871000029"> <!--a http-vel kell a link...vagy kulonben az en oldalamon belul fogja keresni a linket-->
<img width="36" height="36" rel="" title="" alt="facebook" src="images/facebook.png"></a>
<a class="show" href="https://twitter.com/GoE_Shop">
<img width="36" height="36" rel="" title="" alt="facebook" src="images/twitter.png"></a>
</div>
</div>
および #snetworks の CSS
#snetworks {
left: 100px;
position: absolute;
top: 2px;
}