Les bases !

Bonjour à tous,

Je but sur un truc simple, mais vous saurez certainement répondre à ma question.

J'essaie, de mettre un texte, puis une image, puis une image puis un texte, et je souhaiterais que le texte1 et l'image 1 soient cote à cote et l'image 2 et le texte 2 également.

Voici le site en tests : http://www.alexbass.net23.net/
Et le résultat attendu : www.sportclean.fr

Je n'y arrive absolument pas

Par avance, je vous remercie de votre aide.

Voici ce que j'ai tenté :

#article1 ,#article2{
	display: block;
	width: 50%;
	background: green;
	vertical-align: middle;
	margin:0px; padding:0px;
}
#aside1, #aside2{
	display:block;
	width: 50%;
	background: blue;
	vertical-align: middle;
	margin:0px; padding:0px;
}

Modifié par Alexbass (29 Oct 2014 - 20:46)

Bonjour Alexbass,

Alexbass a écrit :
un truc simple

Alors ça c'est pour moi !

A chaud comme ça je vois déja plusieurs solutions mais certaines ont des inconvénients.

Par exemple tu peux utiliser un affichage en colonne. C'est le premier truc qui m'est venu à l'esprit.
Tout commence par la balise html COLGROUP

Tu peux aussi utiliser des éléments flottants. Là par contre le travail sera plus niveau du css...

Je pense aussi au modèle de boite inline-block, la solution que j'affectionne.


PS : tu as une erreur dans ton code au niveau de l'ID de l'image pied.jpg ; il ne devrait pas y avoir d'espace. Le séparateur le plus couramment utilisé est le tiret.

Je ne me suis pas encore initié à l'affichage en colonne donc je connais que trop peu le sujet.
Par contre concernant les flottants, je pense que c'est une propriétés idéale pour le positionnement mais la gestion des "clear" est parfois une vrai galère.

C'est pourquoi je préfère appliquer des modèles inline-block à des éléments DIV ; il n'y a pas de conséquence sur le code aval (no clear, better life) et le positionnement est très malléable.

Les tutoriels du site évoquent tous ces sujets, pense à y jetter un oeil, j'y ai appris beaucoup.

Merci de ta réponse assez rapide.

Je pense avoir corriger l'Id de l'image de mon pied de page.

Pour ce qui est de la mise en page, il faut également la possibilité d'avoir les éléments en une seule colonne pour responsive.

Du coup, je ne sais pas trop quoi choisir...

a écrit :
en une seule colonne pour responsive

Les flottants adoptent ce comportement nativement.

Mais dans tous les cas cela dépendra des propriétés de ton conteneur et des MIN/MAX WIDTH/HEIGHT de tes éléments en colonne.

Le choix t'appartient :-P

Ca me fait penser à un autre inconvénient des éléments flottants, il s'agit de gérer la hauteur du conteneur pour empêcher les débordements..

actuellement, avec le inline-block, ça fonctionne si gauche et droite sont inferieur à 50% de width.
Je suis obligé de mettre 49% par exemple, et après les coin des images ne se touchent plus ou la marge gauche et différente de la marge droite.

Avec les flottants, je n'y suis pas arrivé non plus.

#article1 ,#article2{
	/*display: inline-block;*/
	width: 50%;
	background: green;
	vertical-align: middle;
	margin:0px; padding:0px;
	float: left;
}
#aside1, #aside2{
	/*display: inline-block;*/
	width: 50%;
	background: blue;
	vertical-align: middle;
	margin:0px; padding:0px;
	float: right;
}

Modifié par Alexbass (29 Oct 2014 - 19:09)

Bnsoir,

inline-block + width (celle des images) peuvent être utiles ici.

Il te faudra gerer les espaces entre les element en inline-block (voir dans les tutos ici).

Pour l'adaptation selon la largeur de l'ecran, il y a les mediaquerie si tu veut specifier des points de ruptures.

exemple possible : http://codepen.io/anon/pen/jetuJ

Bonsoir Gc-Nomade, et merci d'avoir pris le temps de me répondre.

L'exemple sur le lien que tu donne semble correspondre à ce que je souhaite, mais je n'arrive pas le reproduire.

En ligne, voici ce que ça donne : http://www.alexbass.net23.net/index.php

