Adapter à toutes les tailles de naviguateurs HTML

Résolu/Fermé
Balou l'ours roux Messages postés 86 Date d'inscription mercredi 15 mai 2013 Statut Membre Dernière intervention 17 novembre 2013 - 16 nov. 2013 à 16:14
Balou l'ours roux Messages postés 86 Date d'inscription mercredi 15 mai 2013 Statut Membre Dernière intervention 17 novembre 2013 - 17 nov. 2013 à 07:37
Bonjour,

j'aimerai savoir comment faire pour que lorsque l'on rétrécit le naviguateur, les images et textes restes sur la même ligne et qu'un scroll apparaissent, car pour le moment, lorsque je rétrécis le naviguateur, toutes les images et textes reviennent à la ligne.

Merci d'avance :)

4 réponses

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
17 nov. 2013 à 00:14
Bonjour

tu rajoute ceci

après <head>

# contener {
margin:0;
padding:0;
width: 960px; /***largeur fixée à 960 px***/
}


ou

# contener {
margin:0;
padding:0;
width: 100%;
min-width: 960px; /*** largeur de 100 % mais pas plus petite que 960px;***/
}

apres <body>
<div id="contener">

avant </body>
</div>

En fait tout le site est mis dans un bloc contener auquel on met une largeur fixe ou une largeur minimale fixe avec width ou min-width
1
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
16 nov. 2013 à 17:38
Bonjour

il faut faire cela avec le fichier CSS

width: 960 px; au lieu de witdh: 100%;

n'ayant ni l'adresse de ton site ni le code je ne peux t'en dire plus.

donne l'URL de ton site
0
Balou l'ours roux Messages postés 86 Date d'inscription mercredi 15 mai 2013 Statut Membre Dernière intervention 17 novembre 2013 12
Modifié par Balou l'ours roux le 16/11/2013 à 18:33
<html>

<head>
<style>
body{
width:100%;
padding:0px;
margin:0px;
background-image:url(http://crearmor.com/media/com_hikashop/upload/lin%2012%20fils%20blanc%20casse_747099468.jpg);
}
#meilleures{
height:400px;
width:1000px;
background-color:red;
border-radius:5px;
}
#TOP{
top:95px;
position:relative;
display:inline;
padding:10px;
}
#TOP img{
position:relative;
top:-50px;
left:75px;
}
#TOP a{
position:relative;
left:-125px;
}
#trait{
width:100%;
height:5;
background-image:url(http://www.ericwatier.info/ew/wp-content/uploads/modeles/200809/gris001.jpg);
}
#head{
padding:0px;
margin:0px;
width:100%;
height:50px;
background-image:url(http://www.psd-file.com/images/tuto_icone_glossy/01.jpg);
}
#rubriques{
float:right;
}
#rubriques ul li{
display:inline;
font-size:20px;
font-family:Tekton Pro;
padding-left:10px;
padding-right:10px;
height:100px;
width:auto;
}
a{
text-decoration:none;
color:white;
}
a:hover{
text-decoration:underline;
color:white;
}

</style>
<title> Univers Fashion - Accueil</title>
</head>
<body>
<div id="head">
<div id="rubriques">
<ul><font color="white">
<li> <b><a href="index.php">Accueil</a> </b></li>
<li> <b><a href="#">Homme</a> </b></li>
<li><b><a href="#"> Femme</a> </b> </li>
<li><b> <a href="#">Se connecter</a></b></li>
<li> <b><a href="#">S'inscrire </a></b></li>
<li><b><a href="#"> Rechercher</a></b> </li>
</font>
</ul>
</div>
</div>
<div id="logo">
<img src="logo1.png">
</div>
<div id="trait">
</div>
<center>
<div id="meilleures">
<?php
$connect = mysql_connect('localhost','root','');
mysql_select_db('fashion');
$top_query= mysql_query("SELECT * FROM stock ORDER BY Quantite_vendu DESC LIMIT 5");
$top_rows = mysql_num_rows($top_query);
while($top = mysql_fetch_array($top_query)){
echo '<div id="TOP"><a href="#"><img src="blank.png" width=150px height=200px>'.$top['Ref'].'</div></a>';
}
?>
</div>
</center>
</body>
</html>
0
Balou l'ours roux Messages postés 86 Date d'inscription mercredi 15 mai 2013 Statut Membre Dernière intervention 17 novembre 2013 12
17 nov. 2013 à 07:37
D'accord, merci :))
0