Problèmes avec la mise en page et le positionnement dans CSS

-1

Je viens de commencer à apprendre le HTML et CSS et je suis coincé sur la mise en page d'un site Web en CSS depuis un certain temps maintenant. Dans la première image, vous pouvez voir comment j'essaie de le regarder et dans la deuxième image vous voyez à quoi il ressemble en ce moment ... J'ai essayé de chercher en ligne mais je ne sais pas comment fonctionne la mise en page et le positionnement CSS. Est-ce que quelqu'un sait ce que je fais mal ??Problèmes avec la mise en page et le positionnement dans CSS

Picture here! 2nd picture here! html

<!DOCTYPE html> 
<html> 
<head> 
    <link href="https://fonts.googleapis.com/css?family=Catamaran:100|Pontano+Sans|Ruda:900" rel="stylesheet"> 
    <link href="style.css" type="text/css" rel="stylesheet"> 
    <title>ALISAN'S OCCASIONS</title> 
</head> 
<body> 
    <div class="header"> 
    </div> 
    <div class="home_page"> 
     <div class="home_left"> 
      <ul id="social_media"> 
       <li><a href="https://www.facebook.com/" target="_blank"><img src="Facebook1.jpg"></a></li> 
       <li><a href="https://www.instagram.com/" target="_blank"><img src="Instagram1.jpg"></a></li> 
       <li><a href="https://twitter.com/?lang=en" target="_blank"><img src="twitter1.jpg"></a></li> 
      </ul> 
     </div> 
     <div class="home_center"> 

     </div> 
     <div class="home_right"> 

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

et ce CSS stylesheet

* { 

    box-sizing: border-box; 
} 


body { 

    padding: 0; 
    margin: 0; 
    background-color: #8799b7; 
    overflow-y: scroll; 
    max-height: 735px; 

} 


.header { 

    display: block; 
    background-image: url("header4.jpg"); 
    height: 500px; 
} 

.home_page { 

    display: block; 
    margin:0; 
    padding: 0; 

} 

.home_left { 

    display: inline-block; 
    height: 235px; 
    width: 506px; 
    margin: 0; 
    padding: 0; 
} 


.home_center { 

    display: inline-block; 
    height: 235px; 
    width: 506px; 
    margin: 0; 
    padding: 0; 
} 

.home_right { 

    display: inline-block; 
    height: 235px; 
    width: 506px; 
    margin: 0; 
    padding: 0;

Source

2017-09-09 ghassan al-ameiry

S'il vous plaît préciser votre problème ou ajouter des détails supplémentaires mettez en évidence exactement ce dont vous avez besoin. Comme c'est écrit actuellement, il est difficile de dire exactement ce que vous demandez. Dire juste que ça n'a pas l'air juste n'est pas beaucoup d'aide. - http://learnlayout.com/ –

Vous avez raison! Je ne savais pas trop comment expliquer ce qui n'allait pas, mais j'ai téléchargé une autre photo de l'apparence de la mise en page, comment ça aide ^^ –

Vous pouvez simplifier votre code en utilisant flexbox, aussi longtemps que vous n'avez pas besoin de visionneur plus.

Le code HTML serait:

<html> 
<head> 
    <link href="https://fonts.googleapis.com/css?family=Catamaran:100|Pontano+Sans|Ruda:900" rel="stylesheet"> 
    <link href="style.css" type="text/css" rel="stylesheet"> 
    <title>ALISAN'S OCCASIONS</title> 
</head> 
<body> 
    <div class="header"> 
     header 
    </div> 
    <div class="home_page"> 
     <div class="home_left"> 
      left 
     </div> 
     <div class="home_center"> 
center 
     </div> 
     <div class="home_right"> 
right 
     </div> 
    </div> 
</body> 
</html>

Le CSS:

* { 

    box-sizing: border-box; 
} 


body { 

    padding: 0; 
    margin: 0; 
    background-color: #8799b7; 
    overflow-y: scroll; 
    max-height: 735px; 

} 


.header { 

    display: block; 
    background-image: url("header4.jpg"); 
    height: 500px; 
} 

.home_page { 

    display: flex; 
    margin:0; 
    padding: 0; 

} 

.home_page > div { 
    border: 1px solid grey; 
} 

.home_left { 

    height: 235px; 
    width: 506px; 
    margin: 0; 
    padding: 0; 
} 


.home_center { 

    height: 235px; 
    width: 506px; 
    margin: 0; 
    padding: 0; 
} 

.home_right { 

    height: 235px; 
    width: 506px; 
    margin: 0; 
    padding: 0; 
}

Et vous pouvez le voir en action à: https://codepen.io/anon/pen/EvqXmg

Source

2017-09-09 17:47:43 jpedroribeiro

Problèmes avec la mise en page et le positionnement dans CSS

Répondre

Questions connexes