[Résolu] CSS / HTML Débutant Photoshop par Mehddii - page 1

Bonjour ,

je suis en train de suivre un petit tuto d'intégration photoshop en html et je bloque au niveau d'un petit problème concernant le display.

Voici donc comme vous voyez au niveau de mon header j'ai une div <figure> contenant mon logo avec la petite description, puis juste en dessous les

3petites icones (envelop, user, et search) . Mon but serait de placer ces 3 icones a droite du logo en gros mon figure est en inline-block, même chose

pour mes 3 icones qui sont dans une liste <ul class="button-group"> mais pourtant il ne s'affichent pas comme je le souhaite. J'a essayer avec du

float:right;float:left; rien n'en plus.

Voici mon code html : ( au niveau de  )

<!DOCTYPE hmtl>

<html>
    <head>
        <meta charset="utf-8" />
        <title>Testing Website Photoshop</title>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
        <link rel="stylesheet" href="css/style.css" type="text/css" />
        <link href="https://fonts.googleapis.com/css?family=Oxygen|Raleway" rel="stylesheet">
    </head>
    <body>
        
        <!-- ------- HEADER START ------- -->
        <div id="header">
            <header class="wrapper">
                <figure>
                    <img src="images/logo.svg" alt="Didaxo Logo" />
                    <figcaption>Next Gen Learning Toolbox and Facilities</figcaption>
                </figure>
                <ul class="button-group">
                    <li class="button" ><a href="#"><i class="far fa-envelope"></i></a></li>
                    <li class="button" ><a href="#"><i class="fas fa-user"></i></a></li>
                    <li class="button" ><a href="#"><i class="fas fa-search"></i></a></li>
                </ul>
            </header>
        </div>
        
        <!-- ------- NAVMENU HORIZONTALE NON REPONSIVE ------- -->
        <div id="mainNav">
            <nav class="wrapper">
                <p class="button"><a href="#"><i class="fas fa-bars"></i></a></p>
                <ul>
                    <li><a href="#">Accueil</a></li>
                    <li><a href="#">Produits</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Support</a></li>
                    <li><a href="#">À Propos</a></li>
                </ul>
            </nav>
        </div>

CODE CSS :

body {
    font-family: 'Oxygen', "Raleway", sans-serif;
}

.wrapper .responsive {
    width: 100%;
    height: auto;
}

.wrapper {
    max-width: 767px;
    margin: 0px auto;
}




/* **** HEADER **** */

#header {
    background-color: #262087;
    padding: 0px 20px;
    padding-top: 20px;
}

        /* **** LOGO + PHRASE **** */
    
#header figure {
    width: 65.853%;
    display: inline-block;
}

#header figure img {
    max-width: 48.148%;
}

#header figure figcaption {
    color: #fff;
}

        /* **** PETITE BAR 3 MENU **** */

#header ul {
    width: 31.707%;
    display: inline-block;
    text-align: right;
}



        /* **** BUTTON MENU **** */

.button-group {
    font-size: 0;
}

.button-group li {
    display: inline-block;
}

.button-group li a {
    border-radius: 0;
}

.button-group li:first-child a {
    border-radius: 5px 0px 0px 5px;
}
.button-group li:last-child a {
    border-radius: 0px 5px 5px 0px;
}

.button a {
    background-color: #fff;
    text-align: center;
    padding-top: 6px;
    border: 2px solid #59bdff;
    border-radius: 5px;
    font-size: 30pt;
    width: 60px;
    height: 60px;
    display: block;
}

.button a:hover {
    background-color: #59bdff;
}

Voilà merci de votre aide les gens !

Mehddii

16 avril 2019 à 9:47:38

Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...

FloJDM

16 avril 2019 à 10:13:39

Salut,

Tu vas devoir te servir de l'attribut CSS "position" avec comme valeur relative pour ta div avec le logo et absolute pour ta navigation.

-> Hébergement GRATUIT <- Parfait pour débuter/dev/test/...

16 avril 2019 à 11:21:26

En effet, rajouter le positionnement leur donne le positionnement que je voulais. Merci a toi .

Puis-je comprendre pourquoi sans les postions ça ne marche pas sachant que dans le tuto ça a marcher ? Le tuto date de 2015 pour infos.

16 avril 2019 à 16:17:55

Logiquement si tu suis le tuto ça devrait fonctionner, tu as peut-être louper un truc ?

17 avril 2019 à 12:23:53

Je ne penses pas j'ai revérifier dans les vidéos, mais bon, peut-être que j'ai louper un truc dans la vérif lol :euh:

on sait jamais.

CSS / HTML Débutant Photoshop

CSS / HTML Débutant Photoshop

Supprimer

Modérer

Signaler le message aux modérateurs