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

GuillaumeBo1

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.

Un homme azerty en vaut deux.

LB77

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

GuillaumeBo1

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.

Un homme azerty en vaut deux.