28172 sujets

CSS et mise en forme, CSS3

Contenu qui disparait quand page trop petite

Salut à tous

voilà je suis entrain de taffer sur ma future galerie photo
comme d'hab j'ai commencé avec vos gabarits xhtml / css (merci ! Smiley murf )

mais là j'ai un petit souci, une image vaut mieux qu'un long discours, voilà le lien de la page qui pose problème (la seule qui a du contenu pour l'instant) :

http://addesign.franceserv.com/contact.php

comme je suis sur un écran 23" j'ai pas remarqué le problème tout de suite, mais ceux qui sont sur des résolutions plus petites risquent de pas voir le bas de la page, sans avoir moyen de descendre. Idem quand on réduit la taille du navigateur, en fait j'ai l'impression que la "distance" possible de défilement reste la même, quelle que soit la taille de la fenêtre ..

je me casse la tête depuis un moment maintenant, je comprends pas d'où ça vient Smiley sweatdrop

voilà les codes :


la page

<div id="global">

	   <div id="entete">
	      <a href="index.php"><img id="titre_lien" alt="Antonin Douard Photographie Design" src="styles/img/titre_lien.png" /></a>
		   <ul>
              <li><a id="menu_photo"  href="photo.php"></a></li>
              <li><a id="menu_design"  href="design.php"></a></li>
              <li><a id="menu_contact_page_contact"  href="#"></a></li>
          </ul>			
	 </div><!-- #entete -->
	
	
	 <div id="contenu">
	       <p id="texte_gris">Vous pouvez utiliser le formulaire ci-dessous pour me contacter par mail.<br/>
	                           Tous les champs sont obligatoires.
		  </p>
		  
	            <form  method="post" action="traitement_formulaire.php">
			       <p><input id="infos_formulaire_nom" type="text" name="nom" tabindex="1" value="NOM Prénom" onclick="if (this.value=='NOM Prénom') this.value=''" /></p>
			       <p><input id="infos_formulaire" type="text"  name="email" tabindex="2" value="Email" onclick="if (this.value=='Email') this.value=''" /></p>
			       <p><input id="infos_formulaire" type="text"  name="objet" tabindex="3" value="Objet" onclick="if (this.value=='Objet') this.value=''" /></p>
		           <p><textarea id="message_formulaire" name="message" tabindex="4" cols="30" rows="8" onclick="if (this.value=='Corps du message') this.value=''">Corps du message</textarea></p>

                     <?php session_start(); ?>
                      <div id="div_recaptcha">
                          <?php
                           require_once('recaptchalib.php');
                           $publickey = ""
                           echo recaptcha_get_html($publickey);
                           ?>

                     </div><!-- #recaptcha -->

	                  <input type="submit" name="envoi" value="Envoyer" />
	
	
             </form>
      </div><!-- #contenu -->
</div><!-- #global -->




et le CSS


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

/* Page */
#global {
	background: #000000;
	margin-top:30px;
	padding-bottom:50px;
}



/* Pied de page */
#pied {
	color: #E6A948;
}


/* --- POSITIONNEMENT --- */

/* Page */
html, body {
	height: 100%; /* Voir -> Note 1 ci-dessous */
	
}
body {
	padding: 0;
}
#global {
	height: 100%; /* -> 1 */
	width: 1024px;
	overflow: hidden; /* -> 2 */
	margin-left: auto;
	margin-right: auto; /* -> 3 */
	}

/* En-tête */
#entete {
	height:186px;
	background-image:url('img/header_pages.png');
	background-repeat:repeat-x;
	text-align:center;
	padding-bottom:10px;
}
#entete h1 {
	margin: 0;
}
#entete h1 img {
	float: left;
	margin-bottom:50px;
}
#entete .sous-titre {
	margin: 0px 0 15px 0;
}

#entete ul {
	margin-top: 22px;
	margin-left:0px;
	list-style: none;
	text-align: center;
	color:#f9103b;
}
#entete li {
margin-left:0px;
	display: inline;
}
#entete a {
margin-left:0px;
	padding: 0px;
	line-height: 1.5;
	font-size: 8pt;
	text-decoration: none;
	color:#f9103b;
}

#entete a:hover {
margin-left:0px;
	padding: 0px;
	line-height: 1.5;
	font-size: 8pt;
	text-decoration: none;
	color:#ffffff;
}

/* Menu de navigation */
#navigation {
	padding: 12px 15px;
}
#navigation ul {
	margin: 0;
	list-style: none;
	text-align: center;
}
#navigation li {
	display: inline;
}
#navigation a {
	padding: 6px;
	line-height: 1.5;
	font-size: .9em;
	text-decoration: none;
}

/* Contenu */
#contenu {
    min-height:50%;
	padding: 10px 20px;
	background:#ffffff;
	text-align:center;
}


#menu_photo {
display:block;
width:106px;
height:54px;
float:left;
margin-left:0px;
margin-top:152px;
background-image:url('img/photo_neutre.png');
background-repeat:no-repeat;
}

#menu_photo:hover {
display:block;
width:106px;
height:54px;
float:left;
margin-left:0px;
margin-top:152px;
background-image:url('img/selection_photo.png');
background-repeat:no-repeat;

}

