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 

merci a tous !!!

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

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

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 ....

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 !! 

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

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 ;
}

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 !!!

c'est vraiment bien ce forum !! 

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 

oui Lucky , c'est noté , merci a toi !!!

Et Kaidan mérite son +1 

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 ?? 

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 !!

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

en effet Kaidan. Sans oublié en responsive !

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 !! 

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

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 ?? 

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

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

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 ?? 

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

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

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.

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 

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 !! 

https://www.1and1.fr/digitalguide/hebergement/aspects-techniques/http-403-forbidden-la-resolution-dune-erreur-403/

merci , je regarde !!!

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

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

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

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

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

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

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

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

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 ... 

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