Deux blocs de section côte à côte CSS ??

Deux blocs de section côte à côte CSS ?? - HTML/CSS - Programmation

Marsh Posté le 12-09-2018 à 03:38:54    

Bonjour, j'ai besoin d'aide avec cette page Html et Css, je souhaite mettre les sections "texte" et "carte" une à côté de l'autre mais la section carte reste toujours plus basse comparée à l'autre. Avez-vous des idées de ce qui pourrait être la cause ??

Code :
  1. <!DOCTYPE html>
  3. <html lang="fr">
  5. <head>
  6. <link rel="stylesheet" type="text/css" href="../CSS/tourisme.css">
  7. <meta charset="utf-8">
  9.     <title>
  11.     Tourisme
  13.     </title>
  15. </head>
  17. <body>
  20. <header>
  24. <section id="logo" >
  28. <img src="../Images/Carnet.png" height="40" width="120" alt="erreur" >
  30. <h1>Carnet de voyage</h1>
  32. <img src="../Images/pont.png" alt="erreur" height="200" width="1000" >
  34. </section>
  37. <section id="navigationh">
  39. <ol>
  40.  
  41. <ol reversed>
  43. <li> <a href="index.html" > Accueil </a> </li>
  45.     <li> <a href="musee.html" > Musée Livre </a> </li>
  47.     <li> <a href="#contact" > Contact </a> </li>
  51. </ol>
  55. </section>
  59. </header>
  61. <section id="texte" >   
  63.    
  64. <h3>La croissance du tourisme</h3>
  66. <p>La croissance du tourisme urbain aux États-Unis à la fin du XIX siècle début XXe siècle représentait une transformation culturel majeure concernant
  67.  l'espace urbain, les loisirs et la commercialisation. Dans les années 1850, le tourisme aux États-Unis a été établi à la fois comme une activité
  68.  culturelle et comme une industrie2. Bien que les agences de voyage et les voyages organisés n'existaient pas jusque dans les années 1870 et 1880,
  69.  les entrepreneurs de différents secteurs, des propriétaires d'hôtels en passant par les agents de lignes ferroviaires jusqu'aux artistes et écrivains
  70.  reconnaissaient que l'on pouvait faire des profits à partir de cette activité touristique prospère. L'augmentation du nombre de trains de locomotive
  71.  à vapeur pendant les années 1800 permit aux touristes de voyager plus facilement et rapidement.</p>
  73. <p>Aux États-Unis, plus de 4 500 kilomètres (2 800 miles)
  74.  de chemin de fer ont été construits en 1840 et en 1860, toutes les principales villes de l'est des États-Unis étaient reliées par le train. En 1869
  75.  la première connexion ferroviaire trans-américaine fut effectuée4. Le Parc Yosemite a été développé en tant qu'attraction touristique à la fin des
  76.  années 1850, début des années 1860 pour un public qui voulait une icône et un lieu national pour symboliser la merveille exotique de sa région2.
  77.  Pour la première fois, la photographie joua un rôle important dans le développement des attractions touristiques, rendant possible la distribution
  78.  de centaines d'images mettant en avant les differents lieux d'intérêts.</p>
  80. <h3>Visite des principales villes</h3>
  82. <p>New York, Chicago, Washington, D.C. et San Francisco, toutes les principales villes des États-Unis,
  83. attirèrent dès les années 1850 un grand nombre de touristes5. La population de New York augmenta de 300 000 habitants
  84.  en 1840 à 800 000 habitants en 18505. Chicago vécut une dramatique augmentation de 4 000 résidents en 1840 à 300 000 en 1870.
  85.  En 1800, les dictionnaires publièrent pour la première fois le mot « touriste », qui désignait ceux qui partaient en Europe ou
  86.  faisaient un voyage autour des merveilles naturelles à New York et la Nouvelle-Angleterre.
  88. <p>L'absence du tourisme urbain au XIXe
  89.  siècle était due au fait que les villes américaines manquaient (ce qui n'était pas le cas en Europe) de lieux architecturaux et artistiques.
  90.  Les villes américaines avaient tendance à déplaire par leur « laideur » au lieu d'intimider par son inspiration ou son plaisir esthétique5.
  91.  Certains touristes étaient fascinés par l'augmentation rapide de nouvelles zones urbaines : « C'était quelque chose d'absorbant d'admirer
  92.  le processus de l'évolution du monde ; à la fois la formation du monde naturel et du monde conventionnel », écrira en 1837 l'écrivain anglaise Harriet
  93.  Martineau en 18372.</p>
  95. <h3>L’industrie du voyage</h3>
  97. <p>L'industrie du voyage et du tourisme aux États-Unis fut parmi les premières victimes commerciales des attentats du 11 septembre 2001,
  98.  une série d'attentats terroristes sur le sol américain. Les terroristes utilisèrent 4 lignes aériennes commerciales comme arme de destruction
  99.  pendant les attaques qui tuèrent près de 3 000 personnes6. Une semaine après la reprise des vols, le nombre de passagers chuta de près de 45 %,
  100.  passant de 9 millions la semaine précédant les attentats à 5 millions6.</p>
  102. <p>Les hôtels et agences de voyage enregistrèrent en grand nombre d'annulations
  103. à travers le monde. L'industrie hôtelière subit une perte de revenus estimée à 700 millions de dollars, quatre jours après les attentats6. La situation
  104. se rétablit les mois suivants puisque la Réserve fédérale s'occupa de maintenir le système financier à flot. Le Congrès américain distribua une aide der
  105. cinq milliards de dollars aux compagnies aériennes nationales et dix milliards de dollars en garanties d'emprunt leur permettant de voler6.
  106. Aux États-Unis, le tourisme est soit l'un des premiers, seconds ou troisièmes plus gros employeur dans 29 États, employant 7,3 millions de personnes en
  107. 2004, et représentant 1,19 milliard de voyages touristiques en 20057</p>
  109. </section>
  111. <aside id="carte" >
  113. <h3>Carte Amerique</h3>
  115. <img src="../Images/Carte.gif" alt="erreur" >
  117. <ul>
  119. <li>Période Précolombienne</li>
  120. <li>Période Coloniale</li>
  121. <li>Révolution américaine</li>
  124. </ul>
  126. <img src="../Images/facebook.png" alt="erreur" >
  128. <img src="../Images/twitter.png" alt="erreur" >
  130. <img src="../Images/vimeo.png" alt="erreur" >
  133. </aside>
  135. <footer>
  137. <section id="footerg" >
  139. <h3>Mon  dernier voyage</h3>
  141.  Quel souvenir!
  142. le 02 Octobre 2017 
  143. </section>
  145. <section id="footerc">
  147. <h3>Mes photos</h3>
  149. <img src="../Images/photo1.jpg" alt="erreur" >
  151. <img src="../Images/photo2.jpg" alt="erreur" >
  153. <img src="../Images/photo3.jpg" alt="erreur" >
  155. <img src="../Images/photo4.jpg" alt="erreur" >
  157. </section>
  159. <section id="footerd" >
  160. <h3>Sources</h3>
  162. <ul>
  164. <li><a title="Decouverte" target="_blank" href="https://fr.wikipedia.org/wiki/Tourisme_aux_%C3%89tats-Unis" > Decouverte </a> </li>
  166. <li> <a title="Histoire" target="_blank" href="https://fr.wikipedia.org/wiki/Chronologie_des_%C3%89tats-Unis#Ann.C3.A9es_1830" > Histoire </a> </li>
  168. </ul>
  170. </section>
  173. </footer>
  176. </body>
  178. </html>


 

Code :
  1. html{
  2. background-color: lightyellow;
  3. }
  5. #logo {
  6. float: left;
  7. margin-left : 150px;
  8. width: 400px;
  9. }
  11. #navigationh li {
  12. display: inline;
  13. float: none;
  14. text-align: center;
  15. font-size: 12px;
  16. margin-left: 200px ;
  17. padding: 5px 5px 5px;
  18. margin: 5px 5px 5px;
  21. }
  22. #texte {
  23. float:left;
  24. margin-left:150px;
  25. text-align: justify;
  26. padding-top : 50px;
  27. margin-right: 650px
  29. }
  31. #carte {
  32. clear: left;
  33. float: right;
  34. text-align: center;
  35. margin-right: 50px;
  38. }


 
NB: C'est du CSS et du HTML 5 que je fais !


Message édité par niwaz14 le 12-09-2018 à 04:29:57
Reply

Marsh Posté le 12-09-2018 à 03:38:54   

Reply

Marsh Posté le 12-09-2018 à 10:18:07    

Ton bloc #texte n'as pas de largeur (donc il en prend autant que son contenu énorme en demande) et des marges elles aussi conséquentes, donc il ne laisse pas la place aux autres bloc flottant, revoit les bases :
https://www.alsacreations.com/artic [...] bluff.html
 
De plus ton code ne vas pas être très responsive (adaptable au différente résolution comme celle d'un smartphone)...


---------------
D3
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed