テキストテンプレートがウィンドウのサイズを縮めた時に移動して、
画像の上に勝手に来てしまいます。
また、画像が中央に常に設置されているにも関わらず、テキストテンプレート導入後には、ウィンドウの幅を広げる時には中央に来なくなってしまいました。
誰か、ウェブ系で要素の配置に関して詳しい方がいらっしゃれば
ご教授いただきたいです。どうぞよろしくお願いいたします。
HTML
1<body> 2<div id="spdayo"> 3<a href="index.html"><img src="sp1.jpg" alt="ginzagakubuchi" width="601" height="585"> 4</a> 5<div id="coolsright"> 6<a href="index.html"><img src="givemecoolsright.jpg" alt="Denencho-fu,田園調布2014" width="450" height="460"> 7</a></div> 8</div> 9 10<br/> 11<div id="box"> 12<img class="shadow" src="template1.jpg" width="150" height="50"> 13<p class="boxtext"> "Welcome to TokyoHill"</p> 14<p class="denen">Den-enCho-fu, 2013</p>
CSS
1body { 2 font-family: Times New Roman, sans-serif; 3 color: #333; 4} 5 6#spdayo{ 7position: absolute; 8top: 25%; 9left: 50%; 10-webkit-transform: translate(-50%,-50%); 11-moz-transform: translate(-50%,-50%); 12-ms-transform: translate(-50%,-50%); 13-o-transform: translate(-50%,-50%); 14transform: translate(-50%,-50%); 15} 16 17#coolsright { 18 position: absolute; 19 top: 63px; 20 left:75px; 21 22} 23 24#box { 25 position: absolute; 26 top: 50%; 27 left: 51%; 28 -webkit-transform: translate(-50%,-50%); 29 -moz-transform: translate(-50%,-50%); 30 -ms-transform: translate(-50%,-50%); 31 -o-transform: translate(-50%,-50%); 32 transform: translate(-50%,-50%); 33} 34 35.shadow{ 36 box-shadow:1px 1px 5px 5px #ccc; 37} 38 39.boxtext{ 40 text-align: center; 41 position:absolute; 42 font-size: 8px; 43 margin: 0; 44 top: 10px; 45 padding: 0; 46 bottom: 4px; 47 width: 100%; 48 background: rgba(0,0,0,0,0); 49} 50 51.denen{ 52 text-align: center; 53 position:absolute; 54 font-size: 6px; 55 margin: 0; 56 top: 39px; 57 padding: 0; 58 bottom: 4px; 59 width: 100%; 60 background: rgba(0,0,0,0,0); 61}
回答3件
あなたの回答
tips
プレビュー