Alors voila je viens de créer un tableau basique mais aucun bord n’apparaît, je décide donc de rajouter du css pour essayer de corriger ça, sauf que de faire un style="border:solid" dans ma balise <table> me fait juste un contour :/ de plus si je rajoute ça dans ma balise <td> cela me fait des carrés pour chaque td c'est pas ouf. Je précise que j'ai un fond noir c pour ça que dans mon code j'utilise le blanc ^^.

<table style="position: absolute; top: 1020px; left: 600px; border: 2px solid;color: floralwhite; width: 800px; text-align: center; ">
                <thead>        
                    <tr>
                        <th>Equipes </th>
                        <th>Equipe noire</th>
                        <th>Equipe Est</th>
                        <th>Equipe Ouest</th>
                        <th>Equipe Sud</th>
                    </tr>
                </thead> 
                <tbody">
                    <tr>
                        <td style="border:solid;">1</td> 
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                    </tr>
                </tbody>        
            </table>

Bonjour,

que veux-tu à obtenir exactement ? 

si j'ai bien compris, regarde du côté de border-collapse 

et pourquoi position:absolute  et des valeurs de dingue pour top et left ? vraiment utile ? non, sauf cas exceptionnel ...

Enfin, utilise un fichier CSS plutôt que de styler la balise <table>, c'est une très mauvaise pratique

Salut !

Si tu veux des cases visibles, c'est au niveau des balises td qu'il faut rajouter des bords. Puis utilise border-collapse: collapse sur ta balise table pour joindre les bords.

Alors oui chaque fois que j'utilise du css je créer un nouveau fichier que je link au fichier principal, ici je voulais juste tester les style="border" pour voir le rendu, de plus les positions sont justes pour voir mon tableau car si je les laissais a 0, je ne travaille pas sur une page vierge en faite

Mais merci ivaalo je vais tester le border-collapse 👍

Bonjour,

> je ne travaille pas sur une page vierge en faite

c'est surprenant que tu aies besoin de modifier aussi fortement la position du tableau… Le reste de ta page est positionné pareil ?

oui oui ^^, je vais modifier ensuite par des % pour s'adapter à la taille de l'écran de l'utilisateur mais en gros mon tableau n'est pas visible a l'écran quand on se rend sur ma page c'est pour ça que les valeur sont aussi grande

Le reste de ta page est positionné pareil ?

Donc tous tes éléments sont en position: absolute ? Gare, c'est super dangereux comme méthode.

ah et tu me conseillerai quoi du coup ? 

position;relative; 

Je te conseillerais de laisser tes éléments tranquilles pas de position du tout. Ce n'est pas fait pour de la mise en page à grande échelle.

Mais on s'écarte du sujet, finissons déjà la question initiale : est-ce que le border-collapse correspond à ce que tu cherchais ?

houla oui c'est bon xD mon tableau est finit je l'ai même custom, mais du coup si je comprends bien la fonction position en css et inutile pour de grande valeur donc ? j'utilise juste top: ou left: ou right:

En fait, position: absolute est utile dans certains cas, très précis. C'est une méthode très puissante, et donc dangereuse (et pas adaptée dans de nombreux cas). On s'en sert pour, par exemple, placer une flèche à l'extérieur d'une bulle, ou bien un pied-de-page au bas d'un bloc (ceci peut être fait autrement maintenant, d'ailleurs), ou bien une puce de notification ou une infobulle près d'un texte. Pas pour placer un bloc entier sous un autre, parce que ça, c'est censé être fait naturellement dans le flux de la page. Il faut penser qu'une page web, ce n'est pas une diapo de type Powerpoint (ou Impress ). C'est mouvant, on ne connaît pas le terminal final (une page en plein écran, une page fenêtrée sur un ordinateur de bureau, ou bien un ordinateur portable, ou un téléphone mobile, une montre, un four ou un topinambour)(en gros).

top, left, right et bottom n'ont aucune influence s'ils ne sont pas associés à un position autre que static (absolute, relative, ou fixed).

Franchement, tu peux t'en passer. Et si le besoin se fait sentir, pour du micro-management, utilise l'absolute, mais toujours sur des éléments dans un conteneur en relative, pour en faire un référentiel (les éléments en absolute se placent en fonction de leur plus proche ancêtre positionné).

je place mes éléments comment alors ??? xD

Ça dépend de ton besoin.

Tu peux montrer un schéma de la mise en page que tu veux ?

le texte il défile c pour ça qu'il est pas droit 😜 , les oiseaux sont en position fixed et le reste c de l'absolute après c'est que du statique et c'est pas fait pour téléphone actuellement aucun de mes block et tableaux n'est responsive, peut être les 3 images d'en haut si on rétréci elle s'adapte jusqu’à ce que ce soit vraiment trop petit sinon voila xD

-
Edité par Lamecarlate 22 novembre 2019 à 7:29:43

J'ai modifié ton message pour y intégrer ce que tu m'as dit par MP (le problème de modification des messages est un bug aléatoire du forum).

Et ma réponse :

Pour moi, il faut faire simple : tu as sur ta capture d'écran deux lignes :

• le texte + logo tipeee
• la liste déroulante + le tableau

Tu mets la première ligne dans une div, la seconde dans une autre div, et tu les laisses tranquillou dans le flux, on va s'occuper de l'intérieur. Chaque div peut à mon avis être en display: flex - et contenir chacune deux div, une pour chaque élément à l'intérieur. Est-ce que tu visualises ? Tu peux tester ça et me dire comment ça se passe ?

-
Edité par Lamecarlate 22 novembre 2019 à 10:10:09

Je test ça ce week end, et je t'envoie un mp ? ou pas besoin j'imagine étant donné que tu es le boss du forum xD merci bcp de l'aide étant donné qu'on à bien dévié du sujet principal mais c'est cool

Le boss du forum ? Oulà non

C'est vrai, on devrait créer un nouveau sujet, mais on peut faire des exceptions parfois. Et pas de MP, je ne donne pas d'aide de code par MP, c'est toujours mieux à plus de cerveaux que deux !

non mais je veux dire un mp pour te dire que j'ai posté le résultat sur le forum

Pas besoin de MP pour ça, quand tu postes, cela notifie les gens qui ont participé - et je suis souvent ici

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title> Site ark</title>
    <link rel="icon" href="arkimg.png"/>
    <link rel="stylesheet" href="banniere2.css">
</head>
<body>
    <div class="mainpage">
        <div class="mainbanniere" >   
            <img src="Abberation.png" alt="gauche" class="bannieregauche">
            <img src="imgbanniere.png" alt="milieu" class="banniere">
            <img src="arkimg.png" alt="droite" class="bannieredroite">
        </div>    
    </div>
</body>
</html>

voila juste ça et dans les class de chaque image j'ai essayé de mettre la taille auto, puis largeur et hauteur plus petite, rien n'y fait.

j'ai ça:

ttest le script fonctionne bien

-
Edité par if_im_here_i_need_help 23 novembre 2019 à 15:29:56

Et le CSS ?

(tu avais lu ma proposition plus haut ? est-ce que tu as suivi le cours d'OpenClassrooms sur HTML et CSS ? c'est quoi ton niveau, en gros ?)

aaaaaaaaaaah j'avais pas vu xD tu voulais que je fasse des flex box ?

sinon mon niveau c'est débutant+++ xD je suis des cours dans une école et j'ai les bases de html et css.

Ok j'ai bien relue ton message je vais essayer de faire ça, j'avais vraiment mal lu ton message. 

ok donc je comprends pas trop comment marche les div la, elles se superposent :////// je crois que je ne sais pas utiliser des div xD

édit: Re, je faisais en faite n'importe quoi avec les fichiers (j'avais créer uen copie de chaque fichier pour pas avoir a refaire tout mais au final j'ai plus perdu du temps parce que je mettais une div sans rien et comme elle avait le class de ma page de base une image apparaissait alors que je voulais pas bref je sais utilisez les div j'ai juste perdu du temps a faire n'importe quoi😂 leçon retenue) , je vais refaire un autre site et j'utiliserai ta méthode 👍 

encore merci bcp

-
Edité par if_im_here_i_need_help 24 novembre 2019 à 12:07:26

Aller je relance la conv ici xD je ne sais pas si les gens la verront ou seulement toi Lamecarlate( si c'est une bonne idée ou pas d’ailleurs ^^) mais du coup tu ne vas pas t'arracher les cheveux cette fois j'ai recommencé un site sans bricolage

du coup j'ai un menu pour naviguer, et j'aimerai faire un contour pour mes <Li> mais seulement comment faire pour que mes border fasse la taille de Mon <UL> pour l'instant ils font juste la taille des <a>. 

/* menu principal */
.MenuHeader {
    display:flex;
    width: 100%;
    justify-content: flex-end;
}

.nav .menu {
    display: flex; /*1*/
    flex-direction : row; /*2*/
    justify-content: space-around; /*3*/
    align-items: center;
    width: 50vw;
    height: 12vh;
    @media(max-width: 450px) {
        flex-flow: column wrap; /*4*/
      }
}

.nav ul {
    margin: 0px;
    padding: 0px;
    height: 12vh;
    background-color: aqua;
    list-style:none;
}
.nav li {
    border: 2px solid black;
}

.nav a {
    display: block;
    text-decoration: none;
    width: 100%;
    height:100%;
}

.special {
    height: 30px;
    width: 32px;
}

Le HTML serait bienvenu aussi, afin de pouvoir copier le code et tester

Avec la coloration du forum s'il te plaît les couleurs sont trop claires pour être aisément lues sur fond blanc.

Mais sinon, tes bordures sont bien de la taille des <li>. En effet, tu as mis justify-content: space-around; sur le <ul>, donc les <li> prennent la taille de leur contenu.

mais mon justify-content: space-around; est fait pour espacer mes Li :/ si je l’enlève ça ne change rien a mes bordures si ?

-
Edité par if_im_here_i_need_help 28 novembre 2019 à 18:27:15

Tu peux faire un schéma de ce que tu attends ? J'ai du mal à comprendre.

Dans ce cas, ce n'est pas du tout space-around qu'il te faut

Ne mets pas de justify-content, ajoute du padding sur les <a> - et tu peux enlever la hauteur fixe, tu géreras ça avec le padding des liens (par contre, évite les vh, c'est proportionnel à la hauteur de la fenêtre et ça peut jouer des tours.