Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    html layout problem... newbie

    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:

    Code:
    <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0.1 Transitional//EN”
    	“http://www.w3.org/TR/html4/loose.dtd”> 
    <HTML>
    <HEAD>
    
    <TITLE>
              Návod ke stahování Command & Conquer - Red Alert 3 Uprising
    </TITLE>
    
    <script type="text/javascript" language="javascript" src="lytebox.js"></script>
    <link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />
    
    </HEAD>
    
    
    
    
    <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
        </h1>
    
        <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>
    <br>
    <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> 
    
    </ol>
    
    </table>
      </div>
    
    
        
    	
        <div style="clear:both;"></div>
    </div>
    </BODY>
    </HTML>
    Full Screen:



    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?


    Last edited by Davies; 02-18-2009 at 03:53 PM.

  • #2
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    First you should validate your markup.

    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:

    Code:
    <body>
    	
      <div id="container">
    
    <!-- Other elements go here -->
    
      </div>
    	
    </body>
    and applying this style to it:

    Code:
    #container {
      width:800px; /* Replace with your own width */
      margin:0 auto;
    }
    For future assistance a link to your page would be helpful.
    Last edited by BoldUlysses; 02-18-2009 at 02:22 PM.
    matt | design | blog

  • #3
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

    Rob


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •