Je tente en vain depuis pas mal de temps de rendre la page adaptable lorsqu'on la réduit.
J'ai créé une mise en forme très basique afin de m'exercer mais beaucoup de problème lors du redimensionnement de la fenêtre plus un footer qui laisse un grand écart avec la corps de la page ... Bref j'ai besoin de vos précieux conseils
Merci d'avance !
CODE HTML
<!DOCTYPE html>
<html>
<head>
<title>Site responsive</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<!--<img src="images/noir.jpg" width="100%" height="200px" alt="banniere"> Remplacer par une couleur pour ne pas perdre l'agencement !-->
</header>
<div id="titre">
<h1>Titre du site</h1>
<h2>Sous titre du site</h2>
</div>
<nav>
<ul>
<li><a href="index.html" class="active">Accueil</a></li>
<li><a href="#">A propos</a></li>
<li><a href="#">S'inscrire</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section>
<div id="form_connexion">
<form action="" method="post">
<fieldset>
<legend>Connexion</legend>
<input type="text" name="pseudo" placeholder="Pseudo"><br/>
<input type="password" name="pass" placeholder="Mot de passe"><br/><br/>
<input type="submit" name="login" value="Connexion">
</fieldset>
</form>
</div>
<div id="corps">
<p>
Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse.
Quare hoc quidem praeceptum, cuiuscumque est, ad tollendam amicitiam valet; illud potius praecipiendum fuit, ut eam diligentiam adhiberemus in amicitiis comparandis, ut ne quando amare inciperemus eum, quem aliquando odisse possemus. Quin etiam si minus felices in diligendo fuissemus, ferendum id Scipio potius quam inimicitiarum tempus cogitandum putabat.
Isdem diebus Apollinaris Domitiani gener, paulo ante agens palatii Caesaris curam, ad Mesopotamiam missus a socero per militares numeros immodice scrutabatur, an quaedam altiora meditantis iam Galli secreta susceperint scripta, qui conpertis Antiochiae gestis per minorem Armeniam lapsus Constantinopolim petit exindeque per protectores retractus artissime tenebatur.
Nam sole orto magnitudine angusti gurgitis sed profundi a transitu arcebantur et dum piscatorios quaerunt lenunculos vel innare temere contextis cratibus parant, effusae legiones, quae hiemabant tunc apud Siden, isdem impetu occurrere veloci. et signis prope ripam locatis ad manus comminus conserendas denseta scutorum conpage semet scientissime praestruebant, ausos quoque aliquos fiducia nandi vel cavatis arborum truncis amnem permeare latenter facillime trucidarunt.
Advenit post multos Scudilo Scutariorum tribunus velamento subagrestis ingenii persuasionis opifex callidus. qui eum adulabili sermone seriis admixto solus omnium proficisci pellexit vultu adsimulato saepius replicando quod flagrantibus votis eum videre frater cuperet patruelis, siquid per inprudentiam gestum est remissurus ut mitis et clemens, participemque eum suae maiestatis adscisceret, futurum laborum quoque socium, quos Arctoae provinciae diu fessae poscebant.
In his tractibus navigerum nusquam visitur flumen sed in locis plurimis aquae suapte natura calentes emergunt ad usus aptae multiplicium medelarum. verum has quoque regiones pari sorte Pompeius Iudaeis domitis et Hierosolymis captis in provinciae speciem delata iuris dictione formavit.
Quam ob rem vita quidem talis fuit vel fortuna vel gloria, ut nihil posset accedere, moriendi autem sensum celeritas abstulit; quo de genere mortis difficile dictu est; quid homines suspicentur, videtis; hoc vere tamen licet dicere, P. Scipioni ex multis diebus, quos in vita celeberrimos laetissimosque viderit, illum diem clarissimum fuisse, cum senatu dimisso domum reductus ad vesperum est a patribus conscriptis, populo Romano, sociis et Latinis, pridie quam excessit e vita, ut ex tam alto dignitatis gradu ad superos videatur deos potius quam ad inferos pervenisse.
Ex his quidam aeternitati se commendari posse per statuas aestimantes eas ardenter adfectant quasi plus praemii de figmentis aereis sensu carentibus adepturi, quam ex conscientia honeste recteque factorum, easque auro curant inbracteari, quod Acilio Glabrioni delatum est primo, cum consiliis armisque regem superasset Antiochum. quam autem sit pulchrum exigua haec spernentem et minima ad ascensus verae gloriae tendere longos et arduos, ut memorat vates Ascraeus, Censorius Cato monstravit. qui interrogatus quam ob rem inter multos... statuam non haberet malo inquit ambigere bonos quam ob rem id non meruerim, quam quod est gravius cur inpetraverim mussitare.
Orientis vero limes in longum protentus et rectum ab Euphratis fluminis ripis ad usque supercilia porrigitur Nili, laeva Saracenis conterminans gentibus, dextra pelagi fragoribus patens, quam plagam Nicator Seleucus occupatam auxit magnum in modum, cum post Alexandri Macedonis obitum successorio iure teneret regna Persidis, efficaciae inpetrabilis rex, ut indicat cognomentum.
Fuerit toto in consulatu sine provincia, cui fuerit, antequam designatus est, decreta provincia. Sortietur an non? Nam et non sortiri absurdum est, et, quod sortitus sis, non habere. Proficiscetur paludatus? Quo? Quo pervenire ante certam diem non licebit. ianuario, Februario, provinciam non habebit; Kalendis ei denique Martiis nascetur repente provincia.
</p>
</div>
<aside>
<p>
Sed si ille hac tam eximia fortuna propter utilitatem rei publicae frui non properat, ut omnia illa conficiat, quid ego, senator, facere debeo, quem, etiamsi ille aliud vellet, rei publicae consulere oporteret?
Quam ob rem cave Catoni anteponas ne istum quidem ipsum, quem Apollo, ut ais, sapientissimum iudicavit; huius enim facta, illius dicta laudantur. De me autem, ut iam cum utroque vestrum loquar, sic habetote.
Montius nos tumore inusitato quodam et novo ut rebellis et maiestati recalcitrantes Augustae per haec quae strepit incusat iratus nimirum quod contumacem praefectum, quid rerum ordo postulat ignorare dissimulantem formidine tenus iusserim custodiri.
</p>
</aside>
<article>
<p>
Sed si ille hac tam eximia fortuna propter utilitatem rei publicae frui non properat, ut omnia illa conficiat, quid ego, senator, facere debeo, quem, etiamsi ille aliud vellet, rei publicae consulere oporteret?
Quam ob rem cave Catoni anteponas ne istum quidem ipsum, quem Apollo, ut ais, sapientissimum iudicavit; huius enim facta, illius dicta laudantur. De me autem, ut iam cum utroque vestrum loquar, sic habetote.
Montius nos tumore inusitato quodam et novo ut rebellis et maiestati recalcitrantes Augustae per haec quae strepit incusat iratus nimirum quod contumacem praefectum, quid rerum ordo postulat ignorare dissimulantem formidine tenus iusserim custodiri.
</p>
</article>
<div id="logo">
<p><img src="images/html.png" width="100px" height="100px"></p>
<p><img src="images/css.png" width="100px" height="100px"></p>
</div>
</section>
<footer>
<div id="footer_gauche">
<ul>
<p class="menu_footer">Menu gauche</p>
<li>liens 1</li>
<li>liens 2</li>
<li>liens 3</li>
</ul>
</div>
<div id="footer_middle">
<ul>
<p class="menu_footer">Menu central</p>
<li>liens A</li>
<li>liens B</li>
<li>liens C</li>
</ul>
</div>
<div id="footer_droit">
<ul>
<p class="menu_footer">Menu droit</p>
<li>liens 4</li>
<li>liens 5</li>
<li>liens 6</li>
</ul>
</div>
</footer>
</body>
</html>
Il faut tout revoir depuis le début, c'est un sacré capharnaüm, et il y a de nombreuses notions que tu n'as pas encore assimilées. par exemple les élément flottants du footer, le dernier est float-right, donc il doit être avant les deux autres dans le code, l'erreur montre que tu n'as pas compris la notion de flux. Dans la CSS de nombreux width:100% inutiles voire dangereux. l'article en position absolute, montre que tu n'as pas compris ce positionnement, et lui affecter une largeur de 15%, 15% de quoi ? pourquoi ? les marges et dimensions parfois en % parfois en pixels, grosse pagaille etc.
Pour avoir une page responsive, il faut utiliser dans la plupart des cas les media queries, ce qui n'est pas le cas ici
Fais un schéma de base, largeur normale (3 colonnes) et largeur réduite (1 seule colonne), cherche des docs et tutos sur les sites en 3 colonnes, il y a plusieurs manières de structurer l'affaire
Bon courage, header et nav sont presque bons, il faut juste que tu simplifies et rendes logique le corps de la page
Petit soucis, en diminuant la taille au max les liens s'empilent un peu bizarement !
- Edité par UnknowTchutti 19 septembre 2017 à 11:13:12
Tchutti's rules
Site responsive
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.