473,657 Members | 2,572 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

vertically align text in a background image with wrapping of text

2 New Member
Hello,

I am trying to vertically center text in a background image, I found a solution on this site that sets the line-height to the height of the background image. This works just fine, except when the text is too long that it wraps.

div.module h2{
width:178px;
width:"182px";
height:28px;
font-family:"Avenir Black", verdana, geneva, sans-serif;
background:url( ../images/nav_subhead_bg. gif) repeat;
text-transform:upper case;
padding:8px 0 0 7px;
font-size:10px;
font-weight:bold;
color:#175495;
margin:0px;
margin:"0 0 8px 0";
}

As you can see I am using padding now to create a vertically centered look. Is there a better way to vertically align the text that can handle wrapping?
Nov 16 '06 #1
4 4439
AricC
1,892 Recognized Expert Top Contributor
Try white-space: nowrap; or an overflow property or text-align: center and have the background in a div? Not really sure what you mean you may want to post a link to the page to help.

HTH,
Aric
Nov 16 '06 #2
avi
2 New Member
Try white-space: nowrap; or an overflow property or text-align: center and have the background in a div? Not really sure what you mean you may want to post a link to the page to help.

HTH,
Aric
Hi Aric,

I cant post the page here as it is within intranet. here is a screen capture:



the width of the text can vary as it is generated dynamically.
Nov 16 '06 #3
AricC
1,892 Recognized Expert Top Contributor
You can try text-wrap: none or text-wrap: suppress

[I'm on IE 6 ( can't test it on a well supported browser ) right now and neither work but big shock! You could always use a style to keep the text a smaller size like 8px.
Nov 16 '06 #4
AricC
1,892 Recognized Expert Top Contributor
Disregard above use white-space: nowrap:


[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitl ed Page</title>
</head>
<style type="text/css">
.container
{
position: absolute;
width: 500px;
height: 500px;
border: 1px solid black;
z-index: 0;
}

.box
{
position: absolute;
margin-left: 30px;
margin-top: 25px;
width: 100px;
height: 100px;
border: 1px solid black;
z-index: 1;
}

.box1
{
position: absolute;
margin-left: 135px;
margin-top: 25px;
width: 100px;
height: 100px;
border: 1px solid black;
z-index: 2;
}

.box2
{
position: absolute;
margin-left: 240px;
margin-top: 25px;
width: 100px;
height: 100px;
border: 1px solid black;
z-index: 3;
}
.box3
{
position: absolute;
margin-left: 345px;
margin-top: 25px;
width: 100px;
height: 100px;
border: 1px solid black;
z-index: 4;
}


</style>


<body>
<div class="containe r">

<div class="box">
Some Content Goes Here
</div>
<div class="box1">
Some Content Goes Here
</div>
<div class="box2">
Some Content Goes Here
</div>
<div class="box3">
<span style="white-space: nowrap">
Some Content Goes Here and so on and so on and so on
</span>
</div>

</div>


</body>
</html>[/html]
Nov 16 '06 #5

Sign in to post your reply or Sign up for a free account.

Similar topics

1
8451
by: Kai Grossjohann | last post by:
I have a table which contains a top-aligned table cell: .... <tr style="height:40"> ... <td colspan="1" rowspan="2" align="left" valign="top" style="overflow:hidden;"> ...contents.explained.later... </td> ...
19
5732
by: George Ziniewicz | last post by:
.. I try to use CSS when possible, though I am still learning and don't maximize its use. In particular, I still use a table to provide for a centered image in a few slideshows (though table vertical align doesn't work in Mozilla): http://zintel.com/homepics.html I've used combinations of <center>, style align 'center', table cell align, valign and height='100%' to get what I want, but I wonder if CSS can do it by itself.
7
3245
by: Robert Nicholson | last post by:
So I've got one page where I have an image inside a DIV with text-align: center and the image is correctly centered in that block. Making me think that text-align will center the contents of a block. Another page I have a series of thumbnails which are themselves a DIV block wrapping both an image and a caption (float: left) inside a DIV block with a fixed width which is smaller than the width of the browser and that DIV block is in...
5
1856
by: Wilhelm Kutting | last post by:
Hi i want to use the following layout: ----------------- | | | | Text line 1 | | | Text line 2 | image.jpg | | ... | | | | | |
0
2318
by: pamelafluente | last post by:
Hello experts, I need some help to do in a proper way what I am doing. I have some "cells" in a web page. Each "cell" is made of 2 DIV. One is inside the other. Example with 2 "cells" : <div class=c7bg style="top:202px;left:585px;width:55px;height:30px;"> <div class=c7fg style="top:7px;left:2px;"> <table><tr>
14
21071
by: rsearing | last post by:
I am new to HTML and will have to beg if this is obvious, but I am trying to design a table that looks like: ******************************** *----A------*------------------------* ************------------------------* *------------*------------------------* *------------*------------------------* *----B------*------------C----------* *------------*-------------------------* ********************************
2
2473
by: vinit_mahajan99 | last post by:
Hello all, I want to align the images and controls at the bottom of a master page or at the right side. I tried to do it with the table but I was not successful. The image should be seen at the bottom of the page. Please reply....
2
2767
by: jerrygadd | last post by:
Can some body help me vertically center an image using CSS? The customer only uses IE, and so the code is not debugged for other browsers! The image in question is found on line 1075 : "div.layout_img img" The image size is unknown I have tried to use the "margin:0px auto;" method with no success. I include the code here
13
3298
by: Stevo | last post by:
I've found that for IE6+, if you add the property text-align:center to a DIV, then *anything* inside it gets centered. That can be a table, an object/embed, another DIV, an image, or some text. Firefox and Safari on the other hand don't treat text-align in that way. In my tests on those browsers, they only centers images and text. Any DIVs, object/embeds or tables remain default unaligned and generally appear on the left. Considering...
0
8425
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8326
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
8845
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
6177
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4173
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4333
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
2745
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
1973
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
2
1736
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.