Problème de div qui se superpose

amis_cool
Les bases HTML/CSS

Bonjour,

Voila je rencontre un petit problème avec mon code.

Je préviens tout de suite je suis un newbee en css html (premier essai avec ass compass)

Je vous joins mon css, ma question est la suivante. J'ai plusieurs <div> celle .section-footer devrait être tout en bas après .about-text et .text. Malheureusement la <div> footer se place dans la <div> about texte. Comment faire et ou est mon erreur?

/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
/* line 5, ../../../Ruby24-x64/lib/ruby/gems/2.4.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

/* line 22, ../../../Ruby24-x64/lib/ruby/gems/2.4.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
html {
  line-height: 1;
}

/* line 24, ../../../Ruby24-x64/lib/ruby/gems/2.4.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
ol, ul {
  list-style: none;
}

/* line 26, ../../../Ruby24-x64/lib/ruby/gems/2.4.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* line 28, ../../../Ruby24-x64/lib/ruby/gems/2.4.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

/* line 30, ../../../Ruby24-x64/lib/ruby/gems/2.4.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
  quotes: none;
}
/* line 103, ../../../Ruby24-x64/lib/ruby/gems/2.4.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

/* line 32, ../../../Ruby24-x64/lib/ruby/gems/2.4.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
a img {
  border: none;
}

/* line 116, ../../../Ruby24-x64/lib/ruby/gems/2.4.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

/* Variable*/
/* line 1, ../sass/_header.scss */
.header {
  display: block;
  margin: 0px auto;
  width: 980px;
  height: 200px;
  background-color: #f4f4f4;
  text-align: left;
}

/* line 14, ../sass/_header.scss */
.header-logo {
  position: relative;
  top: 50%;
  transform: translate(0, -50%);
  display: block;
  margin-top: 0px;
  padding: 0;
  text-align: left;
}
/* line 21, ../sass/screen.scss */
.header-logo:before, .header-logo:after {
  content: "";
  display: table;
}
/* line 26, ../sass/screen.scss */
.header-logo:after {
  clear: both;
}

/* line 24, ../sass/_header.scss */
.header-baseline {
  /* @include centerer(false, true);*/
  margin-top: -35px;
  /* display: block;

   padding: 0px;*/
  width: 300px;
  height: 150px;
}

/* line 34, ../sass/_header.scss */
.header-baseline-l1 {
  margin-left: 115px;
  font-family: "Jura";
  font-weight: 700;
  font-size: 25px;
}

/* line 43, ../sass/_header.scss */
.header-baseline-l2 {
  margin-left: 115px;
  font-family: "Jura";
  font-weight: 400;
  font-size: 20px;
}

/* line 52, ../sass/_header.scss */
.header-baseline-l3 {
  margin-left: 115px;
  font-family: "Jura";
  font-weight: 700;
  color: red;
}

/* line 1, ../sass/_menu.scss */
.menu {
  /* @include clearfix;*/
  display: block;
  display: inline block;
  margin: 0px auto;
  width: 980px;
  font-family: "Jura";
  vertical-align: middle;
  line-height: 50px;
  font-size: 22px;
  letter-spacing: -2px;
  font-weight: bold;
  float: center;
  text-align: right;
  /*padding-right: -10px;*/
  /*margin-right: 10px;*/
  width: 980px;
  height: auto;
  /* margin-top: 60px;*/
  /* height: 50px;*/
  background-color: #f4f4f4;
}

/*.ligne{

    border-left: 1px solid black;
    padding-left: 5px;
    margin-left: 50px;
}
*/
/* line 41, ../sass/_menu.scss */
.menu-item {
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  display: inline-block;
  margin-right: 10px;
  color: #6a707a;
}
/* line 21, ../sass/screen.scss */
.menu-item:before, .menu-item:after {
  content: "";
  display: table;
}
/* line 26, ../sass/screen.scss */
.menu-item:after {
  clear: both;
}
/* line 48, ../sass/_menu.scss */
.menu-item:before {
  content: "|";
  color: #414547;
  display: inline-block;
  padding: 0 10px;
}
/* line 54, ../sass/_menu.scss */
.menu-item:before:first-child:before {
  display: none;
}
/* line 55, ../sass/_menu.scss */
.menu-item:before:hover, .menu-item:before.is-active {
  color: #2058b1;
}

/* line 1, ../sass/_about-text.scss */
.about-text {
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  /* display: block;*/
  margin-left: auto;
  margin-right: auto;
  width: 950px;
  font-family: "Open Sans";
  color: #555;
  margin-top: 0px;
  padding: 20px;
  text-align: left;
}
/* line 21, ../sass/screen.scss */
.about-text:before, .about-text:after {
  content: "";
  display: table;
}
/* line 26, ../sass/screen.scss */
.about-text:after {
  clear: both;
}

/* line 24, ../sass/_about-text.scss */
.text {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 965px;
  background: url(../images/back.jpg) center top fixed;
  background-position: center;
  background-color: #8b949e;
  border-width: 5px;
  border-style: solid;
  border-color: #6a707a;
  box-shadow: 1px 1px 12px #555;
  text-align: left;
  color: #f4f4f4;
}
/* line 21, ../sass/screen.scss */
.text:before, .text:after {
  content: "";
  display: table;
}
/* line 26, ../sass/screen.scss */
.text:after {
  clear: both;
}

/* line 1, ../sass/_bottom.scss */
.bottom {
  text-align: center;
  width: 965px;
  height: 50px;
  color: #f4f4f4;
}

/* line 1, ../sass/_section-footer.scss */
.bottom {
  display: block;
  width: 980px;
  height: 50px;
  text-align: center;
  color: #6a707a;
}
/* line 21, ../sass/screen.scss */
.bottom:before, .bottom:after {
  content: "";
  display: table;
}
/* line 26, ../sass/screen.scss */
.bottom:after {
  clear: both;
}

/* line 13, ../sass/_section-footer.scss */
.section-footer {
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  position: absolute;
  bottom: 0px;
  background-color: #f4f4f4;
}
/* line 21, ../sass/screen.scss */
.section-footer:before, .section-footer:after {
  content: "";
  display: table;
}
/* line 26, ../sass/screen.scss */
.section-footer:after {
  clear: both;
}

INDEX.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ArchXpert Architecture Genève</title>

<link href="../archxpert02/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> 

<link href="https://fonts.googleapis.com/css?family=Jura:300,400,700|Open+Sans:300,400,700|Roboto:100,300,400,500,700" rel="stylesheet">

</head>

<body>
<div class="header"id="header">
                <a href="#" class="header-logo">
                <img src="images/logo.jpg" alt="logo"/>
       </a>

       <div class="header-baseline">
        <div class="header-baseline-l1">TEST01</div>
        <div class="header-baseline-l2">TEST02</div>
        <div class="header-baseline-l3">TEST03</div></div>
        </div>

<div class="menu" id="menu"><nav class="nav">

        <div>
             <nav class="menu">
        <a href="#" class="menu-item">Accueil</a>
        <a href="#" class="menu-item">Expertise</a>
        <a href="#" class="menu-item is-active">Réalisation</a>
        <a href="#" class="menu-item">Simulation 3D</a>
        <a href="#" class="menu-item">Diagnostic</a>
        <a href="#" class="menu-item">Références</a>
        <a href="#" class="menu-item">Contact</a>
        </div>
</div>

<div>

<div class="text" id="text"><div class="about-text">

            <p><br><h1>FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF</h1></br>
            <p><br>
            </br>
 <br>DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</br>

<br>QQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQ</br>

<br>A</br>
<br>B</br>
<br>C</br>
<br>D</br>
<br>FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF</br>
<br>GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG</br>
<br>FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF</br>
<br>HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH</br>
<br>DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</br>

<br>FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF</br>

<br>SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS</br>

<br>EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE</br>
<br>FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF</br>

<br>GGGGGGGGGGGGG</br>

<br>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</br>

<br>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB.</br>
<br>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</br>
<br>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</br>

</div>

<div>
            </p>
            <p>&nbsp;</p>
            <p>

              <div>
              <div class="bottom" id="bottom"><div><div class="section-footer">

            </p>
<div class="copy"> Archxpert 2017, All Right Reserved | Designed By Yann Dallaturca</div>
    <div class="social-icons"> 
        <a href="#"><i class="icon icon-twitter"></i></a>
</div>

</body>
</html>

Ce que je veux

J'aimerai avoir la <div> footer indépendante et tout en bas....merci d'avance

Ce que j'obtiens

Mon erreur est que la <div> footer est encapsulée dans la <div> about_text

3 réponses

Lartak

Bonjour.
Pour information, il existe des balises spécifiques, telles que header et footer, il serait donc préférable que tu les utilises, ça permet en premier lieu d'améliorer la compréhension de la struture de tes pages via les noms de balises.
Ensuite, si tu veux éviter d'avoir des problèmes, penses à fermer les balises que tu ouvres, exemple : tu ouvres deux balises nav que tu ne refermes à aucun moment dans ta page.
Pour finir, au lieu de copier tout le code dans un seul bloc de code, sépares les dans deux blocs différents, exemple :
screen.css

ol, ul {
    list-style: none;
}
// ...

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>ArchXpert Architecture Genève</title>
        <link href="../archxpert02/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> 
        <link href="https://fonts.googleapis.com/css?family=Jura:300,400,700|Open+Sans:300,400,700|Roboto:100,300,400,500,700" rel="stylesheet">
    </head>
    <body>
        <header>
            <!-- ... -->
        </header>
        <!-- ... -->
        <footer>
            <!-- ... -->
        </footer>
    </body>
</html>
amis_cool
Auteur

Bonsoir Lartak,

Merci pour ta réponse.

Juste! les balises non fermées...c'est corrigé thx.

Et pour les balises tout à fait raison c'est pas clair...

Concernant le ol,ul je digère... pas tout compris...donc je lis des trucs dessus...

En tout lescas merci je continue à chercher mon erreur...

Lartak

Concernant le ol,ul je digère... pas tout compris...donc je lis des trucs dessus...

Le contenu des deux blocs de code dans mon post précédent n'a aucune importance, c'était juste pour te faire comprendre que pour une meilleure lisibilité, qu'il fallait mieux séparer les différentes pages dans des blocs de code différents, surtout concernant des langages différents, comme c'est ton cas.