Deuc colonne avec les divs

Fermé
gigigigi_1842 Messages postés 6 Date d'inscription dimanche 13 janvier 2019 Statut Membre Dernière intervention 20 mai 2019 - Modifié le 17 janv. 2019 à 10:31
 retmas - 17 janv. 2019 à 20:34
Bonjour,

Je suis nouvelle en programmation, et j'essaie sur cette page de faire de colonnes :
j'ai besoin d'avoir le texte fixe d'un côté et les images qui remplissent la page de l'autre côté, qui défilent quand on descend dans la page.
Pour le moment j'ai réussi a fixer le texte à gauche et à faire défiler une première image, mais cette image est beaucoup trop grande pour la page. J'ai essayé de modifier la taille en css mais ça ne fonctionne pas, help !
Voilà le code:


<html>
<head>
<title>Studio Schoupspif-Vermilion Sands</title>
<meta charset="Utf-8">
<style type="text/css" media="screen">
body {
background-color: black;
color: #db272e;
font-family: eczar;
}
#vermilionsands1 {
height: 20vw
width:auto;
}
</style>
</head>
<body>
<div style="float:left;">
<img src="couv vermillon sand.jpg" id="vermilionsands1">
</div>
<div style="float:left;position: fixed;">
<p>Vermilion Sands est une édition bilingue adaptée du texte de J.G Balard.<br>
</p>
</div>
</body>
</html>


Désolée que ça l'affiche d'une manière aussi crade,
Merci pour votre aide !
A voir également:

1 réponse

Salut, déjà cec ne peut pas marcher:
float:left;position: fixed;
Soit vous indiquez un positionnement flottant(le bloc se réfère à celui de droite ou gauche pour se placer à côté) soit cous indiquez une position fixé(rien ne bouge même si on scrolle la page l'élément reste à la même positon). C'est donc contradictoire ce que vous écrivez.

Il vous manque sérieusement des connaissances sur le positionnement. Commencez par faire celui ci avec les marges internes et externes, ça reste le plus simple donc la meilleure façon de faire dans bien des cas.

Sinon: https://www.qwant.com/?q=positionnement+CSS&t=web

Pour forcer une barre de défilement(ce qui est autre chose qu'un défilement qui est une animation pour moi) vous avez la propriété CSS overflow (définit le comportement d'un élément lorsque le contenu déborde de la taille qui lui est accordé).

Je pense que vous avez besoin d'approfondir vos connaissances en CSS car vous posez vraiment des questions de bases et avez de très mauvais réflexes dans votre HTML. Div est à éviter, cette balise n'a aucune valeur sémantique donc vous pouvez la remplacer par la balise associé à la désignation du contenu(section, article etc... pour des contenus globaux, p pour du texte etc...).

Plus grave encore il faut vous rappeler l'imbrication de balise.
Ainsi plutôt que d'avoir 2 éléments directement dans le body il est plus clair et mieux(car explicite) de créer un container qui les regroupent comme ceci par exemple:

<article>
<h2>Titre en rapport avec le contenu<h2>
<p>texte qui est à gauche</p>
<article>
<h3>Des images
<h3>
...<img src=... /><!-- les images ici -->
</article>
</article>


J'espère que vous comprenez le principe. C'est du pur HTML et la base du référencement. Vous pouvez passer vos fichiers dans un validateur pour vérifier qu'ils sot correctement formés syntaxiquement et sémantiquement ici:https:https://validator.w3.org/
Et pour vérifier que vous avec une table des matières correcte(avec titre là où il faut donc un référencement de ceux ci) sur des sites comme celui ci:
//www.quirksmode.org/dom/contents.html
0