28112 sujets

CSS et mise en forme, CSS3

Soucis de centrage d'image

Bonjour tout le monde,

Je suis débutant en html5 et css

Voila j'arrive pas a centrer mes image dans ma page html

J'ai essaye de mettre dans mon css a la partie images

#images {
	float: left;
	height: 450px;
	margin-left: 70px;
	width: 450px;
	text-align: left;
	position: relative;
}


Mais sa reste une image center oui mais la second est sur une autre ligne juste en bas au même endroit

voici une capture

http://img15.hostingpics.net/pics/442642motus.png

et ce qui est de la partie html pour les images j'ai fait comme ceci

<A HREF="pic.du.midi/pic.du.midi.grand.format.1.jpg" TITLE="Pic du Midi vue 1">
                        <IMG SRC="pic.du.midi/pic.du.midi.petit.format.2.jpg" BORDER="0" ALT="Pic du midi vue 1"><BR>
                        </A>
                        
                        <br /><br />                        
                        <A HREF="pic.du.midi/Pic_du_Midi_de_Bigorre_Observatory.jpg" TITLE="Pic du Midi vue 1">
                        <IMG SRC="pic.du.midi/100px-Pic_du_Midi_de_Bigorre_Observatory.jpg" BORDER="0" ALT="Pic du midi vue 1"><BR>
                        </div>


Que doit je faire pour que sa reste centrer mais que la seconde images et le reste suives jusqu'a 5 images et ensuite que sa recommence a la ligne suivante

Merci pour votre aide a tous

Motus
Modifié par Motus (04 Oct 2015 - 13:26)
Oh ! Des balises et des attributs en majuscules ! Smiley lol

Tout d'abord, à quoi fait donc référence le sélecteur css "#images" ? Il n'existe vraisemblablement pas d'id dans le code HTML fournit. En effet, la première chose à faire est de s'assurer que les sélecteurs CSS ciblent les éléments HTML correspondants :
CSS : #ton-id {...}
HTML : <element id="ton-id">...</element>
CSS : .ta-class {...}
HTML : <element class="ta-class">...</element>


Deuxième point, un <br> impose un "Line Break" : Un saut à la ligne pour du texte. Il est préférable d'utiliser des marges lorsqu'il s'agit d'espacer les éléments HTML entre eux.
.ta-class {
   margin:1em 10px;
}


Ce qui nous donnerait (dans un premier temps) :
CSS :
.image {
  [...]
}

HTML :
<a class="image" href="..." title="...">
       <img src="..." border="0" alt="...">
</a>
<a class="image" href="..." title="...">
        <img src="..." border="0" alt="...">
</a>

Modifié par Nigel (05 Oct 2015 - 11:54)
En novice stp merci car j'ai rien compris

voici mon css au complet


/**************************************************/
/*               Body and Wrapper                 */
/**************************************************/

body {
background: #000099 url(images/back.png) top center repeat-x; 
margin: 0;
padding: 0;
font: normal 8pt/13pt verdana, arial,sans-serif;
}

#wrapper {
margin: 0 auto;
width: 1250px;
padding: 0;
text-align: center;
}

/**************************************************/
/*                  Top Piece                     */
/**************************************************/

#top {
background: url(images/bgtop.png) top center no-repeat; 
width: 1250px;
height: 78px;
}

/**************************************************/
/*                  Content                       */                       
another wrapper that holds all the content        */
/**************************************************/

#content {
background: url(images/bgmiddle.png) center repeat-y; 
width: 766px;
height: 100%;
padding: 0px 17px 0px 17px;
}

/**************************************************/
/*               All the content                  */
/**************************************************/

#header {
background: url(images/header.png) top center no-repeat; 
width: 1250px;
height: 106px;
margin: 0px 0px 10px 0px;
padding: 60px 0px 0px 20px;
color: white;
font-size: 50px;
text-align: center;
}
/*                    Menu                   */
#menu {
width: 200px;
height: 100%;
margin-left: 10px;
float: left;
text-align: left;
}

#menu li a {
height: 37px;
voice-family: "\"}\""; 
voice-family: inherit;
height: 29px;
text-decoration: none;
text-align: left;
}	
	
#menu li a:link, #menu li a:visited {
color: navy;
display: block;
background:  url(images/off.png) top center no-repeat;
padding: 8px 0 0 10px;
height: 29px;
text-align: left;
}
	
#menu li a:hover {
color: blue;
background:  url(images/on.png) top center no-repeat;
padding: 8px 0 0 10px;
height: 29px;
text-align: left;
}	

ul {
list-style: none;
margin: 0;
padding: 0;
text-align: left;
}

#images {
	float: left;
	height: 450px;
	margin-left: 70px;
	width: 450px;
	text-align: left;
	position: relative;
}

/**************************************************/
/*                   Bottom                       */
/**************************************************/

#bottom {
background: url(images/bgbottom.png) bottom center no-repeat; 
width: 1250px;
height: 50px;
}
Re-bonjour,

Tes lacunes me paraissent trop importantes pour réussir à t'aider efficacement, peut-être devrais-tu commencer par des articles d'initiation, comme celui-ci ?
Modifié par Nigel (05 Oct 2015 - 11:42)
Sujet clos
Aller à