This is where I am confused. What resolution are you on? Would you mind posting a screen cap of my site please?
My PC screen dimension is 1280X800. I am running WinXP and using Firefox 2.0.0.4.
I’m in 1024x768 and everything is center aligned except for the text. They all are aligned to the pixel as well. The resolution just after 1024x768 works as well as far as I remember, unless you’re talking about something else I didn’t notice.
What I am talking about has to do with the individual design elements aligning. This is not text/paragraph alignment necessarily but with the alignment of graphical elements. See the screencap below. If you note that I have placed dashed lines to denote elements where alignment should be occurring from the top to the bottom of the page. If you look at the Ruthless Intent logotype in the banner and look at the main menu and the margin in the ’navigation’ box, each of these elements has a different spacing. Sure the boxes themselves line up but what will make this look clean and tight is if all the perceived lines of the image can align with one another. See the secont attachement where I have lined up the elements and adjusted the margins.
I’m requesting Smiley Its always good to hear the bad points so I can improve on them. What you’re saying, it does not affect how you view the website does it?
On the class and ID names. It is not a big deal but as an example you site has ids called #headerleft. and #headerright while I know that you are going to be getting rid of one or both of these it still makes sense to not restrict yourself in ways that trap you to having to change your templates. Naming IDs for the content and not for the placement on a page is better. For instance your #headerright content is a sort of quicknav or shortcut links. You won’t likely ever change the content of the container in terms of type so it is better to call it what it is vs. where it is. Then if you decide that you want to float it left you won’t have an ID called #headerright that is positioned to the left.
To further this conversation on naming: (and please keep in mind there are a 1000+ ways to skin a cat) you could have dropped the containers for #headerright and #headerleft and just applied a class called .left or .right to the ul of the lists. so you would end up with:
#header ul.left{
float: left;
width: 200px;//would be better if it were a %
height: 50px;
}
#header ul.right{
float: right;
width: 750px; //would be better if it were a %;
height: 50px;
}
or you could do as I said above and
#quicklinks{
float: right;
width: 750px;
height: 50px;
}
#jump_to_content{
float: left;
width: 200px;
height: 50px;
}
By using this latter method for IDs you won’t be tied to presentation names like left or right or red or blue and then have to go back into your templates to change the ID when you change your scheme.
Hope this helps.
Let me know if you need clarification on anything.
Sincerely and all the best,
Jay
MODX Staff
.
Its always good to hear the bad points so I can improve on them. What you’re saying, it does not affect how you view the website does it?