Jump to content

Css Alignment

khent08

By khent08
in CSS

Recommended Posts

khent08 Newbie

khent08

Posted
Posted

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
khent08 Newbie

khent08

Posted
  • Author
Posted

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

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...