Forum Clubic

Création de site!

Bonjour, je débute ds la matière et j’ai un style de site sur 3 colonnes verticales!1er les menus,2 sujet,3 des infos!
Le probleme c’est quand je mets une photos dans la colonne du milieu (2) et quand je réduit ma fenêtre I.E ou Mozilla, la photo sort de la colonne (2) et passe par dessus la 3. Celà fait bizarre et moche!!Du coup on est obligé de resté en mode plein écran!
Comment bloquer l’image pour quelle ne sorte pas de la colonne quand je réduit ma fenêtre?

Faudrait nous donner le code de ta page pour qu’on puisse t’aider.

C’est un modele qui est comme ça:

                                                                                     Style.css: 

/* Général */
body {
color: #F0E39E;
background: #2C2F22;
}
a {
color: #FF6533;
}
a:hover, a:focus {
color: #FF4C00;
}
strong {
color: #A1B55D;
}

/* Conteneur central */
#centre {
background: url(img/11-colgauche.png) repeat-y left top;
}
#centre-bis {
background: url(img/11-coldroite.png) repeat-y right top;
}

/* Navigation */
#navigation {
background: #181A12;
}
#navigation a {
color: #FF6533;
}
#navigation a:hover, #navigation a:focus {
background: #000000;
}

/* Contenu principal */
#principal {
color: #181A12;
background: #cbd888;
}
#principal a {
color: #332510;
}
#principal a:hover, #principal a:focus {
color: #6E5122;
}
#principal strong {
color: #181A12;
}

/* Contenu secondaire */
#secondaire {
background: #181A12;
}

/* — POSITIONNEMENT — */

/* Page */
body {
padding: 20px 5px;
}
#global {
width: 90%;
max-width: 90em;
min-width: 850px;
margin-left: auto;
margin-right: auto;
}

/* En-tête */
#entete {
padding: 20px 0;
}
#entete h1 {
margin: 0;
}
#entete h1 img {
float: left;
margin: 7px 20px 10px 0;
}
#entete .sous-titre {
margin: 4px 0 15px 0;
}

/* Bloc central */
#centre-bis {
width: 100%;
overflow: hidden;
}

/* Menu de navigation */
#navigation {
float: left;
width: 180px;
}
#navigation ul {
margin: 0;
padding: 20px 10px 20px 10px;
list-style: none;
}
#navigation a {
display: block;
height: 1%;
padding: 6px 10px 6px 10px;
line-height: 1.5;
font-size: .9em;
text-decoration: none;
}

/* Contenu principal */
#principal {
margin-left: 200px;
margin-right: 260px;
padding: 10px 20px;
}
#principal > :first-child {
margin-top: 10px;
}
#principal p, #principal li {
line-height: 1.5;
}

/* Contenu secondaire */
#secondaire {
float: right;
width: 200px;
padding: 12px 20px;
}

/* Pied de page */
#pied {
margin: 0;
padding: 15px 260px 10px 200px;
font-size: .85em;
}

                                                                                       et ma page ex:
Modele page
<link rel="stylesheet" type="text/css" href="styles/style.css" media="screen" />
<div id="entete">
	<h1>
		<img alt="" src="picto/11.png" />
		
		<span>Modele</span>
	</h1>
	<p class="sous-titre">
	
		<strong>Caractéristiques:</strong>
		
	</p>
</div><!-- #entete -->

<div id="centre">
<div id="centre-bis">

	<div id="navigation">
		<ul>
			<li><a href="index.html">Accueil</a></li>
			<li><a href="utiliser.html">Utilisation</a></li>
			<li><a href="licence.html">Menu</a></li>
		</ul>
	</div><!-- #navigation -->

	<div id="secondaire">
	
		<h3>Colonne de droite</h3>
		
	</div><!-- #secondaire -->

	<div id="principal">
	
	<h2>colonne centre</h2>
	
    <center><img alt="" src="photos/test.jpg" ></center><br><br>
		
	</div><!-- #principal -->

</div><!-- #centre-bis -->

</div><!-- #centre -->

<div id="pied">

	<p>Le contenu de mon pied de page</p>
	
</div><!-- #pied -->
Edité le 10/06/2010 à 13:36

Ta page ne contient pas 3 colonnes comme tu l’as annoncé, mais 3 blocs à des positions différentes qui ressemblent à des colonnes (de visu).

En gros, si je schématise, tu dis :

  • le 1er bloc est à quelques pixels du bord gauche
  • le 2nd bloc est à encore plus de pixels du bord gauche
  • le 3embloc est à quelques pixels du bord droit

Ceci est propre à la résolution de l’écran (ou de la fenètre du navigateur).

De cette manière, il est évident qu’ils peuvent se chevaucher si l’espace de la fenètre ne permet pas d’afficher pleinement tous les blocs. Les bloc

ont la particularité d’être positionnés sur la page, position définie par rapport à la page elle-même (ses bords), quelque soit la position des autres blocs
.

Si ton souhait est vraiment de ne pas faire chevaucher les “colonnes”, tu devrais choisir de créer une

plutot que des
.
Edité le 10/06/2010 à 13:57

Ok merci du conseil, mais peut tu me donner un exemple?

Voici un exemple :

1ère colonne 2ème colonne 3ème colonne

C’est basique, fo retravailler la présentation (width, height, border, …), mais l’idée est la. Et de cette manière, les contenus ne se chevaucheront pas.

Ok merci je vais revoir tt celà!!!

Mais c’est à mettre ou ton exemple: directement sur une page php ou html ou alors dans un style.css?
Edité le 11/06/2010 à 14:59

directement dans la page HTML (ou PHP si c’est le cas, mais hors des balises php alors ;)). Pour le style CSS, tu peux l’utiliser pour faire la présentation de tes colonnes.