Sujet Précédent Sujet Suivant

Coup de pouce CSS

Fermé
zeplin1 Messages postés 2 Date d'inscription samedi 10 décembre 2016 Statut Membre Dernière intervention 12 décembre 2016 - Modifié par zeplin1 le 10/12/2016 à 22:11
codeurh24 Messages postés 761 Date d'inscription samedi 29 mars 2014 Statut Membre Dernière intervention 8 septembre 2018 - 13 déc. 2016 à 01:24
Bonjour par ici !

Rapidement : Je suis un voyageur a long court qui aimerais -d´'une certaine maniere- aider un peu ses paternels.
Ils sont aquaculteurs (Huitres/crevettes) et j'aimerais leur faire un site vitrine pour qu'il puissent partager leur savoir. Car ce sont de veritables passionnes (malgre le travail penible qui caracterise le metier (qui a fait la collecte/tri d'huitres en saison d'hiver savent..)).

Afin de faire quelque chose de leger et portable j'ai donc commence un site statique en HTML/CSS (sans javascript) Et me voila deja a mes premieres bosses... Si vous pouviez me donner un petit coup de pouce ..

NOTE : Les sources sont telechargeables en .zip a la fin du post. Ces fichiers sont lisibles sous les spoilers aussi.


1.

Je me demande pourquoi le bloc <article> ce met en dessous du <div class="bloc-g"> (le bloc avec le champ de recherche a gauche) LORSQUE la fenetre est REDIMENSSIONNEE en largeur ().

Autrement dis : j'ai donc un second menu sur la gauche qui est en "inline-block" pour etre a coter de mon <article>.
Quand je redimenssionne la fenetre en largeur mon <article> ce met automatiquement en bas du <div> .. Moi pas demande ca. m'voyez ?

Alors j'ai cree un autre <div> pour que ces deux blocs soit vu comme un seul et unique bloc. Mais ca na pas solutionne mon probleme...
Une idee ?

margin: auto ne me sert pas
min-margin. %; non plus

Precision : Ces deux blocs sont dans la balise parent <section> . Un rapport ?


2.

J´aimerais aussi que le menu ce colle (en diminuant de taille aussi) en haut de l'ecran lorsque je defile vers le bas de la page (il n'y a pas de contenu dans la page 'index' mais une fois rajoute, on devra 'scroller' vers le bas.
autrement dis :
la proprietee "position" avec la variable "fixed" sert a ancrer un objet a un endroit precis sur l'ecran/page, et restera la, meme quand on fera defiler la page.

C'est super ! Mais dans mon cas je voudrais que le menu ne ce fixe QUE sur le haut de la page, quand elle vient buter sur ce menu et
l'emporte avec lui dans sa descente.


3.


Comment avoir un Background (banniere) different sur le <header> des differentes pages du site ( Je ne vous est pas file les autres pages du menu puisque la page 'index' (accueil) est ma base) ?

4.

Pour centrer et limiter mon site sur les plus grandes resolutions, j'agis sur la balise <body> avec un 'position: center' et un 'max-width' defini en pixels ?


...


J'allais poser que la premiere question mais je me suis laisser emporter ... En tout cas c'est celle dont la logique me depasse et qui me chamboulle vraiment le design.



