27214 sujets

CSS et mise en forme, CSS3

Bonjour,
Le haut d'une de mes page est entièrement contenu dans un div que je souhaite conserver.

Je souhaites avoir en plus, dans mon haut de page, un autre div ne faisant pas la largeur de la page et qui soit centré.

Celui-ci contient une image alignée verticalement et calée à gauche.
Et dans ce qui reste de place je souhaite un texte centré ou pas MAIS occupant toute la largeur restante ,je ne sais pas réaliser cela .
Voila ou j'en suis, (j'ai inclus le CSS pour que vous puissiez tester facilement.
Merci d'avance pour vos idées Smiley ravi


<!DOCTYPE html><html lang='fr'><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->
<title>Model type jplyne </title>

<style>
body { 	background-color:#ffffff;font-family:"Times New Roman", Times, serif;color:#000000; font-size:1.4vw;margin:0;border:0;}
div.CentreGeneral{height:auto;width:auto;max-width:900px;margin:auto;text-align:center;}
div.blog {display:flex;border: 1px solid #000000;border-radius: 20px; padding:5px;}
img.blog {width:130px;height:130px;vertical-align: middle;}
p.blog {text-align:center;margin:0;color:#0094db;font-size:  2.5vw;}
span.leTitre {font-family: "Felix Titling", "Times New Roman", Harrington, sans-serif;font-size: 4vw;color:#222224;}

@media (min-width: 750px) and (max-width: 1200px) { 
body { 	font-size:22px;margin:0;border:0;text-align: center;width:auto;}
span.leTitre {font-size: 28px;color:#222224;}
p.blog {text-align:center;margin:0;color:#0094db;font-size:  20px;}
}

@media (max-width:750px){  
body { 	font-size:20px;margin:0;border:0;text-align: center;width:auto;}
span.leTitre {font-size: 24px;color:#222224;}
img,blockquote, pre, textarea, input, iframe, object, embed, video {max-width:100%;}
pre, samp {overflow-wrap: anywhere;}
p.blog {text-align:center;margin:0;color:#0094db;font-size:  20px;}
}
</style>
</head><body>
<div class="CentreGeneral">
  <br /><br />
  <div class="blog"><img      src="http://les-astuces-du-web.com/logos/christele026.png" alt=" " class="blog" />
  <p class="blog"> Un premier texte qui devrait se centrer sur le reste
  <br />Puis un  autre texte  
  <br /> Etc..... ,
  </p>
 </div>
 <br />
 <span class="leTitre">Présentation d' une de mes page</span>
 <br />
</div>
</body></html>


Reproduit ici
https://codepen.io/jplyne/pen/GRoVNRJ
Bonjour,

Je pense qu'un schéma ou dessin serait très utile. J'ai du mal à comprendre votre demande.
allan00958 a écrit :
Bonjour,

Je pense qu'un schéma ou dessin serait très utile. J'ai du mal à comprendre votre demande.

Bonjour et merci de ta réponse,
Que faire en plus Smiley confused , tu copie/colle mon code tu le mets dans toto.htm et tu fais varier par glisser de la fenêtre en plus en mode inspection regardes la zone de droite n'est pas à 100%
En plus j'ai reproduit en codepen ça ne te suffit pas ? c'est moi qui ne comprends pas ta demande, décidément ..... Smiley confus
Je vois....

Il faut supprimer les <br>, ce n'est pas ainsi cette balise s'utilise. Le html est la sémantique, le css le style. Il ne faut pas utilisé les balises html pour la mise en forme. Je mettrais chaque paragraphe dans un <p> pour commencer. Le premier p peut être centré avec un text-align center et le second prendrait toute la largeur automatiquement vu que c'est un élément de type block. L'image peut se placer en position absolue et donner un padding-left au conteneur ou créer un conteneur avec 2 enfants, une div qui contient l'image, l'autre qui content les 2 paragraphes. Le conteneur est mis en display flex, la div qui contient l'image une width de 30 ou 40% et l'autre div qui contient les paragraphes en flex aussi avec flex-direction column.
Modérateur
Bonsoir, tout comme Allan00958 , les br ici sont superflus. Je suis surpris de la structure de ton code. Un span avec une class leTitre , nouveau sur le forum ?

Avec display:flex, ce n'est pas vertical-align:middle qu'il faut utiliser (c'est pour les boite en ligne ou le contenu d'un td/th/table-cell display) mais align-items:center depuis le parent ou des marges verticales en auto pour l'enfant.

En reprenant un peu ton code (structure, span.leTitre devient un hx , br repassés en marge, un div en header , ...) voici probablement quelque chose proche de ce que tu souhaites faire : https://codepen.io/gc-nomade/pen/GRoVXJY

Cela me rappelle aussi ce post https://forum.alsacreations.com/topic-4-86535-1-Resolu-Probleme-de-mise-en-place-des-elements-dun-DIV.html Smiley cligne

cdt
Modifié par gcyrillus (01 Aug 2020 - 22:32)
Meilleure solution
allan00958 a écrit :
Exemple ici: https://jsfiddle.net/L7s8natz/

Merci de ta réponse, mais tu sais trop ancien, je programme en essayant d'évoluer depuis mes débuts ou par exemple les <br /> servaient a sauter une ou deux lignes, tu dis que cela ne se fait plus ?? pourtant je suis dans un DIV ? par ailleurs ton exemple ,merci de l'avoir fait mais il n'est pas du tout responsive ?
gcyrillus a écrit :
Bonsoir, tout comme Allan00958 , les br ici sont superflus. Je suis surpris de la structure de ton code. Un span avec une class leTitre , nouveau sur le forum ?

Avec display:flex, ce n'est pas vertical-align:middle qu'il faut utiliser (c'est pour les boite en ligne ou le contenu d'un td/th/table-cell display) mais align-items:center depuis le parent ou des marges verticales en auto pour l'enfant.

En reprenant un peu ton code (structure, span.leTitre devient un hx , br repassés en marge, un div en header , ...) voici probablement quelque chose proche de ce que tu souhaites faire : https://codepen.io/gc-nomade/pen/GRoVXJY

Cela me rappelle aussi ce post https://forum.alsacreations.com/topic-4-86535-1-Resolu-Probleme-de-mise-en-place-des-elements-dun-DIV.html Smiley cligne

cdt

Tu as bonne mémoire Smiley smile ,en tout cas merci pour cet effort à me dépanner, oui je revient sur ce sujet car AUCUNE solution à ce jour, ne m'a résolu mon problème.j'ai moi même , tu l'a vu, continué à travailler, pour finir avec ma dernière version par revenir vers vous ...
c'est pour cela que je remercie particulièrement ceux et celles qui comme toi, ne cherchent pas à dévier le problème que pausent ceux qui postent ici, mais respectant le contexte à y apporter une solution.
En plus, avec un détail très bien expliqué.

J'ai enfin (je crois) ce qui me va le mieux.
En effet je l'avais dit en son temps, c'est un Ajax qui me renvoie donc en écho , et que je réinjecte dans ma DIV la série de ces encadrés avec Avatar et cela sert de même pour les Tchat, Livre-D'or, Blog etc....
tu comprends que je me battait pour résoudre ce type de composition..

if(Action=="f") 
       {
        document.getElementById('reponse').innerHTML = MonAjax.responseText;
        document.getElementById('load').style.visibility="hidden"; 
         window.scrollTo(0,400);     
       }  

Depuis les années que je navigue sur le web, ceux qui aident en répondant aux questions sont si rares que cela méritait un coup de chapeau Smiley smile
Modifié par Jean-Pierre-Bruneau (02 Aug 2020 - 09:36)