Web Analytics Made Easy -
StatCounter No current title. - CodingForum

Announcement

Collapse
No announcement yet.

No current title.

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • No current title.

    Hello.

    I have recently designed a website in photoshop (Figure 1.0). I have transferred it all to HTML/CSS, all is good in that department (Figure 1.1). Ideally it was designed for my screen width (1920px). When a friend of mine views it on a different sized monitor (width 1440px), this is what he see's (Figure 1.2). I was wondering if it was possible to disregard the image banner and allow the content to still be central, or is the only way to reduce the size of the graphics, so if the browser size is reduced it pushes the image towards the left whilst keeping the content/footer/logo central.


    Figure 1.0
    http://screensnapr.com/e/eUkpXH.png

    Figure 1.1
    http://screensnapr.com/e/TQK4aP.png

    Figure 1.2
    http://screensnapr.com/e/YAzGAi.png

  • #2
    Yes it's possible. Can you post the code? You would need to separate the header portion from the content, meaning put them in different divs or make sure they are not in the same container. Without seeing the code, I can't give you more specific instructions.
    WordPress Designer and theme developer. KlongDesigns - helping bloggers and non-technical folks claim their space on the internet.

    Comment


    • #3
      Yes please post code or better would be a link to your site.
      Teed

      Comment


      • #4
        No worries.

        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">
        <head>
        <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
        <title>Vortex Servers</title>
        <meta name="author" content="*******" />
        <meta name="description" content="*******." />
        <meta name="keywords" content="**********" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <style type="text/css">
        body {
        overflow-x: hidden;
        }
        </style> 
        
        </head>
        <body>
        <div id="top">
         <div id="page">
          <div id="spanimage" ></div>
          <div id="leftpanel" ></div>
          <div id="rightpanel" ></div>
          <div id="logobg"></div>
          <div id="livehelp" class="text_link">
          <p>livehelp</p>
        
          </div>
          <div id="contentbackground"></div>
          <div id="contentbackground"></div>
          <div id="innercontentbg"></div>
          <div id="whyvortexservers" ></div>
          <div id="instantactivationyourtime" class="text_link">
         <p><span  style="line-height:22px; font-size:18px;">I</span><span  style="font-size:18px; line-height:22px;">nstant Activation</span></p>
         <p style="font-size:12px;">Your time is important to us, when purchasing a server, once the first payment is received</p>
         <p style="font-size:12px;">your server will be setup automatically. </p>
         <br />
         <p  style="font-size:18px; line-height:22px;">Live Support</p>
         <p style="font-size:12px;">If you’re having trouble with your server, or looking to purchase a new server, contact our live support.</p>
         <br />
         <p  style="font-size:18px; line-height:22px;">Superior Speeds</p>
         <p style="font-size:12px;">All of our servers have a 1 gigabyte uplink port, to ensure that you will always have </p>
         <p style="font-size:12px;">steady connection.</p>
         <br />
         <p  style="font-size:18px; line-height:22px;">Custom Hostname</p>
         <p style="font-size:12px;">Personalize your server with a custom hostname, such as ‘mc.vxsvrs.com’.</p>
         <br />
         <br />
         <!-- -->
          </div>
          <div id="add" ></div>
          <div id="line1" ></div>
          <div id="comment" ></div>
          <div id="line2" ></div>
          <div id="linechart" ></div>
          <div id="line3" ></div>
          <div id="profile" ></div>
          <div id="line4" ></div>
          <div id="viewminecraftplans" class="text_link">
          <p>view minecraft plans</p>
          </div>
          <div id="linksminecrafthostingabou" class="text_link">
          <p  style="line-height:19px; font-size:16px;">Links	</p>
         <br />
         <p>-  Minecraft Hosting</p>
         <p>-  About Us</p>
         <p>-  Terms of Service</p>
         <p>-  Privacy Policy</p>
         
          </div>
          <div id="clientsclientareagamepane" class="text_link">
          <p  style="line-height:19px; font-size:16px;">Clients	</p>
         <br />
         <p>-  Client Area</p>
         <p>-  Game Panel</p>
         <p>-  Support Tickets</p>
         <p>-  Live Support</p>
         
          </div>
          <div id="socialnetworkstwitterrssv" class="text_link">
          <p  style="line-height:19px; font-size:16px;">Social Networks</p>
         <br />
         <p>-  Twitter</p>
         <p>-  RSS </p>
         <p>-  Vote for us</p>
         <br />
         <br />
         <p>			Copyright (c) Vortex Servers</p>
         <br />
          </div>
          <div id="paymentgatewaysonebipmone" class="text_link">  
          <p  style="line-height:19px; font-size:16px;">Payment Gateways</p>
         <br />
         <p>-  OneBip</p>
         <p>-  Moneybookers</p>
         <p>-  AlertPay</p>
         <p>-  PayPal</p>
          </div>
         </div>
        <div id="footer"><div id="innerfooter">
        </div></div>
        </div>
        </body>
        </html>
        Do you need the CSS aswell?

        Code:
        #livehelp li,
        #socialnetworkstwitterrssv p,
        #paymentgatewaysonebipmone p,
        #linksminecrafthostingabou li,
        #instantactivationyourtime p,
        #paymentgatewaysonebipmone li,
        #clientsclientareagamepane p,
        #socialnetworkstwitterrssv li,
        #instantactivationyourtime li,
        #linksminecrafthostingabou p,
        #viewminecraftplans p,
        #viewminecraftplans li,
        #clientsclientareagamepane li,
        #livehelp p  {
           text-align: left;
           text-indent: 0px;
           padding-left: 0px;
           padding-right: 0px;
           padding-top: 0px;
           padding-bottom: 0px;
           color: #FFFFFF;
           text-decoration: none;
           font-variant: normal;
           letter-spacing: 0px;
           font-style: normal;
           font-weight: normal;
           font-family: Verdana, sans-serif;
           margin: 0px;
        }
        
        #linksminecrafthostingabou p a,
        #livehelp p a,
        #clientsclientareagamepane p a,
        #socialnetworkstwitterrssv p a,
        #instantactivationyourtime p a,
        #viewminecraftplans p a,
        #paymentgatewaysonebipmone p a  {
           display: inline;
        }
        
        #linksminecrafthostingabou,
        #clientsclientareagamepane  {
           margin-top: 0px;
           margin-left: 0px;
           width: 161px;
           z-index: 6;
           top: 810px;
           position: absolute;
        }
        
        #linksminecrafthostingabou li  {
           font-size: 14px;
           line-height: 17px;
        }
        
        #paymentgatewaysonebipmone li  {
           font-size: 14px;
           line-height: 17px;
        }
        
        #socialnetworkstwitterrssv li  {
           font-size: 14px;
           line-height: 17px;
        }
        
        #instantactivationyourtime li  {
           font-size: 14px;
           line-height: 17px;
        }
        
        #clientsclientareagamepane li  {
           font-size: 14px;
           line-height: 17px;
        }
        
        #instantactivationyourtime p  {
           font-size: 14px;
           line-height: 17px;
        }
        
        #socialnetworkstwitterrssv p  {
           font-size: 14px;
           line-height: 17px;
        }
        
        #paymentgatewaysonebipmone p  {
           font-size: 14px;
           line-height: 17px;
        }
        
        #linksminecrafthostingabou p  {
           font-size: 14px;
           line-height: 17px;
        }
        
        #clientsclientareagamepane p  {
           font-size: 14px;
           line-height: 17px;
        }
        
        #clientsclientareagamepane  {
           left: 789px;
        }
        
        #instantactivationyourtime  {
           margin-top: 0px;
           margin-left: 0px;
           width: 664px;
           z-index: 7;
           top: 466px;
           left: 683px;
           position: absolute;
        }
        
        #socialnetworkstwitterrssv  {
           margin-top: 0px;
           margin-left: 0px;
           width: 314px;
           z-index: 7;
           top: 810px;
           left: 1157px;
           position: absolute;
        }
        
        #linksminecrafthostingabou  {
           left: 627px;
        }
        
        #paymentgatewaysonebipmone  {
           margin-top: 0px;
           margin-left: 0px;
           width: 205px;
           z-index: 6;
           top: 811px;
           left: 952px;
           position: absolute;
        }
        
        #viewminecraftplans li  {
           font-size: 18px;
           line-height: 22px;
           text-align: center;
        }
        
        #viewminecraftplans p  {
           font-size: 18px;
           line-height: 22px;
           text-align: center;
        }
        
        #viewminecraftplans  {
           margin-top: 0px;
           margin-left: 0px;
           width: 795px;
           z-index: 7;
           top: 755px;
           left: 565px;
           position: absolute;
        }
        
        #contentbackground  {
           background-repeat: repeat-x;
           background-image: url(images/contentbackground.png);
           margin-top: 0px;
           margin-left: 0px;
           height: 555px;
           width: 1920px;
           z-index: 5;
           top: 415px;
           left: 0px;
           position: absolute;
        }
        
        #profile,
        #comment  {
           background-repeat: no-repeat;
           margin-top: 0px;
           margin-left: 0px;
           height: 48px;
           width: 46px;
           z-index: 7;
           left: 623px;
           position: absolute;
        }
        
        #whyvortexservers  {
           background-repeat: no-repeat;
           background-image: url(images/whyvortexservers.png);
           margin-top: 0px;
           margin-left: 0px;
           height: 16px;
           width: 168px;
           z-index: 7;
           top: 440px;
           left: 583px;
           position: absolute;
        }
        
        #innercontentbg  {
           background-repeat: no-repeat;
           background-image: url(images/innercontentbg.png);
           margin-top: 0px;
           margin-left: 0px;
           height: 351px;
           width: 795px;
           z-index: 6;
           top: 434px;
           left: 565px;
           position: absolute;
        }
        
        #line4,
        #line1  {
           background-repeat: no-repeat;
           background-image: url(images/line4.png);
           margin-top: 0px;
           margin-left: 0px;
           height: 3px;
           width: 715px;
           left: 617px;
           position: absolute;
        }
        
        #livehelp li  {
           font-size: 30px;
           line-height: 36px;
        }
        
        #innerfooter  {
           background-color: transparent;
           background-image: none;
           height: 0px;
           margin-bottom: 0px;
           margin-top: 0px;
           margin-right: auto;
           margin-left: auto;
           position: relative;
           width: 1920px;
        }
        
        #ridefooter  {
           font-size: 0px;
        }
        
        #livehelp p  {
           font-size: 30px;
           line-height: 36px;
        }
        
        #rightpanel  {
           background-repeat: no-repeat;
           background-image: url(images/rightpanel.png);
           margin-top: 0px;
           margin-left: 0px;
           height: 416px;
           width: 138px;
           z-index: 3;
           top: 0px;
           left: 1782px;
           position: absolute;
        }
        
        #linechart  {
           background-repeat: no-repeat;
           background-image: url(images/linechart.png);
           margin-top: 0px;
           margin-left: 0px;
           height: 44px;
           width: 39px;
           z-index: 7;
           top: 613px;
           left: 627px;
           position: absolute;
        }
        
        #leftpanel  {
           background-repeat: no-repeat;
           background-image: url(images/leftpanel.png);
           margin-top: 0px;
           margin-left: 0px;
           height: 416px;
           width: 63px;
           z-index: 3;
           top: 0px;
           left: 0px;
           position: absolute;
        }
        
        #livehelp  {
           margin-top: 0px;
           margin-left: 0px;
           width: 124px;
           z-index: 6;
           top: 4px;
           left: 1276px;
           position: absolute;
        }
        
        .footer,
        #ridefooter  {
           display: block;
           clear: left;
           position: relative;
           width: 100%;
        }
        
        #page_bkg  {
           z-index: 1;
           display: block;
           top: 0px;
           left: 0px;
           height: 970px;
           width: 1920px;
           position: absolute;
        }
        
        #profile  {
           top: 686px;
           background-image: url(images/profile.png);
        }
        
        #comment  {
           top: 543px;
           background-image: url(images/comment.png);
        }
        
        #spanimage  {
           background-repeat: no-repeat;
           background-image: url(images/i75619.png);
           margin-top: 0px;
           margin-left: 0px;
           height: 602px;
           width: 1724px;
           z-index: 4;
           top: 0px;
           left: 61px;
           position: absolute;
        }
        
        #logobg  {
           background-repeat: no-repeat;
           background-image: url(images/logobg.png);
           margin-top: 0px;
           margin-left: 0px;
           height: 60px;
           width: 1919px;
           z-index: 5;
           top: 0px;
           left: 0px;
           position: absolute;
        }
        
        #footer  {
           width: 100%;
           display: block;
           padding: 0px;
           margin: 0px;
           bottom: 0px;
           position: absolute;
           height: 0px;
           background-color: transparent;
           background-image: none;
        }
        
        #line1  {
           top: 527px;
           z-index: 8;
        }
        
        #line2  {
           background-repeat: no-repeat;
           background-image: url(images/line2.png);
           margin-top: 0px;
           margin-left: 0px;
           height: 1px;
           width: 715px;
           z-index: 8;
           top: 598px;
           left: 617px;
           position: absolute;
        }
        
        #line4  {
           top: 747px;
           z-index: 7;
        }
        
        #line3  {
           background-repeat: no-repeat;
           background-image: url(images/line3.png);
           margin-top: 0px;
           margin-left: 0px;
           height: 2px;
           width: 715px;
           z-index: 8;
           top: 671px;
           left: 617px;
           position: absolute;
        }
        
        #page  {
           margin-bottom: 0px;
           margin-top: 0px;
           margin-right: auto;
           margin-left: auto;
           position: relative;
           width: 1920px;
           height: 970px;
        }
        
        #add  {
           background-repeat: no-repeat;
           background-image: url(images/add.png);
           margin-top: 0px;
           margin-left: 0px;
           height: 48px;
           width: 41px;
           z-index: 7;
           top: 471px;
           left: 625px;
           position: absolute;
        }
        
        #top  {
           width: 100%;
           min-height: 100%;
        }
        
        body, p,
        h4,
        h3,
        h2,
        h6,
        h1,
        h5  {
           font-family: Verdana, sans-serif;
        }
        
        body  {
           -webkit-text-size-adjust: none;
           height: 100%;
           padding-bottom: 0px;
           padding-top: 0px;
           padding-right: 0px;
           padding-left: 0px;
           margin-bottom: 0px;
           margin-top: 0px;
           margin-right: 0px;
           margin-left: 0px;
           background-image: none;
           background-color: #FFFFFF;
        }
        Here it is anyway.
        Last edited by canu; Aug 25, 2011, 10:35 AM.

        Comment


        • #5
          http://aaabc12.comlu.com/ - Hosted version.

          Comment


          • #6
            set background for body as following

            Code:
            background:url(images/imagename.gif) center;
            and create a fixed width centered container for your content
            Last edited by vikram1vicky; Aug 25, 2011, 11:38 AM.

            Comment


            • #7
              From the hosted site, it looks like the problem is that you are absolutely positioning everything. For example, your innercontentbg div is absolutely positioned left:565px, which means that no matter how big the resoution is, that piece will have 565 px of space to the left. The problem is that on your monitor, it's centered, but ANY OTHER monitor resolution it will not be.

              Since that div is a box, it would be best if you put all of the other content that is in the box actually inside that div.

              there is actually quite a few things that need work on the markup of your site. You can work with what you have, but to make it truly flexible across multiple browsers, I would recommend taking it out of absolute positioning, groping your html into three main divs, #header, #content and #footer.

              Then use relative positioning to help shift pieces around.
              WordPress Designer and theme developer. KlongDesigns - helping bloggers and non-technical folks claim their space on the internet.

              Comment

              Working...
              X