5568 sujets

Sémantique web et HTML

Site en largeur (tout sur une page)

Pages :
Bonjour,

Je suis actuellement en DUT SRC à Troyes et on a un projet tuteuré en janvier (à la rentré) on va devoir réaliser un site statique pour un bar (fictif malheureusement)

Cependant avant on doit réaliser un site d'agence. On a pensé à faire un site sur tout une page comme par exemple celui de mes amis Agence Dotcom(qui eux sont tout en longueur)

Nous on voudrait réaliser le même concept mais tout en largeur est-ce-que c'est possible ? Si oui comment ?

Merci beaucoup

Cordialement,
Dr.Revolte
Modérateur
c'est possible oui mais niveau navigation/accessibilité ça va être moyen Smiley confus la souris est prévue pour un scroll vertical, pas horizontal... l'utilisateur devra le faire avec la barre de défilement en bas de sa fenêtre... ou alors avec une autre interface mais il faudra bien la penser !!
Modérateur
heu... ce que j'ai compris c'est qu'il n'y ai qu'une page mais très large.

Oui avec un menu qui définirait la position horizontale. A savoir si tu veux que l'utilisateur puisse scroller lui même ou que tu bloque ça et que la navigation ne se fasse que par le menu.

Sinon il suffit juste de donner une grande largeur et une petite hateur à ta page.
D'accord,

par contre comment faire pour que la page "contact" par exemple qu'il s'affiche sur toute la page et pas besoin de scroller pour voir tout le contenu.
Modérateur
Je suis un peu largué la Smiley sweatdrop
a écrit :
On a pensé à faire un site sur tout une page

Tu veux faire un site sur une seule page c'est ca ?
a écrit :
le même concept mais tout en largeur

C'est a dire que au lieu de se déplacer de haut en bas, on devra se déplacer de gauche a droite c'est ca ?
et la tu demandes :
a écrit :
comment faire pour que la page "contact" par exemple qu'il s'affiche sur toute la page et pas besoin de scroller pour voir tout le contenu.

j'arrive pas a voir ce que tu veux faire... que la partie contact soit visible partout ou avoir une page qu'avec contact ?
tu as compris le point 1 & 2

en faite je veux que quand on clique sur conact (avec des ancres) on apparait sur la page contact (on defile au contenu contact) mais ce contenu je veux qu'il soit visible sur toute la page du navigateur.
Modérateur
Du coup il faut juste que tu définisse des largeurs d'écran. Si ton site a 4 parties ta page doit être large comme 4 fois l'écran. Le site de tes amis par exemple fait 1000px de large et 6000px de haut (j'ai pas mesuré) le tiens devra faire 800px de haut mais 4 fois la largeur de l'écran en largeur.

Pour le fonctionnement des ancres je laisse ça a quelqu'un de plus qualifié (surtout à l'horizontal...)
Modérateur
un truc du genre :

<body>

	
<div id='conteneur'>
	<div id="p1" class="part"> </div>
	<div id="p2" class="part"> </div>
	<div id="p3" class="part"> </div>
	<div id="p4" class="part"> </div>
 </div>

</body>

avec en css :
#conteneur{
  width: 400%;
  height:800px;
  padding-left:10px;
}

.part{
	position: relative;
	float:left;
	width:25%;
	height:800px;
	}
#p1{
	background-color:#000000;
}
#p2{
	background-color:#555555;
}
#p3{
	background-color:#999999;
}
#p4{
	background-color:#cccccc;
}


?
Merci, d'accord je vois ce que tu veux dire.

donc vu qu'on pars sur des %, après tout les blocs que je vais créer devront être en % aussi ?
Modérateur
Non pas forcément. Mais le découpage 400% et 4x25% (pour 4 pages) est nécessaire pour avoir des pleines pages adaptables a chaque taille d'écran (d'ailleur il faut aussi rajouté un "min-width" pour pas que les pages puisse faire moins qu'une certaine taille). Apres, les élément placé dedans peuvent avoir une taille fixe ça ne pose pas de soucis.
Modérateur
Pour avoir 1 page par écran il faut que tu définisses des blocs de 100% de largeur. Seulement si tu mets 2 blocs de 100% l'un a coté de l'autre (float) dans le code, bin ils se mettent l'un sous l'autre dans le rendu. Du coup tu crées un gros conteneur qui fait 100 fois ton nombre de page (exemple : 4 pages x 100% = 400%, 2 pages x 100% = 200%) et tu peux ainsi placer des blocs de 100% l'un a coté de l'autre DANS ce conteneur. Seulement la largeur de 100% signifie 100% du conteneur donc si tu a 4 pages tu met quatre blocs de 25% pour diviser le conteneur en 4. (25% de 400% ça fait 100%). Et pour continuer l'exemple si tu n'as que deux pages tu auras un bloc conteneur de 200% et 2 blocs de 50% (50% de 200% ça fait 100%). etc...
d'accord,

Je penses avoir compris, je te remercie je vais donc tester ça Smiley smile

en min-width combien me conseils-tu ?
Modérateur
On va dire un 
min-width:950px;
maximum Pour prendre en compte les écrans 1024x768px. Si tu fais plus grand, quelqu'un avec un écran de 1024x768px (encore très courant) ne verra pas l'intégralité d'une page... une largeur entre 800 et 950px est assez confortable a mon humble avis Smiley smile
Apres il y a le problème des écrans encore plus petit comme sur les notepad... tout dépend de ce que tu veux en faire.
http://www.alsacreations.com/tuto/lire/547-faire-un-site-pour-toutes-les-resolutions.html
ba après on aimerait qu'il soit visible via un smarthphone oui et tablette.

Mais j'ai une question après pour mettre les blocs ou je veux imaginons sur le p3

je dois faire margin-left:75 % ou j'ai juste à faire margin-left:0px; et étant donné qu'il prend la 3 partie du conteneur sa le compte automatiquement à 75 % ?
Modérateur
Regarde le code que je t'ai donné plu shaut. La propriété css
float:left;

va faire que tes blocs s'alignent les un derrière les autres à gauche donc pas besoin de margin-left.

Pour smart-phone, pc et tablette c'est pas les mêmes tailles ni raisonnements.... la taille pc et tablette devrait concorder a peu près mais c'est l'interaction qui n'est pas la même du tout (les tablette étant tactile)... et pour les smartphone il te faux un second site adapté spécialement aux téléphones...
d'accord,

Mais pour le margin-left, je parle de ça pour placer mes blocs de contenu à l'intérieur des p1,p2,p...

Comment je fais là ?

Merci
Modérateur
Et bien une fois dans les conteneur tu les places comme tu veux ! Soit en pixel, soit en % soit en float... le plus sympa serait de centrer les éléments je pense.
Pages :
Sujet clos
Aller à