Bordure position

Bonjour,

Je suis nouveau en HTML, ça fait environ 5 jours que j'ai commencé et j'ai crée le site Zozor. Je rencontre un problème, pouvez-vous m'aider svp :

- lorsque je réduit la fenêtre mes textes/paragraphes s'empilent les uns sur les autres...

J'aimerais faire en sorte que lorsque la fenêtre se réduit, le texte disparait s'il n'a pas la place.

voir photo

Ci-joint mon code css et HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css" />
    <title>Zorror</title>
  </head>

  <body>
    
    <header>
      <img class="Logo" src="Images/zozor_logo.png" alt="Logo Zozor">
        <div><h1>Zozor</h1></div>
        <div class="carnets">Carnets de voyage</div>
      <nav>
        <ul>
          <li><a class="ACCUEIL" href="ACCUEIL">ACCUEIL</a></li>
          <li><a class="ACCUEIL" href="ACCUEIL">BLOG</a></li>
          <li><a class="ACCUEIL" href="ACCUEIL">CV</a></li>
          <li><a class="ACCUEIL" href="ACCUEIL">CONTACT</a></li>
        </ul>
      </nav>
    </header>


    <div id="mid">
      <div id="Vacance">Retour sur mes vacances aux Etats-Unis... <a class="Bouton_rouge" href="#">Voir l'article <img src="Images/flecheblanchedroite.png" alt=""></a>
      </div>
    </div>

    <section> 

      <article><img src="Images/ico_epingle.png" alt="Epingle"><h1>JE SUIS UN GRAND VOYAGEUR</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec sagittis massa. Nulla facilisi. Cras id arcu lorem, et semper purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis vel enim mi, in lobortis sem. Vestibulum luctus elit eu libero ultrices id fermentum sem sagittis. Nulla imperdiet mauris sed sapien dignissim id aliquam est aliquam. Maecenas non odio ipsum, a elementum nisi. Mauris non erat eu erat placerat convallis. Mauris in pretium urna. Cras laoreet molestie odio, consequat consequat velit commodo eu. Integer vitae lectus ac nunc posuere pellentesque non at eros. Suspendisse non lectus lorem.</p>
        <p>Vivamus sed libero nec mauris pulvinar facilisis ut non sem. Quisque mollis ullamcorper diam vel faucibus. Vestibulum sollicitudin facilisis feugiat. Nulla euismod sodales hendrerit. Donec quis orci arcu. Vivamus fermentum magna a erat ullamcorper dignissim pretium nunc aliquam. Aenean pulvinar condimentum enim a dignissim. Vivamus sit amet lectus at ante adipiscing adipiscing eget vitae felis. In at fringilla est. Cras id velit ut magna rutrum commodo. Etiam ut scelerisque purus. Duis risus elit, venenatis vel rutrum in, imperdiet in quam. Sed vestibulum, libero ut bibendum consectetur, eros ipsum ultrices nisl, in rutrum diam augue non tortor. Fusce nec massa et risus dapibus aliquam vitae nec diam.</p>
        <p>Phasellus ligula massa, congue ac vulputate non, dignissim at augue. Sed auctor fringilla quam quis porttitor. Praesent vitae dignissim magna. Pellentesque quis sem purus, vel elementum mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas consectetur euismod urna. In hac habitasse platea dictumst. Quisque tincidunt porttitor vestibulum. Ut iaculis, lacus at molestie lacinia, ipsum mi adipiscing ligula, vel mollis sem risus eu lectus. Nunc elit quam, rutrum ut dignissim sit amet, egestas at sem.</p>
      </article>

      <aside>
        <h1>À  PROPOS DE L'AUTEUR</h1>
          <img class="bulle" src="Images/bulle.png" alt="bulle">
          <img class="photo_ane" src="Images/zozor_classe.png" alt="Zozor">
        <p>Laisse-moi le temps de me présenter : je m'appelle Zozor, je suis né un 23 novembre 2005.</p>

          <p>Bien maigre, n'est-ce pas ? c'est pourquoi, aujourd'hui, j'ai décidé d'écrire ma biographie afin que vous sachiez qui je suis réellement.</p>
            <div class="reseaux">
              
            <img src="Images/facebook.png" alt="facebook">
            <img src="Images/twitter.png" alt="twitter">
            <img src="Images/vimeo.png" alt="vimeo">
            <img src="Images/flickr.png" alt="flickr">
            <img src="Images/rss.png" alt="rss">
            
            </div>
      </aside>
    </section>

    <footer>
      <div class="Tweet">
        <h1>MON DERNIER TWEET</h1>
        <p> Hii haaaaan !</p>
        <p>Le 12 mai à 23h12</p>
      </div>

      <div class="photos">
            <h1>MES PHOTOS</h1>
            <img src="Images/photo1.jpg" alt="ville">
            <img src="Images/photo2.jpg" alt="ville">
            <img src="Images/photo3.jpg" alt="ville">
            <img src="Images/photo4.jpg" alt="ville">
      </div>

      <div class="amis">
          <h1>MES AMIS</h1>
              <div id="Liste_2">
                        <ul class="ul1">
                            <li><a href="#">Pupi le lapin</a></li>
                            <li><a href="#">Mr Baobab</a></li>
                            <li><a href="#">Kaiwaii</a></li>
                            <li><a href="#">Perceval.eu</a></li>
                        </ul>
                        <ul class="ul2">
                            <li><a href="#">Belette</a></li>
                            <li><a href="#">Le concombre masqué</a></li>
                            <li><a href="#">Ptit prince</a></li>
                            <li><a href="#">Mr Fan</a></li>
                        </ul>
                </div>
          </div>
      </footer>
  </body>
