Some serious CSS help

Scott B

Scott B

New Member
Messages
844
Reaction score
0
Points
0
OK, this may sound a bit complicated, I'm just hoping its possible:
Is there a way to align the text in a webpage between two pixel values of a repeating y background image?

For example, if I use this image as a repeating y background, how to I align the text to be in between the gray part of the image?

Is this possible, and if its not, could you tell me a possible solution?
 
konekt

konekt

New Member
Messages
100
Reaction score
0
Points
0
How I would do it:

Code: 
<div id="back">
   <div id="text">
    /div>
</div>

#back
{
    //code for background
}

#text
{
      position:absolute;
      left:ypx;
      max-width:zpx;
}

Where 'y' is the px. width-size of the green and z = (picture width - sum of the widths of the green).

This will make a div to hold the background, then a div where you can place the text. The text width will be placed inside the background but placed enough pixels from the left side to be outside of the left green; it will then have its width limited to the width of the gray.
 
Last edited:
medphoenix

medphoenix

New Member
Messages
354
Reaction score
0
Points
0
Assume that you wrote about background of the web page....not a table...

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Untitled 1</title>
<style type="text/css">
.style3 {
	text-align: center;
}
.style4 {
	margin-left: 48px;
}
.style5 {
	color: #FF0000;
}
.style6 {
	font-family: Algerian;
}
.style7 {
	text-align: center;
	color: #FF0000;
	font-family: Tahoma;
}
.style8 {
	color: #0000FF;
}
.style9 {
	color: #800000;
}
.style10 {
	font-family: Verdana;
}
</style>
</head>

<body style="background-image: url('http://sbonline.exofire.net/mm/mmb.gif')">
<center>
<table style="width: 61%" class="style4">
	<tr>
		<td class="style3">
<div style="width: 630px" class="style7">
<strong>DIV STYLE TEXT&nbsp; <br />
<br />
<span class="style8">DIV STYLE<br />
</span>vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv<br />
vvvvvvvvvvvvvvvvvvvvv vvvvvvvvvvvvvvvvvvvvvvv vvvvvvvvvvvvvvvvvvv 
vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv</strong></div>
		<span class="style5"><strong><span class="style6">Did you write about 
		this?<br />
		</span></strong></span><span class="style9"><strong>
		<span class="style10">THIS IS TABLE<br />
		Centered TABLE<br />
		<br />
		cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc<br />
		Use &lt;br&gt; code for end of the line 
		,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,&lt;br&gt;<br />
		</span></strong></span></td>
	</tr>
</table></center>
</body>

</html>
 
Last edited:
Scott B

Scott B

New Member
Messages
844
Reaction score
0
Points
0
oh, I forgot to say I wanted the background centered and don't want it to repeat on x
 
You must log in or register to reply here.
Top