Partage

diviser une page d'accueil

Sujet résolu
12 mars 2018 à 23:11:54

bonjour a tous , 

je vous sollicite encore une fois , j'aimerais pour ma page d'accueil faire dans le cadre de gauche , une presentation ecrite et dans le cadre de droite une photo avec un petit texte au dessus de celle ci , que je pourrais changer suivant les differentes fetes de l'année

voici le code htlm et le css

<section>
   <article class="articleun">
      
  </article>
    
  <article class="articledeux">
     
  </article>
  
</section>
article {
	display:inline-block;
	vertical-align:middle;
	background-color:#262626;
	border:solid 1px;
	border-color:#515151;
	
}

.articleun {
	width:180px;
	height:200px;
	color: #FFF;
	margin: 30px;
	padding: 100px;
	
}

.articledeux {
	width:300px;
	margin:20px;
	height:200px;
	padding:100px;
	color: #FFF;


pouvez vous m'aiguillez pour avoir la meilleur solution , h1 / h2 / p ou autre ?? je sais pas trop comment commencer :D

merci a tous !!!

-
Edité par Japhet07 12 mars 2018 à 23:20:16

Vous êtes demandeur·se d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur·se web junior

Je postule
Formation
courte
Financée
à 100%
12 mars 2018 à 23:33:50

Hello,

Il va falloir donner bien plus d'informations pour comprendre ta demande...

Quel type de contenu, du texte, des titres en plus, des sections, etc...

-> https://jsfiddle.net/yocka2vd/3/ 

-
Edité par Lucky13 12 mars 2018 à 23:34:59

13 mars 2018 à 9:19:31

Pourquoi vouloir à tout prix faire des cadres ?? pourquoi ne pas mettre ta photo avec un texte flottant sur le côté souhaité ? 

Pour la synthaxe et le référencement, cela sera plus intéressant. D'autant plus si le texte est important (présentation, accroche du site ...etc)

Sinon, juste une réflexion : attention avec les fonds noirs ! Sur le plan visuel, ils sont fatiguant pour les yeux. De plus, ils révèlent tous les défauts des photos. Si c'est un site de pâtisserie, la qualité de tes photos jouent un rôle très important !

A toi de voir, mes si tes clichés sont pas fait par un pro ou même fait par un semi-pro ....

13 mars 2018 à 18:04:53

Pour lucky , voila a quoi j'aimerais que ressemble ma page d'accueil , ce qui est entourer en rouge n'est pas neccessaire mais j'aimerais quand méme avoir les code htlm et css pour les faire au cas ou !! :D

pour Nippori , oui , ta solution est interessante si je peux faire comme sur la photo du dessus avec des float , en fait je sais pas trop comment attaquer mes codes , il me manque plus que ca pour finir ma page d'accueil

14 mars 2018 à 7:43:34

V'là j'ai essayer un truc essaye si sa te convient :

Html:

<section>
  <div class="presentation">
    <article class="articleun">

      <h1>Présentation</h1>

      <p>
        Non ergo erunt homines deliciis diffluentes audiendi, si quando de amicitia, quam nec usu nec ratione habent cognitam, disputabunt. Nam quis est, pro deorum fidem atque hominum! qui velit, ut neque diligat quemquam nec ipse ab ullo diligatur, circumfluere
        omnibus copiis atque in omnium rerum abundantia vivere? Haec enim est tyrannorum vita nimirum, in qua nulla fides, nulla caritas, nulla stabilis benevolentiae potest esse fiducia, omnia semper suspecta atque sollicita, nullus locus amicitiae.
      </p>
      <p>
        Batnae municipium in Anthemusia conditum Macedonum manu priscorum ab Euphrate flumine brevi spatio disparatur, refertum mercatoribus opulentis, ubi annua sollemnitate prope Septembris initium mensis ad nundinas magna promiscuae fortunae convenit multitudo
        ad commercanda quae Indi mittunt et Seres aliaque plurima vehi terra marique consueta.
      </p>
      <p>
        Ipsam vero urbem Byzantiorum fuisse refertissimam atque ornatissimam signis quis ignorat? Quae illi, exhausti sumptibus bellisque maximis, cum omnis Mithridaticos impetus totumque Pontum armatum affervescentem in Asiam atque erumpentem, ore repulsum et
        cervicibus interclusum suis sustinerent, tum, inquam, Byzantii et postea signa illa et reliqua urbis ornanemta sanctissime custodita tenuerunt.
      </p>

    </article>

    <article class="articledeux">
      
        <img src="http://www.coin-des-animateurs.com/wp-content/uploads/2013/05/choco.jpg" class="imgLarge" />
      <img src="http://cdn.commentseruiner.net/10785-thickbox_default/la-manette-de-jeux-videos-en-chocolat.jpg" class="imgPetite" />
<img src="http://p0.pic.akm.vodst.com/17650/17650.comment-transformer-vos-restes-de-chocolat-pour-les-fetes.w_1280.h_720.m_zoom.c_middle.ts_1340704514..jpg" class="imgPetite" />
    </article>
  </div>
</section>

et le CSS :

.presentation {
  margin: 1%;
  max-width: 98%;
  width: 98%;
  background-color: #262626;
}

article {
  margin : 2%;
  display: inline-block;
  vertical-align: top;
}

.articleun {
  max-width: 40%;
  color: #FFF;
  overflow: auto;
}

.articledeux {
  text-align: center;
  max-width: 50%;
  color: #FFF;
}

.imgLarge {
  width : 100%;
}
.imgPetite {
  width : 50%;
  float:left;
}
h1{
  color : PeachPuff ;
  text-shadow : -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 0px 0px 20px SaddleBrown ;
}
.presentation p{
  color: PeachPuff ;
  text-shadow : -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 0px 0px 15px SaddleBrown ;
}




14 mars 2018 à 17:28:43

Kaidan !!!!! C'est parfait , je te remercie vraiment , je vais juste faire quelques retouches pour affiner ma page d'accueil mais y a tout ce que je voulais dans tes codes !! encore merci a toi , c'est sympa de ta part !!!:D

c'est vraiment bien ce forum !! ;)

14 mars 2018 à 20:19:14

Hello ou Re,

Désolé du retard, mais je vois que ton sujet à bien avancé ^^ 

Juste pour dire de ne pas ou oublier l'attribut  alt pour chaque images, si tu n'as pas de description alternative un alt="" reste valide ^^

14 mars 2018 à 20:49:11

oui Lucky , c'est noté , merci a toi !!!:D
14 mars 2018 à 22:32:59

Re !!

en fait je profite de votre savoir pour vous demander un autre petit coup de main

j'aimerais reduire l'espace qui est entouré de rouge , pouvez vous m'aider encore une fois ?? :D

je mets la photo et les codes , pour le css j'en suis pas sur pour celui que j'ai fait

<div class="horaires">
<p>Les horaires d'ouverture<p/>
</div>

<div align="center">
  <table border="1" align="center" style="width:800px; font-family: Verdana, Geneva, sans-serif; font-size: 20px; color: #FFF;">
    <tr>
      <td height="40px" colspan="2" style="text-align: center; font-family: Verdana, Geneva, sans-serif; font-size: 20px; color: #FFF;">Semaine du 10 au 16 avril</td>
    </tr>
    
    <tr style="text-align: center">
      <td width="50%" height="40">Lundi</td>
      <td width="50%">Fermé</td>
    </tr>
    
    <tr style="text-align: center">
      <td height="40">Mardi</td>
      <td>14 h - 18 h</td>
    </tr>
    
    <tr style="text-align: center">
      <td height="40">Mercredi</td>
      <td>14 h - 18 h</td>
    </tr>
    
    <tr style="text-align: center">
      <td height="40">Jeudi</td>
      <td>14 h - 18 h</td>
    </tr>
    
     <tr style="text-align: center">
      <td height="40">Vendredi</td>
      <td>14 h - 18 h</td>
    </tr>
    
    <tr style="text-align: center">
      <td height="40">Samedi</td>
      <td>10 h - 12 h / 14 h - 17 h</td>
    </tr>
    
    <tr style="text-align: center">
      <td height="40">Dimanche</td>
      <td>10 h 12 h</td>
    </tr>
    
</table>

<br>

</div>

et le css

.horaires p{
	color: #FFF;
	font-family: "Brush Script MT";
	font-size: 40px;
}

je vous remercie par avance !!

14 mars 2018 à 22:50:17

Est-ce qu'il y a une marge sur le menu au dessus ? il manque plein d'info... balance tout le CSS parce qu'un objet peut en pousser un autre >_<
15 mars 2018 à 11:32:45

en effet Kaidan. Sans oublié en responsive !
15 mars 2018 à 18:19:28

C'est bon Kaidan , en fait ma police etait un peu special , sa taille etait de 40 , d'ou l'ecart , j'ai changé ma police et mis la taille de 24 px et c'est parfait , par contre oui , je vais essayer de faire mon site en responsive , je sais pas le resultat que je vais obtenir car pour l'instant c'est du chinois pour moi !! :D

Salut Kaidan , juste un petit renseignement

dans le code css que tu m'as donné concernant les images , tu as mis les valeurs en % mais j'aimerais des images fixes , je peux changer les % par des px ?? :)

-
Edité par Japhet07 16 mars 2018 à 18:57:04

16 mars 2018 à 18:57:13

Salut Kaidan , juste un petit renseignement

dans le code css que tu m'as donné concernant les images , tu as mis les valeurs en % mais j'aimerais des images fixes , je peux changer les % par des px ?? :)

16 mars 2018 à 22:49:25

Tu peux mais sa risque de foutre le bordel puisque la valeur sera 'static'... Là(en %) l'image est limité à la taille de la boite qui la contient, si la boite grandi ou rétréci l'image aussi... De surcroît c'est un code test pour te donner un exemple, donc pas forcément adapter à ce que tu veux réellement...

Si tu balance le code de la page je pourrais peut-être mieux t'aider... comme l'adapté en 'reponsive', sinon tu peux le faire toi même en suivant les cours :p

17 mars 2018 à 19:27:52

Oui !! encore une fois ma langue a été plus rapide que mon cerveau !! je garde les % !!! :p

par contre juste un truc , j'ai fais un header en php avec les 4 premiers elements de ma page d'accueil et pour toute les autres pages ( voir le 1er dessin en haut de la discussion - le header part du logo facebook jusqu'au menu ) 

je garde ca sachant que le header a un hauteur fixe ( 360 px ) ou si c'est preferable de faire un php pour les 4 portions de mon header ?? qu'elle est la meilleure solution ?? :D

17 mars 2018 à 21:52:54

En PHP ? Tu veux dire l'inclure d'un fichier secondaire ? En soit ce n'est pas un gros site mais découper tes parties en différents fichiers est une bonne habitude à prendre selon moi. Ensuite PHP n'influence pas(à moins de le vouloir) ton CSS donc pas de problème.

-
Edité par Kaidan 17 mars 2018 à 21:54:05

17 mars 2018 à 22:27:23

voila la facon dont je pensais que se serait mieux

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>

<style type="text/css">
<!--

body {
	background-color: #000;
}

-->
</style>

</head>

<body>

<?php include("entete facebook.php");?>
<?php include("devise.php");?>
<?php include("logo accueil.php");?>
<?php include("menu.php");?>


</body>
</html>



-
Edité par Japhet07 17 mars 2018 à 22:34:24

17 mars 2018 à 22:47:35

Oui pas de problème, mais tu n'as pas besoin d'ouvrir et fermé PHP à chaque instruction.

<?php include("entete facebook.php");
      include("devise.php");
      include("logo accueil.php");
      include("menu.php");
?>

Referme losrque tu as besoin d'insérer du HTML, sa fera plus claire.

17 mars 2018 à 22:52:20

ah !! d'accord !!! je savais pas !! je fais ca tout de suite

et pour les images en % , c'est a moi de mettre les images a la bonne dimension  , j'y avais pas pensé avant de te demander :p

19 mars 2018 à 19:22:06

Resalut a tous !!

J'ai fini mon site , j'ai juste encore un petit soucis , je regarde un peu sur les forums mais si vous avez une expliquation simple je suis preneur

Error 403 - Forbidden

L'accès au fichier requiert une autorisation.

comment resoudre ce petit soucis , je suis chez 1and1

merci d'avance a tous !! :D

19 mars 2018 à 20:28:09

merci , je regarde !!!;)

