PDA

View Full Version : Vertical center after picture


compgeek
08-10-2009, 02:47 AM
I have some text that i need to vertically center after my banner. Here is the doe I have
<div align="left"><a href="http://www.myhealthrestore.com"></a><span (http://www.myhealthrestore.com) class="style1">Lowest Prices on the Internet!</span></div

But i tried a # of different things to try to get the text "Lowest Prices on the Interent to be centered After the language with no luck.

edbr
08-10-2009, 03:32 AM
try using this
class
.vertical{margin: 50% 0 50% 0 ;}
then
<div class="vertical">Lowest Prices on the Internet!</div>

compgeek
08-10-2009, 05:26 AM
excuse me for seem dumb but i am still learning. Where would I put that at in my code?

edbr
08-10-2009, 05:47 AM
put the class in the head or linked css file and add <div class="vertical">Lowest Prices on the Internet!</div> in place of
<span (http://www.myhealthrestore.com/) class="style1">Lowest Prices on the Internet!</span>
where you can add your text style to the class vertical

compgeek
08-11-2009, 04:13 PM
OK i did that and it moved that line of text to the next line down, so now it is no longer after the picture, it is under it.

compgeek
08-11-2009, 04:25 PM
here is the files.

domedia
08-11-2009, 07:05 PM
Can you put the page somewhere temporary on the web?
You'll find that some people here are reluctant to download files.

compgeek
08-11-2009, 08:06 PM
http://myhealthrestore.com/temp.html

Here is the temp page it shows the logo and the wording i am trying to vertically center left of the logo, only now it is below it. if you need to see the code again let me know

edbr
08-12-2009, 01:15 AM
you have doctype twice head and body tags sprinkled al over the page.
i cleaned it here, though check fo r errors as i didnt spend too long on it
<!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-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>


<style>
.outer_border {border: 1px solid #BFBFBF;}

.pound_logo {
font-size: 27px;
color: #4ab2de;
padding: 5px 0px 0px 25px;
letter-spacing: 0px;
border: 0px solid #000000;
border-style: none none solid none;
}

.pound_vmenu {
padding: 0px 0px 0px 0px;
border: 0px solid #000000;
border-style: none solid solid solid;
}

.pound_content {
padding: 0px 5px 0px 5px;
border: 0px solid #BFBFBF;
border-style: none none solid none;
}





.style1 {
color: #0066CC;
font-size: xx-large;
font-family: "Bradley Hand ITC";
font-weight: bold;
}
.vertical {
color: #0066CC;
font-size: xx-large;
font-family: "Bradley Hand ITC";
font-weight: bold;
float: left; display:inline;
}
.left{float: left; width: auto;}
</style>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td background="hdr-top-bg.jpg" colspan="2"><img src="hdr-top_left.jpg" width="450" height="25"></td>
</tr>

</table>
<div class="left"><a href="http://www.myhealthrestore.com"><img src="hdr-mid_left.jpg" alt="" width="356" height="114" longdesc="http://www.myhealthrestore.com" /></a></div>
<div class="vertical">Lowest Prices on the Internet!</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr></tr>
<tr valign="bottom">
<td height="15" colspan="2" background="sub_hdr-bg.jpg">&nbsp;</td>
</tr>
<tr>
<td><p>&nbsp;</p>
</td>

<td width="1261">&nbsp;</td>
</tr>
<tr></tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="145" valign="top" background="vmenu-btm-bg.jpg"><table width="145" border="0" cellspacing="0" cellpadding="0">
<tr>
<td background="vmenu-bg.jpg" class="pound_vmenu"><p>#VMENU#<a href="http://www.paypal.com" target="_blank"><img src="paymentlogo.gif" width="160" height="19" longdesc="http://www.paypal.com"></a></p>
</td>
</tr>

</table></td>
<td width="100%" rowspan="3" align="left" valign="top" class="pound_content"><p>#CONTENT#</p>
<p align="center">#TMENU#</p></td>
</tr>
<tr></tr>
<tr>
<td background="vmenu-btm-bg.jpg"> <div align="center"><a href="http://www.paypal.com"></a></div></td>
</tr>

<tr align="right" background="ftr-bg.gif">
<td align="left" background="ftr-bg.jpg"><img src="ftr-left.jpg" width="117" height="25"></td>
<td background="ftr-bg.jpg"><img src="ftr-right.jpg" width="330" height="25"></td>
</tr>
</table>


</body>
</html>

compgeek
08-12-2009, 05:18 AM
That did fix the problem with the tect below the logo, now I need it to be vertically centered. As it is now, it is at the top (inline) with the logo. I need it vertically centered. What am i missing?

compgeek
08-12-2009, 05:24 AM
Also is there a way tohighlight the text so it is in yellow. Like you can do in microsoft word. you can have the letters a certain color and the highlight in another color

edbr
08-12-2009, 05:43 AM
add to vertical class margin: 50% 0 50% 0 ;
as to text you mean to give a background color

compgeek
08-15-2009, 12:15 AM
anyone out there still monitoring this thread?

compgeek
08-15-2009, 12:16 AM
yes how do i do that, give a background color

compgeek
08-15-2009, 12:29 AM
ok so i did the 50% 0 50% 0 ; to the text and the picture and now that frame is all messed up.... take a look.

http://www.myheathrestore.com/temp.html

you have to scroll down but all that should be at the top. its just one frame.

edbr
08-15-2009, 01:28 AM
broken link

compgeek
08-15-2009, 02:56 AM
sorry

http://www.myhealthrestore.com/temp.html

compgeek
08-15-2009, 02:13 PM
http://www.myhealthrestore.com/temp.html I want the test to be centered off the picture and it is still alligned vertical top instead of vertical centered

edbr
08-18-2009, 03:05 AM
i already cleaned your code the one online is still a mess change it first

compgeek
08-18-2009, 03:19 PM
Did you check the http://www.myhealthrestore.com/temp.html

coloeagle
08-20-2009, 02:58 AM
First I'll say that your use of tables and div's for your layout is a bad idea. Div's should be used over tables so I'll suggest you go with div's.

At the very least do as Ed mentioned and clean up the code. Clean code helps keep problems at bay.

To answer your question. To adjust the position of your text you will need to add one of two things to your .vertical

1. Add position:relative; top: ?px;
or
2. Set the top margin with margin-top: ?px;