Complicated Alignment Issues ^^

[Mr. O]

Howdy good folks of the HTML/CSS variety :icon_cool:

To make things brief, this is what I want to do basically - http://gearsofwar.xbox.com/default.htm

I have my background image like theirs, but it seems that the rest of the page I made only looks good with my monitor resolution because I used Draw apDivs (dreamweaver WYSIWYG feature) like tables to place everything on my page... :$

What I want to know is - my news box background images are like theirs - a complete image with width, height, and gif/jpg/png attributes (ie, it's s pixel box, not a CSS color bar, so I can't just p {background: "use this image"} it). How do I align the text in those graphics the proper way?

I can't just center the text or everything will be all over the place, but if I don't use code to align the images and text in a manner workable in all browsers then it's all over :/ I really can't learn from that site's source code because I'm not much of a coder, so try to be non-technical in any explanations you may have if you can. I only speak simple ^^

Ideally, I should just program an input form with administration access to it so that I can post updates like a forum or blog (in my own graphics design, not a PHP script company's design and logo with minimal customization options), but that's a bit beyond me for at least a few decades.

Cheers if you can help with that though. If anything is unclear, just ask for clarification :cool:

[Traevel]

Hi there,

If centering the text would solve the problem for you, perhaps you could center an element and use text-align:left; on that element to prevent the text from centering as well.

#div{
	width:50%;
	text-align:left;
	margin: 0 auto;
}

This way the element will center on the page and the text will remain aligned to the left.

Good luck,

Traevel

[Mr. O]

I actually need both to center. My site is this: http://innominate.oxyhost.com/ - I don't think it's advertisement since it's not meant for anyone here to join or use and posting it could help with my problems ^^

A bit less grand than the GoW page, but it's my first so :P

A friend of mine has a resolution of around 1900x1082 or so and he has a lot of empty space to the right of the images/buttons (ctrl - scroll down to see what I mean), but at 1280x800 I see it perfectly fine. IE has the text messed up though.

So it's basically getting the text AND the news background images just perfectly aligned like I have it, except in the center of the page without exact coordinates (apDivs set an exact space on the page for items). Instead it needs to be generally defined for the browser so that it will size itself depending on their hardware/software/preferences.

Is that the correct way to term things?

Btw, I wouldn't know if I had to rename that code or not. I have lots of divs on the page that I know nothing about (WSYIWIG adds code to actions), so it would essentially affect everything that's not the background. Everything is a div :icon_eek:

Sorry for the trouble. I'm one of those annoying people who always has questions and little knowledge about the whole field :confused:

[Traevel]

In that case I'm afraid I misunderstood the problem. :P

I looked at the code you provided and it does seem that everything is absolute and certainly not that easy to center.

The best thing now would be to rewrite the code, which might not be as hard as you think, the overall layout isn't that complicated.

The easiest thing you can do, however, to repair the layout isn't a pretty one (I'll probably be cursed by many for even suggesting it :D), but you could write a new page with a centered iframe and give it a width of 1280 (1024 would be better, though). That way the content will be displayed through the iframe and be centered on even the widest of screens; it will never be wider than 1280/1024.

Reference

Like I said, not pretty, but I doubt you'd be wanting to start all over again. Anyway, if you can't get it to work one way or the other, don't hesitate to post back :)

Traevel

[Mr. O]

The iframe solution would create 2 scroll bars, so it's out of the question for me. I'm all about presentation ^^

How should I begin recoding? The reason I assigned absolute values was because I don't know how to align with code. I mean, aligning left, right, center, etc. doesn't seem to get everything where I want it. It all ends up a mess :/

Do I need to use tables (I know, outdated but it's still effective) and do what I did before, or how else could I go about this? If I could align with code I would be working with Notepad to put it all together ^^

w3c is harsh for me btw. They were always too technical and seem mostly for people who already know html/css, so if it's on htmldog.com too that would be easier. They're more down to earth and seem to reference everything as well :icon_mrgreen:

[Traevel]

You could use tables, although using too many will clutter the code just like the WYSIWYG and make it far more difficult to make changes later on. Positioning with CSS would be better, but might require some practice. Perhaps a combination of the both might be the easiest answer, use a table to get everything centered and CSS to sort out any spacing/padding issues that might occur.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Innominate - On Our Soul!</title>
</head>
<body>
<center>
<table>
	<tr valign="top">
		<td>
		<div id="apDiv2"><a href="index.html"><img src="../Images/Button-01.png" alt="Overview" width="213" height="110" border="0"/></a></div>
    	<div id="apDiv3"><img src="../Images/Button-2.png" alt="Forum-link" width="213" height="110" border="0"/></div>
    	<div id="apDiv4"><a href="Clickmaster.html"><img src="../Images/Button-3.png" alt="CM-Link" width="213" height="110" border="0"/></a></div>
    	<div id="apDiv5"><a href="Realm.html"><img src="../Images/Button-04.png" alt="Realm" width="213" height="110" border="0"/></a></div>
		<div id="apDiv6"><a href="About.html"><img src="../Images/Button-5.png" alt="About" width="212" height="121" border="0"/></a></div>
		</td>
		<td>
		<div id="apDiv1"><img src="../Images/N-form.png" alt="News form" width="442" height="550" /></div>
		<br><br>
		<div id="apDiv7"><img src="../Images/news-bg-2.png" alt="N-News" width="442" height="550" /></div>
		</td>
	</tr>
</table>
</center>
</body>
</html>

The code above might give you an idea of what I'm trying to say. If it doesn't, let me know and I'll try to explain it with more detail. :)

Good luck,

Traevel