28111 sujets

CSS et mise en forme, CSS3

Responsive Web Design sur de l'existant

Bonjour à toutes et tous,

J'ai créer il y a de quelques années, des pages web que je voudrais actualiser aux normes actuelles et la plus importante à mes yeux c'est la définition de ces pages sur des supports plus petits (smartphones, tablettes et surtout notebook...).
Car actuellement mes pages sont définies avec des valeurs fixes (width=1280px, les hauteurs également). N'étant pas un développeur, je ne sais pas comment commencer.

Puis-je les adapter à un format "flottant" ?
Quid de mes images qui sont fixes ?

Qu'en pensez-vous ?

Merci pour votre aide.

Merci



body{
width:1280px;
background:#FFF;
margin:auto;
font-family: Arial;
font-size:14px;
}
 
 
/*Head*/
 
div#headerv{
background: url(images/headAb3.png) no-repeat;
width:1280px;
height:250px;
margin-top:10px;	
}
 
div#headerv img { 
position:absolute; 
display:block; 
top:0; 
left:0; 
right:0; 
bottom:0; 
}
 
.base{
background: url(images/iD_base.png) no-repeat;	
width:226px;
height:226px;
}
 
.btn{
display: block;
float:right;
width:250px;
height:200px;
background-image: url(images/btn4b.png)  ;
margin-right:10px;
margin-top:30px;
}
 
.btn:hover {
float:right;
width:250px;
height:200px;
background-image: url(images/btn5b.png)    ;
margin-right:10px;
margin-top:30px;
}
 
.retour {
width:30px;
height:25px;
background-image: url(images/retour.png)    ;
margin-top:5px;
text-decoration:none;
}


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iD Rechange</title>
<link rel="stylesheet" media="screen" type="text/css" title=" style" href="../../idstyl2b.css" />
</head>
 
<body>
 
	<div id="headerv">
    <a href="doctele/iD_04-2019v4.pdf" target="_blank"><div class="btn"></div></a>
    <a href="arradh_v3.html"><div class="base"></div></a> 
	</div>
</body>
Bonjour,
Pour çà tu as plusieurs possibilités
Flexbox ( je ne sais pas si il y à un tuto ici)
déjà une piste
https://www.alsacreations.com/tuto/lire/1493-CSS3-Flexbox-Layout-module.html

Ou alors sinon les medias-queries tu pars sur des règles @media tel que
/* Sur les écrans, quand la largeur de la fenêtre fait au maximum 1280px */
@media screen and (max-width: 1280px)

/* Sur tous types d'écran, quand la largeur de la fenêtre est comprise entre 1024px et 1280px */
@media all and (min-width: 1024px) and (max-width: 1280px)


Et aussi grid css.
Mais à mon avis si tu aime les données fixe les règles @media c'est bien.
Si tu veut évoluer sur un système qui maintenant passe partout FlexBox
Il existe de nombreux tuto et même un très bon bouquin (CSS 3 Flexbox: Plongez dans les CSS modernes)
Administrateur
Hello,

Ta question mérite de bien savoir et comprendre ce que tu veux faire avant d'entreprendre quoi que ce soit.
Il y a des notions, des concepts et des limitations à connaître.

Je te conseille de débuter par cet article : https://www.alsacreations.com/article/lire/1615-Cest-quoi-le-Responsive-Web-Design-.html

Puis d'enchaîner là dessus : https://www.alsacreations.com/article/lire/1490-Comprendre-le-Viewport-dans-le-Web-mobile.html

De comprendre tout ce qui est décrit ici : https://www.alsacreations.com/astuce/lire/1177-Une-feuille-de-styles-de-base-pour-le-Web-mobile.html

et enfin ensuite te renseigner sur :
- Flexbox
- Grid Layout
- Media Queries

Bref, tu as du pain sur la planche, courage ! Smiley cligne
Sujet clos
Aller à