CSS et container

Logiciel & apps Programmation
1

Bjr

Je debute en css : quand je place dans un “container” deux blocs 1 & 2 cote à cote, en pleine page windows c’est bon, mais dès que je reduis la fenetre windows, le bloc 2 passe en dessous …une solution ?
merci

2

Bonjour,

On peut voir votre code CSS + HTML actuel ?

3

le html

Ablaze 
<!-- header starts here -->
<div id="header"><div id="header-content">	
	
	<h1  id="logo" name="logo"><img src="images/banniere/ffw01-2.jpg" alt="" width="400" height="100" border="0" class="no-border" /></h1>	
	<h1 class="no-border" id="slogan" name="slogan">TOO LATE TO RUN, ISN'T IT ?</h1>
  <div class="searchform"></div>

	<ul>
  <li><a href="charte.html" id="current">CHARTE</a></li>
		<li><a href="lien_escadrons.html">LIENS</a></li>
        <li><a href="mailto:">CONTACT</a></li>
	  <li><a href="index.html">ADMIN</a></li>
  </ul>					

</div id=logo>

<div id="content-wrap">
  <div id="content">	 

	<div align="left" id="sidebar" >				
		
		<div  class="sidebox">
			<h1>COMMANDEMENT</h1>
			<ul class="sidemenu">
				<li><a href="index.html" class="top">ESCADRILLE</a></li>
				<li><a href="forum.htm">LE FORUM</a></li>
				<li><a href="pilotes.html">LES PILOTES</a></li>
		  </ul>		
	  </div>
      <div class="sidebox">
			<h1>OPERATIONS</h1>
			<ul class="sidemenu">
				<li><a href="planning.html" class="top">BRIEFING / DEBRIEFING</a></li>
				<li><a href="database.html"> BASE DE DONNEES</a></li>
                <li><a href="media_photo.html">MEDIATHEQUE</a></li>
		  </ul>
	  </div>
		<div class="sidebox">
			<h1>INSTRUCTION</h1>
			<ul class="sidemenu">
				<li><a href="edc.html" class="top">ECOLE DE CHASSE</a></li>
				<li><a href="document_int.html"> DOCUMENTS</a></li>
                <li><a href="maintenance_falcon.html">HALL MAINTENANCE</a></li>
		  </ul>
		</div>
		<div align="center">
  <script type="text/javascript">

//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 200, 150, 0, 6000, 1, “R”)
new fadeshow(fadeimages2, 140, 225, 0, 3000, 0)

		<div class="sidemenu" >
		  <table width="196" border="1" cellspacing="2" bordercolor="#333333" bgcolor="#000000" class="sidebox">
VISITEURS
Total
Aujourd'hui
En ligne 
		</div>	

	  </div>

documents internes

procedures air-sol air-air comm's divers
         
Connexion AF Profils de base Tactiques interception Communications de base Formations à 2
Connexion TS Profils A ir-Sol Profils Air-Air Communictions A/A Formations à 4
    DCA Brevety code Les virages
Décollage Armement Air-sol     Patterns
Atterrissage IMC Batteries AA      
Atterrissage VMC        
Ravitaillement Calcul distance      
  GBU opération      
  Largage palier      
  Attaque au Mark      
         
         
         
         
         
         
         
          

		<!-- footer ends here -->

et le css

/********************************************
AUTHOR: Erwin Aligam
WEBSITE: http://www./
TEMPLATE NAME: ablaze
TEMPLATE CODE: S-0009
VERSION: 2.1
*******************************************/

/********************************************
HTML ELEMENTS
********************************************/

/* top elements */

  • {
    padding: 0;
    margin: 0;
    padding-left: 0px;
    }
    body {
    margin: 0;
    padding: 0;
    font: normal .70em/1.5em Tahoma, ‘Trebuchet MS’, sans-serif;
    color: #E4E4E4;
    text-align: center;
    background: #000;
    }
    .Style1 {
    color: #E1E1E1; text-transform:uppercase;
    font: bold 1.0em Tahoma, ‘Trebuchet MS’, Arial, Sans-serif;
    }
    .Style2 {
    color: #E1E1E1; text-transform:uppercase;
    font: 0.9em Tahoma, ‘Trebuchet MS’, Arial, Sans-serif;
    height: auto;
    }
    .Style3 {
    color: #00D72B;
    text-transform:uppercase;
    font: 0.9em Tahoma, ‘Trebuchet MS’, Arial, Sans-serif;
    padding-left: 0px;
    }
    /* links */
    a {
    color: #FFF;
    background-color: inherit;
    text-decoration: none
    }
    a:hover {
    color: #F88F26;
    background-color: inherit;
    }

/* headers */
h1, h2, h3, h4 {
font: bold 1.3em ‘Trebuchet MS’, Arial, Sans-serif;
color: #F3252B;
}
h1 {
font-size: 1.6em; }
h2 { font-size: 1.4em; text-transform:uppercase;}
h3 { font-size: 1.3em; text-transform:uppercase;}
h4 { font-size: 1.2em; }

#main h1 {
font: normal 1.5em ‘Trebuchet MS’, Arial, Sans-serif;
color: #DBD0A3;
}
}
#sidebar h1 {
font: bold 1.4em ‘Trebuchet MS’, Arial, Sans-serif;
background: #000 url(arrow.gif) no-repeat 10px .7em;
padding: 7px 0 7px 35px;
color: #D10C11;
}

p, h1, h2, h3 {
margin: 0;
margin-top: 10px;
margin-bottom: 5px
}

ul, ol {
margin: 10px 30px;
padding: 0 15px;
color: #F88F26;
}
ul span, ol span {
color: #CCC;
}

/* images /
img {
border: 0px solid #444;
padding-left: 0px;
}
img.no-border {
border: none;
}
img.float-right {
margin: 5px 0px 5px 15px;
}
img.float-left {
margin: 5px 15px 5px 0px;
}
a img {
border: 3px solid #000;
}
a:hover img {
border: 0px solid #CCC !important; / IE fix*/
border: 3px solid #444;
}

code {
margin: 5px 0;
padding: 10px;
text-align: left;
display: block;
overflow: auto;
font: 500 1em/1.5em ‘Lucida Console’, ‘courier new’, monospace;
/* white-space: pre; */
background: #111;
}
acronym {
cursor: help;
border-bottom: 1px solid #777;
}
blockquote {
margin: 15px;
padding: 0 0 0 20px;
background: #111;
font: bold 1.3em/1.5em ‘Trebuchet MS’, Sans-serif;
}

/* form elements */
form {
margin: 15px;
padding: 0;
background: #000;
border: 1px dashed #151515;
}
label {
display:block;
font-weight:bold;
margin:5px 0;
}
input {
padding: 2px;
border: 1px solid #CCC;
font: normal 1em Verdana, sans-serif;
color:#000;
background: #CCC;
}
textarea {
width: 250px;
padding:2px;
border: 1px solid #CCC;
font: normal 1em Verdana, sans-serif;
height:100px;
display:block;
color:#000;
background: #CCC;
}
input.button {
margin: 0;
font: bold 1em Tahoma, Sans-serif;
border: 1px solid #CCC;
padding: 2px 3px;
color: #000;
background: #CCC;
}

/* search form */
.searchform form{
position: absolute;
top: 10px; right: 10px;
background-color: transparent;
border: none;
margin: 0; padding: 0;
}
.searchform input.textbox {
margin: 0 3px; padding: 0 2px;
width: 130px;
background: #000;
color: #FFF;
height: 20px;
border: 1px solid #7E050A;
vertical-align: top;
}
.searchform input.button {
font: bold 12px Arial, Sans-serif;
background: #000;
color: #fff;
width: 70px;
height: 22px;
border: none;
padding: 3px 5px;
vertical-align: top;
}

/***********************
LAYOUT
************************/
#wrap {
background: #FFF;
width: 920px; height: 100%;
margin: 0 auto;
text-align: left;
}

#header-content, #footer-content {
width: 95%;
}
#content {
width: 95%;
}
/* header */
#header {
position:relative;
background: #444 url(headerbg.jpg) repeat-x 0 0;
height: 120px;
text-align: left;
width:1152px;
margin:0 auto;
}
#header-content {
position: relative;
margin: 0 auto; padding: 0;

}
#header-content #logo {
position: absolute;
font: bold 50px Verdana, ‘Trebuchet Ms’, Sans-serif;
letter-spacing: -2px;
color: #000;
margin: 0;
padding: 0;
/* change the values of left and top to adjust the position of the logo /
top: 5px;
left: -24px;
}
#header-content #slogan {
position: absolute;
font: bold 18px ‘Trebuchet Ms’, Sans-serif;
text-transform: none;
color: #CCC;
margin: 0;
padding: 0;
/ change the values of left and top to adjust the position of the slogan */
top: 15px;
left: 496px;
}

/* header menu */
#header-content ul {
position: absolute;
right: -19px;
top: 83px;
font: bolder 1.0em ‘Trebuchet MS’, sans-serif;
color: #FFFFFF;
list-style: none;
margin: 0;
padding: 0;
}
#header-content li {
display: inline;
}
#header-content li a {
float: left;
display: block;
padding: 3px 12px;
color: #FFFFFF;
}
#header-content li a:hover {
background: #000;
color: #F88F26;
}
#header-content li a#current {
background: #000;
color: #CCC;
}
#main li a#current {
background: #000;
color: #33cc33;
}