</html>

@font-face
{
	font-family: 'ballpark';
	src: url('Polices/ballpark.eot') format('eot'),
		 url('Polices/ballpark.svg') format('svg'),
		 url('Polices/ballpark.tff') format('truetype'),
		 url('Polices/ballpark.woff') format('woff');
}

@font-face 
{
	font-family: 'dayrom';
	src: url('Polices/dayrom.eot') format('eot'),
		 url('Polices/dayrom.Zozor.svg') format('svg'),
		 url('Polices/dayrom.tff') format('truetype'),
		 url('Polices/dayrom.woff') format('woff');
}

body
{
 	font-family: 'Trebuchet MS', Arial, sans-serif;
 	background: url('Images/fond_jaune.png');

}

header
{
	display: flex;
	height: 190px;
	background: url('Images/separateur.png') repeat-x bottom;
}

.Logo
{
	height: 70px;
	width: 70px;
	position: absolute;
	left: 35px;
	top: 40px;

}

header h1
{
	font-family: 'ballpark', sans-serif;
	font-size: 2.5em;
	position: absolute;
	left: 103px;
	top: 75px;
}

.carnets
{
	position: absolute;
	left: 35px;
	top: 150px;
	font-size: 1.2em;
}

nav ul
{
	list-style-type: none;
	display: flex;
	justify-content: space-between;
	width: 500px;
	font-size: 22px;
	height: 60px;
	align-items: center;
	position: absolute;
	right: 30px;
	top: 110px;
	color: green;
}

a:hover
{
 	color: #7d0a0d;
	text-decoration: underline;
}

a
{
	color: black;
	text-decoration: none;
}


.Bouton_rouge
{
	position: absolute;
	background: url('Images/fond_degraderouge.png') repeat-x;
	color: white;
	width: 110px;
	height: 25px;
	border-radius: 5px;
	text-align: center;
	right: 0;
	padding-top: 3px;
	margin-right: 10px;
}
 
#mid
{
	position: relative;
	background: url('Images/sanfrancisco.jpg') no-repeat;
	width: 1710px;
	height: 394.2px;
	border-radius: 5px;
	
	margin: 30px auto;
	background-size: 1710px 394.2px;
}


#Vacance
{
	position: absolute;
	background: rgba(0, 0, 0, 0.6);
	color: white;
	height: 40px;
	bottom: 0;
	width: 1705px;
	padding-top: 16px;
	border-radius: 5px;
	padding-left: 5px;
}

section
{
	display: flex;
	margin-left: 90px;
	margin-right: 90px;
}

.photo_ane
{
	border: #181818 1px solid;
	margin: auto;
	display: flex;
	margin-top: -9px;
}
	
article
{

	text-align: justify;
	padding-left: 50px;
}

aside
{
	background: #746c64;
	color: white;
	margin-left: 15px;
	border-radius: 7px;
	padding-bottom: 10px;
	margin-bottom: 70px;
	padding-left: 15px;
	padding-right: 15px;
	text-align: justify;
	box-shadow: 0px 3px 5px #1c1a19;
}

section h1
{
	font-family: 'dayrom';
	font-weight: normal;

}

.reseaux
{
	display: flex;
	justify-content: space-around;
}

article h1
{
	position: absolute;
	left: 220px;
	top: 650px;

}
.bulle
{
	position: absolute;
	top: 750px;
	right: 380px;
}

footer h1
{
	font-family: 'dayrom';
	font-weight: normal;
	font-size: 1em;
}

footer
{
	justify-content: space-around;
	background: url('Images/separateur.png') repeat-x top;
	margin-top: -35px;
	padding-top: 30px;
	background:  url('images/ico_top.png') no-repeat top center, url('images/separateur.png') repeat-x top, url('images/ombre.png') repeat-x top;
	display: flex;
}


.amis
{
	width: 24%;

}

.photos img
{
	width: 103.5px;
	height: 103.5x;
}

.photos
{
	width: 24%;

}
footer img
{
	border: black 1px solid;
}
.Tweet
{
	width: 13%;
	padding-left: 25px;
}

.ul1
{
	position: absolute;
	bottom: -340px;
	right: 475px;
	list-style-image: url('Images/ico_liensexterne.png');
	font-size: 1em;
}
.ul2
{
	position: absolute;
	bottom: -340px;
	right: 250px;
	list-style-image: url('Images/ico_liensexterne.png');
	font-size: 1em;
}

Savez-vous comment je peux résoudre le problème ? cela peut-venir du faite que j'ai utilisé la position absolue ?

cdt

Anthony

-
Edité par AnthonyLiuzzo1 17 mai 2022 à 8:57:08

AnthonyLiuzzo1

17 mai 2022 à 8:55:37

Lamecarlate

17 mai 2022 à 10:34:39

ton titre n'a rien à voir avec ton problème, change-le, s'il te plaît.

Et je ne pense pas que ça soit dû à l'absolu, mais plutôt au display: flex sur section. Soit tu utilises les media queries pour lui donner display: block quand le design casse, soit tu ajoutes flex-wrap: wrap, pour permettre aux éléments de passer en dessous. Ça va quand même demander un peu d'ajustement et de jugeote, de tests réguliers pour tester quand ça casse et du coup quand agir. Essaie la solution que tu veux, et reviens

Pas d'aide concernant le code par MP, le forum est là pour ça :)

modification du texte fenêtre réduite

Bordure position

Supprimer

Modérer

Signaler le message aux modérateurs