18041 sujets

Questions générales et questions de débutants

Bannière qui ne s'adapte pas aux résolutions d'écrans

Bonjour, je suis nouveau sur ce site bien que je le connais depuis quelques temps.

Donc je viens ici car j'ai un problème sur mon site utilisant pour l'instant le (X)HTML et CSS.

En effet, mon problème c'est que mon site n'est pas adapté à toutes les résolutions d'écran. Je m'en suis aperçu qu'en j' ai fait la commande Ctrl - Ma bannière s'est coupée en deux.

Ce qui donne ceci ;

http://www.cijoint.fr/cjlink.php?file=cj201104/cijvTzbh0W.jpg

Mon code html :



<body>
<br/>

<div id="header">

<div class="texte_header">
<p>"Madame Curie est de tous les êtres célèbres le seul que la gloire n'ait pas corrompu" Albert Einstein</p>
</div>


<div class="header_gauche"><a href="index.html"></a><img src="mariecurie.jpg" alt="logo" />

</div>

<div id="ombre"></div>


<div id="menu"> 
	<a href="index.html" class='barre'>Accueil</a><img src="accueil.png" width="23px" height="23px"/>
	<a href="News.html" class='barre'>News</a><img src="news.png" width="23px" height="23px"/>
	<a href="http://cahierdetexte.lycee-mariecurie.org/">Cahier de texte</a><img src="cahier de texte.png" width="23px" height="23px"/>
	<a href="mailto:quintinou67@hotmail.fr" class='barre'>Nous Contacter</a><img src="mail.jpg" width="23px" height="23px"/>
	<a href="A propos.html" class='barre'>A propos</a><img src="A propos.jpg" width="23px" height="23px"/>
	</div>
	
	
	<div id="menu"> 
	<a href="GalerieImages.html" class='barre'>Galerie d'images</a><img src="galerie1.png" width="23px" height="23px"/>
	<a href="" class='barre'>Connexion</a><img src="connexion.jpg" width="23px" height="23px"/>
	</div> 
	
                 
	<div id="contenue">
	<br/><br/><br/>
	<h2>Bienvenue sur le site du Lycée Marie Curie</h2>
	
	<img src="rose.gif" border="0" align="right" width="60" height="60"/>
	
	
	
<!--p><img src="loading.gif" width="220" height="19" /></p>-->
 
 
  
</body>
</html>



Mon code CSS :


body
{
width: 100%;
margin: auto;
margin-bottom: 20px;
background-color: #FFF;
font-family:'Trebuchet MS',Verdana,Tahoma,sans-serif;
font-size: .8em;
color: #1F1F1F;
}

img, img a
{
border: none;
vertical-align: middle;
}


#header
{
height: 130px;
background: url("header.jpg");
background-repeat: repeat-x no-repeat; 
clear: both;
}


.header_gauche img
{
height: 130px;
margin-left: 12px;
} 


.texte_header 
{
margin-bottom: 20px;
font-family: Monotype Corsiva;
font-size: 17px;
color: #F1F4F3;
margin-right: 50%;
float: right;
}


#ombre
{
	background: url("http://www.siteduzero.com/images/designs/2/bg_debut_contenu.png") repeat-x 0% -20px;
	background-position: 100% -20px;
	padding: 15px 10px;
}

#menu
{
	position: relative;
	top: 10px;
	float: left;
	height: 24px;
	padding-top: 4px;
	padding-left: 10px;
	padding-right: 20px;
	margin-right: 10px;
	margin-left: 10px;
	background-color: white;
	background-repeat: repeat-x;
	border: 1px solid #8e8e8e;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

#menu A
{
	height: 24px;
	cursor: pointer;
	font-family: Trebuchet MS;
	font-size: 14px;
	color: #505050;
	padding-left: 10px;
	text-decoration: none;
}



#menu A:hover
{
	color: #9F479C;
	font-family: Arial black;
}


#menu
{
	position: relative;
	top: 10px;
	float: left;
	height: 24px;
	padding-top: 4px;
	padding-left: 10px;
	padding-right: 20px;
	margin-right: 10px;
	margin-left: 10px;
	background-color: white;
	background-repeat: repeat-x;
	border: 1px solid #8e8e8e;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

#menu A
{
	height: 24px;
	cursor: pointer;
	font-family: Trebuchet MS;
	font-size: 14px;
	color: #505050;
	padding-left: 10px;
	text-decoration: none;
}





#menu A:hover
{
	color: #9F479C;
	font-family: Arial black;
}



h2
{
color: #F23238; /*1877D5*/
margin-left: 30px;
font-size: 1.84em;
font-weight: 100;
}


#contenu
{
margin-top: 30px;
margin-bottom: 25px;
margin-left: 30px;
margin-right: 25px;
font: 15px normal Arial;
}





Donc voila j'aimerai que mon design soit accessible à tous, à toutes les résolutions d'écran.

Merci de votre aide
Bonjour et bienvenue,

Voici un article qui pourra t'aider à résoudre ton problème :
Prévoir un site pour toutes les résolutions

Par rapport à ton entête, tu as ceci, background-repeat: repeat-x no-repeat; qui doit poser problème... C'est soit l'un ou l'autre. J'imagine que tu ne souhaites pas que ton background se répète.

Pour le reste, je t'invite à lire l'article citée plus haut et à parcourir la section "apprendre". Smiley cligne
Salut,

alors j'ai essayé la méthode mais les choses ne font que empirer.

En effet le contenu est adapté mais mon logo descend, mon texte se déplace n'importe ou etc...

Quelqu'un peut il m'aider ?
Sujet clos
Aller à