12 replies [Last post]
level5
Offline
Enthusiast
Tucson, AZ
Last seen: 13 years 23 weeks ago
Tucson, AZ
Timezone: GMT-7
Joined: 2007-04-17
Posts: 102
Points: 0

Hello everyone!!
Im so puzzled :jawdrop: that when i testing my client's website. when i shrink my broswer to 600 pixel width.. the navigator got messed up even footer got messed up. and hosting packages. so trying to figure out a way to keep everything stay in postion when navigator browser can be smaller to bigger... bigger looks fine but not during smaller width type..

Site sneak preview http://tinyurl.com/9wuzj4/

html

<!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" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="assets/js/dropmenu.js" language="javascript" type="text/javascript"></script>
<link href="assets/css/gobal.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
  <div id="header">
    <div class="logo" >&nbsp;</div>
    <div id="navlist" >
      <ul >
        <li><a href="#" class="webhosting" onmouseover="dropdownmenu(this, event, menu1, '150px')" onmouseout="delayhidemenu()" >Web Hosting Packages</a> </li>
        <li><a href="#" class="services"  onmouseover="dropdownmenu(this, event, menu2, '150px')" onmouseout="delayhidemenu()" >What we offer?</a></li>
        <li><a href="#" class="company" onmouseover="dropdownmenu(this, event, menu3, '150px')" onmouseout="delayhidemenu()" >About Our Company</a></li>
        <li><a href="#" class="support" onmouseover="dropdownmenu(this, event, menu4, '150px')" onmouseout="delayhidemenu()" >Support</a></li>
        <li><a href="#" class="clientlogin">Client login</a></li>
      </ul>
    </div>
  </div>
  <div id="splash">
    <div class="home"></div>
  </div>
  <div class="featured">&nbsp;</div>
  <div class="headline">
    <p>Latest News: We have just uploaded our brand new webdesign, which we have been working on for months now...more</p>
  </div>
  <div id="content">
    <ul id="packages" class="fix">
      <li class="shared"><span></span></li>
      <li class="reseller"></li>
      <li class="dedicated"></li>
    </ul>
  </div>
  <div class="clearfix">&nbsp;</div>
  <div id="footer">
      <div class="sitemap">
        <ul>
          <li><strong>Web Hosting</strong>
            <ul>
              <li><a href="<?=SITE_URL?>packages/shared.php">Shared</a></li>
              <li><a href="<?=SITE_URL?>packages/reseller.php">Reseller</a></li>
              <li><a href="<?=SITE_URL?>packages/dedicated.php">Dedicated</a></li>
            </ul>
          </li>
        </ul>
        <ul>
          <li><strong>Services</strong>
            <ul>
              <li><a href="<?=SITE_URL?>services/affiliates.php">Affiliates Program</a></li>
              <li><a href="<?=SITE_URL?>services/faq.php">FAQ</a></li>
              <li><a href="<?=SITE_URL?>services/boost_traffic.php">Boost Traffics</a></li>
              <li><a href="<?=SITE_URL?>services/target_traffiic.php"> Targeted boost traffic</a></li>
            </ul>
          </li>
        </ul>
        <ul>
          <li><strong>Company</strong>
            <ul>
              <li><a href="<?=SITE_URL?>company/about.php">About us</a></li>
              <li><a href="<?=SITE_URL?>company/terms.php">Terms of use</a></li>
              <li><a href="<?=SITE_URL?>company/privacy.php">Our Privacy Policy</a></li>
              <li><a href="<?=SITE_URL?>company/networks.php">Our Networks</a></li>
              <li><a href="<?=SITE_URL?>company/contact.php">Contact us</a></li>
            </ul>
          </li>
        </ul>
        <ul>
          <li><strong>Support</strong>
            <ul>
              <li><a href="<?=SITE_URL?>support/login.php">Client Login</a></li>
              <li><a href="<?=SITE_URL?>support/helpdesk">Help desk</a></li>
              <li><a href="<?=SITE_URL?>support/status.php">Server Status</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="supportfooter">
        <div id="livesupport"> <a class="livesupport" href="#">&nbsp;</a> </div>
        <div class="copyright">&copy; 2007 -2009 Bluewavehost .inc . <a href="legal.php">Legal</a> : <a href="privacy.php">Privacy</a></div>
      </div>
  </div>
</div>
</body>
</html>

CSS

@charset "UTF-8";
/* CSS Document */
 
body { margin: 0px 0px 40px; padding: 0px; background: #c8c8c8 url(../images/bkg_top.jpg) repeat-x; font-family: Arial, Helvetica, sans-serif; }
.clearfix { float: none; height: 0px; margin: 0px; padding: 0px; width: 0px; }
#wrapper { }
#header { width: 100%; height: 48px; }
#header .logo { background: transparent url(../images/logo.jpg) no-repeat left top; height: 48px; width: 143px; float: left; display: block; text-indent: -9000px; margin-left: 40px; }
#header .logo a { height: 48px; width: 143px; display: block; }
#navlist { width: 450px; float: right; padding-right: 25px; }
#navlist ul { margin: 0px; padding: 0px; }
#navlist li { display:inline; }
#navlist li.last { border:none; }
#navlist { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:0.7em; font-weight:bold; margin-right: 25px; }
a.webhosting { display: block; width: 103px; height: 46px; text-decoration: none; background: transparent url(../images/nav_w.jpg) repeat left top; float: left; color: #CCC; text-indent: -9000px; }
a.webhosting:hover { background-position:0 -49px; }
a.services { display: block; width: 84px; height: 46px; text-decoration: none; background: transparent url(../images/nav_se.jpg) no-repeat left top; float: left; text-indent: -9000px; }
a.services:hover { background-position:0 -49px; }
a.company { display: block; width: 80px; height: 46px; text-decoration: none; background: transparent url(../images/nav_c.jpg) no-repeat left top; float: left; text-indent: -9000px; }
a.company:hover { background-position:0 -49px; }
a.support { display: block; width: 80px; height: 46px; text-decoration: none; background: transparent url(../images/nav_s.jpg) no-repeat left top; float: left; text-indent: -9000px; }
a.support:hover { background-position:0 -49px; }
a.clientlogin { display: block; width: 103px; height: 46px; text-decoration: none; background: transparent url(../images/nav_cl.jpg) no-repeat left top; float: left; text-indent: -9000px; }
a.clientlogin:hover { background-position:0 -49px; }
 
#dropmenudiv { position:absolute; font:normal 11px Arial, Helvetica, sans-serif; z-index:150; width: auto; padding: 0px; background-color: #000; margin: 1px 0px 0px 15px; }
 
#dropmenudiv a { width: auto; display: block; text-indent: 5px; text-decoration: none; color:#716F70; padding-top: 4px; padding-bottom: 4px; border-top: 1px solid #232323; margin: 0px; font-weight: bold; }
 
#dropmenudiv a:visited {
  width: auto;
  display: block;
  text-indent: 5px;
  text-decoration: none;
}
 
#dropmenudiv a:hover { /*hover background color*/ width: auto; color: #769bbd; background-color: #000000; padding-top: 4px; padding-left: 2px; padding-right: 2px; padding-bottom: 4px; }
#splash .home { background: #000 url(../images/displayer/display.jpg) no-repeat center top; height: 274px; }
#splash .subpage { background: #000 url(../images/display_sub.jpg) no-repeat center center; height: 80px; border-bottom: 5px solid #89A9C5; }
.featured { background: #EBEBEB url(../images/headline.jpg) no-repeat center top; height: 68px; width: 100%; border-top: 5px solid #769abb; }
.headline { background: #3D3D3D; width: 100%; font-size: 11px; text-align: center; vertical-align: middle; padding-top: 7px; padding-bottom: 7px; }
.headline p { padding: 0px; margin: 0px; color: #CACACA; background: transparent; }
#content { background: #d8d7d7; width: 100%; float: left; }
.contents { padding-right: 12px; padding-left: 12px; }
.contents h1 { font-size: 16px; margin: 0px; color: #6886A2; }
.contents h2 { font-size: 14px; color: #133759; margin: 9px 0px; }
.type1 p { color: #333; font-size: 12px; margin: 9px 15px; }
.wrap  { background: #EEE url(../images/top_rc.jpg) no-repeat left top; width: 782px; margin: 20px auto; padding-top: 12px; }
.wrap_end { background: #FFF url(../images/bottom_rc.jpg) no-repeat left bottom; width: 782px; height: 12px; }
#content .fix { margin-right: auto; margin-left: auto; width: 889px; }
#packages { width: 700px; }
#content ul { list-style: url(none) none; margin: 0px; padding: 0px; }
#content ul li { display: inline; margin: 0px; padding: 0px; float: left; }
.shared { background: transparent url(../images/packages/shared.jpg) no-repeat left top; height: 159px; width: 279px; }
.reseller { background: transparent url(../images/packages/reseller.jpg) no-repeat left top; height: 159px; width: 308px; }
.dedicated { background: transparent url(../images/packages/dedicated.jpg) no-repeat left top; height: 159px; width: 302px; }
#footer { width:970px; margin-right: auto; margin-left: auto; }
#footerdiv { position: relative; z-index: 0; }
.sitemap { padding:0px 0; font-size:12px; line-height:1.1em; }
.sitemap ul { float:left; margin-right:0px; list-style: url(none) none; margin-bottom: 50px; }
.sitemap ul ul { float:none; margin:0; padding: 0px 0px 0px 5px; }
.sitemap li strong { display:block; margin-bottom:.5em; color: #999; font-size: 12px; }
.sitemap li li { font-size:11px; }
.sitemap li a, .sitemap li a:visited, .sitemap li a:link { color:#3D3D3D; text-decoration:none; background: transparent; }
.sitemap li li a, .sitemap li li a:visited, .sitemap li li a:link { color:#848585; }
.sitemap li a:hover, .sitemap li li a:hover, .sitemap li a:focus, .sitemap li li a:focus { text-decoration:none; color:#4F4F4F; }
.supportfooter { width: 300px; float: right; margin-top: 15px; }
a.livesupport { display: block; width: 288px; height: 65px; background: transparent url(../images/live_online.gif) no-repeat 0 0; text-decoration: none; }
a:hover.livesupport { background-position: -288px 0; }
.copyright { color: #9F9999; font-size: 10px; margin-top: 10px; float: right; }
.copyright a { color: #858585; font-size: 11px; }
.copyright a:hover { color: #666; }

Regards,
Nick :jawdrop:

----------------------------------------
Regards,
Nick

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 4 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

you should investigate

you should investigate min-width properties.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

level5
Offline
Enthusiast
Tucson, AZ
Last seen: 13 years 23 weeks ago
Tucson, AZ
Timezone: GMT-7
Joined: 2007-04-17
Posts: 102
Points: 0

um

I did check it making sure.. i must be blind or missing it I still couldnt figure out Sad

----------------------------------------
Regards,
Nick

level5
Offline
Enthusiast
Tucson, AZ
Last seen: 13 years 23 weeks ago
Tucson, AZ
Timezone: GMT-7
Joined: 2007-04-17
Posts: 102
Points: 0

Anybody help? nobody comment

Anybody help? nobody comment or so Sad

----------------------------------------
Regards,
Nick

rejamesuk
Offline
Regular
uk
Last seen: 13 years 23 weeks ago
uk
Joined: 2009-01-10
Posts: 38
Points: 0

#wrapper

#wrapper {
min-width:1000px;
}

level5
Offline
Enthusiast
Tucson, AZ
Last seen: 13 years 23 weeks ago
Tucson, AZ
Timezone: GMT-7
Joined: 2007-04-17
Posts: 102
Points: 0

Wow its working.. thanks

Wow its working.. thanks dude i appericate it. it worked!! hoorah! thanks rejamesuk

----------------------------------------
Regards,
Nick

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 4 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Deuce wrote:you should

Deuce wrote:

you should investigate min-width properties.

That's what I said! I just didn't want to hand out the answer! ;-P

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Triumph (not verified)
Anonymous's picture
Guru

Deuce wrote:Deuce wrote:you

Deuce wrote:
Deuce wrote:

you should investigate min-width properties.

That's what I said! I just didn't want to hand out the answer! ;-P

You don't help anyone by spoon feeding. Mother birds teach their young to fly by tossing them out of the nest. Smile

level5
Offline
Enthusiast
Tucson, AZ
Last seen: 13 years 23 weeks ago
Tucson, AZ
Timezone: GMT-7
Joined: 2007-04-17
Posts: 102
Points: 0

yea guys i couldnt figure

yea guys i couldnt figure out.. i used dreamweaver.. looks like i gotta do things more maunally.. im not pro css yet guys.. Smile thank everyone on this page to try give me hint to learn and helpful..

Thanks

----------------------------------------
Regards,
Nick

rejamesuk
Offline
Regular
uk
Last seen: 13 years 23 weeks ago
uk
Joined: 2009-01-10
Posts: 38
Points: 0

Triumph wrote:Deuce

Triumph wrote:
Deuce wrote:
Deuce wrote:

you should investigate min-width properties.

That's what I said! I just didn't want to hand out the answer! ;-P

You don't help anyone by spoon feeding. Mother birds teach their young to fly by tossing them out of the nest. Smile

:bigoops: sorry i'm new!!! didn't realise i had to cryptically help. next time i'll suggest w3c! ha

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 4 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

It's not about being

It's not about being cryptic, but if everything was handed to you your entire life you would never know how to go get it yourself.

We try to point in the right direction and then let the users show they are taking an initiative to learn.
We don't mind holding hands the entire way as long as the user is showing they are trying.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Triumph (not verified)
Anonymous's picture
Guru

Deuce wrote:It's not about

Deuce wrote:

It's not about being cryptic, but if everything was handed to you your entire life you would never know how to go get it yourself.

We try to point in the right direction and then let the users show they are taking an initiative to learn.
We don't mind holding hands the entire way as long as the user is showing they are trying.

Absolutely. Smile

It also helps to weed out the bad seeds, the users and the trolls. Anyone that flies off the handle when you ask them something simple, such as to show you valid code, simply does not belong here.

level5
Offline
Enthusiast
Tucson, AZ
Last seen: 13 years 23 weeks ago
Tucson, AZ
Timezone: GMT-7
Joined: 2007-04-17
Posts: 102
Points: 0

I hears ya out guys.

I hears ya out guys.

----------------------------------------
Regards,
Nick