28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Je suis en train de créer mon CV en ligne et j'essaie de positionner un bloc 'article' et un bloc 'aside' côte à côte avec la propriété display: inline-block, cependant cela ne fonctionne pas et le bloc 'aside' reste au dessus du bloc 'article', voici mon code html et css :

<div id="block">
<section>
                <aside>
                    <h1>En resumen</h1>
                    <img src="images/triadmars.jpg" alt="Image Triad Mars" width="70" height="58" />
                    <p>21 de enero de 1992</p><p>Francesa</p><p>Mions (69780), FRANCIA<p>Permiso de conducir</p><p>Coche proprio</p>
                </aside>
				<article>
<div id="textos"> <h1><img src="images/drapeauespagnol.jpg" alt="Drapeau espagnol" class="floatleft" width="40" height="25" />CV<span>&nbsp;&nbsp;en español</span></h1>
<p>TEXTE</p>
<p id="footer">|
Création <a href="http://www.mon-cv-en-ligne.com">Mon CV
en ligne</a> | Design : <a href="http://www.devixdesign.com">Lucas
Santos</a> |</p>
</div></div>
</div></article>
</section>



aside, article
{
    display: inline-block;
    text-align: justify;
	margin-right: 20px;
}

aside
{
    position: relative;
    width: 235px;
    background-color: #685959;
    box-shadow: 0px 2px 5px #1c1a19;
    border-radius: 5px;
    padding: 10px;
    color: white;
    font-size: 15px;
float: right;
}



Qu'est ce qui pourrait bloquer l'alignement horizontal ??

Merci beaucoup !
Bonjour, juste en regardant ta structure html, il y a des erreurs, essaye avec ça :

<div id="block">
  <section>
    <aside>
      <h1>En resumen</h1>
      <img src="images/triadmars.jpg" alt="Image Triad Mars" width="70" height="58" />
      <p>21 de enero de 1992</p>
      <p>Francesa</p>
      <p>Mions (69780), FRANCIA
      <p>Permiso de conducir</p>
      <p>Coche proprio</p>
    </aside>
    <article>
      <div id="textos">
        <h1><img src="images/drapeauespagnol.jpg" alt="Drapeau espagnol" class="floatleft" width="40" height="25" />CV<span> en español</span></h1>
        <p>TEXTE</p>
        <p id="footer">|
          Création <a href="http://www.mon-cv-en-ligne.com">Mon CV
          en ligne</a> | Design : <a href="http://www.devixdesign.com">Lucas
          Santos</a> |</p>
      </div>
    </article>
  </section>
</div>
Merci pour ta réponse mais malheureusement rien n'a changé...

J'ai essayé une autre manip en css :

section aside
{
    display: inline-block;
    text-align: justify;
	margin-right: 20px;
}


A la place de 'article, aside' et là les blocs s'alignent bien horizontalement sur Firefox, cependant sur Safari pas d'alignement ! 'aside' est toujours au dessus de 'article'...
Je ne comprends pas pourquoi cela ne fonctionne pas sur Safari...
Sur safari j'ai un bon comportement. Smiley ohwell

Par contre pourquoi ne pas faire un float:left en supprimant ton inline-block ton float:right
Modifié par rodolpheb (05 Dec 2012 - 10:27)
Bizarre car moi sur mon Macbook pro Safari v6 ça ne s'affiche pas correctement...

Quand j'enlève le float:right, mon 'aside' se centre, alors que je le veux complètement à droite...

Oui pas de problème voici l'adresse de mon site : http://alice.beyegue.free.fr/index3.html

Et c'est donc le bloc "en resumen" qui ne s'affiche pas correctement sur mon Safari...
Modifié par Alouce (05 Dec 2012 - 10:36)
Parfait c'était ça pour Safari merci !
Et une dernière question maintenant, comment enlever le défilement du div id=textos en bas ?
Je veux que le texte rentre seulement dans la zone blanche, sans défilement sur la droite.

Merci
C'est parfait merci encore infiniment ! Smiley biggrin
Je débute, c'est pas évident Smiley cligne
Modifié par Alouce (05 Dec 2012 - 11:07)
De rien Smiley smile

Petits conseils : mets ton background en no-repeat et ton titre (avec une autre couleur que balck) sans text-shadow.

Bon courage!
Si je mets le background en no-repeat il est coupé sur toute la partie droite du site...
C'est vrai que ce titre m'embête un peu et je ne sais pas quoi en faire ^^
Tu me conseillerais quoi comme autre couleur ? Smiley rolleyes
Pardon : background-repeat: repeat-x;
Pour ton titre je verrais une police plus classique ( type arial) avec la couleur marron de ton aside et un text-shadow bien fait pour l'occasion.

L'usage veut aussi qu'on ne place qu'une balise H1 par page.. Smiley smile
Merci, c'est vrai que c'est beaucoup mieux Smiley smile

Ah je ne savais pas ça Smiley rolleyes
Pourtant le html provient d'un site qui propose des modèles ^^
Et c'est grave?
Parce que je fais ce site "seulement" pour un exam
Modifié par Alouce (05 Dec 2012 - 14:08)