j'ai fais quelques recherches mais le cybercafe + debit tres bas ne m'aide pas trop. J'habite sur une montagne en ce moment, deconnecte d'internet (c'est pas plus mal) donc je risque d'etre peux reactif mais je suivrais le fil !


Merci de m'avoir lu !


Voici les sources du site (fichier HTML 'index'(2kb) et CSS 'style' (4kb) + image de banniere 'port' (229kb) (archive .zip de 226.4 kB) :

https://framadrop.org/lufi/r/HL-QFWXzDe#H8rSWrIYB8Nvd6IOG5rjT0IUQTmXN4ffbhFgZuHEsok=

ou en direct :

Spoiler




accueil HTML 



<!DOCTYPE html>

<html>
 <head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="style.css"/>
  <title> website </title>
 </head>
 <body>

  <div class="bloc_page">

  <header> 
    <nav> 
<p>
     <a href="index.html" rel="nofollow noopener noreferrer" target="_blank">Acceuil</a> 
     <a href="idee.html" rel="nofollow noopener noreferrer" target="_blank">L'idée</a>
     <a href="personnages.html" rel="nofollow noopener noreferrer" target="_blank">Personnages</a>
     <a href="ferme.html" rel="nofollow noopener noreferrer" target="_blank">La ferme</a><br />
     
    
     <a href="extra.html" rel="nofollow noopener noreferrer" target="_blank">Extra</a>
</p>
<!-------- Essayer <br /> sans <p> lors de validation -------->
    </nav>    

  </header>


 <section>
  <div class="bloc-g">
    <p> 
     <label for="recherche">Recherche :</label> <input type="search" name="recherche" id="recherche" size="20" maxlenght="40" placeholder="mots-clef" />
    </p>
   <p>
   chouette<br />
   cacahuete
      <a href="ecrire.html" rel="nofollow noopener noreferrer" target="_blank">Nous ecrire </a>
   </p>
  </div>
 
  <article class="centrer-texte">

<h1 id="bienvenu">Bienvenue sur le <strong>nouveau site web</strong> </h1>


  </article>
 </section>
  
 <footer> <p>webmaster contact </p> </footer>
  
 </div>
 

 </body>
</html>



CSS 

.bloc_page

{

max-width: 100%;
margin: auto;
}

body
{

background-color: rgba(126,64,4,0.3);
font-family: "DejaVu Serif", "Trebuchet MS", Arial, sans-serif, "DejaVu Serif";
}

header
{
display: inline-block;
position: relative;


right: 0.2%;
width: 100%;
height: 20em;
margin: auto;


background-image: url("port.jpg");
background-repeat: no-repeat;
background-position: bottom;
background-size: 100%;


border: 3px solid black; 
border-bottom: 0px;
border-radius: 10px;
box-shadow: 0px -3px 3px black ;

}


nav
{

display: inline-block;
position: absolute;
bottom: 0%;


max-height: 100%;
width: 100%;


margin: auto;
padding-top: 0.4%;
padding-bottom: 0.1%;

background-color: rgb(24,24,24); /* Pour les anciens navigateurs*/
background-color: rgba(24,24,24,0.5);
border-radius: 5px;

text-align: center;

}

nav p     /******* verifier validite*******/

{
display: inline;

}

nav a   /***mots/cases de navigation**/

{

display: inline-block;
position: relative;


margin: 0.1% 2% 0.1% 0;
padding: 0.2% 0.4%;


border: 1px solid black;
border-radius: 5px;
background-color: rgba(126,64,4,0.6);
box-shadow: 4px -2px 4px black;

font-size: 1.8em;
color: rgba(100,200,250,0.9);
text-shadow: 4px -2px 4px black;

white-space: pre;
}



a
{
text-decoration: none;
}

nav a:hover
{
color: rgba(50,300,300,1);

}


section
{
display: block;
}

.bloc-g
{
display:inline-block;
vertical-align: top;

margin-left: 0.5%;


width: 17.4%;
min-width: 6em;
height: 60em;

padding-left: 10px;

border: 2px solid black;
border-right: 1px solid black;

box-shadow: -3px -2px 3px black;

overflow: auto;
border-top: 1px solid black;
}


article
{
display: inline-block;
vertical-align: top;
width: 80.1%;


padding-top: 0.5% 5%;




border: 1px solid black ;

box-shadow: 3px -2px 3px black;



}

article p

{
margin: 30px 70px 30px 70px;
line-height: 23px;
font-size: 18px;
}


footer
{
display: block;
position: absolute;
vertical-align: baseline;
text-align: center;

}


.centrer-texte

{
text-align: center;
}

#bienvenu
{
color: rgba(0,50,350,1);
font-size: 2em;
}


h1
{ 
font-family: Georgia, "Trebuchet MS", sans-serif, "DejaVu Sans";
text-align: center;
padding: 2em 2em;

}

.espace

{
margin-top: 50px;
}

em
{
font-variant: small-caps;
font-style: normal;
}


.inter /* Garde le mot internet normal en Acceuil */
{
font-weight: normal;
}

.comfin /* commentaire de fin en Acceuil. */
{
font-size: 0.7em;
}
.port /* dimension banderole tourisme */
{
display: block;

width: 97%;
margin: auto;

border: 5px solid black;
border-radius: 50px;
}


.palais  /* enlever le small-caps defini a tout les <em></em> */
{
font-variant: normal;
}


/***************  formulaire de contat **********************/

form 

{
position: relative;
text-align: center;
}




textarea  
{
display:inline-block;
vertical-align: top;

width: 35%;
height: 20em;
}

.message
{
display: inline-block;
vertical-align: top;
}

.nom
{
position: relative;
right: 5.6%;
}
.messag
{
position: relative;
left: 2.8%;
}

.e-mail
{
position: relative;
right: 8.5%;
}

.tel
{
position: relative;
right: 7.3%;
}

.envoyer
{
position: relative;
left: 5%;
}
/********************fin formulaire contact **********************/


banniere


https://pix.toile-libre.org/?img=1481402677.jpg


2 réponses

Réponse 1 / 2
codeurh24 Messages postés 761 Date d'inscription samedi 29 mars 2014 Statut Membre Dernière intervention 8 septembre 2018 123
Modifié par codeurh24 le 11/12/2016 à 08:23
Bonjour.

Tu souhaite faire un site vitrine simple en html mais tu inclus une recherche qui va inclure du php et tu souhaite un menu qui suit le scroll mais ça demande du javascript;

Quand tu fait une condition: 
"quand elle vient buter sur ce menu"

ça demande un langage de programmation or le html css ne fait que afficher a part lors du survole de la souris.

Si tu veux que tout tienne en place en redimensionnant la fenêtre, il faut utiliser les media queries ou bootstrap. ça encore c'est pas simple.
si tu veux faire simple et vieux. tu fixe ta page a 1000px, là ça tiendra en place tout le temps.

Dans ton code, il y a beaucoup de chose qui ne vont pas. j'ai donc vite abandonné l'idée de bidouiller sur du bidouillage.
J'ai tout refait.

http://essais.lionzone.fr/zeplin1/
http://essais.lionzone.fr/zeplin1/site.zip

il te reste plus qu'a continuer en essayant de faire pareil que ce que je tes fait.
n’hésite pas a reposer des questions. si tu comprend pas tout ce que je fait.
0
Réponse 2 / 2
zeplin1 Messages postés 2 Date d'inscription samedi 10 décembre 2016 Statut Membre Dernière intervention 12 décembre 2016
12 déc. 2016 à 23:19
Waouw ! Merci Codeur !

Je compte me mettre a PHP par la suite (je rajouterais l'option de recherche par la suite).

Pour le menu qui suit le scroll, je me basais sur la fonction display: fixed qui laisse un... objet? au meme endroit sur la fenetre. C'etait presque bon sauf que j'aurais aime qu'il ce colle en top-bordure de la fenetre sans utiliser javascript. Dommage .. Je m'y mettrais aussi mais la raison pour laquelle je suis reticent a utiliser un autre language c'est que ca augmente le taux de failles exploitable...
Bien sur ce n'est pas un site qui va manipuler des informations critiques mais par principe .. J'essayerais de faire ca bien et donc avec le moins de failles beantes possible.

Je te tiens au jus ! Merci !
0
codeurh24 Messages postés 761 Date d'inscription samedi 29 mars 2014 Statut Membre Dernière intervention 8 septembre 2018 123
Modifié par codeurh24 le 13/12/2016 à 01:25
Ok. Je comprend que tu évite un maximum les failles et c'est une bonne chose d’être sensible a ça.
Avec html et css. Tu aura aucune faille car c'est juste de la l'affichage que n'importe qui peux copier ou modifier a la voler sur sont pc (juste de chez lui pas sur le site web).

Le javascript c'est aussi un langage qu'on peux voir donc, il faut utiliser le javascript pour aider ou animer ce que le css ne sais pas faire. Le javascript ne doit pas comporter de données sensibles. Ici le déplacement du menu qui suit le scroll n'est pas sensible pour s'introduire dans le serveur. Améliorer le confort et le temps du choix fait pas le visiteur c'est de l'ergonomie. C'est un métier.

Le php lui permet l’accès aux données sensibles et la création de fichier.
Donc dans ce cas, on ne peux pas éviter les failles a 100% mais pensé a la meilleur façon d'écarter toutes mauvaises façons de programmer pour ensuite sécuriser les portes qui restent obligatoirement ouvertes.
Exemple une recherche:
- Ne pas ré-afficher le champ de recherche dans du html
sinon dans d'autres cas similaire (forum) il faut utiliser des fonctions qui traite
les chaines de caractères comme htmlspecialchars() ect ..
- Gérer les caractères d'échappement et ces équivalents.
0

Discussions similaires

site coup d un soir est une arnaque
THIERRY -
Rico -

54 réponses
je cherche un site de rencontre sérieux et pas cher
annabellekk -
Afrikarnak -

17 réponses
Whatsapp pouce
Sousoune -
Sojiro88 -

15 réponses
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses