text on image in header_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-04-11 01:29 出处：网络

I ha开发者_如何学编程ve a header.php that I am trying to create a menu for.The \"menu\" consists of 3 colored boxes and in those color boxes I\'d like to put the text that links to the other pages. No

相关专题：css header text

I ha开发者_如何学编程ve a header.php that I am trying to create a menu for. The "menu" consists of 3 colored boxes and in those color boxes I'd like to put the text that links to the other pages. No matter what I try I simply can't get the text in the colored boxes (images). This is what I have so far for the "base code".

    <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>

Thanks for the help!

<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>

You are approaching the problem incorrectly. An image displayed using the <img /> tag is an element. This means it takes up space. It looks like you are then trying to shoehorn text in on top of them.

There is a much better way which is using a background image on an element that is made to hold text. From your code it looks like you want the three boxes to be next to each other. This involves positioning the content. Using relative positioning as you are seems like a bad idea. It is likely to break. Take ten minutes and read an article on css positioning. static, absolute, relative and floats.

Something like this will work better. Float the elements left so that they sit next to one another. Then clear them when done so later content appears where it should. Finally set a background using the css url property. In this case I just put in colors, but left in the syntax where you could specify the image if you wanted to.

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