Comment est-ce que je pourrais créer un site Web d'une seule page (avec 2 pages séparées), si mes divs sont positionnés en utilisant des pourcentages?

Je suis nouveau à la conception de sites Web, et j'essaye de faire un site Web d'une seule page avec 2 pages. Quand je place le code pour la deuxième page (dans un div) sous le premier, il ne me donne pas deux pages Web l'une sous l'autre, mais place tous les img de la deuxième page sur le premier. Je me demandais si cela avait à voir avec moi en utilisant des pourcentages dans le CSS. Si oui, que me suggérez-vous de faire? Le problème est, il m'a été recommandé d'utiliser des pourcentages afin de développer une mise en page fluide (cela n'a pas encore fonctionné, je dois encore tout comprendre complètement). Existe-t-il un moyen de résoudre le problème et d'utiliser des pourcentages?Comment est-ce que je pourrais créer un site Web d'une seule page (avec 2 pages séparées), si mes divs sont positionnés en utilisant des pourcentages?

FICHIER HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>MySite</title> 
    <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> 
</head> 

<body class="cateringpage"> 
    <div class="container"> 
      <div class="leavesimg"> 
       <img src="leaves1.svg" alt="leaves" class="bananaleaves"></img> 
      </div> 
      <div class="cateringbannerimg"> 
       <img src="cateringbanner.svg" alt="catering" class="catbanner"></img> 
      </div> 
      <div class="cateringputolblueimg"> 
       <a href="cateringmenu.html"> 
       <img src="cateringputolblue.svg" alt="cateringputo" class="catputo1" onmouseover="this.src='cateringputodblue.svg';" onmouseout="this.src='cateringputolblue.svg';" ></img> 
       </a> 
      </div> 
    </div> 

<div id="pge2" class="cateringmenupage"> 
    <div class="container"> 
      <div class="greenboardflat1img"> 
       <img src="greenboardflat1.png" alt="greenboard" class="greenboardflat1"></img> 
      </div> 
      <div class="cateringmenubannerimg"> 
       <img src="cateringmenubanner.svg" alt="cateringbanner" class="cateringmenubanner"></img> 
      </div> 
      <div class="printiconwhiteimg"> 
       <a href="DOMINIKSTEXT.pdf"> 
       <img src="printiconwhite.svg" alt="print" class="piwhite" onmouseover="this.src='printiconred.svg';" onmouseout="this.src='printiconwhite.svg';" /></img> 
       </a> 
      </div> 
      <div class="bbcatlputoimg"> 
       <a href="index.html"> 
       <img src="bbcatlputo.svg" alt="backtomainmenu" class="bbcatlputo" onmouseover="this.src='bbcatdputo.svg';" onmouseout="this.src='bbcatlputo.svg';" /></img> 
       </a> 
      </div> 
      <div class="mmcat"> 
       <p>home page</p> 
      </div> 
    </div> 
</div> 


</body> 

</html>

CSS FICHIER:

.container { 
    width: 100%; 
    height: 100%; 
} 
body.cateringpage { 
    background-image: url("woodbackground.png"); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    margin: 0; 
    padding: 0; 
} 
body.cateringmenupage { 
    background-image: url("woodbackground.png"); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    margin: 0; 
    padding: 0; 
} 
.leavesimg { 
    position:absolute; 
    width: 95.3%; 
    height: 89.6%; 
    left: 2.5%; 
    bottom: 5%; 
} 

img.bananaleaves { 
    height: 100%; 
    width: 100%; 
} 
.cateringbannerimg { 
    position:absolute; 
    width: 43%; 
    height: auto; 
    left: 27.5%; 
    bottom: 26%; 
} 

img.catbanner { 
    height: 100%; 
    width: 100%; 
} 
.cateringputolblueimg { 
    position:absolute; 
    left: 16.25%; 
    width: 14.5%; 
    left: 42%; 
    bottom: 13%; 
} 

img.catputo1 { 
    height: 100%; 
    width: 100%; 
} 
.haloboximg { 
    position:absolute; 
    width: 29%; 
    height: auto; 
    right: 11%; 
    bottom: 11%; 
} 

img.hbox { 
    height: 100%; 
    width: 100%; 
} 
.greenboardflatimg { 
    position:absolute; 
    width: 45%; 
    height: auto; 
    left: 5%; 
    bottom: 2%; 
} 

img.gboard { 
    height: 100%; 
    width: 100%; 
} 
.dailylunchbannerimg { 
    position:absolute; 
    top: 15%; 
    width: 40%; 
    height: auto; 
    left: 7.5%; 

} 

img.dlbanner { 
    height: 100%; 
    width: 100%; 
} 
.dailylunchtxt { 
    font-family : Catatan Perjalanan; 
    font-size : 26px; 
    color : #FDFEFF; 
    color : rgb(253, 254, 255); 
    position: absolute; 
    top: 28%; 
    left: 8%; 
} 
.dlputolblueimg { 
    position:absolute; 
    left: 20%; 
    width: 14.5%; 
    bottom: 21.5%; 
} 

img.dlputo1 { 
    height: 100%; 
    width: 100%; 
} 
.tomainmenu { 
    font-family : Catatan Perjalanan; 
    font-size : 26px; 
    color : #FDFEFF; 
    color : rgb(253, 254, 255); 
    position: absolute; 
    bottom: 8%; 
    left: 10%; 
} 
.greenboardflat1img { 
    position:absolute; 
    width: 55%; 
    height: auto; 
    left: 22.5%; 
    top: 2%; 
} 

img.greenboardflat1 { 
    height: 100%; 
    width: 100%; 
} 
.cateringmenubannerimg { 
    position:absolute; 
    top: 12%; 
    width: 40%; 
    height: auto; 
    left: 30%; 
} 

img.cateringmenubanner { 
    height: 100%; 
    width: 100%; 
} 
.printiconwhiteimg { 
    position:absolute; 
    right: 7%; 
    width: 5.2%; 
    top: 7%; 
} 

img.piwhite { 
    height: 100%; 
    width: 100%; 
} 
.bbcatlputoimg { 
    position:absolute; 
    left: 7%; 
    width: 5%; 
    top: 7%; 
} 

img.bbcatlputo { 
    height: 100%; 
    width: 100%; 
} 
.mmcat { 
    font-family : Catatan Perjalanan; 
    font-size : 16px; 
    color : #0700D0; 
    color : rgb(7, 0, 208); 
    position: absolute; 
    left: 7.25%; 
    top: 14%; 
}

Source

2016-08-30 user74843

une seule page ** ** site web ** avec 2 pages **? – baao

@baao me battre à elle. semble un peu un projet étrange, pour dire la liste. –

@ user74843 pouvez-vous expliquer ce que vous voulez accomplir? –

Techniquement ce ne sont pas des "pages", ils sont des éléments qui prennent 100% height/width. Le problème est que vos règles 100% height et width sont relatives aux tags html et body qui n'ont pas actuellement de hauteur définie, de sorte que les "pages" affichent une hauteur de 0.

Si je comprends bien votre question, l'ajout de cette CSS doit résoudre:

html,body { 
    height:100%; 
}

De plus, dans votre CSS, vous avez deux classes de corps différents définis. Un document HTML ne peut avoir qu'un seul ensemble de html balises et un ensemble de balises body, au lieu que vous devriez assignez la « page »/classes IDs à deux divs séparés comme celui-ci:

<body> 
    <div id="pge1" class="cateringpage"> 
     <div class="container"> 

     </div> 
    </div> 

    <div id="pge2" class="cateringmenupage"> 
     <div class="container"> 

     </div> 
    </div> 
</body>

Source

2016-08-30 21:57:53 APAD1

Comment est-ce que je pourrais créer un site Web d'une seule page (avec 2 pages séparées), si mes divs sont positionnés en utilisant des pourcentages?

Répondre

Questions connexes