Easy-Design.Net forum




Aide générale [Réglé] Aide CSS pour futur accueil

m-ickael Membre non connecté

EDN Maitre-Sage

Rang

Avatar

Inscrit le : 23/02/2010 à 09h15

Messages: 2296

Le 28/05/2017 à 14h58
Salut :)

ça fait un petit moment que je ne suis pas venu demander de l'aide en CSS :D

En effet, je souhaite refaire ma page d'accueil. J'ai travaillé sur quelque chose de sympa, mais peu ergonomique en dehors du PC (mobile / tablette) .. Enfin .. Ce que je veux dire, c'est que selon la taille de l'écran, je n'aurai plus trois rubrique l'une à côté de l'autre, mais deux et une en dessous, ce qui est pas très beau !

Voici la page en question : http://planet-truck.fr/site/pages/accueil-du-site

Il y a trois images .. Je pense que c'est réalisable en CSS, mais j'avoue que démarrer complètement un CSS, est trop compliqué pour moi. J'y arriverai, mais en deux ou trois semaines :D .. Je préfère demander à des experts ..

Donc, avec un div style ..... on arrive à faire quelque chose, mais pas du tout comme l'image. D'où le fait que j'ai fais des images (bien plus simple pour moi).

Merci :)
Swan Membre non connecté

Administrateur

Rang

Avatar

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 28/05/2017 à 17h34
Bonsoir,

Oui bien sur que c'est faisable en div etc ..
C'est juste le coin droit angulaire qui pose souci, il faudrait trouver comment faire...

En Gros pour le htm :

Code TPL :
<div id="box1">
    <p> <i class="fa fa-bars ump-open"></i></p> <!--  <== là l'image en fontawesome -->
    <p> 
        <a href="/site/forum/index.php" class="title1" title="XXXXXXX"><i class="fa fa-users"></i>&nbsp;&nbsp;FORUM</a>
        <br /> <span class="zonetext">Ton texte</span>
    </p>
</div>
<div id="box2">
    <p> <i class="fa fa-bars ump-open"></i></p>  <!--  <== là l'image en fontawesome -->
    <p> 
        <a href="/site/forum/index.php" class="title2" title="XXXXXXX"><i class="fa fa-users"></i>&nbsp;&nbsp;ACTUS</a>
        <br /> <span class="zonetext">Ton texte</span>
    </p>
</div>
<div id="box3">
    <p> <i class="fa fa-bars ump-open"></i></p>  <!--  <== là l'image en fontawesome -->
    <p> 
        <a href="/site/forum/index.php" class="title3" title="XXXXXXX"><i class="fa fa-users"></i>&nbsp;&nbsp;VIDEOS</a>
        <br /> <span class="zonetext">Ton texte</span>
    </p>
</div>


Pour le css, il est commun au trois box , donc :
Code CSS :
 pour le css :
 
 
#box1, #box2, #box3 {
    color: #FFFFFF;
    display:inline-block; /* cela te permettra de mettre en float tes box */
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    height:150px; /* hauteur de ta box */
    width : 250px; /* largeur de ta box */
}
 
#box1{ border-bottom: 2px solid blue /* mets ta couleur en hexadécimal */}
#box2{ border-bottom: 2px solid orange /* mets ta couleur en hexadécimal */}
#box3{ border-bottom: 2px solid black /* mets ta couleur en hexadécimal */}
 
.title1{
    color: blue /* mets ta couleur en hexadécimal */
    text-transform: uppercase; /* mets le titre tout en majuscule */
    font-size: 1.5em; 
    font-weight: bold;
    text-align: left;
}
.title2{
    color: orange /* mets ta couleur en hexadécimal */
    text-transform: uppercase; /* mets le titre tout en majuscule */
    font-size: 1.5em; 
    font-weight: bold;
    text-align: left;
}
.title3{
    color: black /* mets ta couleur en hexadécimal */
    text-transform: uppercase; /* mets le titre tout en majuscule */
    font-size: 1.5em; 
    font-weight: bold;
    text-align: left;
}
 


Après il te suffit de fignoler ;)

Swan.


swan_signature

Site web    
m-ickael Membre non connecté

EDN Maitre-Sage

Rang

Avatar

Inscrit le : 23/02/2010 à 09h15

Messages: 2296

Le 28/05/2017 à 19h08
Salut.

Je ne m'attendais pas à ce que ça sorte sur un plateau en argent :D .. Que dire .. Je vais tester ça bien sûr !

Je dois donc mettre tout ça entre les balises en HTML, ou dois-je créer un CSS, et mettre le div class= en html sur une page?

Le coin angulaire n'est pas un problème, je ferai sans :)

Juste merci !
m-ickael Membre non connecté

EDN Maitre-Sage

Rang

Avatar

Inscrit le : 23/02/2010 à 09h15

Messages: 2296

Le 28/05/2017 à 19h40
J'ai mis le CSS dans page.css et le DIV dans la page entre les balises HTML. Me reste à peaufiner :)

Merci :)
hight_tower Membre non connecté

Modérateur

Rang

Avatar

Modérateur(s)

Inscrit le : 17/09/2009 à 11h09

Messages: 2298

Le 28/05/2017 à 20h54
m-ickael:
Salut :) ça fait un petit moment que je ne suis pas venu demander de l'aide en CSS :D [/b]


C'est pour cela que nous sommes là, pour vous aider !



Chez Swan Site design Web phpboost3. Membre depuis 2009 & modérateur depuis 2011.
Swan Membre non connecté

Administrateur

Rang

Avatar

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 28/05/2017 à 22h20
Bonsoir,

Tu es juste tombé au bon moment ;)

Bonne soirée,
Swan.


swan_signature

Site web    
m-ickael Membre non connecté

EDN Maitre-Sage

Rang

Avatar

Inscrit le : 23/02/2010 à 09h15

Messages: 2296

Le 31/05/2017 à 21h22
:D .. J'ai pas bcp bosser dessus. La mise en forme est bizarre sur ma page, et je ne me suis pas encore penché dessus pour voir comment y remédier.

Merci en tout cas pour vos messages :) Je reprendrai le projet dans le weekend je pense.
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie