help with window resize problem ... urgent !!! [Archive]

michelle0000

10-29-2006, 07:41 PM

Hi everybody!

My hair is going to fall OUT if i keep trying to fix this piece of code myself....

Anybody has any ideas ??? Get back to me ASAP Please ... THANKS A LOT !

The following is a piece of css code. There is an external style sheet attached to the design of the whole site.

Presented Problems:

1. When I resize the window to a rather small scale, the display of everything is so disordered that makes my entire layout look like a mess !!!

2. I want the right column (#navBar) works well when i resize the window, not recklessly drifting to the bottom of the page!

3. No horizontal bar appeared or what so ever until the window screen is squeezed almost OUT!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>BusinessStuff</title>

<link rel="stylesheet" href="3col_rightNav.css" type="text/css">
</head>
<body>
<div id="masthead">
<h1 id="siteName">AAA 顾问</h1>
<p> </p>
<div id="breadCrumb">
<a href="home.htm">AAA</a> | <a href="http://www.mac-allister.com/confier_mission.php?var_menu=">AAA</a> | <a href="http://www.mac-allister.com/">AAA</a> |
</div>
</div>
<div id="headlines">
<h3>AAA</h3>
<div id="advert">
<a href="http://www.mac-allister.com/engagements_candidats.php?var_menu=Candidat"><img src="../images/confidential.gif" width="107" height="66" border="0"></a>
</div>

<p>AAA...</p>

<table cellspacing="0" cellpadding="0">
<tr>
<td><img src="../images/arrow%20right.gif"></td>
<td><a href="http://www.profileseeker.com/">Discover ProfileSeeker </a></td>
</tr>
</table>
<table cellspacing="0" cellpadding="0">
<tr>
<td><img src="../images/arrow%20right.gif"></td>
<td><a href="http://www.mac-allister.com/enregistrer_profil.php">Submit your profile </a></td>
</tr>
</table>
<div id="advert">
<a href="http://www.profileseeker.com/"><img src="../images/profil_seeker.gif" width="107" height="66" border="0"></a>
</div>
</div>

<div id="content">
<div class="feature">
<h3>AAA</h3>
<p> AAA。</p>
</div>
<div class="story">
<h3> AAA</h3>
<p>AAA </p>
<p>AAA </p>
<p><a href="mailto:martial.fabre@mac-allister.com">martial.fabre@mac-allister.com </a></p>
<p>AAA </p>
<p>AAA</p>
<p><a href="mailto:jerome.remeur@mac-allister.com">jerome.remeur@mac-allister.com </a></p>
<p>AAA</p>
<p>AAA。 </p>
<p><a href="mailto:luc.verite@mac-allister.com">luc.verite@mac-allister.com </a></p>
<p> </p>
</div>

</div>

<div id="navBar">
<div id="sectionLinks">
<h3>AAA</h3>
<ul>
<li><a href="methods.htm">AAA</a></li>
<li><a href="commitments.htm">AAA</a></li>
<li><a href="teams.htm">AAA</a></li>
<li><a href="casestudies.htm">AAA</a></li>
</ul>
</div>
<div class="relatedLinks">
<h3>AAA</h3>
<ul>
<li><a href="http://www.mac-allister.com/selection_profils.php?var_menu=Entreprise">AAA</a></li>
<li><a href="http://www.mac-allister.com/confier_mission.php?var_menu=Entreprise">AAA</a></li>
</ul>
</div>
<div class="relatedLinks">
<h3>AAA</h3>
<ul>
<li><a href="http://www.mac-allister.com/offres_emploi.php?var_menu=Candidat">AAA</a></li>
<li><a href="http://www.mac-allister.com/enregistrer_profil.php?var_menu=Candidat">AAA</a></li>
</ul>
</div>
</div>


<div id="siteInfo">
<a href="http://www.mac-allister.com/mentions_legales.php">Privacy Policy</a> | <a href="http://www.mac-allister.com/confier_mission.php?var_menu=">Contact Us</a> | ©2006 AAA
</div>
<br>
</body>
</html>

The following is external style sheet used with the above htm.

@charset "gb2312";
/***********************************************/

/***********************************************/
/* HTML tag styles */
/***********************************************/

body{
font-family: "华文彩云", "华文行楷", "新宋体", Arial;
color: #FFFFFF;
line-height: 1.166;
margin: 0px;
padding: 0px;
background-color: #333333;
overflow: auto;
}

a{
color: #66FFFF;
text-decoration: none;
}

a:link{
color: #66FFFF;
text-decoration: none;
}

a:visited{
color: #66FFFF;
text-decoration: none;
}

a:hover{
color: #FFFF66;
text-decoration: underline;
}

h1{
font-family: "华文彩云";
font-size: 114%;
color: #66FFFF;
margin: 0px;
padding: 0px;
}

h3{
font-family: Arial;
font-size: 100%;
color: #66FFFF;
margin: 0px;
padding: 0px;
}

h4{
font-family: Arial;
font-size: 100%;
font-weight: normal;
color: #66FFFF;
margin: 0px;
padding: 0px;
}

h5{
font-family: Arial;
font-size: 100%;
color: #66FFFF;
margin: 0px;
padding: 0px;
}

ul{
list-style-type: square;
}

ul ul{
list-style-type: disc;
}

ul ul ul{
list-style-type: none;
}

}

/***********************************************/
/* Layout Divs */
/***********************************************/

#masthead{
padding: 10px 0px 0px 0px;
border-bottom: 1px solid #cccccc;
width: 100%;
}

#navBar{
float: right;
width: 20%;
margin: 0px;
padding: 0px;
background-color: #666666;
border-left: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}

#headlines{
float:left;
width: 20%;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
padding-right: 10px;
}

#content{
float: left;
width: 55%;
}

/***********************************************/
/* Components */
/***********************************************/

#siteName{
margin: 0;
padding: 0 0 0 10px;
}

/*************** #pageName styles **************/

#pageName{
margin: 0px;
padding: 0px 0px 0px 10px;
}

/************* #breadCrumb styles *************/

#breadCrumb{
font-size: small;
padding: 2px 0px 0 10px;
font-family: "新宋体";
color: #66FFFF;
background-color: #666666;
border-top: 1px solid #cccccc;

}

/************** .feature styles ***************/

.feature{
padding: 0px 0px 10px 10px;
font-size: 80%;
font-family: Arial;

}

.feature h3{
padding: 30px 0px 5px 0px;
text-align: center;
font-family: "华文行楷";
font-size: 114%;
}

.feature img{
float: left;
padding: 10px 10px 0px 0px;
}

/************** .story styles *****************/

.story{
clear: both;
padding: 10px 0px 0px 10px;
font-size: 80%;
font-family: Arial;
}

.story p{
padding: 0px 0px 10px 0px;
}

/************* #siteInfo styles ***************/

#siteInfo{
clear: both;
border: 1px solid #cccccc;
font-size: 75%;
color: #cccccc;
padding: 10px 10px 10px 10px;
font-family: Arial;
}

/*********** #navBar link styles ***********/

#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #EEE;}

/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}

/*********** #sectionLinks styles ***********/

#sectionLinks{
position: relative;
margin: 0px;
padding: 0px;
border-bottom: 1px solid #cccccc;
font-size: 80%;
font-family: "新宋体";
}

#sectionLinks h3{
padding: 10px 0px 2px 10px;
}

#sectionLinks a {
display: block;
border-top: 1px solid #cccccc;
padding: 2px 0px 2px 10px;
}

#sectionLinks a:hover{
background-color: #dddddd;
}

/*********** .relatedLinks styles ***********/

.relatedLinks{
margin: 0px;
padding: 0px 0px 10px 10px;
font-size: 80%;
font-family: "新宋体";
}

.relatedLinks h3{
padding: 10px 0px 2px 0px;
}

.relatedLinks a:link,
.relatedLinks a:visited {
display: block;
}

/************** #advert styles **************/

#advert{
padding: 30px 0px 10px;
}

#advert img{
display: block;
border: thin #66FFFF;
}

/************** #headlines styles **************/

#headlines{
margin: 0px;
padding: 10px 0px 20px 10px;
font-size: 80%;
font-family: Arial;
color: #66FFFF;
}

#headlines p{
padding: 5px 0px 5px 0px;
}

/************** #wrapper styles **************/

#wrapper {background: #333333;}
.altwrapper {width:728px;}
.mainwrapper {width:980px;}