Member Avatar for howdy5000

Hey there,

I'm not very good with coding and need to center my text layer that I created in Dreamweaver. I have read lots of threads but can't get the advice to work for me fully. I have attempted lots of tips so my code might be cluttered or wrong. My layer of type is supposed to hover in the left most column. Here's my code as of now:

<?xml version="1.0" encoding="iso-8859-1"?><!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>
<title>Peloton Inc.</title>




<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

<!--
body


{ 
 margin: auto auto; 
 padding: 0; 
 padding-top: 10px;
 text-align: center; 

} 
#centered
{ 
 width: 800px; /* set to desired width in px or percent */
 text-align: auto; /* optionally you could use "justified" */
 border: 0px; /* Changing this value will add lines around the centered area */
 padding: 0;  
 margin: auto auto; 
} 




#Layer1 {
	position:absolute;
	left:239px;
	width:120px;
	height:392px;
	z-index:1;
	left: 209px;
	top: 227px;
	margin: auto auto;
text-align: center;
}
.style2 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
}
.style3 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #000000;
	font-size: 13px;
}
.style4 {
	color: #000000;
	font-size: 13px;
}
-->
</style></head>


 
</div>


<body leftmargin="auto auto" marginwidth="auto auto">

<div id="Layer1">

  <p class="style3"><em><font color="#000000">We should take care not to make 
    the intellect our god; it has, of course, powerful muscles, but no personality 
    </font></em></p>
  <p class="style3"><font color="#000000"><em>&ndash;</em>Albert Einstein</font></p>
</div>
<img src="images/contact.jpg" width="800" height="550" hspace="111" vspace="49" border="0" align="absmiddle" usemap="#Map" />
<map name="Map" id="Map">
  <area shape="rect" coords="25,466,98,503" href="http://www.pelotoninc.com/home.html"  />
<area shape="rect" coords="161,464,267,502" href="http://www.pelotoninc.com/mission.html"  />
<area shape="rect" coords="496,464,617,503" href="http://www.pelotoninc.com/portfolio.html"  />
<area shape="rect" coords="325,465,438,502" href="http://www.pelotoninc.com/up.html" />
<area shape="rect" coords="672,466,777,502" href="http://www.pelotoninc.com/contact.html"  />
</map>

</body>
</html>

Can anybody help me? I'm running out of ideas.

  • 4 Contributors
  • 7 Replies
  • 526 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by MidiMagic
Member Avatar for freshfitz

You mean like this

<?xml version="1.0" encoding="iso-8859-1"?><!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>
<title>Peloton Inc.</title>




<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

<!--
body


{
margin: auto auto;
padding: 0;
padding-top: 10px;
text-align: center;

}
#centered
{
width: 800px; /* set to desired width in px or percent */
text-align: auto; /* optionally you could use "justified" */
border: 0px; /* Changing this value will add lines around the centered area */
padding: 0;
margin: auto auto;
}


.style2 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.style3 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #000000;
font-size: 13px;
}
.style4 {
color: #000000;
font-size: 13px;
}
-->
</style></head>



</div>


<body leftmargin="auto auto" marginwidth="auto auto">

<div id="Layer1">

<p class="style3"><em><font color="#000000">We should take care not to make
the intellect our god; it has, of course, powerful muscles, but no personality
</font></em></p>
<p class="style3"><font color="#000000"><em>&ndash;</em>Albert Einstein</font></p>
</div>
<img src="images/contact.jpg" width="800" height="550" hspace="111" vspace="49" border="0" align="absmiddle" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="25,466,98,503" href="http://www.pelotoninc.com/home.html" />
<area shape="rect" coords="161,464,267,502" href="http://www.pelotoninc.com/mission.html" />
<area shape="rect" coords="496,464,617,503" href="http://www.pelotoninc.com/portfolio.html" />
<area shape="rect" coords="325,465,438,502" href="http://www.pelotoninc.com/up.html" />
<area shape="rect" coords="672,466,777,502" href="http://www.pelotoninc.com/contact.html" />
</map>

</body>
</html>
Member Avatar for howdy5000

No, sorry. I am trying to make that quote float over the background image in the yellow vertical column on the left. I'm thinking that text layer must somehow be grouped onto the background image so it stays in place.

It's still sticking where it was before I was able to center the background image.

Any idea how to do this?

Member Avatar for SJoval

I can't see your background image, so I used my own. The text appears in a box on the left side of the page, centered. Since absolute positioning takes the div outside the flow of the page, it can only go where you tell it to go. You seem to have 2 values for "left". Also, what browser are you using? I would like to help, but I can't actually see what's wrong?

Member Avatar for howdy5000

I can't see your background image, so I used my own. The text appears in a box on the left side of the page, centered. Since absolute positioning takes the div outside the flow of the page, it can only go where you tell it to go. You seem to have 2 values for "left". Also, what browser are you using? I would like to help, but I can't actually see what's wrong?

I had to "fake" the results and make the text layer actually be apart of the background. You can see it here on the actual website: http://www.pelotoninc.com/contact.html

Now you can see where I wanted that text layer to move. I saw one site where a guy proposed a java script that would move the text layer with the background but it wouldn't work for me. I was hoping to keep that layer editible and that it would move with the background so it would center depending on the browser size.

Thanks if you can help.

Ryan

Member Avatar for SJoval

/*I'm not sure this will help because of the nature of your background. You might consider a semi-transparent gif as a colored background to the 3 layers, or to a #container Div utiliizing all 3 colors.
This will center the text in the div and will resize with the browser. I tested on Safari, Firefox and Opera. IE is somebody else's job.*/

#Layer1 {
	width:27%;
	z-index:1;
	margin: 0px;
	text-align: center;
	float: left;
	vertical-align: middle;
	background: #CCFFFF;
	padding: 10px 3% 20px;
}
#Layer2 {
	width:27%;
	z-index:1;
	margin: auto;
	text-align: center;
	float: right;
	vertical-align: middle;
	background: #FFFFCC;
	padding: 10px 3% 20px 3%;
}
#Layer3 {
	width:30%;
	z-index:1;
	margin: 0px 33%;
	text-align: center;
	vertical-align: middle;
	padding: 10px 2% 20px;
	background: #FFCCFF;
}

/*remember to clear both floats for anything coming after these Divs. Hope this helps a little. */

Member Avatar for howdy5000

Thanks, I will mess around with it some more.

Member Avatar for MidiMagic

Please do not put text on top of images. A lot of people can not read text if it is on top of an image, unless the4 image is very very light. Even then, some can't read it. Such a page is not accessible.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.