#menu_photo_page_photo {
display:block;
width:106px;
height:54px;
float:left;
margin-left:0px;
margin-top:152px;
background-image:url('img/photo_selectionne.png');
background-repeat:no-repeat;
}

#menu_photo_page_photo:hover {
display:block;
width:106px;
height:54px;
float:left;
margin-left:0px;
margin-top:152px;
background-image:url('img/selection_photo.png');
background-repeat:no-repeat;
}


#menu_design {
float:left;
margin-top:152px;
display:block;
width:105px;
height:54px;
background-image:url('img/design_neutre.png');
background-repeat:no-repeat;
}

#menu_design:hover {
float:left;
display:block;
margin-top:152px;
width:105px;
height:54px;
background-image:url('img/selection_design.png');
background-repeat:no-repeat;
}

#menu_design_page_design {
float:left;
margin-top:152px;
display:block;
width:105px;
height:54px;
background-image:url('img/design_selectionne.png');
background-repeat:no-repeat;
}

#menu_design_page_design:hover {
float:left;
margin-top:152px;
display:block;
width:105px;
height:54px;
background-image:url('img/selection_design.png');
background-repeat:no-repeat;
}

#menu_contact {
float:left;
margin-top:152px;
display:block;
width:131px;
height:54px;
background-image:url('img/contact_neutre.png');
background-repeat:no-repeat;
}

#menu_contact:hover {
float:left;
display:block;
margin-top:152px;
width:131px;
height:54px;
background-image:url('img/selection_contact.png');
background-repeat:no-repeat;
}

#menu_contact_page_contact {
float:left;
margin-top:152px;
display:block;
width:131px;
height:54px;
background-image:url('img/contact_selectionne.png');
background-repeat:no-repeat;
}

#menu_contact_page_contact:hover {
float:left;
margin-top:152px;
display:block;
width:131px;
height:54px;
background-image:url('img/selection_contact.png');
background-repeat:no-repeat;
}



#contenu > :first-child {
	margin-top: 10px;
}
#contenu p, #contenu li {
	line-height: 1.5;
}

/* Pied de page */
#pied {
	padding: 20px 20px;
	font-size: .85em;
	text-align:center;
}
#pied p {
	margin: .5em 0;
	color:#070707;
}
#copyright {
	text-align: left;
	font-size: 1em;
}

#texte_gris {
padding-top:30px;
padding-bottom:30px;
font-size:8.5pt;
text-decoration: none;
color:#000000;
font-family: Tahoma, Arial, Times;
}

#choix_formulaire {
text-align:center;
font-size:8pt;
text-decoration: none;
color:#8a8a8b;
font-family: Tahoma, Arial, Times;
}

#infos_formulaire_nom {
width:600px;
height:25px;
background-color:#ffffff;
border:1px solid;
border-left:2px solid;
border-color:#e3e3e3;
margin-top:50px;
line-height: 1;
font-size: 8pt;
text-decoration: none;
color:#000000;
font-family: Arial, Colibri, Tahoma, Times;
}


#infos_formulaire {
width:600px;
height:25px;
background-color:#ffffff;
border:1px solid;
border-left:2px solid;
border-color:#e3e3e3;
line-height: 1;
font-size: 8pt;
text-decoration: none;
color:#000000;
font-family: Arial, Colibri, Tahoma, Times;
}

#message_formulaire {
width:600px;
height:280px;
background-color:#ffffff;
border:1px solid;
border-left:2px solid;
border-color:#e3e3e3;
line-height: 1;
font-size: 8pt;
text-decoration: none;
color:#000000;
font-family: Arial, Colibri, Tahoma, Times;
overflow:auto;
}

#titre_lien {
float:right;
width:577px;
height:84px;
margin-top:0px;
margin-right:0px;
}

#div_recaptcha
{
    margin: 0 auto;
	width:442px;
}

.recaptchatable .recaptcha_image_cell, 
#recaptcha_table {
margin: 0 auto;
background-color:#ffffff;
  }
  
  #recaptcha_table {
    border-color:#ffffff;
  }
  
  #recaptcha_response_field {
    border-color:#e3e3e3;
    background-color:#ffffff;
  }









est-ce que quelqu'un aurait une idée pour régler ce souci ? Smiley ohwell

merci d'avance Smiley cligne
Modifié par addesign (27 Jul 2011 - 13:24)
Bon apparement j'ai réglé le problème en mettant le #contenu en position:absolute; et en réglant sa largeur

par contre maintenant j'arrive pas à avoir de marge sous la page blanche en bas .. Smiley ohwell
avec la div global ça a pas l'air de fonctionner Smiley confus
par contre si je met un padding-bottom au body, j'arrive à créer un décalage

le truc c'est que je dois mettre des valeurs hallucinantes pour avoir un tout petit décalage (qui en plus est différent selon les navigateurs)
par exemple là j'ai mis padding-bottom:300px; sur body

et sous IE j'ai un décalage qui doit faire 10px à peine, c'est un peu plus grand sous chrome

Smiley sweatdrop
Tout dépend quel 'décalage' tu souhaite créer? Une image pour expliquer peut être...
Sujet clos
Aller à