Log In · Register

 
Alignment issues ><
imperfectionistx
post Apr 29 2009, 05:12 PM
Post #1


(:
*****

Group: Official Designer
Posts: 461
Joined: Jul 2005
Member No: 184,978
How is this aligning for you?

It's perfectly aligned on my 1280x960 res, it's a little bit off on my laptop, and a lot off in 1024x768.
I'm using the position:absolute;, left:50%; and margin-left attributes, but it still isn't aligning in other resolutions. Any way to fix this? Also, textareas are not working for me... :/ is it because freewebs doesn't allow that or something?
 
 
 Start new topic
Replies
YDG
post May 6 2009, 06:56 AM
Post #2


Senior Member
*******

Group: Staff Alumni
Posts: 7,063
Joined: Jul 2008
Member No: 670,288
The content and navigation were all the way at the top to the right. I adjusted your coding, checked it in Internet Explorer and Safari (you'll have to check in Firefox because Firefox doesn't work on my computer). What I did was positioned the template in the center. When it's in the center, you won't run into problems with positioning because people have different resolutions so if you tried all the way to the left on your computer, someone with a different resolution might have part of the template cut off or the content would be over more than it's supposed to.

Here is a preview:

http://tmarshdesign.webs.com/webmasterscor...ectionistx.html

If things look good, replace your codes with this:

CODE
<html>
<head>

<title>E S T H E T I C A | designs</title>

<style type="text/css">

.positioning {Positions all DIV layers}

.content {position:absolute; overflow:auto; top:284px; left:50%; margin-left:-63px; _margin-left:-63px; width:362px; height:500px; background-color:transparent; border-color:222222; border-style:solid; border-width:0px;}
.navigation {position:absolute; overflow:hidden; top:284px; left:50%; margin-left:-305px; _margin-left:-305px; width:192px; height:184px; background-color:transparent; border-color:222222; border-style:solid; border-width:0px;}
.image {position:absolute; overflow:hidden; top:40px; left:50%; margin-left:-325px; _margin-left:-325px; width:650px; height:778px;}

body {
background-color:FFFFFF;
scrollbar-arrow-color: #000000;
scrollbar-darkshadow-color: #ffffff;
scrollbar-track-color:#ffffff;
scrollbar-face-color: #ffffff;
scrollbar-shadow-color:#ffffff;
scrollbar-highlight-color:#ffffff;
scrollbar-3dlight-color: #ffffff;
margin:0px;
cursor: help;
}

div {
scrollbar-arrow-color: #B5E901;
scrollbar-face-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-track-color: #000000;
base-color: #000000;
}

body, div, p, strong, td, .text {
color:FFFFFF;
font-size:11px;
font-weight:normal;
font-style:normal;
text-decoration:none;
text-transform:none;
font-family:Arial;
letter-spacing:0px;
}

textarea {
width: 200px;
height: 50px;
background-color:222222 !important;
border: 1px solid #111111 !important;
font-family: arial !important;
color: #B5E901 !important;
}

b {
color:FD3987;
letter-spacing:-1px;
line-height:14px;
font-size:14px;
font-weight:bold;
font-style:normal;
text-decoration:none;
text-transform:uppercase;
font-family:Georgia;
}

strong {
color:FD3987;
letter-spacing:-1px;
line-height:14px;
font-size:14px;
font-weight:bold;
font-style:normal;
text-decoration:none;
text-transform:none;
font-family:Georgia;
}

a {
color: B5E901 !important;
font-family: Arial !important;
text-transform: none !important;
font-weight: normal !important;
text-decoration: none !important;
}

a:hover {
color: 7777777 !important;
font-family: Arial !important;
text-transform: none !important;
font-weight: normal !important;
text-decoration: none !important;
cursor:crosshair;
}

.c {Customizes Custom Links}

a.linkies:link, a.linkies:active, a.linkies:visited {
background-image:url("");
background-repeat: no-repeat;
background-position: left;
background-color:111111;
color:ffffff !important;
font-family:small fonts;
font-size:7px;
text-align:left;
border-left-style:solid;
border-left-width:5px;
border-left-color:#FD3987;
padding-left:10px;
line-height:12px;
text-decoration:none;
width:192px;
text-transform:uppercase;
font-weight:normal;
letter-spacing:1px;
margin-bottom:0px;
cursor:crosshair;
}

a.linkies:hover{
background-image:url("");
background-repeat: no-repeat;
background-position: left;
background-color:222222;
color:ffffff !important;
font-family:small fonts;
font-size:7px;
text-align:left;
border-left-style:solid;
border-left-width:5px;
border-left-color:#FD3987;
padding-left:10px;
line-height:12px;
text-decoration:none;
width:192px;
text-transform:uppercase;
font-weight:normal;
letter-spacing:1px;
margin-bottom:0px;
}

a.linkies2:link, a.linkies2:active, a.linkies2:visited {
background-image:url("");
background-repeat: no-repeat;
background-position: left;
background-color:111111;
color:ffffff !important;
font-family:small fonts;
font-size:7px;
text-align:left;
border-left-style:solid;
border-left-width:5px;
border-left-color:#B5E901;
padding-left:10px;
line-height:12px;
text-decoration:none;
width:192px;
text-transform:uppercase;
font-weight:normal;
letter-spacing:1px;
margin-bottom:0px;
}

a.linkies2:hover {
background-image:url("");
background-repeat: no-repeat;
background-position: left;
background-color:222222;
color:ffffff !important;
font-family:small fonts;
font-size:7px;
text-align:left;
border-left-style:solid;
border-left-width:5px;
border-left-color:#B5E901;
padding-left:10px;
line-height:12px;
text-decoration:none;
width:192px;
text-transform:uppercase;
font-weight:normal;
letter-spacing:1px;
cursor:crosshair;
margin-bottom:0px;
}
</style>

<div class="image">
<IMG src="http://i41.tinypic.com/1491m9z.gif">
</div>

<div class="navigation">
<a href="http://esthetica.webs.com/index.htm" class="linkies">HOME</a>
<br /><a href="http://esthetica.webs.com/MySpace%20content.htm" class="linkies2">MYSPACE CONTENT</a>
<br /><a href="http://esthetica.webs.com/Website%20content.htm" class="linkies">WEBSITE CONTENT</a>
<br /><a href="http://esthetica.webs.com/Tutorials.htm" class="linkies2">TUTORIALS</a>
<br /><a href="http://esthetica.webs.com/Services.htm" class="linkies">SERVICES</a>
<br /><a href="http://esthetica.webs.com/Contact.htm" class="linkies2">CONTACT</a>
<br /><a href="http://esthetica.webs.com/Site%20info.htm" class="linkies">SITE INFO</a><br>
</div>


<div class="content">

UNDER CONSTRUCTION.<p>

textarea<p>

<textarea>sample</textarea><br />

<center><!-- Freewebs Sticker -->
<noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script language="JavaScript" src="http://images.freewebs.com/JS/Freebar/btn_mirrorblack.js">
</script></center>
</div>


<!-- --><script type="text/javascript" src="http://staticthumbs.freewebs.com/i.js"></script><script type="text/javascript">if(typeof(urchinTracker)=='function'){_uacct="UA-230305-2";_udn="none";_uff=false;urchinTracker();}</script> <script type="text/javascript" src="http://edge.quantserve.com/quant.js"></script> <script type="text/javascript">_qacct="p-44naSaXtNJt26";quantserve();</script> </body>
</html>
 
theerinkal
post May 6 2009, 04:12 PM
Post #3


Irrisistable Cabbages.
*****

Group: Member
Posts: 549
Joined: Nov 2007
Member No: 589,355
QUOTE(A1Bassline @ May 6 2009, 06:56 AM) *
The content and navigation were all the way at the top to the right. I adjusted your coding, checked it in Internet Explorer and Safari (you'll have to check in Firefox because Firefox doesn't work on my computer). What I did was positioned the template in the center. When it's in the center, you won't run into problems with positioning because people have different resolutions so if you tried all the way to the left on your computer, someone with a different resolution might have part of the template cut off or the content would be over more than it's supposed to.

Here is a preview:

http://tmarshdesign.webs.com/webmasterscor...ectionistx.html


The preview works perfectly in Firefox. I just checked. Good layout, btw.
 

Posts in this topic
imperfectionistx   Alignment issues ><   Apr 29 2009, 05:12 PM
imperfectionistx   ^Okay, so I did that and now the home page (too la...   Apr 29 2009, 05:28 PM
imperfectionistx   Okay, thanks. I don't see why it wouldn't ...   Apr 29 2009, 05:33 PM
imperfectionistx   The live preview is not aligned for me. Is it beca...   Apr 29 2009, 06:05 PM
imperfectionistx   The live preview isn't aligned for me in 1280x...   Apr 29 2009, 11:49 PM
sunshine07   The textareas seem to be working fine for me...   Apr 30 2009, 05:09 AM
theerinkal   It's completly messed up for me. All I see is...   Apr 30 2009, 05:10 PM
imperfectionistx   ^What browser are you using? Everything shows up i...   Apr 30 2009, 07:58 PM
theerinkal   QUOTE(imperfectionistx @ Apr 30 2009, 07...   Apr 30 2009, 08:12 PM
Mikeplyts   I think that instead of setting the layout image a...   Apr 30 2009, 08:30 PM
imperfectionistx   ^Thanksss Mike (: Now the textareas are working. I...   Apr 30 2009, 11:11 PM
theerinkal   It's still mis-aligned for me. click to enlar...   May 1 2009, 06:52 AM
jcp   You need to make sure it works no matter what the ...   May 1 2009, 05:40 PM
imperfectionistx   This is the coding I'm using atm. It's ali...   May 2 2009, 03:04 AM
fixtatik   ^ i might be wrong, but i think the underscore hac...   May 2 2009, 09:02 AM
imperfectionistx   Ok I'll try to put those back in... any differ...   May 3 2009, 03:47 AM
theerinkal   Now it's cut off (at least for me) on the left...   May 3 2009, 09:04 AM
imperfectionistx   I'm not sure why it's not working for you ...   May 5 2009, 09:54 PM
imperfectionistx   ^What parts are off? I changed just the background...   May 6 2009, 12:01 AM
imperfectionistx   ^Thanks (: http://esthetica.webs.com/index.htm O...   May 6 2009, 05:51 PM
theerinkal   QUOTE(imperfectionistx @ May 6 2009, 05:5...   May 6 2009, 05:54 PM
imperfectionistx   ^How is it aligning? A little or a lot off? I re...   May 6 2009, 05:58 PM
theerinkal   QUOTE(imperfectionistx @ May 6 2009, 05:5...   May 6 2009, 06:02 PM
imperfectionistx   ^Ahhh YAY :D I aligned everything to left:0%; and ...   May 6 2009, 06:04 PM
theerinkal   QUOTE(imperfectionistx @ May 6 2009, 06:0...   May 6 2009, 06:10 PM
imperfectionistx   ^I know those are not aligned. I stated in a previ...   May 6 2009, 06:11 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