ヘッダーの画像のテキスト

私はメニューを作成しようとしているheader.phpがあります。「メニュー」は3つの色のボックスで構成され、それらの色のボックスでは、他のページにリンクするテキストを配置したいと思います。私が何を試しても、私は色付けされたボックス（画像）にテキストを単に取り込むことはできません。これは私がこれまで "ベースコード"のために持っているものです。ヘッダーの画像のテキスト

<html> 

<link rel="stylesheet" href="/header_media/header.css" type="text/css" /> 

<body> 



<!--THIS IS THE LOGO--> 
<div id="logo"> 
<img src="/header_media/GTextured.png" width="75" height="50" hspace="0" vspace="0"/> 
</div> 

<div id="logo"> 
<img src="/header_media/shapeimage.png" style="position: relative; top: -40px; left: 90px;"> 
</div> 




<!--THIS IS THE MENU SYSTEM--> 
<div> 
<div id="menu"> 
<img src="/header_media/red.png" width="100" height="25" style="position: relative; top: -40px; left: 300px;"> 
<img src="/header_media/green.png" width="100" height="25" style="position: relative; top: -40px; left: 301px;"> 
<img src="/header_media/blue.png" width="100" height="25" style="position: relative; top: -40px; left: 302px;"> 
</div> 

</body> 

</html>

ありがとうございました！

出典

2011-10-04 Chris G

まあ、開始するには、あなたは何をすることはできませんか？ – Blender

色付きのボックスや画像にテキストが表示されません。編集された投稿。ありがとうございました。 –

投稿したスニペットにはテキストは表示されません。 red、green、blue.pngにテキストがありますか？ –

<div id="menu" style="margin:auto; width:300px; height:25px;"> 
    <div style="float:left; width:100px; height:25px; background-image:/header_media/red.png; text-align:center;">test</div> 
    <div style="float:left; width:100px; height:25px; background-image:/header_media/green.png; text-align:center;">test</div> 
    <div style="float:left; width:100px; height:25px; background-image:/header_media/blue.png; text-align:center;">test</div> 
</div>

出典

2011-10-04 02:18:52

ありがとう、少し調整してうまくいった。私はどのように色付きのボックスの間に小さなスペースを置くでしょうか？多分ちょうど約5pxのように？ –

メニューdivを少し大きめに設定し、必要に応じてボタンdivに左右の余白を与えます。 –

この問題は間違っています。 <img />タグを使用して表示されるイメージは要素です。これは、スペースを取ることを意味します。あなたは、その上にテキストをひねることを試みているように見えます。

テキストを保持する要素に背景イメージを使用する方がはるかに優れています。あなたのコードから、3つのボックスが隣り合っているように見えます。これにはコンテンツの配置が含まれます。相対的なポジショニングを使用することは悪い考えです。それは壊れる可能性が高いです。 10分をとり、CSSの位置付けに関する記事を読んでください。静的、絶対、相対、および浮動小数点数です。

このようなものがうまくいくでしょう。要素が互いに隣り合うように左に浮かべてください。それが完了したらそれをクリアして、後でコンテンツを表示します。最後に、css urlプロパティを使用して背景を設定します。この場合、色を入れても構いませんが、必要に応じて画像を指定できる構文が残っています。

http://jsfiddle.net/FUZDW/

div { height: 50px; width: 100px; border: 1px solid black; } 
div#menu1 { background: red url('pathToImage'); } 
div#menu2 { background: green; } 
div#menu3 { background: blue; } 

div.menu { float: left; } 

<div class="menu" id="menu1">red</div> 
<div class="menu" id="menu2">green</div> 
<div class="menu" id="menu3">blue</div> 
<br style="clear: both;" /> 
my page content

出典

2011-10-04 02:37:07 mrtsherman

ヘッダーの画像のテキスト

答えて

関連する問題