Jump to content

Css Alignment


khent08
 Share

Recommended Posts

hi, im new here and new to css. im having trouble with my text alignment using css and on a table.. below are my html code and css codes: as you can notice below on the image i have attached, the text is aligned in the middle, please help me how to align it to the top with a margin. thanks!

<!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" /><link rel="stylesheet" type="text/css" href="css/styleSCREEN.css"/><link rel="stylesheet" type="text/css" href="css/body.css"/><title>Quest Community Fellowship :: Home</title><script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script><link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" /></head><body class="mainbody">	<div id="dPageHolder">    <div id="dHeader">    <ul id="MenuBar1" class="MenuBarHorizontal">      <li><a href="#">Home</a>      </li>      <li><a href="#" class="MenuBarItemSubmenu">Adults</a>        <ul>          <li><a href="#" class="MenuBarItemSubmenu">Single</a>            <ul>              <li><a href="#">LifeGroups</a></li>            </ul>          </li><li><a href="#" class="MenuBarItemSubmenu">Married</a>  <ul>    <li><a href="#">LifeGroups</a></li>    <li><a href="#">MarriedLife Live!</a></li>  </ul></li>        </ul>      </li>      <li><a href="#">Students</a>      </li>      <li><a href="#" class="MenuBarItemSubmenu">Kids</a>        <ul>          <li><a href="#">Waumba</a></li>          <li><a href="#">UpStreet</a></li>        </ul>      </li>      <li><a href="#">About</a></li>      <li><a href="#">Giving</a></li>      <li><a href="#">Blog</a></li>    </ul>    </div><!-- end of header -->    <div id="dSubHeader">	  <img src="images/1137x349.jpg" width="1000" height="auto" top="5px" bottom="5px" />   	  </div><!-- end of subheader -->    <div id="dNavBot">   	  </div><!-- end of navbot -->    <div id="dTorso">	    <table width="1000" cellspacing="10" cellpadding="10" bgcolor="#CCCCCC">	  <tr>	    <td width="250" bgcolor="#FFFFFF"><p class="content">  latest news here</p></td>	    <td width="500" bgcolor="#FFFFFF">  <img src="images/450x225.jpg" class="center" /><br />        	<p class="maincontent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lacus nisi, vehicula id sodales in, hendrerit eget ipsum. Nam non volutpat leo. Sed diam justo, suscipit vel tempor nec, ornare eu quam. Proin lorem justo, fringilla ac cursus sed, feugiat et eros. Suspendisse aliquam diam nec erat vehicula vel porttitor erat molestie.</p>            </td>	    <td width="250" bgcolor="#FFFFFF"><p class="content">  content here</td>      </tr>	  </table><div class="dfooter" id="dFooter">All Rights Reserved © 2009 Quest Community Fellowship | info@questcebu.com | 0917.70.QUEST (78378)   	  	</div><!-- end of torso -->      </div><!-- end of footer -->	</div><!-- end of pageholder -->    <script type="text/javascript"><!--var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});//-->    </script>    </body></html>

@media screen{/* ID STYLE */ 	#dPageHolder{	text-align:left;	margin-left:auto;	margin-right:auto;	width:1000px;	height:auto;}	#dHeader{	margin-left:auto;	margin-right:auto;	width:100%;	height:26px;	background-color:#292421;}   	#dSubHeader{margin-left:auto;margin-right:auto;width:100%;height:auto;background-color:#000;}	#dNavBot{margin-left:auto;margin-right:auto;width:100%;height:30px;background-color:#292421;overflow:hidden;}	#dTorso{margin-left:auto;margin-right:auto;position:absolute;width:1000px;height:auto;overflow:hidden;background-color:#CCC;}   	#dLeft{position:absolute;left:15px;width:300px;height:auto;z-index:3;background-color:#FFF;border:#000;border:thin}	#dMiddle{position:absolute;top:0px;left:180px;width:645px;height:auto;background-color:#FFF;padding-bottom:30px;padding-left:30px;padding-right:30px;z-index:2;}   	#dRight{position:absolute;left:870px;width:15px;height:auto;z-index:1;background-color:#454545;}		#dFooter{	margin-left:auto;	margin-right:auto;	width:1000px;	height:20px;	background-color:#292421;	padding-top: 7px;}   	#dSubFooter{margin-left:auto;margin-right:auto;width:900px;height:60px;overflow:hidden;text-align:center;background-image:url(images/footer.gif);}   	#dLeftWing{margin-left:auto;margin-right:auto;position:absolute;top:-1px;left:-292px;width:212px;height:600px;background-color:#FFF;background-repeat:no-repeat;overflow:hidden;z-index:49;}   	#dRightWing{position:absolute;top:-1px;left:1021px;width:212px;height:600px;background-color:#FFF;background-repeat:no-repeat;overflow:hidden;z-index:48;}		#dPage{background-color:#FFF;width:645px;height:auto;text-align:left;margin-top:0px;}	#dPageText{width:645px;height:auto; text-align:left;}		}		

@charset "UTF-8";/* CSS Document */.maincontent {	font-size: 12px;	color: #000;	letter-spacing: normal;	text-align: left;	word-spacing: normal;	font-family: Arial, Helvetica, sans-serif;	margin-top:5px;	margin-left:auto;	text-align:justify;}.mainbody {	background-color: #000;}img.center {  display: block;  margin-left: auto;  margin-right: auto;}p.center {	text-align: left;}.content {	font-family: Arial, Helvetica, sans-serif;	font-size: 12px;	color: #000;	text-align: left;	margin-top:5px;	margin-left:5px;	top: 10px;}.dfooter { 	font-family:Arial, Helvetica, sans-serif;	font-size:9px;	color:#FFF;	text-align:right;	margin-top:5px;	margin-bottom:auto;	margin-right:5px;}

img1.png

Link to comment
Share on other sites

i was using divs but i had a problem with it, my divs seems wont arrange the way i want them to be.. i had them arranged in a way like this: a div left, a div middle and a div right but when i do it, it just falls under each other. can you give me some hints or maybe a template code to start with..note: i did put in one div container my three divs (left, mid, right)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...