28172 sujets

CSS et mise en forme, CSS3

Définir la position de couche

j'ai plusieurs couches de taille variable.
Je ne veux pas quelle ce chevauche quand je réduit la taille de m'a fenêtre d'internet explorer.
Pour la hauteur on peut définir 
height: 10%;
et donner une taille mini 
min-height: 48px;

Je voudrais faire de même pour la position 
left: 1%;
et donner une position mini comme 5px est ce possible.

Merci pour votre aide.
Pour info voici le début de codage de m'a page.


*#menu    {
	width: 100%;
	min-width: 627px;
	height: 10%;
	min-height: 48px;
	position: absolute;
	left: 0%;
	top: 10%;
	background-color: #D5FF9B;
	/* for IE */
    filter:alpha(opacity=70);
    /* CSS3 standard */
    opacity:0.6;
}

*#logo    {
	width: 203px;
	height: 100px;
	position: absolute;
	left: 1%;
	top: 5%;
}

*#menubouton    {
	width: 353px;
	padding: 0%;
	height: 30px;
	position: absolute;
	right: 1%;
	top: 10%;
}

*.bouton a    {
	display: block;
	width: 88px;
	line-height: 29px;
	text-align: center;
	vertical-align: middle;
	background: url(images/bouton.png) no-repeat;
	color: white;
	text-decoration: none;
	float: left;
	margin: absolute;
}

*.bouton a:hover    {
	background: url(images/bouton2.png) no-repeat;
}

*#textefond    {
	width:70%;
	min-width:448px;	 
	height: 65%;
	min-height: 200px;
	position: absolute;
	left: 15%;
	top: 25%;
	background-color: #D5FF9B;
	/* for IE */
    filter:alpha(opacity=80);
    /* CSS3 standard */
    opacity:0.6;
}


*#texte    {
	width:68%;
	min-width:435px;	 
	height: 64%;
	min-height: 200px;
	position: absolute;
	left: 16%;
	top: 26%;
	overflow: auto;
}

*#basfond    {
	width: 100%;
	min-width: 627px;
	height: 5%;
	min-height: 24px;
	position: absolute;
	left: 0%;
	top: 92%;
	background-color: #D5FF9B;
	/* for IE */
    filter:alpha(opacity=70);
    /* CSS3 standard */
    opacity:0.6;
	}
	
*#bas    {
	width: 90%;
	min-width: 627px;
	height: 5%;
	min-height: 24px;
	position: absolute;
	left: 5%;
	top: 92%;
	}

div#galerietexte 
{ 
    width: 48%;
	min-width: 330px;
	height: 80%;
	height: 330px;
    background: #eed ; 
    border: 1px solid #dcb ; 
    position: absolute;
	left: 50%;
	top: 2%;  
    text-align: center ; 
    font: 1em Georgia, serif ; 
    overflow: auto;
} 

div#galerie 
{ 
    width: 48%;
	min-width: 330px;
	height: 80%;
	min-height: 330px;
	position: absolute;
	left: 1%;
	top: 2%;     
    background: #eed ; 
    border: 1px solid #dcb ; 
    
 
    text-align: center ; 
    font: 0.4em Georgia, serif ; 
} 
 
ul#galerie_mini 
{ 
    margin: 0 ; 
    padding: 0 ; 
    list-style-type: none ; 
} 
 
ul#galerie_mini li 
{ 
    float: left ; 
} 
 
ul#galerie_mini li a img 
{ 
    margin: 2px 1px ; 
    border: 1px solid #dcb ; 
} 
 
dl#photo 
{ 
    clear: both ; 
    margin: 0 auto ; 
} 
 
dl#photo dt 
{ 
    font: italic 2.5em/1.5em Georgia, serif ; 
    color: #dcb ; 
} 
 
dl#photo dd 
{ 
    margin: 0 ; 
} 
 
dl#photo img 
{ 
    border: 1px solid #dcb ; 
}


<!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=windows-1252">
<meta http-equiv="Content-Language" content="fr">
<title>test test test</title>





<script type="text/javascript">
var nomnav = navigator.appName;
if (nomnav == 'Microsoft Internet Explorer') {
  document.write("<link rel='stylesheet' media='screen' type='text/css' href='style.css'>");
}
else {
  document.write("<link rel='stylesheet' media='screen' type='text/css' href='style2.css'>");
}
</script>

<script type="text/javascript" src="scriptgalerie.js"></script>

</head>

<body text="#001741" bgcolor="#4CA700" background="images/fond2.jpg">

 

<div id=menu></div>
<div id=logo><img border="0" src="images/logo.png" width="100%" height="100%"> 
</div>   
<div id=menubouton>  
<div class="bouton">
  <p>
   <a href="1.html">1</a>
   <a href="2.html">2</a>
   <a href="3.html">3</a>
   <a href="4.html">4</a>
  </p>
</div>
</div>

<div id=textefond></div>
<div id=texte>

	<div id="galerie"> 
    <ul id="galerie_mini"> 
        <li><a href="images/1.jpg" title="img 1"><img src="images/1p.jpg" alt="img grd 1" /></a></li> 
         <li><a href="images/2.jpg" title="img 2"><img src="images/2p.jpg" alt="img grd 2" /></a></li> 
        <li><a href="images/3.jpg" title="img 3"><img src="images/3p.jpg" alt="img grd 3" /></a></li> 
        <li><a href="images/1.jpg" title="img 1"><img src="images/1p.jpg" alt="img grd 1" /></a></li>
         </ul>      
    <dl id="photo"> 
        <dt>img 1</dt> 
        <dd><img id="big_pict" src="images/1.jpg" alt="img 1" /></dd> 
    </dl> 
    
</div> 
<div id=galerietexte>
	<p align="center">img</p>
	<div align="center">
		<table border="2" width="182" id="table1" bordercolorlight="#800000" bordercolordark="#800000">
			<tr>
				<td width="67" align="center">largeur</td>
				<td align="center" width="97">xxx cm</td>
			</tr>
			<tr>
				<td width="67" align="center">hauteur</td>
				<td align="center" width="97">xxx cm</td>
			</tr>
			<tr>
				<td width="67" align="center">profondeur</td>
				<td align="center" width="97">xxx cm</td>
			</tr>
		</table>
		<p>ssrtrttrtrttteeeeeeeeeeeeeeeeeeeeeee</p>
		<p>eeeeeeeeeeeeeeeeeeeeee</p>
		<p>ee</p>
		<p>ariioh hraori aorii</p>
		<p>ssrtrttrtrttteeeeeeeeeeeeeeeeeeeeeee</p>
		<p>eeeeeeeeeeeeeeeeeeeeee</p>
		<p>ee</p>
		<p>ariioh hraori aorii</p>
		<p>&nbsp;</div>
	</div>

		</div>
<div id=basfond></div>
<div id=bas> <font size="4"> <marquee>test test test</marquee></font></div>

</body>

</html>
merci pour le renseignement, je vais tenter de trouver une autre solution.
Si j'en trouve une je la publierais.
Sujet clos
Aller à