标题中图像上的文字

发布于 2024-12-08 06:43:25 字数 1042 浏览 0 评论 0原文

我有一个 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>

感谢您的帮助！

原文

I have 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!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

魔法唧唧 2024-12-15 06:43:25

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

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

回复收藏 0 原文

成熟稳重的好男人 2024-12-15 06:43:25

您处理问题的方式不正确。使用标签显示的图像是一个元素。这意味着它占用空间。看来您正在尝试将文本硬塞到它们上面。

有一种更好的方法，即在用于保存文本的元素上使用背景图像。从您的代码看来，您希望这三个框彼此相邻。这涉及到内容的定位。按原样使用相对定位似乎是个坏主意。它很可能会破裂。花十分钟阅读一篇关于 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

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

回复收藏 0 原文

~没有更多了~