Partage
  • Partager sur Facebook
  • Partager sur Twitter

probleme footer html5/ css3

    24 août 2019 à 20:21:16

    bonsoir,

    J'ai un probleme avec ma page html et mon css

    page html:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <link rel="stylesheet" href="style.css" />
            <title>test</title>
        </head>
        
        <body>
            <div id="bloc_page">
                <header>
                    <div id="titre_principal">
                        <div id="logo">
                            <img src="images/test_logo.jpg" alt="Logo de test" />
                        </div>    
    					<h1>test</h1>   
    
                 </div>
                        <h2>Conference test</h2>
                        
                 <header>
    				 
                    <nav>
                        <ul>
                            <li><a href="index.html">Home</a></li>
    						<li><a href="programme.html">Program</a></li>
                            <li><a href="register.html">Registration</a></li>
    						<li><a href="invited.html">Invited speakers</a></li>
    						<li><a href="venue.html">Venue</a></li>
                            <li><a href="#">Contact us</a></li>
                        </ul>
                    </nav>
    
                
    </div>
    
             
    
    		
    		
    		
    		<aside><div id="date">
    			<h1>Date</h1>
    				<p>Save The date.</p>			
    		</div></aside>
    
    
    
    
                    <article>
                        <h1>This is the title of the article</h1>
    						<p>Put the text here.</p>
    						<p>Put the text here.</p>
    						<p>Put the text here.</p>
    						<p>Put the text here.</p>
    						<p>Put the text here.</p>
    						<p>Put the text here.</p>
    						<p>Put the text here.</p>
    						<p>Put the text here.</p>
    						<p>Put the text here.</p>
    						<p>Put the text here.</p>
    						<p>Put the text here.</p>
    						<p>Put the text here.</p>
    						<p>Put the text here.</p>
    						<p>Put the text here.</p>
    						<p>Put the text here.</p>
    						<p>Put the text here.</p>
    						<p>Put the text here.</p>
    						<p>Put the text here.</p>
    						<p>Put the text here.</p>
    						<p>Put the text here.</p>
    						<p>Put the text here.</p>
    						<p>Put the text here.</p>
    						<p>Put the text here.</p>
    						<p>Put the text here.</p>
    						<p>Put the text here.</p>
    						<p>Put the text here.</p>
    						<p>Put the text here.</p>
    						<p>Put the text here.khjkhjkgjhghfhgfhgfhgdgfdfgdgfdghfhf</p>												
    												
    				</article> 
    				
    
            
              <iframe  allowfullscreen=""
    width="300" 
    height="300" 
    frameborder="0" 
    scrolling="no" 
    marginheight="0" 
    marginwidth="0" 
    src="https://www.openstreetmap.org/export/embed.html?bbox=2.34373%2c48.84198%2c2.34590%2c48.84076&layer=mapnik" 
    style="border: 1px solid black">
    			</iframe>     
    	
    
    			
    
    <footer>
    <p>Copyright - Tous droits réservés
    <a href="#">Me contacter !</a></p>
    </footer>
    	</body>
    
    </html>
    

    et mon css:

    /* Header */
    
    header
    {
        background: url('images/separateur.png') repeat-x bottom;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }
    
    
    /* Navigation */
    nav {
    position:fixed;
    right :10px;
    }
    
    nav ul
    {
        list-style-type: none;
        display: flex;
    }
    
    nav li
    {
        margin-right: 15px;
    }
    
    nav a
    {
        font-size: 1.3em;
        color: #181818;
        padding-bottom: 3px;
        text-decoration: none;
    }
    
    nav a:hover
    {
        color: #760001;
        border-bottom: 3px solid #760001;
    }
    /* Corps */
    article, aside
    {
        text-align: justify;
    }
    
    article
    {
    
    position:relative;
    top :500px;
    left:200px;
    
        margin-right: 20px;
        flex: 3;
    }
    
    
    
    article p
    {
        font-size: 0.8em;
    }
    
    
    
    
    aside
    {
    position:fixed;
    bottom:100px;
    width: 235px;
    height:255px;
    background-color: #706b64;
    box-shadow: 0px 2px 5px #1c1a19;
    border-radius: 5px;
    padding: 10px;
    color: white;
    font-size: 0.9em;
    }
    
    aside h1
    {
    
    color: red;
    
    }
    
    
    iframe{
    position:absolute;
    top:500px;
    left:500px;
    /*right:800px;
    bottom:800px;  */  
    border: 1px solid black;
    vertical-align: top;
    	text-align: left;
    	width: 25%;    
    }
    
    footer
    {
        display: flex;
        background:  url('images/ico_top.png') no-repeat top center, url('images/separateur.png') repeat-x top, url('images/ombre.png') repeat-x top;
        padding-top:25px ;
    background:#ccc;
    width:100%;
    height:55px;
    }
    


    je me retrouve avec le footer dans mon article.

    alors que si dans le fichier cssje decommente:

    article
    {
    //*
    position:relative;
    top :500px;
    left:200px;
    *//
        margin-right: 20px;
        flex: 3;
    }
    
    

    je n'ai plus le probleme

    parce que ce que je veux c'est que mon article soit centré par rapport a la page web

    Je debute dans la programmation html 5 /css 3

    Merci de votre aide

    • Partager sur Facebook
    • Partager sur Twitter
      25 août 2019 à 11:51:33

      bonjour,

      oui cela se voit que tu débutes :) mais ne t’inquiète pas on passe tous par la un jour. tu veux centrer ton article... ta solution ne centre rien du tout ou seulement pour ta taille de fenêtre du navigateur.

      je te propose d'aller voir le cours sur l'HTML5 et CSS3 et si tu l'as déjà fait retourne voir le FLEXBOX tu y verras des choses intéressante pour ton problème.

      PS: tes 

      <p>Put the text here.</p>
                              <p>Put the text here.</p>
                              <p>Put the text here.</p>
                              <p>Put the text here.</p>
                              <p>Put the text here.</p>
                              <p>Put the text here.</p>
                              <p>Put the text here.</p>
                              <p>Put the text here.</p>
                              <p>Put the text here.</p>
                              <p>Put the text here.</p>
                              <p>Put the text here.</p>
                              <p>Put the text here.</p>
                              <p>Put the text here.</p>
                              <p>Put the text here.</p>
                              <p>Put the text here.</p>
                              <p>Put the text here.</p>
                              <p>Put the text here.</p>
                              <p>Put the text here.</p>
                              <p>Put the text here.</p>
                              <p>Put the text here.</p>
                              <p>Put the text here.</p>
                              <p>Put the text here.</p>
                              <p>Put the text here.</p>
                              <p>Put the text here.</p>
                              <p>Put the text here.</p>
                              <p>Put the text here.</p>
                              <p>Put the text here.</p>
                              <p>Put the text here.khjkhjkgjhghfhgfhgfhgdgfdfgdgfdghfhf</p>

      c'est pas un peu long à faire ? voici un autre lien pour toi lorem ipsum.

      • Partager sur Facebook
      • Partager sur Twitter
      Un homme azerty en vaut deux.
        25 août 2019 à 21:48:55

        Bonsoir,

        j'avais récupéré ceci: //user.oc-static.com/pdf/13666-apprenez-a-creer-votre-site-web-avec-html5-et-css3.pdf

        je ne connaissais pas flexbox.

        Merci

        • Partager sur Facebook
        • Partager sur Twitter
          25 août 2019 à 23:27:39

          ha oui mais regarde la date de la MAJ de ton PDF : 2013...

          un peu vieux quand même privilégie le site web qui se met à jour régulièrement. 

          • Partager sur Facebook
          • Partager sur Twitter
          Un homme azerty en vaut deux.

          probleme footer html5/ css3

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          • Editeur
          • Markdown