28172 sujets

CSS et mise en forme, CSS3

Div qui se chevauchent ou qui de s'alignent pas

Bonjours,J'essaye de me faire un premier site en pur html5 et css3 sans script ni php.
Mon problème est que j'ai 2 div qui se chevauchent : "leftcolumn" et "remonter".
La div "remonter" étant en positon absolu pour qu'elle s'aligne dans le bas de la page (c'est le bouton qui me sert pour remonter en haut de page)
La div "leftcolumn" me sert a afficher mon contenu de page et doit pouvoir s'agrandir selon son contenu; je l'ai mis avec un min height pour un autre soucis mais cela ne doit pas gêner.
Donc mon prb est que si je met remonter en valeur absolu j'ai les 2 div qui se chevauche si le contenu de "leftcolumn" est important. Ou alors si je supprime ma position absolu les 2 div ne se chevauchent plus mais du coup ma div "remonter" ne reste plus placer en bas de page mais suis la taille de "leftcolumn".
J'espère que vous avez compris ce que je voulais dire je vous met mon html et mon css

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Tempus Fugit</title>
  <meta name="description" content="Photographies ayant pour sujet principal l'architecture et le patrimoine e Troyes et sa région" />
  <meta name="keywords" content="photographie, photographe, photo, ancienne, photoshop, amateur, village, patrimoine, culture, industriel, culturel, maison, architecture" />
  <meta name="author" content="Jean-Pierre Simon" />
  <meta name="geo.placename" content="Troyes, Aube, France" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" media="screen" href="style.css">
  <meta name="robots" content="All" />
  </head>
 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
<!-- debut body -->
<!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ --> 
<body>
<!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
<!-- debut header -->
<!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
<header id="haut">
  <img src="img/tempusfugit.jpg" width="1070" height="409" alt="image bandeau haut" class="img2"/>
  <nav>
    <div class="list">
      <ul class="bloclist">
        <li><a href="index.html">Accueil</a></li>
        <li><a href="troyes.html">Troyes</a></li>
        <li><a href="aube.html">Aube</a></li>
        <li><a href="region.html">Région</a></li>
        <li><a href="divers.html">Divers</a></li>
        <li><a href="liens.html">Liens</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul> 
    </div>
  </nav>   
</header>
<!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
<!-- debut bloc gauche -->
<!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
    <div class="columnsContainer">
      <div class="leftColumn">
<!-- debut fil d'ariane --> 
      <nav class="blocariane">
          <div class="ariane">
            <ul>
            <li> <a href="index.html">Accueil</a>
            <ul>
            <li><a href="troyes.html">Troyes</a>
            <ul>
            <li><a href="aube.html">Aube</a>
            <ul>
            <li><a href="region.html">R&eacute;gion</a>
            <ul>
            <li><a href="divers.html">Divers</a>
            <ul>
            <li id="first">Liens
            <ul>
            <li><a href="contact.html">Contact</a>
            </li>
            </ul></li>
            </ul></li>
            </ul></li>
            </ul></li>
            </ul></li>
            </ul></li>
            </ul>
          </div>
      </nav>

      <h1 class="bordurejaune">Photographie</h1>
        <p>J'ai cr&eacute;&eacute; ce site pour pr&eacute;senter mon travail de photographe amateur</p>
      <h1 class="bordurejaune">Photoshop et autres logiciels photo</h1>
        <p>J'ai cr&eacute;&eacute; ce site pour pr&eacute;senter mon travail de photographe amateur</p>
      <h1 class="bordurejaune">HTLM et CSS</h1>
        <p>Validateur du W3C pour le HTML : <br><a href="http://validator.w3.org/" target="_blank">http://www.http://validator.w3.org</a></p>
        <p>Validateur du W3C pour le CSS : <br><a href="http://jigsaw.w3.org/css-validator/" target="_blank">http://jigsaw.w3.org/css-validator/</a></p>
        <p>Convertisseur pts,px,em et % : <br><a href="http://outils-css.aliasdmc.fr/convertir-unites-de-longueurs-css.php" target="_blank">http://outils-css.aliasdmc.fr/convertir-unites-de-longueurs-css.php</a></p>
        <p>Alsacr&eacute;ation : <br><a href="http://www.alsacreations.com/" target="_blank">http://www.alsacreations.com/</a></p>
        <p>CSS3 Maker : <br><a href="http://www.css3maker.com/index.html" target="_blank">http://www.css3maker.com/index.html</a></p>
        <p>Convertisseur de couleur RGB, hexa : <br><a href="http://www.proftnj.com/RGB3.htm" target="_blank">http://www.proftnj.com/RGB3.htm</a></p>
        <p>Galerie photo : <br><a href="http://www.pixedelic.com/plugins/camera/#" target="_blank">http://www.pixedelic.com/plugins/camera/#</a></p>
        <p>RDSign : <br><a href="http://beta.rdsign.net/archiveCAT_CSS" target="_blank">http://beta.rdsign.net/archiveCAT_CSS</a></p>
        <p>Convertisseur de caract&egrave;res sp&eacute;ciaux HTML : <br><a href="http://www.webcreatif.fr/annuaire-webmaster/convertisseur-caracteres-html.php#" target="_blank">http://www.webcreatif.fr/annuaire-webmaster/convertisseur-caracteres-html.php#</a></p>
        <p>Validateur du W3C pour le HTML : <br><a href="http://validator.w3.org/" target="_blank">http://www.http://validator.w3.org</a></p>
        <p>Validateur du W3C pour le HTML : <br><a href="http://validator.w3.org/" target="_blank">http://www.http://validator.w3.org</a></p>
        <p>Validateur du W3C pour le HTML : <br><a href="http://validator.w3.org/" target="_blank">http://www.http://validator.w3.org</a></p>
        <p>Validateur du W3C pour le HTML : <br><a href="http://validator.w3.org/" target="_blank">http://www.http://validator.w3.org</a></p>
      <h1 class="bordurejaune">Patrimoine</h1>
        <p>J'ai cr&eacute;&eacute; ce site pour pr&eacute;senter mon travail de photographe amateur</p>
      <h1 class="bordurejaune">Autres</h1>
        <p>J'ai cr&eacute;&eacute; ce site pour pr&eacute;senter mon travail de photographe amateur</p>

          <div class="remonter">
          <a href="#haut" ><img src="img/haut.png" width="35" height="35" alt="bouton haut"/></a>
          </div>  
    </div>
<!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
<!-- debut bloc droite -->
<!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
      <div class="rightColumn">
<!-- debut bloc news -->
        <h2 class="bordurebleu">News</h2>         
          <div class="news">     
            <p>Excogitatum est super his, ut homines quidam ignoti, vilitate ipsa parum cavendi ad colligendos rumores per Antiochiae latera cuncta destinarentur relaturi quae audirent. hi peragranter et</p>
          </div> 
<!-- debut bloc Liens du moment -->
        <h2 class="bordurebleu">Site du moment</h2>       
        <div class="news">     
          <p>Le Président de la République est élu à la majorité absolue des suffrages exprimés. Si celle-ci n'est pas obtenue au premier tour de scrutin, il est procédé, le quatorzième jour suivant, à un second tour.</p>
        </div>  
<!-- debut bloc liens sociaux -->
        <h2 class="bordurebleu">Me contacter</h2> 
          <div class="mecontacter ">  
                <img src="img/facebook.png" width="125" height="40" alt="Facebook" class="img"/>
                <img src="img/mail.png" width="80" height="40" alt="Mail" class="img"/>  
          </div>         
      </div>
  </div>
    <footer>
    <div class="bouton">
      <a><img src="img/W3CCSS3.png" width="71" height="25" alt="CSS Valclasse !"/></a>
      <a><img src="img/W3CHTML5.png" width="71" height="25" alt="HTML5 et CSS"/></a>
      <a href="http://windows.microsoft.com/fr-FR/internet-explorer/download-ie" target="blank"><img src="img/ie.png" width="25" height="25" alt="IE"/></a>
      <a href="http://www.mozilla.org/fr/firefox/fx/" target="blank"><img src="img/firefox.png" width="25" height="25" alt="Firefox"/></a>
      <a href="http://www.google.com/intl/fr/chrome/browser/" target="blank"><img src="img/chrome.png" width="25" height="25" alt="Chrome"/></a>
      <a href="http://www.opera.com/" target="blank"><img src="img/opera.png" width="25" height="25" alt="Opera"/></a>
      <a href="http://www.apple.com/fr/safari/" target="blank"><img src="img/safari.png" width="25" height="25" alt="Safari"/></a>
    </div>

    <div class="footerbas">
      <a href="ml.html">Mentions l&eacute;gales</a> - © Tous droits de reproduction interdits  © All rights reserved : <a href="mailto:tempfugit@laposte.net">Tempus Fugit</a>
    </div>
    </footer>

  </body>
</html>


*, *:before, *:after {
  box-sizing: border-box;
    -moz-box-sizing: border-box; 
      -webkit-box-sizing: border-box; 
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* Définition du body */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
body { 
  font-family: 'Special Elite',courier,Arial,sans-serif;
  font-size:0.9vw;
  background-image:url(img/bg.jpg);
  background-attachment:fixed;
  color: #909090;
  max-width: 75%;
  height:100%;
/* marges boites */
  margin: auto; 
}
.columnsContainer, footer, header { 
    position: relative; 
    margin-left: 5em;margin-right: 3em;
}
.columnsContainer {
  margin-bottom: 4em;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* formatage du texte */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
p {
  text-align: justify;
} 
h1, h3, h5 {
  text-shadow: 2px 2px #000000, -2px -2px #000000;
  color: #DFB94F;
  margin-bottom:1.25em;
}
h2, h4 {
  text-shadow: 2px 2px #000000, -2px -2px #000000;
  color: #739AB0;
  margin-bottom:1.25em;
}
h1 { 
  font-size:1.5vw;
}
h2 {
  font-size:1.4vw; 
}
h3 {
  font-size:1.3vw;
}
h4 {
  font-size:1.2vw;
}
h5 {
  font-size:1.1vw;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* formatage liens general */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
a {
  color: #DFB94F;
  text-decoration: none;  
}
a:visited {
  color: #DFB94F;
  text-decoration: none;  
}
a:hover {
  color: #739AB0;
  text-decoration: none;
}
a:active {
  color: #DB8E00;
  text-decoration: none;  
}
a:focus  { 
  color: #DB8E00;
  text-decoration: none;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* Définition bordures de boites */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.leftColumn, .rightColumn, footer, header {  
  padding-left: 1.5em;padding-right: 1.5em;
  margin-top: 3em;
  background-color:rgba(0,0,0,0.2);
/* bordures boites */
  border:dashed 2px #606060;
/* ombre boite */
  box-shadow:  0 0 0 2px rgb(40,40,40), 0 0 0 4px rgb(40,40,40), 0 0 0 6px rgb(40,40,40), 0 0 0 9px rgb(0,0,0);
}
header {
  padding-top: 2em;
  text-align: center;
/* coins boites */
    border-top-left-radius:20px;border-top-right-radius:20px;border-bottom-left-radius:0px;border-bottom-right-radius:0px;
}
footer { 
  padding-top: 1em;padding-bottom: 1em;
/* coins boites */
  border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:20px;border-bottom-right-radius:20px;
}
.leftColumn, .rightColumn {
  min-height: 42em;
}
.leftColumn {
  padding-bottom: 5em;
}
/* bouton remonter */
.remonter {
  position:absolute;
  margin-top: 1em;
  bottom: 1em;
}
/* blocs de droite */
.mecontacter{
  text-align: center;
  word-spacing: 1em;
  margin-bottom: 1em;
}
.news {  
  overflow: hidden;  
}
/* soulignement */
.bordurebleu {
  border-bottom: 3px dotted #739AB0;
}
.bordurejaune {
  border-bottom: 3px dotted #DFB94F;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* Formatage images */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
img {
  max-width: 100%;
  height: auto;
}
.img1 { 
  max-width: 100%;
  max-height: 100%;
}
.img2 {
  max-width: 100%;
  height: auto;
  box-shadow: 3px 3px 5px 5px #000, 0 0 4px rgba(0, 0, 0, .5) inset;
/* coins boites */
  border-top-left-radius:30px;border-top-right-radius:30px;border-bottom-left-radius:30px;border-bottom-right-radius:30px;
}
.bouton {
  text-align: right;
}
.galerie {
  word-spacing: 1em;
  text-align: center;
  line-height: 3;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* blocs menus */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.blocariane, .bloclist {  
  color: #739AB0;
  padding:0.5em;
  text-align:center;
  background-color:rgba(105,105,105,0.2); 
  box-shadow:1px 1px 2px black inset;
  max-height: 2em;
/* marges boites */
  margin: auto;margin-top: 1em;margin-bottom:1em;
/* bordures boites */
  border:solid 1px #101010;
/* coins boites */
  border-top-left-radius:30px;border-top-right-radius:30px;border-bottom-left-radius:30px;border-bottom-right-radius:30px;
}
.blocariane {
  margin-bottom: 4em;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* fil d'arianne */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.ariane {
  word-spacing:1.5em;
}
.ariane ul {
  text-shadow: 2px 2px #000000, -2px -2px #000000;
  margin-left: 0;
  padding-left: 0;
  display: inline;
  border: none;
}
.ariane ul li {
    margin-left: 0;
    padding-left: 2px;
    border: none;
    display: inline;
}
.ariane ul li a:hover {
  color: #5E8B9F;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* menu */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.list {
  text-shadow: 2px 2px #000000, -2px -2px #000000;
  word-spacing: 0.6em;
  font-size:2vw;
}
.list ul li {
  display:inline-block;   
}
.list ul li a {
  display:block;
}
.list ul li a:hover {
/* rotation au survol */
transform:rotate(-12deg);
  -webkit-transform:rotate(-12deg);
    -moz-transform:rotate(-12deg);
      -o-transform:rotate(-12deg);
        -ms-transform:rotate(-12deg);
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* bloc pied de page */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.footerbas {
  margin-top: 1em;
  text-align:center;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* MEDIA QUERIES */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media screen and (min-width: 47.5em ) {
  .leftColumn { 
    margin-right: 22.5em;margin-left: 0em;
    height: auto;
}
  .rightColumn { 
    position: absolute; 
    top: -3em;right: 0em;width: 18.75em;height: auto;
  }   
}

Modifié par Tempusfugit (09 Aug 2014 - 22:37)
Ps j'ai mis un padding bottom cela fonctionne mais ca reste une bidouille, je préférais avoir une véritable solution. Un z-index ne fonctionnant pas non plus.

En espérant de ne pas m’être planté de sujet et ayant respecté les codes
Modifié par Tempusfugit (09 Aug 2014 - 22:38)
Sujet clos
Aller à