Log In · Register

 
2 Pages V   1 2 >  
 Closed TopicStart new topic
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?
 
imperfectionistx
post Apr 29 2009, 05:28 PM
Post #2


(:
*****

Group: Official Designer
Posts: 461
Joined: Jul 2005
Member No: 184,978
^Okay, so I did that and now the home page (too lazy to do the rest atm) is aligned in 1024x768. Should it be aligned in other resolutions now?

Text areas are supposed to show up here in the empty spaces... but they're not showing up for me.
 
imperfectionistx
post Apr 29 2009, 05:33 PM
Post #3


(:
*****

Group: Official Designer
Posts: 461
Joined: Jul 2005
Member No: 184,978
Okay, thanks. I don't see why it wouldn't be working though, I haven't had alignment problems in the past that I couldn't fix :/
 
imperfectionistx
post Apr 29 2009, 06:05 PM
Post #4


(:
*****

Group: Official Designer
Posts: 461
Joined: Jul 2005
Member No: 184,978
The live preview is not aligned for me. Is it because 1024x768 is a weird resolution? I'll see when I get home
The real question is why isn't aligning in the first place?
I use the same coding and attributes for my other layouts and they aligned fine in all resolutions.
 
imperfectionistx
post Apr 29 2009, 11:49 PM
Post #5


(:
*****

Group: Official Designer
Posts: 461
Joined: Jul 2005
Member No: 184,978
The live preview isn't aligned for me in 1280x960 either.

Center like in the center of the page? If I made it center left, would it be ok? I'm going to try that I guess, since I don't want it to be in the center of the page.

edit// Here's the code for my homepage. I used the coding (fixed a few things), and it aligns in the template on my laptop except the links and content are too far down the page. It is aligned fine in 1280x960. Tried using relative positioning with the same result.

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:-369px; 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:-604px; width:192px; height:184px; background-color:transparent; border-color:222222; border-style:solid; border-width:0px;}

body {
background-color:FFFFFF;
background-image:url(http://i41.tinypic.com/1491m9z.gif);
background-position:left;
background-repeat: no-repeat;
background-attachment: scroll;
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;
}

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="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>

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

</body>
</html>


And, do you know what's wrong with the textareas?
 
sunshine07
post Apr 30 2009, 05:09 AM
Post #6


Sunshine07
**

Group: Member
Posts: 22
Joined: Oct 2008
Member No: 690,489
The textareas seem to be working fine for me...
 
theerinkal
post Apr 30 2009, 05:10 PM
Post #7


Irrisistable Cabbages.
*****

Group: Member
Posts: 549
Joined: Nov 2007
Member No: 589,355
It's completly messed up for me.

All I see is the bottom half of the layout.
 
imperfectionistx
post Apr 30 2009, 07:58 PM
Post #8


(:
*****

Group: Official Designer
Posts: 461
Joined: Jul 2005
Member No: 184,978
^What browser are you using? Everything shows up in IE, despite the mis-alignment.
 
theerinkal
post Apr 30 2009, 08:12 PM
Post #9


Irrisistable Cabbages.
*****

Group: Member
Posts: 549
Joined: Nov 2007
Member No: 589,355
QUOTE(imperfectionistx @ Apr 30 2009, 07:58 PM) *
^What browser are you using? Everything shows up in IE, despite the mis-alignment.


FF

Here's How it looks for me:
 
Mikeplyts
post Apr 30 2009, 08:30 PM
Post #10


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

Group: Official Designer
Posts: 6,371
Joined: Aug 2008
Member No: 676,291
I think that instead of setting the layout image as the body background, you should set it as it's own div.

Also, maybe you should add the textarea class to your codes and edit it's properites. Like so:

CODE
textarea {
width: ###px;
height: ###px;}
 
imperfectionistx
post Apr 30 2009, 11:11 PM
Post #11


(:
*****

Group: Official Designer
Posts: 461
Joined: Jul 2005
Member No: 184,978
^Thanksss Mike (: Now the textareas are working. I also did what you suggested and made the bg in its own DIV. Any differences?
 
theerinkal
post May 1 2009, 06:52 AM
Post #12


Irrisistable Cabbages.
*****

Group: Member
Posts: 549
Joined: Nov 2007
Member No: 589,355
It's still mis-aligned for me.
 
theerinkal
post May 1 2009, 05:39 PM
Post #13


Irrisistable Cabbages.
*****

Group: Member
Posts: 549
Joined: Nov 2007
Member No: 589,355
QUOTE(A1Bassline @ May 1 2009, 04:23 PM) *
What kind of top positioning are you using?


Me or imperfectionistx?
 
Maccabee
post May 1 2009, 05:40 PM
Post #14


Senior Member
*******

Group: Official Designer
Posts: 5,880
Joined: Nov 2007
Member No: 593,382
You need to make sure it works no matter what the resolution is! Cause even though my screen is 1440x900, it wasnt fullscreen.
 
theerinkal
post May 1 2009, 05:49 PM
Post #15


Irrisistable Cabbages.
*****

Group: Member
Posts: 549
Joined: Nov 2007
Member No: 589,355
QUOTE(A1Bassline @ May 1 2009, 05:42 PM) *
Imperfectionistx because she's the one coding. :P


Okay. I wasn't sure.
 
imperfectionistx
post May 2 2009, 03:04 AM
Post #16


(:
*****

Group: Official Designer
Posts: 461
Joined: Jul 2005
Member No: 184,978
This is the coding I'm using atm. It's aligning in 1280x960 and on my laptop.
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:-369px; 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:-604px; width:192px; height:184px; background-color:transparent; border-color:222222; border-style:solid; border-width:0px;}

.image {background-image:url('http://i41.tinypic.com/1491m9z.gif'); background-repeat: no-repeat;
background-attachment: scroll; position:absolute; overflow:hidden; _top:40px; left:50%; _margin-left:-630px; 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"></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>

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


</body>
</html>
 
fixtatik
post May 2 2009, 09:02 AM
Post #17


Senior Member
******

Group: Member
Posts: 1,237
Joined: May 2008
Member No: 648,123
^ i might be wrong, but i think the underscore hack only works in IE6 and earlier. IE7 and IE8 won't recognize it. they work on myspace because myspace wrote a script to accept that hack.
 
imperfectionistx
post May 3 2009, 03:47 AM
Post #18


(:
*****

Group: Official Designer
Posts: 461
Joined: Jul 2005
Member No: 184,978
Ok I'll try to put those back in... any difference?
 
theerinkal
post May 3 2009, 09:04 AM
Post #19


Irrisistable Cabbages.
*****

Group: Member
Posts: 549
Joined: Nov 2007
Member No: 589,355
Now it's cut off (at least for me) on the left site. You can only see "avigation" instead of "navigation". The nav and content aren't in their specific places.
 
imperfectionistx
post May 5 2009, 09:54 PM
Post #20


(:
*****

Group: Official Designer
Posts: 461
Joined: Jul 2005
Member No: 184,978
I'm not sure why it's not working for you but it's aligning for me now in 1280x960 and 1440x900 and on my laptop.
 
imperfectionistx
post May 6 2009, 12:01 AM
Post #21


(:
*****

Group: Official Designer
Posts: 461
Joined: Jul 2005
Member No: 184,978
^What parts are off? I changed just the background positioning to just left:0%; and it's aligning for me. I know the content isn't aligning on my laptop but it is in 1280x960 and 1440x900. If I changed all the content positioning to left:0%; and positioned from there, would it align?

You can re-do the coding if you want, I only need the div coding to be redone if it still doesn't work.
 
theerinkal
post May 6 2009, 04:12 PM
Post #22


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.
 
imperfectionistx
post May 6 2009, 05:51 PM
Post #23


(:
*****

Group: Official Designer
Posts: 461
Joined: Jul 2005
Member No: 184,978
^Thanks (:

http://esthetica.webs.com/index.htm

Okay, so I changed all the content positioning to left:0%; and positioned from there. How is it aligning now?

I thought that in any resolution, left:0%; will align all the way to the left on your screen. It wasn't aligning properly because I had it set to left:50%; which would align in the center + margin-left attributes, which are different in everyone's resolution. So now that I set it to left:0%, it should align at the left in all resolutions? I think.

If it still doesn't work I'll give up and put it in the center lol
 
theerinkal
post May 6 2009, 05:54 PM
Post #24


Irrisistable Cabbages.
*****

Group: Member
Posts: 549
Joined: Nov 2007
Member No: 589,355
QUOTE(imperfectionistx @ May 6 2009, 05:51 PM) *
^Thanks (:

http://esthetica.webs.com/index.htm

Okay, so I changed all the content positioning to left:0%; and positioned from there. How is it aligning now?

I thought that in any resolution, left:0%; will align all the way to the left on your screen. It wasn't aligning properly because I had it set to left:50%; which would align in the center + margin-left attributes, which are different in everyone's resolution. So now that I set it to left:0%, it should align at the left in all resolutions? I think.

If it still doesn't work I'll give up and put it in the center lol


It doesn't work. I would give up, not to be mean or anything. It looks good in the center.
 
imperfectionistx
post May 6 2009, 05:58 PM
Post #25


(:
*****

Group: Official Designer
Posts: 461
Joined: Jul 2005
Member No: 184,978
^How is it aligning? A little or a lot off?

I really don't want it in the center that's why; I meant for it to be on the left. But if no one can figure out how to properly align it on the left, I guess I'll have to give in and center it >:/

There has to be a way to align this though, right? I've seen lots of website layouts that are left or right aligned.
 
theerinkal
post May 6 2009, 06:02 PM
Post #26


Irrisistable Cabbages.
*****

Group: Member
Posts: 549
Joined: Nov 2007
Member No: 589,355
QUOTE(imperfectionistx @ May 6 2009, 05:58 PM) *
^How is it aligning? A little or a lot off?

I really don't want it in the center that's why; I meant for it to be on the left. But if no one can figure out how to properly align it on the left, I guess I'll have to give in and center it >:/

There has to be a way to align this though, right? I've seen lots of website layouts that are left or right aligned.


All of a sudden it went perfect okay on the first page.. Its on the left and all of the text and everything are in their boxes. Weird...

I went to your website content page and the content and navigation text/links are mis-aligned to the left. The navigation is off of the screen.



This post has been edited by theerinkal: May 6 2009, 06:08 PM
 
imperfectionistx
post May 6 2009, 06:04 PM
Post #27


(:
*****

Group: Official Designer
Posts: 461
Joined: Jul 2005
Member No: 184,978
^Ahhh YAY :D
I aligned everything to left:0%; and _left:0%; etc. etc. Hopefully it's all good in all resolutions now.

Thanks for all the help (:
 
theerinkal
post May 6 2009, 06:10 PM
Post #28


Irrisistable Cabbages.
*****

Group: Member
Posts: 549
Joined: Nov 2007
Member No: 589,355
QUOTE(imperfectionistx @ May 6 2009, 06:04 PM) *
^Ahhh YAY :D
I aligned everything to left:0%; and _left:0%; etc. etc. Hopefully it's all good in all resolutions now.

Thanks for all the help (:


idk if you saw it but I edited my post.
 
imperfectionistx
post May 6 2009, 06:11 PM
Post #29


(:
*****

Group: Official Designer
Posts: 461
Joined: Jul 2005
Member No: 184,978
^I know those are not aligned. I stated in a previous post that I only was working on the home page to test if it would align before changing the rest (;
 
« Next Oldest · Webmasters' Corner Resolved Topics · Next Newest »
 

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

 

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

Track this topic · Email this topic · Print this topic