27257 sujets

CSS et mise en forme, CSS3

J'ai déjà posté sur le calcul d'une marge (sans succès), mais je reviens avec une autre tentative et je suis bloqué. Mon but est d'aligner le bloc rouge 'TELECHARGEMENT' à la hauteur du bloc '500x250'.
Je vous joins upload/1596196826-23311-capturedaeacran2020-07-31aa11.png le code.
Merci
upload/1596196782-23311-capturedaeacran2020-07-31aa11.png
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title>
<style type="text/css">
.container {
	background-color: #0F0;
	width: 1010px;
	margin-right: auto;
	margin-left: auto;
	/*font-size:0;*/
}
.col-gauche {
	/*display: inline-block;*/
	width: 500px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 0.75em;
	color: #000;
	float: left;
}

.col-droite {
	background-color: #FF0;
	/*display: inline-block;*/
	margin-left: 10px;
	width: 500px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 0.750em;
	color: #000;
	float: left;
}

#telechargement {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #FFF;
	background-color: #F00;
	height: 100px;
	width: 500px;
	position: relative;
}
</style>

<script type="text/javascript">
function mise_en_page()
{
var hauteur = document.getElementById("bloc3").offsetTop;
alert(hauteur);
var hauteur_texte = document.getElementById("bloc0").offsetHeight;
alert(hauteur_texte);
//document.getElementById("telechargement").offsetTop = hauteur;
//autre essai style.top
document.getElementById("telechargement").style.top = hauteur + 'px;';
}	
</script>



</head>

<body onLoad="mise_en_page()">
<div class="container">
  <div class="col-gauche">
  <div id="bloc0">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at sapien eget velit facilisis mattis. Donec sagittis metus at metus mattis, eget venenatis massa ullamcorper. Sed blandit justo magna, ac hendrerit ante egestas in. Maecenas risus felis, lacinia a ultrices non, aliquam luctus purus. Aenean in varius ex. Nunc venenatis fermentum convallis. Integer eu ultricies orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at sapien eget velit facilisis mattis. Donec sagittis metus at metus mattis, eget venenatis massa ullamcorper. Sed blandit justo magna, ac hendrerit ante egestas in. Maecenas risus felis, lacinia a ultrices non, aliquam luctus purus. Aenean in varius ex. Nunc venenatis fermentum convallis. Integer eu ultricies orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at sapien eget velit facilisis mattis. Donec sagittis metus at metus mattis, eget venenatis massa ullamcorper. Sed blandit justo magna, ac hendrerit ante egestas in. Maecenas risus felis, lacinia a ultrices non, aliquam luctus purus. Aenean in varius ex. Nunc venenatis fermentum convallis. Integer eu ultricies orci.</div>
  <div id="telechargement">TÉLÉCHARGEMENT 500x100</div>
  </div><!--col-gauche-->
  <div class="col-droite">
  <div id="bloc1"><img src="500x100.png" width="500" height="100"></div> <div id="bloc2"><img src="500x100.png" width="500" height="100" style="margin-top:10px;"></div><div id="bloc3"><img src="500x250.png" width="500" height="250" style="margin-top:10px;"></div></div><!--col-droite-->
</div><!--container-->
</body>
</html>


Une bonne image c'est plus simple.
Modérateur
Salut,

Il ne suffit pas de donner une height (ou une min-height pour plus de souplesse) de 200px (= la hauteur des deux premières images) à .bloc0 ? Smiley confus
Merci pour ta réponse.
Je pense que je n'ai pas été clair. Je ne maîtrise pas la hauteur du bloc de texte (bloc0). Mon essai est de calculer (via javascript) la position en hauteur du bloc3 et ensuite d'aligner le bloc 'telechargement' avec cette valeur.
Modérateur
Hello, perso j'utiliserais plutôt grid comme ça tu n'auras pas de calcul à faire. Avec 2 lignes et 2 columns, tu auras un résultat assez vite Smiley smile . Cela demande évidement de retravailler ta structure mais ça me semble le plus robuste.

Si tu pars dans du JS, tu dois regarder le offset top de ton bloc de droite, regarder celui du bloc de gauche, et appliquer le delta sous forme de margin-top. Après tu auras des problème si tu obtiens une valeur négative, tu devras appliquer un margin-top à ton élément de droite… vérifier le tout au resize, bref beaucoup de soucis alors que grid fera ça pour toi sans broncher Smiley smile
Complément d'information...
Je n'arrive pas à récupérer le margin-top du bloc3 :
var cible_margintop = document.getElementById("bloc3").style.marginTop;
bizzare ;-((((((
Par contre je ne peux affecter le margin-top du bloc 'telechargement' avec une valeur calculée, cela fonctionne si je passe une valeur en dur...
document.getElementById("telechargement").style.marginTop = variable;
document.getElementById("telechargement").style.marginTop = "31px";
re-bizzare ;-((((((((
Modérateur
luxojr a écrit :

Par contre je ne peux affecter le margin-top du bloc 'telechargement' avec une valeur calculée, cela fonctionne si je passe une valeur en dur...
document.getElementById("telechargement").style.marginTop = variable;
document.getElementById("telechargement").style.marginTop = "31px";

Quelle est ta variable ? Il faut que ce soit un string avec "px" hein, pas un nombre. Ou alors faire :
document.getElementById("telechargement").style.marginTop = variable + 'px';


Sinon
luxojr a écrit :
Je pense que je n'ai pas été clair. Je ne maîtrise pas la hauteur du bloc de texte (bloc0). Mon essai est de calculer (via javascript) la position en hauteur du bloc3 et ensuite d'aligner le bloc 'telechargement' avec cette valeur.

Je ne comprends vraiment pas ton entêtement a vouloir passer par du Js. Sur ton autre sujet je t'avais également conseillé le grid ça demande pas une énorme refonte vu ton DOM. Mais même avec juste un height comme je t'ai dit plus haut ça répond a ton besoin non ?
J'ai bien compris que tu ne maîtrisais pas la hauteur de ton bloc de texte mais tu connais précisément la hauteur des bloc de la colonne non ? Vu qu'ils sont en dur... Le Js est utilise pour des choses dynamiques ou non fixes mais là, dans ta colonne de droite, c'est vachement fixe comme hauteur non ? 2 images de 100px et 2 fois 10px de margin
https://jsfiddle.net/undless/ykcq0h62/
Je ne vois pas ce qui bloc dans cette solution... j'ai loupé un truc ?
Modifié par _laurent (31 Jul 2020 - 16:50)