Je me lance dans le développement, pour essayer de bien comprendre et prendre en main "deja" html/css j'ai créer une page avec 0 design mais des "boites" dont je pourrais prendre exemple plus tard.
Sans une personne pour cous corriger ou vous dire que ce code est inutile pas facile d'avancer seul, je profite donc de cette occaz pour prendre tout vos conseils
apres 2/3 jours voila le resultat ( je sais pas grand choses xD ) -je ne penses pas bien utilise Id et Class -Je n'ai pas trop de CSS pr si peu de présentation ?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre</title>
<link rel="stylesheet" href="style.css" />
</head>
<div id="page_general">
<body>
<header>
<div id="logo_box">
<div>
<img src="images/pub3.png" alt="Logo" id="logo"/>
<p>une phrase descriptive</p>
</div>
</div>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Mon ompte</a></li>
</ul>
</nav>
</header>
<div id="bloc_description">
<div id="text_bloc_description"><p>Se comporte comme hidden au sens où le contenu est rogné pour s'inscrire dans la boîte de remplissage. Comme hidden, clip ne présente pas de barre de défilement mais contrairement à hidden, clip empêche tout défilement, y compris à l'aide de scripts. La boîte n'est pas un conteneur de défilement et ne définit pas de nouveau contexte de formatage. Si on souhaite obtenir un nouveau contexte de formatage, il faudra utiliser display: flow-root.
Certains navigateurs ne prennent pas encore cette fonctionnalité en charge.
(modifiable admin)</p></div>
<div id="image_bloc_description"><img src="images/pub3.png" alt="Logo"/></div>
</div>
<div id="categorie_centrale">
<p>TEXTE</p>
<div id="liste_categorie">
<div class="element1"><a href="#"></a>
<div><img src="images/pub35.png" alt="Logo"/></div>
<p>texte</p>
</div>
<div class="element2"><a href="#">test</a></div>
<div class="element3"><a href="#">test</a></div>
<div class="element4"><a href="#">test</a></div>
</div>
</div>
</div>
</body>
</html>
header
{
background-color: #7f7f7f; /* juste histoire de voir les zones*/
border: 3px blue solid; /* juste histoire de voir les zones*/
width: 90%; /* pour que le header soit moins large que la page */
margin: auto; /* pour qu'il soit centré */
display: flex; /* creer un conteneur */
flex-direction: column;
}
header p
{
margin: 0px;
}
nav ul
{
margin: 0px;
justify-content: flex-end;
display: flex; /*permet d'alligner les liens*/
list-style-type: none; /* virer les puces */
}
nav li
{
margin-right: 15px; /* espace entre les mots */
}
#logo_box
{
margin: auto;
text-align: center;
background-color: grey;
}
#logo
{
max-width: 100%;
max-height: 200px;
margin: auto;
}
#page_general
{
color: black;
width: 100%;
margin: auto;
}
#bloc_description
{
display: flex; /* creer un conteneur */
flex-direction: column;
width: 60%;
margin: auto;
border: 3px blue solid;
border-radius: 10px;
}
#text_bloc_description
{
display: flex;
}
#text_bloc_description p
{
margin: 0px;
padding: 10px;
word-wrap: break-word;
}
#image_bloc_description
{
display: flex;
max-width: 60%;
margin: auto;
}
#categorie_centrale
{
display: flex;
flex-direction: column;
width: 100%;
height: 150px;
border: 3px blue solid;
border-radius: 10px;
}
#categorie_centrale p
{
text-align: center;
margin: 0px;
}
#liste_categorie
{
display: flex;
height: 100%;
}
.element1
{
height: 100%;
width: 25%;
border: 1px blue solid;
background-color: grey;
display: flex;
}
.element2
{
height: 100%;
width: 25%;
border: 1px black solid;
}
.element3
{
height: 100%;
width: 25%;
border: 1px blue solid;
background-color: grey;
}
.element4
{
height: 100%;
width: 25%;
border: 1px black solid;
background-color: green;
}
#liste_categorie a
{
display: block;
text-decoration: none;
}
demain apres le boulot je continue ça et vous tien au courant
Aucune balise ne doit être située entre les balises head et body.
Tu as trop de répétition dans ton code CSS, par exemple pour les éléments ayant les classes element1, element2, element3 et element4.
Tu as deux possibilités:
Soit utiliser dans ses éléments en plus une classe qui permettra de définir une règle pour les propriétés équivalentes
Soit rassembler toutes les propriété équivalentes dans une règle avec comme sélecteurs les 4 classes
Exemple:
/* Première solution */
.all_elements
{
height: 100%;
width: 25%;
}
.element1
{
border: 1px blue solid;
background-color: grey;
display: flex;
}
.element2
{
border: 1px black solid;
}
.element3
{
border: 1px blue solid;
background-color: grey;
}
.element4
{
border: 1px black solid;
background-color: green;
}
/* Seconde solution */
.element1, .element2, .element3, .element4
{
height: 100%;
width: 25%;
}
.element1
{
border: 1px blue solid;
background-color: grey;
display: flex;
}
.element2
{
border: 1px black solid;
}
.element3
{
border: 1px blue solid;
background-color: grey;
}
.element4
{
border: 1px black solid;
background-color: green;
}
- Edité par Lartak 2 avril 2020 à 23:43:53
Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.
[Html/css] debut de creation
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.