Sujet Précédent Sujet Suivant

Aide css!

Fermé
desbois2 Messages postés 8 Date d'inscription lundi 14 juillet 2014 Statut Membre Dernière intervention 9 février 2016 - Modifié par desbois2 le 17/07/2014 à 23:36
 nerjahoui - 18 juil. 2014 à 00:13
J'ai commencé le html et le CSS ce matin , et la je suis un peu coincer. Pour l'instant j'essaye de me faire un page d'accueil un peu professionnel. mais mon CSS laisse beaucoup a désiré.(j'utilise chrome comme navigateur je ne me suis pas encore attardé sur les autres)

j'ai l'intention d'Apprend le php la semaine prochaine pour pouvoir créer un espace membre qui pourront s'inscrire sur une sorte liste d'attente. J'ai des base en c++ alors je crois m'en sortir.

Si quelqu'un pourrait me guider pour que je puisse avoir une page de présentation agréable cela serait grandement apprécier.(si j'ai fait de erreur n'hésité pas a me le dire!!)


voila mon code html 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>nom du site</title>
    </head>

    <body>
        <div id="bloc_page">
            <header>
                <div id="titre_principal">
                    
                    <h1>Titre</h1>
                    <h2>sous-titre</h2>
                </div>
                
                <nav>
                    <ul>
                        <li><a href="#">Accueil</a></li>
      <li><a href="#">s'abonner</a></li>
                        <li><a href="#">liste</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </nav>
            </header>
            
            
            <section>
                <article>
                    <h1>Explication</h1>
                    <p>voici le principe blabla..</p>
                    <p>blablabla</p>
                    <p>blablablaa</p>
     
                </article>
                <aside>
                    <h1>connectez-vous</h1>
                    <form method="post" action="traitement.php">
   <p>
       <label for="pseudo">Votre pseudo :</label>
       <input type="text" name="pseudo" id="pseudo" placeholder="Ex : François" size="30" maxlength="10" />
       
       <br />
       <label for="pass">Votre mot de passe :</label>
       <input type="password" name="pass" id="pass" size="30" />
       
   </p>
</form>
                    <input type="submit" value="Envoyer" />
                    
     
     <p>affichage ici de la position de l'utilisateur dans la liste</p>
                    
                </aside>
            </section>
            <footer>
                <div id="titre1">
                    <h1>titre1</h1>
                    <p>blabla</p>
                    
                </div>
                <div id="titre2">
                    <h1>titre2</h1>
                   <p>blabla</p>
       </div>
                <div id="titre3">
                    <h1>titre3</h1>
                   <p>blabla</p>
                </div>
            </footer>
            
        </div>
    </body>
</html>


et voila mon CSS 

/* Définition des polices  */

p
{
    font-family: Arial,Times New Roman, Verdana, sans-serif;
}
/* Eléments principaux de la page */

body
{
    background: white;
    font-family: 'Trebuchet MS', Arial, sans-serif;
    color: #181818;
 
}

#bloc_page
{
    width: 900px;
    margin: auto;
 border-radius: 5px;
 box-shadow: 0px 2px 5px #1c1a19;
}
section
{
 
 box-shadow: 0px 2px 5px #1c1a19;
}
section h1, footer h1, nav a
{
    font-family: Dayrom, serif;
    font-weight: normal;
    text-transform: uppercase;
 
}
/* Header */

header
{
    background: rgb(0,149,192);
 border-radius: 5px;
 box-shadow: 0px 2px 5px #1c1a19;
 
}

#titre_principal
{
    display: inline-block;
 
}

header h1
{
 
    font-family: 'BallparkWeiner', serif;
    font-size: 2.5em;
    font-weight: normal;
}

header h1
{
    display: inline-block;
    margin-bottom: 0px;
}

header h2
{
    font-family: Dayrom, serif;
    font-size: 1.1em;
    margin-top: 0px;
    font-weight: normal;
}
/* Navigation */

nav
{
 
    display: inline-block;
    width: 740px;
    text-align: right;
 
}

nav ul
{
    list-style-type: none;
}

nav li
{
    display: inline-block;
    margin-right: 15px;
}

nav a
{
    font-size: 1.3em;
    color: #181818;
    padding-bottom: 3px;
    text-decoration: none;
}

nav a:hover
{
    color: #760001;
    border-bottom: 3px solid #760001;
}


article, aside
{
    display: inline-block;
    text-align: justify;
 
}

article
{
    width: 625px;
    margin-right: 15px;
 vertical-align: top;
}



article p
{
    font-size: 0.8em;
}

aside
{
    position: relative;
    width: 235px;
 height: 465px;
    background-color: #706b64;
    box-shadow: 0px 2px 5px #1c1a19;
    padding: 10px;
    color: white;
    font-size: 0.9em;
 
 
}
#fleche_bulle
{
    position: absolute;
    top: 100px;
    left: -12px;
}

/* Footer */

footer
{
    
 border-radius: 5px;
 box-shadow: 0px 2px 5px #1c1a19;
 border: 1px solid black;
 width: 900px;
 margin: 0px;

}

footer p
{
    font-size: 0.8em;
}

footer h1
{
    font-size: 1.1em;
}

#titre1, #titre2, #titre3
{
    display: inline-block;
    vertical-align: top;
}

#titre1
{
    width: 28%;
}

#titre2
{
    width: 35%;
}

#titre3
{
    width: 31%;
}
#titre3 ul
{
    display: inline-block;
    vertical-align: top;
    margin-top: 0;
    width: 48%;
    padding-left: 2px;
}

1 réponse

Réponse 1 / 1
nerjahoui
18 juil. 2014 à 00:13
Salut,

quelle est la question?

Pour quelque chose de beau et d'agréable à l'oeil prenez un papier et un crayon et vous dessinez une maquette de mise en page. Éventuellement complétez par une recherche de couleurs et l'utilisation de votre éditeur graphique préféré.
Si la question est comment on devient graphiste et on fait de beaux design sans jamais avoir appris et sans expérience la réponse est évidemment que c'est impossible.
CSS sert à intégrer votre graphisme et vous pouvez très bien vous contenter de faire uniquement du CSS puis de l'améliorer petit à petit.
Bien sûr même si CSS est un langage de balisage relativement simple pensez pas tout savoir en une journée de pratique. Utilisez les aides que vous trouverez en ligne comme alsacréations http://www.alsacreations.com/article/lire/533-initiation-au-positionnement-en-css.html , open class room et bien évidement la bible du w3C. http://www.w3schools.com/
L'intérêt et tout le but du CSS comme son nom l'indique est que vous pouvez faire une feuille de style externe et revenir dessus sans problème. Contentez vous de faire quelque chose qui convient à votre site et efficace(et sans bug, déjà il y a du boulot). Comme un coiffeur, un cordonnier, l'apprenti webdesigner/intégrateur web ne fera pas sa meilleure coiffure ou chaussure sur son premier essai...alors apprenez et soyez humble.

PHP? C'est un langage de script, donc très simple si vous connaissez C++ un langage compilé avec des pointeurs et la gestion de la mémoire.
Cependant PHP sert dans 99% des cas à utiliser la fonction echo().
echo() signifie écrire donc ça revient à dire: écris moi du CSS, écris moi du HTML, écris moi le contenu d'une base de données.
Donc pour ça intéressez vous en priorité aux bases de données et son langage SQL.
SQL est un langage de bas niveau: il est simple, comporte peu de fonction et de possibilité de programmation. Car ce n'est pas son but. Allié avec mySQL(BD gratuite) il est rapide et adapté au web.

Donc les renseignements vous les trouverez dans les sites et cours récent(visez HTML5 qui intégre Javascript et des bibliothéques de codes spécifiques) et dans la description des normes des technologies que vous utilisez. C'est trivial: quand vous utilisez un outil vous regardez le manuel.
Pour la qualité ça dépendra de votre expérience et de votre respect des normes.
Ce n'est pas un point obligatoire mais ce n'est pas non plus à négliger; un site web responsive est 'censé' l'être en collant aux normes mais d'autres facteurs rentrent en jeu.
http://validator.w3.org/
0

Discussions similaires

trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
HTML - définir taille bouton
Diva -
Utilisateur anonyme -

14 réponses
[CSS] Mettre un objet au premier plan
Achillion -
tiran58 -

2 réponses