iv4o
02-22-2010, 02:13 PM
Hi,
Im trying to add Text in Transparent Box (http://www.w3schools.com/Css/css_image_transparency.asp) but i have some problem with IE7 position if the browser is not in maximize window. My div.transbox and div.transbox p dont resize with the window (: this make the box and text appear outline the body in unmaximize window in IE. Any suggestions what to do ?
url:// http://deli.webuda.com
index.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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>DF-consulting</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<div id="maincontainer">
<div id="contentwrapper">
<div class="header_top"><div class="header_intro">"DF Consulting, amenagement bureaux, spaceplanning, formation autocad, projet mobilite, i.transferts"<p></p>"La priorité de DF Consulting est de ramener les questions liées à la mobilité des salariés au même plan que toutes les actions qui visent à améliorer la productivité dans l'Entreprise"</div><h1> Les spécialistes de l'espace</h1><div class="innertube"></div></div>
<div id="menu_nav">
<a href="#">Accueil</a>
<a href="#">Les projets de mobilité</a>
<a href="#">Le space planning</a>
<a href="#">L'outil i.Transferts®</a>
<a href="#">Former et Conseiller</a>
<a href="#">Réalisations</a>
<a href="#">Nous contacter</a>
</div>
<div id="contentcolumn">
<div class="innertube"><h1 align="right">Présentation</h1></div>
<h3> La priorité de DF Consulting</h3>
<div class="background">
<div class="transbox">
<p>Dans une période où l'Entreprise vit de profondes et rapides mutations, la mobilité des salariés contribue à la réussite des changements stratégiques engagés. La priorité de DF Consulting est de ramener les questions liées à la mobilité des salariés au même plan que toutes les actions qui visent à améliorer la productivité dans l'Entreprise.</p>
</div>
</div>
<h3> Ses services</h3>
<div class="background">
<div class="transbox">
<p><font color="#f88205">Les projets de mobilité :</font> Adapter des méthodes spécifiques dans le cadre :</p>
<ul>
<li> de mobilité interne en gestion courante : 1 à 10 salariés</li>
<li> de mobilité en mode projet : 10 à 2 000 salariés : réorganisation d’entreprise , fusion interentreprises</li>
</ul>
<p><font color="#f88205">Le space planning :</font> Proposer des emménagements d’espaces dans le cadre : </p>
<ul type="circle">
<li> de locaux occupés à réorganiser</li>
<li> de locaux vides : en rénovation ou en construction</li>
</ul>
<p><font color="#f88205"> L'outil i.Transferts® :</font> Collecter, sélectionner et gérer tous les types d’informations liées : </p>
<ul type="disc">
<li> au projet de mobilité</li>
<li> a la gestion logistique des salariés</li>
</ul>
<p><font color="#f88205">Former et Conseiller :</font> Adapter des programmes de formation Autocad en fonction :</p>
<ul type="upper-roman">
<li> des objectifs souhaités</li>
<li> du niveau des stagiaires</li>
</ul>
</div>
</div>
<h3> Ses Clients</h3>
<div class="background">
<div class="transbox">
<ul type="lower-alpha">
<li> Les dirigeants des entreprises PME</li>
<li> Les responsables des services de logistique et d'informatique</li>
<li> Les responsables des services immobiliers des entreprises</li>
<li> Les responsables d'Asset Management: valorisation des espaces à la vente ou à la location</li>
</ul>
<br />
</div>
</div>
</div>
</div>
<div id="footer"><a href="http://www.df-consulting.fr">© 2010 DF-consulting.fr</a></div>
</div>
</body>
</html>
* {
font-family: Verdana, sans-serif;
font-size: 13px;
}
body{
margin:0 auto;
width: 1200px;
background-color: #eee4c6;
line-height: 1.5em;
border-top: 0;
border: 1px solid #96907d;
border-bottom: 0;
}
h1 {color:#c8332a;font-size:150%;}
h3 {color:#c8332a;}
#maincontainer{
overflow: auto;
width: 0 auto; /*Width of main container*/
background-color: #ffffff;
margin: 0 auto; /*Center container on page*/
}
.header_top{
position:relative;
font-style: italic;
font: bold 13px Verdana;
color: #ffffff;
background: #F62217;
padding: 10px;
height: 150px; /*Height of top section*/
}
.header_top h1{
font-style: italic;
font: 20px;
color: #ffffff;
padding-top: 100px;
width: 400px;
font-size: 20px;
text-align: 50%;
}
.header_intro{
font-style: italic;
font: bold 13px;
width: 500px;
height: 120px;
padding: 20px 10px;
color: #ffffff;
float: right;
}
#contentwrapper{
width: 100%;
}
#contentcolumn{
padding: 50px 20px 0;
height: 940px;
border-top: solid 3px #fea21a;
border-bottom: solid 3px #fea21a;
margin-left: 230px; /*Set left margin to LeftColumnWidth*/
background-image: url('images/fdp.gif');
background-repeat:repeat-none;
}
#menu_nav{
float:left;
width: 230px;
height: 890px;
padding-top: 100px;
text-decoration: none;
background: #fea21a;
border-top: solid 3px #ffffff;
border-bottom: solid 3px #ffffff;
}
#menu_nav a{
font: bold 13px Verdana;
display: block;
padding: 10px;
padding-left: 20px;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #f62217;
}
#menu_nav a:hover{
color: #423f37;
text-transform:uppercase;
text-decoration: underline;
border-bottom: 3px solid #f62217;
}
#footer{
clear: center;
border-left: solid 5px #f62217;
border-right: solid 5px #f62217;
padding: 10px 1px;
height: 20px;
background-color: #f62217;
text-align: center;
}
#footer a{
font: bold 13px Verdana;
color: #ffffff;
text-decoration: none;
}
#footer a:hover{
text-decoration:underline;
}
.innertube{
margin: 0 10px; /*Margins for inner DIV inside each column (to provide padding)*/
}
div.transbox
{
position:relative;
width: auto;
margin: 0 auto;
background-color: transparent;
border: 1px solid #96907d;
/* for IE*/
filter:alpha(opacity=60);
/* CSS3 standart*/
opacity:0.9;
}
div.transbox p
{
margin: 30px 40px;
font: bold 13px Verdana;
color: #000000;
}
Im trying to add Text in Transparent Box (http://www.w3schools.com/Css/css_image_transparency.asp) but i have some problem with IE7 position if the browser is not in maximize window. My div.transbox and div.transbox p dont resize with the window (: this make the box and text appear outline the body in unmaximize window in IE. Any suggestions what to do ?
url:// http://deli.webuda.com
index.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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>DF-consulting</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<div id="maincontainer">
<div id="contentwrapper">
<div class="header_top"><div class="header_intro">"DF Consulting, amenagement bureaux, spaceplanning, formation autocad, projet mobilite, i.transferts"<p></p>"La priorité de DF Consulting est de ramener les questions liées à la mobilité des salariés au même plan que toutes les actions qui visent à améliorer la productivité dans l'Entreprise"</div><h1> Les spécialistes de l'espace</h1><div class="innertube"></div></div>
<div id="menu_nav">
<a href="#">Accueil</a>
<a href="#">Les projets de mobilité</a>
<a href="#">Le space planning</a>
<a href="#">L'outil i.Transferts®</a>
<a href="#">Former et Conseiller</a>
<a href="#">Réalisations</a>
<a href="#">Nous contacter</a>
</div>
<div id="contentcolumn">
<div class="innertube"><h1 align="right">Présentation</h1></div>
<h3> La priorité de DF Consulting</h3>
<div class="background">
<div class="transbox">
<p>Dans une période où l'Entreprise vit de profondes et rapides mutations, la mobilité des salariés contribue à la réussite des changements stratégiques engagés. La priorité de DF Consulting est de ramener les questions liées à la mobilité des salariés au même plan que toutes les actions qui visent à améliorer la productivité dans l'Entreprise.</p>
</div>
</div>
<h3> Ses services</h3>
<div class="background">
<div class="transbox">
<p><font color="#f88205">Les projets de mobilité :</font> Adapter des méthodes spécifiques dans le cadre :</p>
<ul>
<li> de mobilité interne en gestion courante : 1 à 10 salariés</li>
<li> de mobilité en mode projet : 10 à 2 000 salariés : réorganisation d’entreprise , fusion interentreprises</li>
</ul>
<p><font color="#f88205">Le space planning :</font> Proposer des emménagements d’espaces dans le cadre : </p>
<ul type="circle">
<li> de locaux occupés à réorganiser</li>
<li> de locaux vides : en rénovation ou en construction</li>
</ul>
<p><font color="#f88205"> L'outil i.Transferts® :</font> Collecter, sélectionner et gérer tous les types d’informations liées : </p>
<ul type="disc">
<li> au projet de mobilité</li>
<li> a la gestion logistique des salariés</li>
</ul>
<p><font color="#f88205">Former et Conseiller :</font> Adapter des programmes de formation Autocad en fonction :</p>
<ul type="upper-roman">
<li> des objectifs souhaités</li>
<li> du niveau des stagiaires</li>
</ul>
</div>
</div>
<h3> Ses Clients</h3>
<div class="background">
<div class="transbox">
<ul type="lower-alpha">
<li> Les dirigeants des entreprises PME</li>
<li> Les responsables des services de logistique et d'informatique</li>
<li> Les responsables des services immobiliers des entreprises</li>
<li> Les responsables d'Asset Management: valorisation des espaces à la vente ou à la location</li>
</ul>
<br />
</div>
</div>
</div>
</div>
<div id="footer"><a href="http://www.df-consulting.fr">© 2010 DF-consulting.fr</a></div>
</div>
</body>
</html>
* {
font-family: Verdana, sans-serif;
font-size: 13px;
}
body{
margin:0 auto;
width: 1200px;
background-color: #eee4c6;
line-height: 1.5em;
border-top: 0;
border: 1px solid #96907d;
border-bottom: 0;
}
h1 {color:#c8332a;font-size:150%;}
h3 {color:#c8332a;}
#maincontainer{
overflow: auto;
width: 0 auto; /*Width of main container*/
background-color: #ffffff;
margin: 0 auto; /*Center container on page*/
}
.header_top{
position:relative;
font-style: italic;
font: bold 13px Verdana;
color: #ffffff;
background: #F62217;
padding: 10px;
height: 150px; /*Height of top section*/
}
.header_top h1{
font-style: italic;
font: 20px;
color: #ffffff;
padding-top: 100px;
width: 400px;
font-size: 20px;
text-align: 50%;
}
.header_intro{
font-style: italic;
font: bold 13px;
width: 500px;
height: 120px;
padding: 20px 10px;
color: #ffffff;
float: right;
}
#contentwrapper{
width: 100%;
}
#contentcolumn{
padding: 50px 20px 0;
height: 940px;
border-top: solid 3px #fea21a;
border-bottom: solid 3px #fea21a;
margin-left: 230px; /*Set left margin to LeftColumnWidth*/
background-image: url('images/fdp.gif');
background-repeat:repeat-none;
}
#menu_nav{
float:left;
width: 230px;
height: 890px;
padding-top: 100px;
text-decoration: none;
background: #fea21a;
border-top: solid 3px #ffffff;
border-bottom: solid 3px #ffffff;
}
#menu_nav a{
font: bold 13px Verdana;
display: block;
padding: 10px;
padding-left: 20px;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #f62217;
}
#menu_nav a:hover{
color: #423f37;
text-transform:uppercase;
text-decoration: underline;
border-bottom: 3px solid #f62217;
}
#footer{
clear: center;
border-left: solid 5px #f62217;
border-right: solid 5px #f62217;
padding: 10px 1px;
height: 20px;
background-color: #f62217;
text-align: center;
}
#footer a{
font: bold 13px Verdana;
color: #ffffff;
text-decoration: none;
}
#footer a:hover{
text-decoration:underline;
}
.innertube{
margin: 0 10px; /*Margins for inner DIV inside each column (to provide padding)*/
}
div.transbox
{
position:relative;
width: auto;
margin: 0 auto;
background-color: transparent;
border: 1px solid #96907d;
/* for IE*/
filter:alpha(opacity=60);
/* CSS3 standart*/
opacity:0.9;
}
div.transbox p
{
margin: 30px 40px;
font: bold 13px Verdana;
color: #000000;
}