heu !! meme avec ton lien , je ne comprends rien :(

-
Edité par Japhet07 19 mars 2018 à 21:11:10

19 mars 2018 à 22:39:34

Verifie que ta page principal soit dans un dossier a accés public sur ton serveur... sl'erreur peut venir de là.

-
Edité par Kaidan 19 mars 2018 à 22:51:40

19 mars 2018 à 22:54:40

tu veux dire ma page " index" ??

et comment je sais et comment je fais pour avoir l'accés public ?? là franchement je seche completement :(

-
Edité par Japhet07 19 mars 2018 à 22:56:49

19 mars 2018 à 23:32:47

Dans ton utilitaire FTP (genre Filezilla) lorsque tu as uploadé ton site, sur le fichier en question tu fais clique droit > propriété... et tu cherches xD

Essaie de suivre ça : https://www.infomaniak.com/fr/support/faq/111/modifier-les-droitspermissions-dun-fichier

23 mars 2018 à 21:35:40

resalut Kaidan , je t'embete encore une fois , apres moults manipulation j'ai reussi a mettre mon site en ligne mais j'ai un petit soucis , comment je dois faire pour avoir un site parfait , je t'envoi une photo , sur mon pc bureau c'est impecc mais sur le portable c'est pas ca , je doit modifier certains trucs dans mon code ou c'est du responsive a faire ??

voila mon site : http://osmose-chocolaterie.com/

j'aimerais que l'ecriture a coté de ma photo soit de bonne taille , je dois mettre une taille de police ou il y a un autre moyen d'avoir une police de bonne taille ??

-
Edité par Japhet07 23 mars 2018 à 22:36:50

23 mars 2018 à 23:15:39

tu es sur quel navigateur / machine pour cet affichage ?

car chez moi, il s'affiche bien, même sur mobile

Par contre en mode mobile, c'est pas beau. L'image qui passe par dessous serait plus joli si tu ne veux pas trop modifier ton travail. Voila de quoi je parle en mobile :

Par contre j'aurais modifié le min-width comme ceci

voila ce que cela donne quand tu passes de pc à mobile et / ou que tu changes l'orientation de ton smartphone :

 Tu vois le potentiel de mettre un peu plus d'espace sur le titre ou menu aussi. Cela fera moins condensé / étriqué.

Si besoin et au plaisir

-
Edité par nippori 23 mars 2018 à 23:31:20

24 mars 2018 à 7:06:23

Hey ! Le responsive serait un must pour un site récent et sa permettrais de gérer tous les cas, cela dit c'est un peu plus complexe à mettre en place que du statique... C'est à toi de voir si tu as la motive et le temps pour.

Au-delà faudrait que tu fasse attention à mélanger les deux correctement parce que là si tu réduit la largeur de la fenêtre tu verras plein de bug...

Oui je suis le mec chiant qui test sous toutes les tailles de fenêtres xD

24 mars 2018 à 19:48:53

Hey !!

Nippori , j'aime beaucoup l'image sous le texte , j'ai essayé min width , le soucis sur pc , il  ya trop d'ecart entre le texte et l'image , j'ai remis max width 50 % , par contre tu parle d'avoir plus d'espace sur le titre ou menu , j'ai pas tout compris ce que tu voulais dire :)

Kaidan , j'ai regardé un peu le responsive et j'aimerais bien le faire pour mon site , je suis motivé et je trouverais le temps de le faire ... :D

merci a tout les 2 pour vos conseils

juste un truc  , c'est quoi la diff entre max et min width ?,

-
Edité par Japhet07 24 mars 2018 à 19:54:37

diviser une page d'accueil

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown