Discussion :

[rickgoz]

Bonjour à tous,

Je viens tout juste de créer mon site web.
Voici l'adresse

http://www.akengro.thosting.co.uk/in...goz_index.html

Mon problème est qu'il ne s'affiche pas partout de la même facon, chez moi par exemple cela marche parfaitement alors que chez quelqu'un d'autre (avec le même navigateur (firefox)) ca ne va pas aller...

Si vous avez une idée faite le moi savoir, merci!

[c_s_s]

Bonjour,

Le lien que tu donnes ne semble pas fonctionner.

Peut-être que celui-ci convient : http://www.akengro.t1hosting.co.uk/i...goz_index.html


Après un premier coup d'oeil, je vois que tu utilises des positions absolues. Ca peut poser problème en fonction de la résolution de l'écran.
En effet, tu obliges certains éléments à se placer à une distance précise du bord gauche de la fenêtre du navigateur.
Peut-être que chez toi ça s'affiche bien, mais si quelqu'un à une résolution différente, ces éléments peuvent sembler "décalés".

Tu devrais positionner tes éléments par rapport à un conteneur, et pas par rapport à la fenêtre du navigateur.

[rickgoz]

Désolé effectivement votre lien est le bon.
Oui en effet j'utilise des positions absolue. Je ne connais pas cette notion de conteneur? Comment cela fonctionne t-il?

[Bisûnûrs]

Un peu de lecture :
Div et CSS : une mise en page rapide et facile

[rickgoz]

Existe t-il un moyen pour faire vérifier son code HTML et CSS afin qu'il soit compatible chez tous les visiteurs?

J'ai en effet utiliser un SPAN pour positionner l'image/bordure news verte et un autre SPAN pour positionner le texte situé en dessous de l'image/bordure news verte.

Je peux faire exactement la même chose avec un conteneur ??

[Bisûnûrs]

Tu peux mettre l'image en background, mais bon ..

[c_s_s]

Effectivement il faudrait revoir la structure de la page et enlever les positions absolues.

Il y a moyen de centrer tes éléments sans utiliser cette propriété. En plus ça fonctionnera avec la majorité des résolutions.

Tu pourrais avoir un bloc qui contiendrait l'ensemble de tes éléments. Ensuite, tu n'aurais plus qu'à centrer ce bloc sur la page.

[Madfrix]

Bonjour.

Le fait de vouloir afficher ton texte dans un cadre délimité par une image t'oblige également à bien délimiter le cadre contenu dans l'image.

Chez moi par exemple en resolution 1680x1250 le texte sort de l'image....
Alors qu'au boulot en 1280 la mise en page est correcte.

le mieux à faire dans ce cas la est de creer un div et de mettre ton image en background de ce div. mais comme tu utilises une image qui ne peut pas être "répétée" horizontalement, cela t'oblige à créer des divs de largeur fixes ce qui est dommage je trouve.

Enfin c'est mon avis

[rickgoz]

Si je les met en background, il ne se positionne pas correctement.
Je pense que la structure de mon fichier n'est pas bonne...
Je met ci joint le fichier html et css, si une âme charitable veux bien jeter un coup d'oeil (en espérant qu'elle ne me dise pas: il faut tout recommencer..)

[c_s_s]

Il faut tout recommencer.





Je n'ai pas pu m'en empêcher.

[Madfrix]

Une remarque aussi : mieux vaut (une fois que tu auras tout recommencé ^^) organiser tes fichiers dans des sous-répertoires sinon ca deviendra vite la jungle ton arborescence

[rickgoz]

reelement, il faut tout recommencer?
C'est à dire repertorier mes fichiers? image etc.. ou mon code?

[Bisûnûrs]

Il faut tout recommencer.

En plus t'as même pas regardé les fichiers.

Sinon je pense que l'image en background serait une bonne alternative sans devoir tout recommencé (même s'il est vrai que c'est tentant ). Et s'il est mal positionné, tu n'as qu'à donner une largeur du div auquel tu mets le fond et le centrer avec un margin:auto.

[rickgoz]

d'accord je vais essayer le div.

Lorsque vous parlez de recommencer, c'est html + css?
Si oui, quels conseilles me donneriez vous?

[Madfrix]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<div id="corps"> 
 
     <div id="message">
         blablabla.......
     </div>
 
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
#corps
{
margin: auto;
margin-top: 100px;
padding: 5px;
font-family: "Arial", Times New Roman,"Arial Black", Times, serif;
font-size: 12px; 
border: solid black 1px;
}
 
#message{
width: 587px;
height: 500px;
margin: auto;
background-image: url("rickgoz_barre_news.PNG");
}

Quelque chose de comme ça est déjà un bon début je pense et marche mieux chez moi

Reste après à imbriquer un div pour les titres et un autre pour le contenu dans ton div message puis à appliquer les mises en formes que tu souhaites

[rickgoz]

Merci beaucoup c'est sympa!

Reste après à imbriquer un div pour les titres et un autre pour le contenu dans ton div message puis à appliquer les mises en formes que tu souhaites

Je ne comprend pas, si j'ai déjà créé un div pour le corps et le message pourquoi dois je en recreer un pour le titre? et le message?

Merci de m'éclaircir

Richard

[rickgoz]

Pardon, je crois que je viens de comprendre, mais je veux bien une petite explication quand même

[Madfrix]

Pardon, je crois que je viens de comprendre, mais je veux bien une petite explication quand même

Faire quelque chose comme cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div id="corps"> 
 
     <div id="message">
           <div id="titre">
            Le Nouveau Visage de l Ecole des Beaux-Arts
           </div>
            <div id="contenu">
            Depuis quelques jours les passants de la rue....
           </div>
     </div>
 
</div>

Et ensuite définir les styles des blocs titre et contenu comme tu le souhaites (marges, couleurs, polices...)

[rickgoz]

d'accord c'est ce que je pensais.

Et ça, c'est ce qui est le plus sémantiquement correcte?

Merci pour votre aide

[Madfrix]

d'accord c'est ce que je pensais.

Et ça, c'est ce qui est le plus sémantiquement correcte?

Merci pour votre aide

En tout cas je vois pas vraiment d'autre alternative si tu veux afficher ton texte dans ton image qui n'est pas "répétable"