Je comprends pas ce qui ce passe. .
J'ai enlevé tous mes div, et remis le même code que toi, et en ligne ça marche pas.

* {
    -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
            box-sizing: border-box;
 }
html{
	background-color:lightgrey;
	
}
body{
  max-width: 1024px;
  margin: auto ;
  margin-top: 10px;
  padding: 0;
  text-align: left ;
  background-color: white; /*rgb(204, 204, 204); gris*/
  overflow: hidden;
}

p, img{
  display:inline-block;
  width:50%;
  vertical-align:middle;
}
img{
  position:relative;
}
p {  
  padding:15px;
  margin:0;
  text-align:justify;
  /*box-shadow:50vw 0px  white,-50vw 0px  white;*/
}

Et j'essai desesperement d'utiliser ce menu responsive, sans succès.

http://goetter.fr/nav/nav4/

Je remercie d'ailleurs Raphael pour tout ce qu'il fait pour nous "les débutants".

gc-nomade a écrit :

Il te faudra gerer les espaces entre les element en inline-block (voir dans les tutos ici).

Bonjour,
as tu fait attention a cette phrase et as tu lu ceci ? http://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html

Merci Gc-nomade.
Je viens de comprendre la subtilité des whitespaces, que je n'avais pas vu sur le pencode.

Maintenant, mes blocks ne se mettent plus les uns en dessous des autres sur un écran moins large
Je cherche, mais je nage...

C'est ok pour l'alignement en une colonne pour le webmobile.
J'avais oublié de mettre le min-width:100%; dans mon @media (max-width: 640px)

Il me reste le menu responsive qui disparaît.

Bonsoir a tous, le menu prend forme, petit a petit l'oiseau fait son nid

Hey, salut tout le monde.

Me revoilà avec encore une question basique

Le site ne scroll pas verticalement sur IE.
Je ne vois absolument de quoi cela peut venir.

Le site test : www.alexbass.net23.net

Si quelqu'un à la solution, je suis preneur.

Merci beaucoup beaucoup d'avance.

Alexbass a écrit :
Le site ne scroll pas verticalement sur IE.

Ni sur firefox.

Jette un oeil à tes Overflow
Modifié par Greg_Lumiere (02 Nov 2014 - 20:18)

Bonjour Greg, et merci pour l'info.
J'ai en effet vu qu'en enlevant "overflow: hidden;" sur le body et en le mettant sur ma section, que IE récupérait un scroll vertical.

La je rame à fond avec mes feuilles de style, je ne sais plus par ou commencer.

J'ai voulu séparer le style partucilier de l'index, pour être plus libre sur les autres pages.
Résultat : les autres pages ne s'adaptent pas bien aux changements de largeur d'écran...

Index : ça va.
Prestations : c'est cassé !
Ventes : c'est cassé !
Contact : ça va puisque j'ai appliqué le style index également !
Mon espace : c'est cassé !

Pourtant je suis sur les mêmes bases :
Html -> Body-> header -> section -> footer.

Le CSS spécial index :

.PremierMot {
    font-size: 1.2em;
	color: rgb(204,51,51);
}
h1{
  font-size: 1.1em;
  color: rgb(102,102,102); /*grey;  rgba(204,51,51);*/
  text-align: justify;
}
p, img{
  display:inline-block;
  width:50%;
  vertical-align:middle;
  box-sizing:border-box;
}
img{
  position:relative;
}
p {  
  padding:15px;
  margin:0px;
  text-align:justify;
  /*box-shadow:50vw 0px  white,-50vw 0px  white;*/
}
h2{
  font-size: 1.1em;
  color: rgb(102,102,102);
  text-align: justify;
}

Le CSS global + responsive : http://cjoint.com/?0KduBZHk3Vl
Par avance, un énorme merci !
Modifié par Alexbass (03 Nov 2014 - 20:25)

Bon bah j'ai un peu revu mon sujet, et je pense que je vais m'en sortir avec ma feuille de style global nommée pour le moment menu.css et après une feuille pour chaque section comme style_index.css.

Voir le résultat : www.alexbass.net23.net

Qu'en pensez vous?

Alexbass a écrit :
Qu'en pensez-vous ?

C'est plutôt réussi tout ça. Les DIV s'alignent correctement, c'est clair et... le scroll fonctionne, en tout cas sous Firefox.

Par contre le lien Accueil renvoi vers les offres de ton hébergeur.

Dommage qu'on ne puisse copier-coller le numéro de téléphone/adresse qui n'est qu'une simple image. C'est pourtant utile lorsqu'on utilise un carnet d'adresses dématérialisé.

Et je trouve que l'invitation à te contacter pour plus de renseignement n'est pas assez mise en valeur je trouve ; ce serait pas mal aussi de rendre le "Contactez-nous" cliquable, non ?

Fallait bien que je trouve un truc à redire lol

Bon courage pour la suite.

Salut Greg, et merci pour ce retour.

J'ai mis la page contact en lien sur l'image du footer et j'ai ajouter le "contactez nous" cliquable.

J'ai tjrs un problème sur mon menu, sur certaine largeur d'écran, j'ai un trait qui s'affiche sous l'onglet en cours :


Est-ce que tu saurais comment faire pour ne plus avoir ce trait ?
Merci d'avance.

Je ne constate pas le phénomène que tu décris concernant un éventuel sous l'onglet en cours. Cela se produit-il avec un navigateur en particulier ? Je vais approfondir mes tests.
Pour l'instant j'ai testé sous Firefox avec une résolution très large (1920px) et en réduisant la fenêtre et je constate que le menu est responsive et se place correctement en une pile verticale sans présenter de défaut visuel.

Par contre le lien Accueil (du menu) ne fonctionne toujours pas. Il renvoi en fait vers une erreur 404 et plus précisément vers cette adresse http://error404.000webhost.com/?
Même résultat lorsque je clique sur le bandeau.

En parlant du bandeau, indiquer en Title qu'un clic renvoi vers l'accueil du site ne serait-il pas un pas de plus vers l'accessibilité ? A dire vrai reprendre le titre et le sous-titre du site au survol du bandeau n'apporte rien à l'utilisateur qui dispose déjà de cette information sous les yeux. Toujours en terme d'accessibilité, ce renseignement serait plus approprié sur la balise Alt, non ?

Le lien Mentions légales n'est quand à lui pas actif.

Tous les autres onglets renvoient vers leur destination.

Je m'interroge cependant sur l'onglet "Mon espace". S'agit-il d'un espace membres ou un espace qui t'es réservé, auquel cas quelle utilité de le rendre visible au premier venu ? Effectivement au clic on s'aperçoit qu'il s'agit d'un espace membres mais disons que la formulation prête à confusion. Ne serait-il pas plus approprié une dénomination s'approchant de "Espace client" ?

En aparte.
J'ai remarqué l'apposition d'un copyright datant de 2012. Ce qui me fait dire que cette société, que moi utilisateur lambda je découvre et qui a priori correspond à la recherche que j'ai faite sur le sujet, a déjà de l'ancienneté. N'y aurait-il pas là un créneau pour développer ce point dans un but promotionnel ? Quelles "mission" l'entreprise a déjà réalisée ? Pour qui ? [...] En clair reprendre un peu l'histoire de la société et ses réussites. Comment ce spécialiste du gazon synthétique travail et qui leur fait confiance. Je pense qu'un utilisateur frileux se refusera à tout contact, donc il faut le rassurer. C'est vrai qu'on s'éloigne du sujet principal (et pas qu'un peu) mais je me dis que ça peut valoir le coût de réfléchir sur ce point.

Le "Contactez-nous" attire l'oeil, voila ce que j'appelle une vraie invitation.

Dès que je peux, je te fais un retour concernant le premier point.


EDIT: Ca me titillait l'esprit alors j'ai testé.
Pour ce faire j'ai essayé les navigateur suivants : Firefox à jours, Chrome 31, Opera (à jours), IE11 et Safari (version PC).
Les résolutions suivantes : 1920px, 1152px et 800px (largeurs)
Mode fenêtré et plein écran et j'ai joué avec la taille de fenêtre.

En 800px, seul Chrome arrive à me faire tenir le menu sur sa largeur ; les autres navigateurs passent le menu en mode réduit.
Pour toutes les autres résolutions et les divers tests amènent tous au même constat : aucun bug d'affichage perçu.

N'aurais-tu pas un résidu de code qui trainerait au fond de ton cache ? Dans quelle(s) condition(s) constates-tu ce défaut ?
Modifié par Greg_Lumiere (05 Nov 2014 - 08:56)