2016-03-25 4 views
1

私は現在、私のメインページの見栄えを良くし、低速インターネットでダウンロードしやすくしています。アンカーはテキストだけでなく、すべてのページにまたがっています

以前は画像をテキストとして使用していましたが、読み込みが遅くなりました。 今実際のテキストを使用しようとしています。問題は、アンカーがテキストだけでなく、ページの幅全体にまたがっていることです。ページへ

リンク:私は、テキストの末尾にリンク「停止」を作るが、それでもディスプレイなど2行目のテキストのオーバーフローすることができますどのように http://www.hoppvader.nu/index2.php

:ブロックを。ありますか? 現在の設定は、小さなデバイスでは電話機として正常に機能しますが、アンカーが広すぎるという問題があります。

CSS

@font-face { 
    font-family: "Klubb"; 
    src: url(Manifest/sys/MonotypeCorsiva.ttf) format("truetype"); 
} 
span.Klubb { /* Text link */ 
     font-family: 'Klubb', Verdana, Tahoma; 
     font-size: 3.5vw; 
     font-weight: 900; 
     text-shadow: 0.5px 0.5px #FF0000; 
     color: black; 
     display: block; 
     padding-left: 150px; 
     margin-left: 40px; 
     margin-top:0px; 
     padding-bottom:20px; 
    } 
span.pLogga { /* Image on the left of text */ 
     float: left; 
     width: 160px; 
     text-align: center; 
     } 

サンプルHTML:

<span><a Style='text-decoration:none' href=UFK-Skelleftea.php><span class='pLogga'><img src=../Manifest/sys/Logga/UFK.gif alt='Umeå Skellefteå' height=50/></span><span class='Klubb'>Umeå fallskärmsklubb (Skellefteå)</span></a></span><br> 
<span><a Style='text-decoration:none' href=UFK-Umea.php><span class='pLogga'><img src=../Manifest/sys/Logga/UFK.gif alt='Umeå fallskärmsklubb Umeå' height=50/></span><span class='Klubb'>Umeå fallskärmsklubb (Umeå)</span></a></span><br> 
+0

すべての要素がブロックレベルであるため、 'display:block;' display:inline-block;としてください。 –

+0

これを試しました。ウィンドウがフルスクリーンで表示されている限り、それは機能しますが、ウィンドウを小さくしてウィンドウを小さくすると、ウィンドウが狂ってしまいます。 – Andreas

+1

マークアップが面倒です。あなたはそれをきれいにする必要があります。浮遊物を利用する。 –

答えて

1

私は外側のスパン表示を行うことをお勧めしたい:ブロック、クリア:左。浮動小数点数を追加する:.klubbスパンに左端を置いて、その上の余白/余白を減らします。

+0

透明なものは何ですか?私はコードがあなたが今明確な左を除いて言っていると思います。 – Andreas

+0

clearは、ページを横切って水平に表示するのではなく、あなたの浮動小数点を確実にスタックするCSSプロパティです。 'clear eachother'。アイテムを左または右にクリアすることができます。フローティングアイテムを使用する場合は非常に便利です。 – claicham

+0

ああ...だからこそ、それはフルスクリーンモードでお互いに横たわっているのですか? :-) どうも! :-) – Andreas

関連する問題