Forum
Moderateurs: Alexis
Auteur Message
Tinlenval
Messages: 36
Bonjour, bonsoir.
Avec un ami nous avons décidé de refaire le CSS de notre site. Nous avons un projet plus ou moins précis, qui requiererait l'attention des plus braves codeurs d'entre vous !

Et, sans offenser qui que ce soit, j'aimerais avoir autre chose que : 

Citation :
Bonjour, non ce n'est pas possible, aurevoir.

J'aimerais que vous expliquiez pourquoi on ne peut pas faire ça ou ça.Merci.

Voilà notre projet :
( L'image étant très grande, je met juste le lien )

http://img77.xooimage.com/files/3/7/2/scan0032-3611823.jpg

Ne prêtez pas attention aux écritures, enfin si vous voulez allez-y !

Concentrez vous plus sur les menus :

La partie gauche serait "constituée" d'onglets dépassants de la page, et quand on passerait la souris dessus, celui-ci s'ouvrirait vers la gauche, pour faire place à des liens qui amènent vers d'autres pages...
Si vous ne comprenez pas très bien j'ai 1 exemple. Excusez pour la pub mais il se trouve sur Fairy Tail Master. Quand vous passez sur "Accueil" ou autre, l'onglet s'ouvre vers le bas. Et même sur ce site ! Quand on sélectionne "Accueil", l'ouvret s'ouvre ( peu ) vers le haut. Vous comprenez ?

C'était le point le plus important.

Ensuite, pouvons nous mettre des images "plus grande" que la fenêtre ? En bout de news par exemple, nous pouvons afficher une image, pouvon nous la faire dépasser du cadre ?

Le reste nous pouvons le faire nous même, ou au pire, je répondrai sur ce sujet.

Merci de m'aider.
Tinlenval.

C'est la critique négative qui fait avancer, et non l'inverse.
Alexis

Messages: 1136
Site internet
Pour les menus, ça me parait réalisable, mais ce sera vraiment du bidouillage, et ce n'est pas garanti que ça marche avec tous les navigateurs.

Pour ton deuxième point, l'image de fond d'un cadre ne peut bien évidemment pas dépasser les limites de ce cadre.
Je n'ai pas bien compris ce que tu souhaites faire, mais en supposant que le cadre de test news mesure 500 pixels et que tu souhaites y insérer une image de fond dépassant de 100 pixels sur le droite, il faudrait que tu élargisses ton cadre de news à 600 pixels et que grâce à ton CSS tu fasses en sorte que le contenu de la news ne s'affiche que dans les 500 premiers pixels.

image
image
image
Vous aimez les services offerts par UtiliWeb ? 
Signez le livre d'or !
Vous voulez être au courant de nos actualités ?
Suivez nous !
Vous voulez faire un geste pour nous aider ? 
Faites un don !

Tinlenval
Messages: 36
Ah tant mieux ! Merci pour la réponse Jiix !
Pouvons nous voir ça ensemble ? Quand le temps vous le permet ? Ou l'envie ?

C'est la critique négative qui fait avancer, et non l'inverse.
Tinlenval
Messages: 36
Bonjour, j'ai une nouvelle question !

En effet, nous souhaitons modifier l'emplacement des choix du header ( "Accueil", "Forum"...) Mais le problème est que, mon ami et moi, n'avons pas la même position de ces choix.
Je ne sais pas si vous comprenez ? Pour résumer, j'ai le texte au centre, et lui a gauche...
Comment faire pour que chacun est la même position à chaque fois ?

Voici le site pour que ayez accès au CSS : http://bloubland.utiliweb.fr/news.php
( Ne faites pas attention aux autres choses, c'est en test )

- Edité le 06/07/2012 à 23:10 -

C'est la critique négative qui fait avancer, et non l'inverse.
Alexis

Messages: 1136
Site internet
Effectivement vous avez fait un peu n'importe quoi avec le positionnement de ces liens.

Avant de résoudre ton problème, j'aimerais t'aider à le mettre en évidence.

Ajoute "background: white" dans ta classe header h2 et regarde ce qu'il se passe:

1. Déplace l'ascenseur horizontal en bas de la page
2. Change la résolution de ton écran et regarde ton site avec différentes résolutions


Tu devrais constater ceci:

1. Tu as un élément d'une largeur de 100% et tu lui ajoutes un padding de 21% donc forcément l'élément a une largeur totale excédant 100% donc un ascenseur horizontal apparaît en bas de l'écran.

2. Le positionnement des liens varie selon la résolution d'écran.

Tu as positionné tes liens à 21% de l'écran en partant du coté gauche. Saurais-tu me dire à quel pourcentage du bord gauche de l'écran se situe le début de ton site ?

image
image
image
Vous aimez les services offerts par UtiliWeb ? 
Signez le livre d'or !
Vous voulez être au courant de nos actualités ?
Suivez nous !
Vous voulez faire un geste pour nous aider ? 
Faites un don !

Tinlenval
Messages: 36
Quand j'ajoute la commande :

Les menus se retrouvent au centre du header...Mais tout à gauche...
Mais, j'ai beau changé la résolution de mon écran, elle reste au même endroit !

Ensuite, ce n'est pas moi qui ai fait cette commande, c'est l'autre admin, mais il me semble qu'il y est allé à tâtons...

C'est la critique négative qui fait avancer, et non l'inverse.
Alexis

Messages: 1136
Site internet
Tu as du faire une erreur en ajoutant la commande, parce que je ne vois pas comment le fait de changer la couleur de fond d'un élément aurait pu modifier sa position.
Le but de cette commande est de te permettre de mieux visualiser la zone de l'écran qu'occupe ton menu horizontal.


Je vois bien qu'il y est allé à tâtons. Le mieux serait de supprimer les nombreuses propriétés inutiles qui se trouvent actuellement dans votre header h2 et de n'utiliser que des propriétés dont vous comprenez bien le fonctionnement.

image
image
image
Vous aimez les services offerts par UtiliWeb ? 
Signez le livre d'or !
Vous voulez être au courant de nos actualités ?
Suivez nous !
Vous voulez faire un geste pour nous aider ? 
Faites un don !

Tinlenval
Messages: 36
Voilà, j'ai tout remis à zéro. J'ai juste mis mes valeurs ( 850x330 ) pour le header et ajouter background; white. Que puis-je faire maintenant ?

C'est la critique négative qui fait avancer, et non l'inverse.
Alexis

Messages: 1136
Site internet
Sur quel site travailles-tu ? Car sur l'adresse que tu m'as donné dans un message précédent, tu n'as absolument rien changé depuis ton message de vendredi soir.

Dans ton header h2, il manque un point-virgule à la fin d'une ligne, ajoute le.
Ensuite, fais ce que je t'ai dit dans mes 2 derniers messages.

image
image
image
Vous aimez les services offerts par UtiliWeb ? 
Signez le livre d'or !
Vous voulez être au courant de nos actualités ?
Suivez nous !
Vous voulez faire un geste pour nous aider ? 
Faites un don !

Tinlenval
Messages: 36
J'ai juste mis px au lieu de % et autres...

C'est quoi l'ascenseur horizontale ? ^^'

Je ne sais pas quoi supprimer en fait, je m'y connais vraiment très peu en CSS...

C'est la critique négative qui fait avancer, et non l'inverse.
Alexis

Messages: 1136
Site internet
C'est la barre de défilement qui apparaissait en bas de ta page du fait que la page ait une largeur de 121%.

En fait, tu peux supprimer tout le contenu de ton header h2 à l'exception de ceci:


    display: block;
    font-size: 12px; 
    text-align: center; 
    color: #FFFFFF; 

Si tu veux que tes liens soient alignés sur la gauche, il suffit de remplacer le text-align:: center par un text-align: left.

Ensuite, tu peux éventuellement utiliser les propriétés padding-top et padding-left pour ajuster le positionnement.

image
image
image
Vous aimez les services offerts par UtiliWeb ? 
Signez le livre d'or !
Vous voulez être au courant de nos actualités ?
Suivez nous !
Vous voulez faire un geste pour nous aider ? 
Faites un don !

Tinlenval
Messages: 36
D'accord, merci

Bon maintenant j'ai un souci (oui encore...) Quand je fais padding-top : 300px; le texte est pile à la place souhaitée, mais le header se déforme, et "se décale", fin je sais pas si u comprends ?

C'est la critique négative qui fait avancer, et non l'inverse.
Alexis

Messages: 1136
Site internet
Tu as oublié de fermer l'accolade à la fin de ton #header h2.


image
image
image
Vous aimez les services offerts par UtiliWeb ? 
Signez le livre d'or !
Vous voulez être au courant de nos actualités ?
Suivez nous !
Vous voulez faire un geste pour nous aider ? 
Faites un don !

Kaze
Messages: 81
Site internet
J'interviens juste comme ça, val au lieu de faire en px fait en % comme ça tout le monde aura pareil
Alexis

Messages: 1136
Site internet
Justement, non. Dans le cas du problème qu'avait Tinlenval, ça n'aurait rien changé.
Du fait de la présence de la propriété "position: absolute" dans la classe header h2, le positionnemment se fait par rapport à la taille de l'écran, et non par rapport à la taille du site.

Dans ce cas, à partir du moment ou la largeur du site est définie en pixels, on ne peut plus positionner simplement les liens en %.


Supposons qu'on ait un site de 800 pixels de large et qu'on veuille aligner les liens du header sur le bord gauche de ce site.

Si ton écran fait 1000 pixels de largeur, le site occupera 80% de l'écran et il y'aura une bande de "vide" correspondant à 10% de l'écran de chaque coté du site. Donc en utilisant un "padding-left: 10%", les liens s'afficheront au bon endroit sur ton écran.

Par contre, en supposant que mon écran ait une largeur de 1600 pixels, il y'aura une bande de vide correspondant à 25% de l'écran de chaque coté du site, et donc les liens ne seront pas positionnés correctement.


image
image
image
Vous aimez les services offerts par UtiliWeb ? 
Signez le livre d'or !
Vous voulez être au courant de nos actualités ?
Suivez nous !
Vous voulez faire un geste pour nous aider ? 
Faites un don !

Kaze
Messages: 81
Site internet
D'accord j'ai compris, autant pour moi alors x)
 

Aller à:     Haut de page