Log In · Register

 
Help with alignment
ironicsilence
post Mar 2 2009, 12:44 PM
Post #1


Senior Member
***

Group: Member
Posts: 67
Joined: Jun 2008
Member No: 656,568
I need help aligning my text to look the same in all resolutions.

I know this questions been asked like a thousand times before me in this forum but the answers didn't help me.

I've tried the whole 50% and margin-left thing but that didn't work.

Does anyone have any other ideas how to fix this?

This is my code.

CODE
<html>
<head><Title>THEPAPERMOON</title></head>

<style>

body {background-color: E2D390;
background-image:url("http://farm4.static.flickr.com/3436/3312964756_44d9b621db_o.jpg");
background-repeat:repeat-y;
background-attachment: scroll;
background-position:0px 88px ;
scrollbar-face-color:E5ECC3;
scrollbar-3dlight-color:508F89;
scrollbar-shadow-color:508F89;
scrollbar-darkshadow-color:508F89;
scrollbar-arrow-color:508F89;
scrollbar-track-color:E5ECC3;}



.div1{background-color: transparent;
background-image: none;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top center;
position: absolute;
left: 0%;top:0px;color:7F373C;
margin-left:0}


.div2{
color:E5ECC3;
top: 480px;
width: 382px;
background-color: transparent;
background-image: none;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
position:relative;
left:50%;
margin-left: -280px;

height: auto;

border: 0px solid red;
overflow: hidden;
z-index: 3;
font-family: Verdana;
font-size:15px!important;white-space:7px;
}




.div3 {
background-color: transparent;
background-image: none;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
position: absolute;
left:50%;
margin-left: 35px;
top: 25px;
height: autopx;
width: 180px;
overflow: hidden;
z-index: 3;color:7F373C;
font-family:arial;
font-size:14px;

}





h1 {
margin: 2px;
text-align:left;
border-bottom:solid;border-color:508F89;border-width: 3px;border-top:solid; border-color:508F89;
font-family:arial;
font-size: 15pt;
background-color: transparent;
background:none;
color: E5ECC3;text-indent: 6px;


}






h2 {background-image:url(none); width:

407px;left:-10%;height:21px; color:000000;font-family:arial;font-size: 15pt;
margin-bottom: 2px;margin-top: 2px;margin-left:1px;


}







h3 {width: 380px;
font-family: Verdana;
font-size:12px!important;line-height: 16px;
padding-right:2px;
padding-left:2px;margin: 3px;}

h4 {color:296F6A;font-family:Verdana;font-size:11;line-height: 16px;padding:1px;
margin-bottom: 2px;
margin-top: 1px;
padding-left:2px;}







h5 {background-image:url(none); width:

407px;left:-10%;height:16px; color:7F373C;padding:2px;margin-bottom: 2px;margin-top: 2px;


}















a:link, a:visited {color:296F6A; background-color:transparent; font-size:14px;font-family: arial;word-spacing:

2px;text-decoration:none;Line-spacing:0px; width: 142px;
height: 9px;margin: 1px;text-align:left; border-color:3E373E;
}
a:hover {color:7F373C; background color:none;
text-decoration:none; border-color:efffce;}





a.rollover {
display: table;
width: 130px;
height: 10px;

}





</style>

</head>



<body>

<div class="div1"><img src="http://farm4.static.flickr.com/3308/3312130437_029d49e2fd_o.jpg" width="1006" height="991"

alt="fly away copy" /></a></div1>







<div class="div3">

<h5>About me</h5>

<h4>

<b>Name:</b> Laura <br>
<b>Age:</b> 7/23/91<br>
<b>sign:</b> Leo <br>
<b>likes:</b>Photography, music, the rain, the ocean, my d40, ipod, and sketchbook<br>
<b>dislikes:</b> liars, spiders, and fakes
</p></h4>

<h5>Host</h5>
<a href="http://streetrawr.net/">Aerith</a>

<h5>Naviagtion</h5><h4>

<a href="index.php?page=page1.php">Home</a><br>
<a href="index.php?page=aboutme.php">About Me</a><br>
<a href="index.php?page=layouts.php">Layouts</a><br>
<a href="index.php?page=stock.php">Stock</a><br>
<a href="index.php?page=icons.php">Icons</a><br>
<a href="index.php?page=photography.php">Photography</a><br>
<a href="index.php?page=drawings.php">Drawings</a><br>
<a href="index.php?page=manipulations.php">Manipulations</a><br>
<a href="index.php?page=quotes.php">Quotes</a><br>
<a href="index.php?page=affiliations.php">Affiliations</a><br>
<a href="index.php?page=credit.php">Credit</a><br>
<a href="index.php?page=contact.php">Contact Me</a><br>
<a href="http://ironicsilence.createblog.com/">My Createblog</a>
<br><br>
</p>
</h4>



<h5>Affiliations</h5>
<a href='http://www.createblog.com/affiliates/in.php?id=385' title='Free myspace layouts'><img src='http://www.createblog.com/images/affiliate.gif' alt='Free myspace layouts' border='0' /></a>
<br>



<h5>Cbox</h5>

<p>
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="150" height="305" src="http://www5.cbox.ws/box/?boxid=470051&boxtag=8477&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border: 1px solid;" id="cboxmain"></iframe></div>
<div><iframe frameborder="0" width="150px" height="75" src="http://www5.cbox.ws/box/?boxid=470051&boxtag=8477&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border: 0px solid;border-top:0px" id="cboxform"></iframe></div>
</div>
<!-- END CBOX -->



<h5>Credit</h5><h4>
Layout made by <a href="http://thepapermoon.streetrawr.net" class="rollover">ThePaperMoon</a>

<br>
Content ©
ThePaperMoon<br><br><br></h4>




</div>
</div>



</body>
</html>
 
 
 Start new topic
Replies
Mikeplyts
post Mar 2 2009, 01:28 PM
Post #2


Mel Blanc was allergic to carrots.
*******

Group: Official Designer
Posts: 6,371
Joined: Aug 2008
Member No: 676,291
Well the "left: 50%; margin-left: -###px;" method should've worked.

Try replacing the "position: relative;" with "position: absolute;". in the CSS for div2.
 

Posts in this topic
ironicsilence   Help with alignment   Mar 2 2009, 12:44 PM
Mikeplyts   I'm not completely sure on what you're ask...   Mar 2 2009, 01:04 PM
ironicsilence   I'm basically asking how to make the layout lo...   Mar 2 2009, 01:14 PM
Mikeplyts   Can you give a link to your site please?   Mar 2 2009, 01:18 PM
ironicsilence   http://thepapermoon.streetrawr.net/ here you go.   Mar 2 2009, 01:19 PM
Fawaz   Create a new div and place all your code HTML code...   Mar 2 2009, 01:20 PM
Mikeplyts   Well the "left: 50%; margin-left: -###px;...   Mar 2 2009, 01:28 PM
ironicsilence   Thanks but it didn't work.   Mar 2 2009, 01:43 PM
Mikeplyts   Try messing with your "margin-left:" pro...   Mar 2 2009, 01:48 PM
mipadi   Why not just use CODEmargin-left: auto; margin...   Mar 2 2009, 01:54 PM
Mike   Align the text the same way you aligned the DIV im...   Mar 2 2009, 01:57 PM
ironicsilence   That worked Mike!! Thanks everyone!   Mar 2 2009, 02:03 PM
Mike   No problem. Topic closed & moved.   Mar 2 2009, 02:14 PM

« Next Oldest · Webmasters' Corner Resolved Topics · Next Newest »
 

Closed TopicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic