Announcement

**resdog** · Aug 25, 2011, 09:16 AM

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.

**teedoff** · Aug 25, 2011, 09:23 AM

Yes please post code or better would be a link to your site.

**canu** · Aug 25, 2011, 09:24 AM

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.

**canu** · Aug 25, 2011, 09:39 AM

http://aaabc12.comlu.com/ - Hosted version.

**vikram1vicky** · Aug 25, 2011, 10:27 AM

set background for body as following

Code:

background:url(images/imagename.gif) center;

and create a fixed width centered container for your content

**resdog** · Aug 25, 2011, 11:34 AM

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.

Announcement

No current title.

No current title.

Comment

Comment

Comment

Comment

Comment

Comment