EDN forum

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

CsN Fusée

rank_special.png

Avatar

Inscrit le: 23/02/2010

Message: 2109

Commentaires: 4

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 :)

Administrateur

rank_admin.png

Avatar

Administrateur
WebDesigner

Inscrit le: 01/08/2009

Message: 8128

Commentaires: 375

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.



- Pas de support par Message Privé, merci.
- Mes badges de compétences.
Youtube    

CsN Fusée

rank_special.png

Avatar

Inscrit le: 23/02/2010

Message: 2109

Commentaires: 4

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 !

CsN Fusée

rank_special.png

Avatar

Inscrit le: 23/02/2010

Message: 2109

Commentaires: 4

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 :)

Modérateur

rank_modo.png

Avatar

Modérateur(s)

Inscrit le: 17/09/2009

Message: 2254

Commentaires: 23

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.
Mail Site web    

Administrateur

rank_admin.png

Avatar

Administrateur
WebDesigner

Inscrit le: 01/08/2009

Message: 8128

Commentaires: 375

Le 28/05/2017 à 22h20
Bonsoir,

Tu es juste tombé au bon moment ;)

Bonne soirée,
Swan.



- Pas de support par Message Privé, merci.
- Mes badges de compétences.
Youtube    

CsN Fusée

rank_special.png

Avatar

Inscrit le: 23/02/2010

Message: 2109

Commentaires: 4

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

Qui est en ligne ?
Qui est en ligne ?

Qui est en ligne ?

Au total il y a 1 Utilisateur en ligne :: 0 Administrateur, 0 Modérateur, 0 Membre et 1 Visiteur
( basées sur les utilisateurs actifs des 5 dernières minutes )
Utilisateur en ligne: Aucun membre connecté

Membres connectés au cours des dernières 24 heures:

Swan, hight_tower, lise, janus57, Sodeska, enecowsertraele, Olivier, arraraeric, Fingolfin,

Légende

 [ Administrateur(s) ]   [ Modérateur(s) ]   [ Helpers]   [ WebDesigner(s) ]   [ Membres ]