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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Exclamation Alignment problems with different screen res.

    Hello,
    I'm posting this thread about this template:
    http://i37.tinypic.com/4rwznl.jpg
    The problem is that in different screen resolutions theres
    problems which cause the layout to not line-up correctly.
    Is there some code or something I can do from making
    it look correctly?

    http://habbdance.net/habbeach/ is the full coded version.
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
    >
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    meta http-equiv="cache-control" content="no-cache">
    <
    head>
    <
    title>HabBeach.NET! ~ Slogan Here</title>

    <
    style type="text/css">
    <!--
    body {
      
    text-aligncenter;
      
    background-imageurl(images/bg.png);
      
    font-familyVerdana
      
    font-size10px
      
    font-weightnormal
      
    color#000; 
    }
    A  {
       
    font-weight bold;
       
    text-decoration none;
    }
    A:link {
       
    color #000;
    }
    A:visited {
       
    color #000;
    }
    A:hover {
       
    text-decoration underline;
    }
    #container {
       
    width909px;
       
    marginauto;
    }
    #container2 {
       
    width909px;
       
    marginauto;
    }
    #banner {
       
    background-imageurl(images/banner.PNG);
       
    marginauto;
       
    width910px;
       
    height147px;
    }
    #banner_box {
       
    background-imageurl(images/banner_box.PNG);
       
    positionabsolute;
       
    left640px;
       
    top20px;
       
    padding-top8px;
       
    padding-left8px;
       
    width270px;
       
    height93px;
       
    text-alignleft;
    }
    #bar {
       
    background-imageurl(images/bar.PNG);
       
    marginauto;
       
    width905px;
       
    height23px;
       
    text-alignleft;
       
    font-familyTahoma
       
    font-size12px
       
    font-weightbold;
       
    color#FFF; 
       
    padding-top8px;
       
    padding-left5px;
    }
    #right {
       
    positionabsolute;
       
    top186px;
       
    left750px;
    }
    #left {
       
    positionabsolute;
       
    top186px;
       
    left57px;
    }
    #mid {
       
    positionabsolute;
       
    top186px;
       
    left272px;
    }
    #mid_bg {
       
    background-imageurl(images/mid_bg.PNG);
       
    width478px;
    }
    #left_bg {
       
    background-imageurl(images/left_bg.PNG);
       
    width215px;
    }
    #right_bg {
       
    background-imageurl(images/right_bg.PNG);
       
    width217px;
    }
    #mid_bot {
       
    background-imageurl(images/mid_bot.PNG);
       
    width477px;
       
    height16px;
       
    font-familyTahoma
       
    font-size12px
       
    font-weightbold;
       
    color#FFF; 
       
    padding-top4px;
    }
    #left_bot {
       
    background-imageurl(images/left_bot.PNG);
       
    width215px;
       
    height3px;
    }
    #right_bot {
       
    background-imageurl(images/right_bot.PNG);
       
    width217px;
       
    height2px;
    }
    #news_top {
       
    background-imageurl(images/news_top.PNG);
       
    height127px;
       
    width200px;
    }
    .
    news_bar {
       
    background-imageurl(images/news_bar.PNG);
       
    height25px;
       
    width165px;
       
    text-alignleft;
       
    padding-top13px;
       
    padding-left35px;
    }
    #news_bot {
       
    background-imageurl(images/news_bot.PNG);
       
    height19px;
       
    width195px;
       
    text-alignright;
       
    padding-top5px;
       
    padding-right5px;
       
    font-familyTahoma;
       
    font-size11px;
       
    font-weightbold;
       
    color#999;
    }
    .
    box_top {
       
    background-imageurl(images/box_top.PNG);
       
    height16px;
       
    width194px;
       
    text-alignleft;
       
    padding-top4px;
       
    padding-left5px;
       
    font-familyTahoma;
      
    font-size11px
       
    font-weightbold;
       
    color#66CCFF;
    }
    .
    box_mid {
       
    background-imageurl(images/box_mid.PNG);
       
    width195px;
       
    text-alignleft;
       
    padding-left5px;
       
    padding-top3px;
    }
    .
    box_bot {
       
    background-imageurl(images/box_bot.PNG);
       
    width199px;
       
    height15px;
    }
    #content_top {
       
    background-imageurl(images/content_top.PNG);
       
    height9px;
       
    width466px;
    }
    #content_mid {
       
    background-imageurl(images/content_mid.PNG);
       
    width460px;
       
    text-alignleft;
       
    padding-left3px;
       
    padding-right3px;
    }
    #content_bot {
       
    background-imageurl(images/content_bot.PNG);
       
    width466px;
       
    height8px;
    }
    -->
    </
    style>

    <!--
    Coded by Andrew of www.HabbDance.net-->

    </
    head>

    <
    body>

    <
    div id="container">

    <
    div id="banner"></div>

    <
    div id="banner_box">Lorem ipsum dolor sit ametconsectetuer adipiscing elitMorbi quam nisirutrum nonsagittis euvenenatis necturpisAliquam rutrum gravida quamIn hac habitasse platea dictumstNam suscipit. Class aptent taciti sociosqu ad litora torquent per conubia nostraper inceptos himenaeosNam mollis odio.</div>

    <
    div id="bar">Lorem ipsum dolor sit ametconsectetuer adipiscing elit....</div>

    <
    div id="container2">

    <
    div id="left">
    <
    div id="left_bg"><br /><center>

    <
    div class="box_top">Title</div>
    <
    div class="box_mid">Lorem ipsum dolor sit ametconsectetuer adipiscing elitAenean adipiscing dui a nibhPraesent rhoncus felis id tortor placerat cursus.</div>

    <
    div class="box_bot"></div><br />

    <
    div class="box_top">Title</div>
    <
    div class="box_mid">Lorem ipsum dolor sit ametconsectetuer adipiscing elitAenean adipiscing dui a nibhPraesent rhoncus felis id tortor placerat cursus.</div>
    <
    div class="box_bot"></div><br />

    <
    div class="box_top">Title</div>
    <
    div class="box_mid">Lorem ipsum dolor sit ametconsectetuer adipiscing elitAenean adipiscing dui a nibhPraesent rhoncus felis id tortor placerat cursus.</div>
    <
    div class="box_bot"></div><br />

    <
    div class="box_top">Title</div>
    <
    div class="box_mid">Lorem ipsum dolor sit ametconsectetuer adipiscing elitAenean adipiscing dui a nibhPraesent rhoncus felis id tortor placerat cursus.</div>

    <
    div class="box_bot"></div><br /></div>
    <
    div id="left_bot"></div></center></div>

    <
    div id="mid">
    <
    div id="mid_bg"><center><br />

    <
    div id="content_top"></div>

    <
    div id="content_mid">Lorem ipsum dolor sit ametconsectetuer adipiscing elitMorbi quam nisirutrum nonsagittis euvenenatis necturpisAliquam rutrum gravida quamIn hac habitasse platea dictumstNam suscipit. Class aptent taciti sociosqu ad litora torquent per conubia nostraper inceptos himenaeosNam mollis odioNunc consequatmetus non vestibulum iaculisturpis dolor condimentum semquis consequat ligula lacus quis massaCurabitur bibendumDonec vitae leo vel neque pharetra mattisAenean sagittis iaculis metusAliquam erat volutpatProin aliquet nisi eget elitProin in anteAenean vel purus quis lacus tincidunt tinciduntIn hac habitasse platea dictumstMaecenas congueQuisque suscipittellus et tincidunt mattisipsum magna fringilla leoin euismod justo eros malesuada purus. <br />Aenean semper augue at lectusInteger sed lectus vitae augue fermentum mattisPellentesque leo ligulaviverra fermentumtempus inultrices atnislQuisque portaipsum ut convallis luctusaugue augue scelerisque orcivel suscipit velit nisi quis purusUt bibendumnulla eget condimentum faucibusmetus odio faucibus erossed molestie ligula purus nec nislVestibulum dui nullamattis nonauctor veliaculis idnisiMaecenas auctor sapien quis orciAliquam erat volutpatVestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia CuraeQuisque fermentum sapien et nuncAliquam venenatisdui eget sodales posuerelacus quam ultricies ligulaa bibendum pede mauris a urna. <br />Suspendisse libero leofringilla necimperdiet euvenenatis sit ametpurusMorbi rutrum mollis justoDuis tristique mi non sapienDonec ac nunc in lorem ultrices egestasVestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia CuraeSed sit amet velit at leo pharetra blanditAenean vulputateUt sed eros nec felis feugiat egestasNam congueurna sit amet porttitor gravidanibh urna sodales eratvitae tempus risus sem mollis metusUt sit amet tortorQuisque a diam vel tortor egestas hendreritVestibulum quamInteger consequatDuis euismod enim eget purus. <br />Nam interdumpurus et eleifend ornareligula lectus cursus orciac consectetuer ante nisl ultrices leoQuisque arcuEtiam nec sapienDuis adipiscing blandit justoQuisque suscipit fringilla orciVestibulum faucibusPraesent ullamcorperarcu at commodo aliquamsem leo consectetuer purusac dictum libero urna et turpisVivamus risus urnaadipiscing eteleifend acpharetra commodoloremMorbi pulvinar auctor semSuspendisse luctus pede id quamUt metusInteger congue nisl eget diamSuspendisse ligula orciaccumsan idgravida sit ametvenenatis acmassaDuis vitae lorem.</div>

    <
    div id="content_bot"></div><br />

    <
    div id="mid_bot">Copyright &copyHabBeach.NET</div></center></div></div>

    <
    div id="right">
    <
    div id="right_bg">

    <
    center><br /><div id="news_top"></div>

    <
    div class="news_bar"><a href="#">Lorem Ipsum...</a></div><div class="news_bar"><a href="#">Lorem Ipsum...</a></div><div class="news_bar"><a href="#">Lorem Ipsum...</a></div>

    <
    div id="news_bot">MERH NEWS</div></center>

    <
    br /><div id="right_bot"></div></div><p>
    <
    a target="_blank" href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fhabbdance.net%2Fhabbeach%2Findex.html">
        <
    img style="border:0;width:88px;height:31px"
            
    src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
            
    alt="Valid CSS!" />

    </
    a></div></div></div><br />

    </
    p>
    </
    body>
    </
    html

    Thanks for your time,
    --Prentiss
    Last edited by Prentiss; 11-01-2008 at 10:07 PM.

  • #2
    Regular Coder BabyJack's Avatar
    Join Date
    Apr 2008
    Location
    Somewhere.
    Posts
    602
    Thanks
    43
    Thanked 6 Times in 6 Posts
    Code:
    #container {
       width: 909px;
       margin: auto;
    }
    Comment it out.
    Also
    Please do not PM people asking for their urgent help. Your thread will be answered in Due Course.
    Enlightenment in Coding
    Validate before Posting | Google is your friend for PC Problems | Make sure you have a doctype

  • #3
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    The problem comes from various methods of positioning. When you use absolute, it means from the window borders, so top: 186px means 186 from the top. Changing these below makes it work. Also check validate the page to find some more problems.

    http://validator.w3.org/check?verbos...%2Fhabbeach%2F

    Also, we don't mind helping but sending out PM messages to everyone to assist is not considered part of forum etiquette. The forums are here so anyone can help, not just so one or two people can. So please refrain from sending out PMs to get people to look at your thread. Otherwise, welcome!

    Code:
    #right {
       float: left;
    }
    #left {
       float: left;
    }
    #mid {
       float: left;
    }
    #mid_bg {
       background-image: url(images/mid_bg.PNG);
       width: 477px;
    }
    #left_bg {
       background-image: url(images/left_bg.PNG);
       width: 215px;
    }
    #right_bg {
       background-image: url(images/right_bg.PNG);
       width: 217px;
    }
    Last edited by gnomeontherun; 11-01-2008 at 11:33 PM.
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #4
    Regular Coder BabyJack's Avatar
    Join Date
    Apr 2008
    Location
    Somewhere.
    Posts
    602
    Thanks
    43
    Thanked 6 Times in 6 Posts
    Of course. Silly BabyJack.
    Enlightenment in Coding
    Validate before Posting | Google is your friend for PC Problems | Make sure you have a doctype


  •  

    Posting Permissions

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