헤더의 이미지에있는 텍스트

나는 메뉴를 만들려고하는 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 /> 태그를 사용하여 표시된 이미지가 요소입니다. 이것은 공간을 차지한다는 의미입니다. 그런 다음 텍스트 위에 구h 주걱을 넣으려고하는 것 같습니다.

텍스트를 유지하기 위해 만들어진 요소에 배경 이미지를 사용하는 방법이 훨씬 더 있습니다. 코드에서 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

헤더의 이미지에있는 텍스트

답변

관련 문제