/* content /
#content-wrap {
clear: both;
float: left;
background: #000;
width: 100%;
}
#content {
text-align: left;
padding: 0; margin: 0 auto;
width: 95%;
}
#table {
text-align:center;
width:375px;
border:1px;
cellpadding:1;
cellspacing:3px;
bgcolor: #171717;
bordercolor:#000000;
text-align:center;
margin-left:10px;
float:left;
background-color: #0F0F0F;
}
#table2 {
text-align:center;
width:800px;
border:1px;
cellpadding:1;
cellspacing:3px;
bgcolor: #171717;
bordercolor:#000000;
text-align:center;
margin-left:10px;
float:left;
background-color: #0F0F0F;
}
/ sidebar */
#sidebar_right {
float: right;
width: 220px;
margin-right: 300px 300px; padding: 0;
}
#sidebar {
float: left;
width: 220px;
margin: 0px 0; padding: 0;
}
#sidebar ul.sidemenu {
list-style:none;
margin: 0;
padding: 0px 0 0px 0;
}
#sidebar ul.sidemenu li {
padding: 0 10px;
}
#sidebar ul.sidemenu a {
display: block;
font-weight:bold;
color: #EEEEEE;
height: 1.5em;
text-decoration: none;
padding:.3em 0 .3em 15px;
background: #000;
border-bottom: 1px dashed #151515;
line-height: 1.5em;
}
#sidebar ul.sidemenu a.top{
border-top: 1px dashed #151515;
}
#sidebar ul.sidemenu a:hover {
padding: .3em 0 .3em 10px;
background: #000;
border-left: 5px solid #D10C11;
color: #D10C11;
}
#sidebar .sidebox {
background: #000;
margin: 5px 15px 10px 10px;
}

/* main */
#main {
margin: 10px 0;
padding: 0 0px 0 0;
float: left;
width:auto;
}
#main h3.btn {
font: bold 1.3em ‘Trebuchet MS’, Arial, Sans-serif;
background: #000 url(arrow.gif) no-repeat 10px .7em;
padding: 7px 0 7px 35px;
color: #D10C11;

}
#main ul.insidemenu {
width:10%
margin:0px 0px 0px 10px;
padding:0;
}
#main ul.insidemenu li {
margin-bottom:1px;
border: 1px solid #33cc33;
display:inline;
}
#main ul.insidemenu a {
display: inline;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
padding: 2px 5px 3px 10px;
background: #000;
border-left: 4px solid #a7a7a7;
min-height: 18px;
}

#main ul.insidemenu a:hover {
padding:2px 5px 3px 10px;
background: #D1D1D1;
color: #D30F16;
border-left:4px solid #D30F16;
}
#main ul.vertmenu {
width:25%;
margin:0px 0px 500px 0px;
padding:0;
float:left
}
#main ul.vertmenu li {
margin-bottom:1px;
border: 1px solid #a7a7a7;
display:block;
}
#main ul.vertmenu a {
display:block;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
padding: 2px 5px 3px 10px;
background: #000;
border-left: 4px solid #a7a7a7;
min-height: 18px;

}
#main ul.vertmenu a:hover {
padding:2px 5px 3px 10px;
background: #D1D1D1;
color: #D30F16;
border-left:4px solid #D30F16;
}
/* footer */
#footer {
clear: both;
margin: 0; padding: 0;
border-top: 1px solid #68050A;
font-size: 95%;
text-align: left;
}
#footer h2, #footer p {
padding-left: 0;
}
#footer-content {
margin: 0 auto;
}
#footer-content a {
text-decoration: none;
color: #8A8A8A;
}
#footer-content a:hover {
text-decoration: underline;
color: #FFF;
}
#footer-content ul {
list-style: none;
margin: 0; padding: 0;
}
#footer-content .col {
width: 32%;
padding: 0 5px 30px 15px;
}
#footer-content .col2 {
width: 30%;
padding: 0 0 30px 0;
}

/* alignment classes */
.float-left {
float: left;
table-layout: fixed;
}
.float-right {
float: right;

}
.align-left { text-align: left; }
.align-right { text-align: right; }

/* additional classes */
.clear { clear: both; }
.comments {
text-align: right;
border: 1px dashed #151515;
padding: 5px 10px;
margin: 20px 15px 10px 15px;
}

a partir de

qd je mets par exemple ds css “main” width 10% ca marche sauf qd je reduis la fenetre a fond
Edité le 04/05/2009 à 11:44