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

02-18-2009, 12: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, 01: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, 02: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!


EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum