Problème alignement texte CSS, Div... pour un CV

Bonjour tout le monde,

Je débute complètement en css sous DW.
Je réalise actuellement mon site web personnel et la rubrique qui me pose problème au niveau de la mise en page est celle correspondant à mon CV.
Le code que j'ai bidouillé devrait je pense provoquer une belle crise de rire pour qui maîtrise un tantinet le langage CSS. Dans tous les cas, je tiens déjà à remercier Alsacréations ; c'est quand même via ce site que j'ai pu acquérir mes premières connaissances... !

J'en viens donc au fait :

Voici donc la page web concernée : http://www.nicolasmuller.com/nicolasmuller/biographie.html

A priori pas trop de problème me direz-vous... Sauf que quand je visualise cette même page sur un autre écran en l'occurence sur un smartphone, voici ce que j'obtiens... (image en pj)



Toutes les lignes "années" sont décalées.

En tout, j'ai crée 3 div ;
- une première correspondant aux titres ex : Expositions personnelles
- une deuxième correspondant aux années ex : 2006, 2005, 2004 etc...
- une troisième correspondant aux lignes de texte

#titre_bio {
	margin-left:0px;
	position:relative;
	white-space:normal;
	width:100%;
}


#annee_bio {
	float:left;
	position:relative;
	white-space:normal;
	margin-left:0px;
	margin-bottom:40px;
	width:8%;
	white-space:normal;
}

#txt_bio {
	margin-left:50px;
	position:relative;
	white-space:normal;
	width:92%;
}

Quelqu'un pourrait m'expliquer quelle pourrait être la première piste à suivre pour éviter cet affichage pourri sur un écran d'une autre résolution (en l'occurrence sur smartphone ou tablette) ?

Merci beaucoup d'avance !!!!!!!!

Nisage
Modifié par nisage (30 Dec 2016 - 11:25)

Hello,
Il y a pas mal de corrections à faire dans le code html, par exemple des ID multiples, à remplacer par des classes, des balises inutiles, etc.
La page n'est pas du tout responsive :
https://search.google.com/search-console/mobile-friendly?utm_source=mft&utm_medium=redirect&utm_campaign=mft-redirect&hl=fr&id=O0hAyGMxpLaM5RQZNlJ3KA

En ce qui concerne la structure année/texte, L'idée d'utiliser des <br /> pour aligner chaque année avec la première ligne du contenu n'est pas bonne : toute modif de texte oblige à modifier les <br />, si certains écrans affichent la police un peu différemment, on risque de se retrouver avec un nombre de lignes différent et de décaler les années, et surtout on se prive de modifier les propriétés des années, padding, margin, taille de police différente de celle des textes, etc.
En plus, pour manipuler les couple année/texte, ça devient très compliqué, par exemple intervertir deux lignes, ajouter ou supprimer un élément année/texte.
Et le jour où on veut modifier la mise en page, on est bien embêté.

Je pense qu'il faut structurer totalement différemment le code, et raisonner en lignes et non en colonnes, sous la forme par exemple :

<div class="titre_bio">Expositions personnelles</div>
<div class="ligne">
     <div class="annee">2016</div>
     <div class="txt_bio">...<div/>
</div>

On peut mettre "ligne" en flex, ou bien utiliser inline-block pour l'année et le texte,
voire utiliser des table-cell et autres

On aura ainsi une maîtrise totale de la mise en page, avec des éléments année/texte parfaitement identifiés et indépendants, maintenables, manipulables, supprimables, etc.

Un grand merci pour cette réponse ; je vais essayer de regarder le flex pour travailler mes lignes.

Bonjour.

Je ne suis pas une spécialiste du mobile mais... vous avez mis une largeur de 1200px à div#conteneur avec une margin-left de 50px...

Je ne consulte pas votre site sur un téléphone portable mais 1250px, cela sort nettement des limites de mon écran... D'une façon générale, s'il n'est pas nécessaire de fixer les limites d'une 'boîte' HTML, il vaut mieux éviter : elle s'adapte naturellement aux limites de son environnement.

Votre site est relativement simple, il ne devrait pas être difficile à adapter sur moyens et petits écrans grâce, en autres, aux media queries...


Modifié par Zelena (30 Dec 2016 - 12:35)

Merci aussi pour votre commentaire ; je vais regarder tout cela attentivement.