[résolu]Centrer le code HTML au milieu de la page

par **Nathan-971** » 31 oct. 2011, 12:30

J’ai cherché, cherché, et j’ai trouvé, je peux donc mettre ce sujet en résolu.
Merci.

par **Cyrano** » 28 oct. 2011, 08:22

J'ai vu que tu m'as envoyé l'url d'une page de démo d'un plugin Jquery, donc pas ton code si je comprends bien, ou alors il y a un truc qui m'a échappé quelque part...

par **Nathan-971** » 28 oct. 2011, 02:31

Cyrano , je me suis permis de t’envoyer un MP, l’as-tu vu ?

par **Cyrano** » 26 oct. 2011, 16:29

Nathan, j'avais parfaitement compris la nature du problème, et de toute évidence il y a un point sur lequel tu n'as pas accroché dans ce que j'ai indiqué sur les styles CSS et le centrage.

Fais donc voir ta feuille de style, histoire que je voies ce que tu as corrigé depuis, sinon je ne devinerai pas..., ou mieux si tu as une page en ligne, l'url de cette page, je pourrai voir directement ce qu'il y a à voir.

par **Nathan-971** » 26 oct. 2011, 16:24

J’ai fait une capture d’écran pour avoir une idée de la chose.

par **Cyrano** » 26 oct. 2011, 06:48

Le HTML n'est pas en cause : je me demande si tu lis avec attention ce que j'écris. Il doit y avoir des éléments que tu ne comprends pas en CSS mais si tu ne dis rien sur ce point, on ne devinera pas.

par **Nathan-971** » 26 oct. 2011, 04:03

Pourtant, le HTML est simple, mais non rien n’a faire, il refuse de ce centrer correctement, je pense que faire autrement.
merci

par **Cyrano** » 25 oct. 2011, 19:23

Ok, compare maintenant avec le premier code que tu as montré, et relis attentivement les commentaires que j'ai ajouté dans l'extrait de code que j'ai posté plus tôt. Cet extrait définit deux fois le style pour « #video ul li » et certaines définitions de la seconde écrasent la première. Ça ne devrait pas être très difficile à corriger il me semble

par **Nathan-971** » 25 oct. 2011, 19:14

Le code d’origine est :

<div class="yt_holder">
    	<div id="ytvideo2"></div>
        <ul class="demo2">
            <li><a href="http://www.youtube.com/watch?v=QBBWKvY-VDc">Video 1</a></li>
            <li><a href="http://www.youtube.com/watch?v=ZXMQqLnRhRI">Video 2</a></li>
            <li><a href="http://youtu.be/L0CsLefLisE">Video 3</a></li>
        </ul>
    </div>

#ytvideo2 {
    float: left;
	margin-right:10px;
}


.yt_holder {
    background: #f3f3f3;
    padding: 10px;
    float: left;
    border: 1px solid #e3e3e3;
	margin-bottom:15px;
}


ul {
    float: left;
    margin: 0;
    padding: 0;
    width: 220px;
}

ul li {
    list-style-type: none;
    display:block;
    background: #f1f1f1;
    float: left;
    width: 216px;
    margin-bottom: 5px;
	padding:2px;

}

ul li img {
    width: 120px;
    float: left;
    margin-right: 5px;
    border: 1px solid #999;
}

ul li a {
    font-family: georgia;
    text-decoration: none;
    display: block;
    color: #000;
}

.currentvideo {
	background: #e6e6e6;
}

Merci

par **Cyrano** » 25 oct. 2011, 16:22

Oui je sais, je l’ai récupéré sur le Net, il correspond parfaitement à ce que je veux mettre en place, mais une fois que je le modifie, toute la mise en page démontée.

Peut-être bien que tu aurais pu commencer par là en nous indiquant en outre quelles sont les parties que tu as ajouté ou modifié. Là, il est difficile de te dire de quoi il retourne en dehors du point que j'ai souligné précédemment.

par **Nathan-971** » 25 oct. 2011, 16:05

Oui je sais, je l’ai récupéré sur le Net, il correspond parfaitement à ce que je veux mettre en place, mais une fois que je le modifie, toute la mise en page démontée.

par **Cyrano** » 25 oct. 2011, 09:40

Salut Nathan,
la formulation de ta question n'a pas vraiment de sens : je vais donc présumer que tu ne parles pas du code HTML mais bien de l'affichage dans ta page, ce qui n'a pas tout à fait la même signification.

Et je vais également supposer que tu souhaites centrer ce qu'il y a dans chaque balise <li> : regarde mieux ta feuille de style, j'ai ajouté des commentaire dans cet extrait de ton code... :

Code : Tout sélectionner

#video ul li {
    list-style-type: none;
    display:block;
    background: #f1f1f1;
    text-align:center; /* <--- Ça c'est OK */
    width: 216px;
    margin-bottom: 5px;
        padding:2px;

}

#video ul li  {
    width: 120px; /* Largeur différente de celle définie plus haut (120 au lieu de 216) */
    float: left; /* <-- Ça supprime l'effet défini plus haut */
    margin-right: 5px;
    border: 1px solid #999;
}

par **Nathan-971** » 25 oct. 2011, 01:08

Bonjour,
J’essaie en vain de centrer le code HTML au milieu de la page, mais il reste uniquement sur le côté gauche de la page.

<div id= "video " >
			<div class= "yt_holder ">
    	<div id= "ytvideo2 "></div>
        <ul class= "demo2 " >
            <li><a href= "http://www.youtube.com "><!--Video 1 --></a></li>
            <li><a href= "http://www.youtube.com "><!--Video 2 --></a></li>
            <li><a href= "http://www.youtube.com  "><!--Video 3 --></a></li>
        </ul>
    </div>
	</div>

#ytvideo2 {
    float: left;
	margin-right:10px;
}


.yt_holder {
    background: #f3f3f3;
    padding: 10px;
    float: left; 
    border: 1px solid #e3e3e3;
	margin-bottom:15px;
	border-radius: 10px 10px 10px 10px;  
	-webkit-border-radius: 10px 10px 10px 10px; 
}


#video ul {
    float: left;
    margin: 0;
    padding: 0;
    width: 220px;
}

#video ul li {
    list-style-type: none;
    display:block;
    background: #f1f1f1;
    text-align:center;
    width: 216px;
    margin-bottom: 5px;
	padding:2px;

}

#video ul li  {
    width: 120px;
    float: left;
    margin-right: 5px;
    border: 1px solid #999;
}



.currentvideo {
	background: #e6e6e6;
}

Merci d'avance

[résolu]Centrer le code HTML au milieu de la page

Répondre

Étendre la vue Revue du sujet : [résolu]Centrer le code HTML au milieu de la page

Re: Centrer le code HTML au milieu de la page

Re: Centrer le code HTML au milieu de la page

Re: Centrer le code HTML au milieu de la page

Re: Centrer le code HTML au milieu de la page

Re: Centrer le code HTML au milieu de la page

Re: Centrer le code HTML au milieu de la page

Re: Centrer le code HTML au milieu de la page

Re: Centrer le code HTML au milieu de la page

Re: Centrer le code HTML au milieu de la page

Re: Centrer le code HTML au milieu de la page

Re: Centrer le code HTML au milieu de la page

Re: Centrer le code HTML au milieu de la page

[résolu]Centrer le code HTML au milieu de la page