View Full Version : Resolved html layout problem... newbie

02-18-2009, 01:57 PM
Hi There

I am new to web programming and currently working at EA Games. I'm trying to create a custom landing page for red alert 3.

However when you resize the window the text isn't aligned correctly. How do I sort out this code so that the text automatically ends up in the center between the two robots?

See screenshots and codes below:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0.1 Transitional//EN”

Návod ke stahování Command & Conquer - Red Alert 3 Uprising

<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />


<body style="background:url(http://drh.img.digitalriver.com/DRHM/Storefront/Site/eaemea/pb/images/backgrounds/large_robot_background3.jpg) center top #232d22 no-repeat; padding:0;">

<div style="width:1200px; float:right; margin:20px 105px 10px 10px;">

<center><img src="images/czech/logo.jpg" width="400" height="98" border="0" /></center>

<table width="1100" height="300" border="1" >

<h1 style="font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:20px; padding:12; margin:2 0 15px 0;">
Návod ke stahování Command & Conquer - Red Alert 3 Uprising

<ol style="margin:0 0 10px 0; padding-left:30px; font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:12px; font-weight:normal;">

<li style="line-height:1.3; padding:0 0 8px 0;"> Spusťte EA Download Manager (Start>Programy>EA Download Manager) a přihlaste se. Pokud EA Download Manager&nbsp;nemáte,&nbsp;stáhněte&nbsp;si&nbsp;jej&nbsp;ZDE.</li>
<li style="line-height:1.3; padding:0 0 8px 0;"> Klikněte na záložku “Activation”.</li>
<li style="line-height:1.3; padding:0 0 8px 0;"> Zadejte svůj herní kód a přihlaste se ke svému účtu – musíte zadat stejný účet, jaký jste použili při registraci hry Red Alert 3, případně vytvořit účet nový, pokud jste tak ještě neučinili.</li>
<a href="images/czech/screen_1.JPG"rel="lytebox"><img src="images/czech/screen_1b.jpg" width="600" height="407" border="0" /></a><br><br>

<li style="line-height:1.3; padding:0 0 8px 0;">Zvolte jazyk hry “Command & Conquer - Red Alert 3 Uprising”</li><br>

<a href="images/czech/screen_2.JPG"rel="lytebox"><img src="images/czech/screen_2b.jPG" width="250" height="169" border="0" /></a><br><br>

<li style="line-height:1.3; padding:0 0 8px 0;"> Pokud nejste přihlášeni, klikněte na záložku Log in a ke svému účtu se přihlaste, poté se vám zobrazí všechny vaše hry..</li>
<li style="line-height:1.3; padding:0 0 8px 0;"> Hra se zobrazí ve vašem EA Download Manageru a začne se automaticky stahovat.</li><br>

<a href="images/czech/screen_3.JPG"rel="lytebox"><img src="images/czech/screen_3b.jpg" width="250" height="86" border="0" /></a><br><br>

<li style="line-height:1.3; padding:0 0 8px 0;">Pusťte se do hraní!</li>



<div style="clear:both;"></div>

Full Screen:

http://img150.imageshack.us/img150/5724/screen1jk6.th.jpg (http://img150.imageshack.us/my.php?image=screen1jk6.jpg)

And this is what happens when you resize the screen. However i want the text to stay in the position even when resized. How do you i do this?

http://img252.imageshack.us/img252/8746/screen2ro5.th.jpg (http://img252.imageshack.us/my.php?image=screen2ro5.jpg)

02-18-2009, 02:20 PM
First you should validate your markup (http://validator.w3.org/).

The best way to center a fixed-width layout like you have is to use the margin:0 auto method. This entails putting a fixed-width container/wrap around your content like:


<div id="container">

<!-- Other elements go here -->



and applying this style to it:

#container {
width:800px; /* Replace with your own width */
margin:0 auto;

For future assistance a link to your page would be helpful.

02-18-2009, 03:00 PM
Hi msuffern

Thank you very much for your help! This has worked perfectly!

Check out the eastore.co.uk if your interested in your pc games by the way

Thanks again!