Coup de pouce CSS

Question

zeplin

10 Dec 2016 à 23:13

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/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">Acceuil</a> 
					<a href="idee.html">L'idée</a>
					<a href="personnages.html">Personnages</a>
					<a href="ferme.html">La ferme</a><br />
					
				
					<a href="extra.html">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">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

http://pix.toile-libre.org/upload/img/1481402677.jpg
http://pix.toile-libre.org/?img=1481402677.jpg
</spoiler>
Modifié par zeplin (10 Dec 2016 - 23:15)

Olivier C

11 Dec 2016 à 04:51

Bonjour,

Le design fait très très daté, vous vous êtes inspiré d'un vieux thème ? J'espère que vous n'allez pas laisser les couleurs telles quelles...

Q1/ <article> est certes définit en inline-block mais a aussi une largeur de... 80.1% (pourquoi la décimale ?), ainsi qu'une bordure de 1px qui se surajoute cette largeur (car l'élément ne bénéficie pas de la règle 'box-sizing:border-box'). Donc, dès qu'il n'a plus de place l'élément passe en dessous de la colonne de gauche, définie en pourcentage elle aussi.

Très récemment un alsanaute avait ouvert un fil sur le sujet, on avait proposé trois solutions, vous n'avez que l'embarra du choix : Responsive : div en dessous d'une autre

Q2/ Ce que vous cherchez à faire est un "sticky menu", impossible à faire sans javascript. Vous pourriez tenter un compromis en mettant les items de navigation tout en haut de la bannière et en les y laissant là, en position fixed, en toute circonstance. Dans ce cas plus besoin de javascript.

Q3/ Il faut créer un ID spécifique par bannière puis adjoindre un background-image différent par ID ainsi déclaré. Et attention : en responsive votre bannière ne donne plus rien, faites un 'background-size:cover', ça ira beaucoup mieux.

Q4/ Pour centrer le site faites quelque chose comme ceci :

.bloc_page {
    max-width: 80rem; /* Mettez la valeur et les unités que vous voulez */
    margin: 0 auto; /* J'ai ajouté un 0 pour annuler un centrage vertical, qui de toute façon n'aurait pas fonctionné tel quel, mais c'est plus propre ainsi */
}

Voilà, je vous souhaite bon courage.

zeplin

13 Dec 2016 à 00:21

Ola Olivier.

.. Et bien pour le design, je fais simple pour apprendre ..
Quelques bases/conseils pour que mon design ait des traits modernes ?
Jouer plus avec le degrade/transparence des couleurs ? Des boutons/boites en relief ?

Pour le reste, je me garde ca et m'y mettrais une fois rentre !

Merci beaucoup !

PS : Je suis desole pour ce code qui prend autant de place .. <spoiler> n'est pas pris en compte ..
Je ne laisse que le dossier a telecharger peut etre ?
Modifié par zeplin (13 Dec 2016 - 00:23)

Olivier C

13 Dec 2016 à 06:17

zeplin a écrit :
Quelques bases/conseils pour que mon design ait des traits modernes ?
Jouer plus avec le degrade/transparence des couleurs ? Des boutons/boites en relief ?

Faites plutôt moins que plus : moins d'effets d'ombre (car elles donnent un aspect "sale" au template), pas d'arrondit sur le header (ou alors au contraire il en faut sur toutes les boites). La couleur bleu (CE bleu)... sur fond marron (Ce marron)... À ce compte là commencez par des dégradés de gris (texte noir sur fond blanc sinon), ce serait moins pire. L'effet bordure blanche irrégulière sur la photo du header... à éviter absolument là aussi. Il existe de nombreuses sources d'inspiration pour créer un site moderne. Les articles ne manquent pas, même sur Alsacréations, mais surtout allez voir des sites.

zeplin a écrit :
Je ne laisse que le dossier a telecharger peut etre ?

Forkez plutôt ce code en ligne : CodePen. Je détruirais cette page par la suite.

dylav

16 Dec 2016 à 00:12

Bonjour à tous,

Tiens tiens, voici un titre que je connais : Coup de pouce CSS !
J'avoue être également passé par ici pour trouver certaines réponses dont je comptais faire bénéficier Zeplin : [Résolu] Implémenter une barre de navigation toujours visible... mais dont j'avais aussi l'intention d'hériter au titre d'un projet personnel actuellement en gestation !

Zeplin, j'espère que tu sauras faire la synthèse de nos propositions... Smiley smile

Une précision pour le design : la tendance est à l'épuration (disparition des coins arrondis, des reliefs, des ombres), ce qui est paradoxal maintenant que CSS3 permet des tas de choses de ce genre en natif... Au début, ça m'a choqué, tous ces « à-plats », mais finalement je les trouve tout à fait élégants ! D'ailleurs, tout ce qui simplifie le code (HTML, CSS) est autant de gagné en compréhension ultérieure lors des inévitables maintenances. C'est sans doute également meilleur en matière de performance d'affichage.
Modifié par dylav (16 Dec 2016 - 00:23)

Sujet clos

CSS et mise en forme, CSS3

Coup de pouce CSS