IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Html CSS mise en page


Sujet :

CSS

  1. #1
    Nouveau Candidat au Club
    Homme Profil pro
    Développeur Java
    Inscrit en
    Novembre 2015
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Java
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Novembre 2015
    Messages : 4
    Points : 1
    Points
    1
    Par défaut Html CSS mise en page
    Bonjour

    Je suis débutant et j'ai déjà cherché et trouvé pas mal de tuto mais je n'arrive pas à les adapter à ce que je veux faire.. j'ai fais pas mal d'essais mais je n'arrive pas du tout à faire ce que je veux...
    J'aimerais simplement faire ça :
    Nom : New Mockup 1.png
Affichages : 170
Taille : 14,8 Ko

    Les X c'est des images et le gros carré c'est un div avec ça dedans

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    .P1
    {
        border-radius: 20px 0px 20px 0px;    
        box-shadow:  0px 0px 10px black;
        padding: 20px;
        width: 800px;
        height: auto;
        opacity: 0.8;
        line-height: 40px;
        text-align: center;
    }
    .center 
    {  
        margin-left: auto;
        margin-right: auto;
    }
    Entre les position relative absolute les floats et margin etc.. je suis un peu perdu!

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 957
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 957
    Points : 44 119
    Points
    44 119
    Par défaut
    Bonjour,
    pour commencer essaies de visualiser un découpage de ta page en zones, tu ne devrait pas avoir besoin d'avoir recours au positionnement absolute/relatif.

    Propriétés d'affichage et de positionnement.

  3. #3
    Nouveau Candidat au Club
    Homme Profil pro
    Développeur Java
    Inscrit en
    Novembre 2015
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Java
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Novembre 2015
    Messages : 4
    Points : 1
    Points
    1
    Par défaut
    ho pas mal ce tuto, j'étais pas tombé sur cette page, je vais jeter un oeil. Merci

  4. #4
    Nouveau Candidat au Club
    Homme Profil pro
    Développeur Java
    Inscrit en
    Novembre 2015
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Java
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Novembre 2015
    Messages : 4
    Points : 1
    Points
    1
    Par défaut
    Et bien non je n'y arrive pas, c'est d'ailleurs pour ça que je demande de l'aide, les simples tutos pour placer un cube dans une page c'est bien gentil mais moi j'essaye de placer des textes par rapport à des photos centrées et je sais pas du tout comment faire! Je vois très bien le découpage dans ma tête mais j'ai aucune idée de comment bien faire pour que ça rende comme je vous l'ai indiqué! J'ai fais des tests mais ça ressemble à rien...

  5. #5
    Invité
    Invité(e)
    Par défaut
    Citation Envoyé par chapichaposurunbato Voir le message
    ...Je vois très bien le découpage dans ma tête...
    Nous ne sommes pas dans ta tête.

    -> dessine les "boites".
    Tu verras mieux comment les "emboiter".

    Nom : New-Mockup-2.png
Affichages : 137
Taille : 21,0 Ko

  6. #6
    Nouveau Candidat au Club
    Homme Profil pro
    Développeur Java
    Inscrit en
    Novembre 2015
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Java
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Novembre 2015
    Messages : 4
    Points : 1
    Points
    1
    Par défaut
    le découpage est exactement comme sur l'image! Au lieu de "some text" imagines un carré et c'est ce que je veux faire! ^^
    De toute manière du texte ou des images c'est pareil j'imagine c'est juste une question de mise en page.. c'est ça que je n'arrive pas à faire.. je ne sais pas quoi utiliser et où pour avoir cette mise en page..

  7. #7
    Invité
    Invité(e)
    Par défaut
    Les "boites" sont des <div>.

    Avec le dessin (cf mon message précédent), tu devrais déjà pouvoir écrire le code HTML.

    Le CSS en découlera.


Discussions similaires

  1. [CSS] Mise en Page
    Par bolo dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 01/02/2006, 09h46
  2. [CSS] Mise en page Firefox/IE
    Par Oli78 dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 18/07/2005, 13h38
  3. [CSS]Mise en page de 3 colonnes
    Par calimero82 dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 10/06/2005, 23h54
  4. [html][css] mise en page iframe
    Par niglo dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 09/06/2005, 14h08
  5. [CSS] Mise en page differente pour l'ecran et l'imprimante
    Par leportois dans le forum Mise en page CSS
    Réponses: 8
    Dernier message: 22/04/2005, 11h49

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo