Menu défilant /centrage/ [HTML]

Fermé
Signaler
Messages postés
4
Date d'inscription
mercredi 25 avril 2007
Statut
Membre
Dernière intervention
29 avril 2007
-
Messages postés
304
Date d'inscription
samedi 10 mars 2007
Statut
Membre
Dernière intervention
28 août 2008
-
Bonjour à toutes et à tous.

Voilà je suis entrain de faire un site sur DW, et je suis confronté à quelque problèmes mineurs dont je vous fait part.

1.

Je désirerai avoir une céllule qui se prolonge à l'infini, si besoin il y a (
pour du texte par exemple, comme dans cette fenêtre ou je suis entrain d'écrire, même principe.),
j'ai fait mes recherches sur quelques sites d'aide,
j'y ai trouvé des éléments, mais rien de concret qui explique où, et précisement comment remplacer le code.

Voici le code de ma cellule :



Code:
<TD COLSPAN=5>
<IMG SRC="images/Site_06.gif" WIDTH=1000 HEIGHT=82 ALT=""></TD>


Sur un des sites, il est dit qu'il faut le remplacer par :

Code:
<TD background="image_4.gif" width="500" height="30"> </td>


Sachant que la taille et le nom de l'image est à remplacer avec la mienne bien entendu. La chose est que quand je le fait, il ne me fait que marquer le code entre deux images, donc je présume qu'il est faux. Comment y remdier ?.


2. Question plus simple, la taille du site est de 1000*550, et j'aimerai le centrer dans ma page, ne je sais comment le faire, n'y ou placer le code.


Merci de votre attention.
Felix.

13 réponses

Là, utilise pas des tableaux, le plus appropiré ce sont des "div" tiens pour t'aider, un exemple :

http://astuvu.net/

http://astuvu.net/acc.css

après, pour qu'il s'adappte à la largeur de la page, fait tout simplement un width:100% dans ton css.

Voiloute

(je ne sais mm pas si j'ai répondu à ta question ;p, si tu ne comprend pas, bah re-explique que je t'aide car j'ai pas très très bien compris tes problèmeuh )
Messages postés
304
Date d'inscription
samedi 10 mars 2007
Statut
Membre
Dernière intervention
28 août 2008
79
Bonsoir Félix1337,

Si tu utilises un tableau, tu fait "insérer/tableau", tu peux centrer celui-ci par "aligner - centrer". Tu insères ton image à l'intérieur. Cependant attention au format de ton image qui est trop grande. Tu ne devrais pas dépasser 500pix sur la largeur. Pour ton tableau tu le règles en "x%". Ainsi, il prendra la taille de ton image. Essayes de descendre la taille de ton site à 780 pixels pour qu'il soit lisible dans toutes les fenêtres des internautes.
Messages postés
4
Date d'inscription
mercredi 25 avril 2007
Statut
Membre
Dernière intervention
29 avril 2007

C'est à dire que pour l'instant, j'ai fait que la template, et je l'ai coupée comme il faut, et mise sur DW.

Comme c'est mon premier, vrai site avec DW, j'ai un peu de mal.. mais sa viendra.

Enfaite, ce tutoriel l'explique bien http://godtemplates.com/tutoriels/interface.php

(regarder la troisième étape) c'est cela que je veux obtenir.

Pour info, je n'utilise pas de style css.
Ahhh okey !

Bah enfait il faut que tu découpe ton fond en tranches horizontales qui peuvent se répétés et que tu vas répéter en Y en arrière plan dans ta cellule. Regardes pour cela dans les propriétés de ta cellule.
le code approprié à ta cellule sera donc:

<td width="[largeur de ta cellule]" style="background-repeat:repeat-y; background-image:url(file:[URL DE TON IMAGE DE FOND].jpg)">
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
915
salut,

je me permet de te reprendre pour {background-image}.
style="background-repeat:repeat-y; background-image:url(URI);"
Hum... mouep, je pense que cela peut fonctionner dans les deux cas, non ?
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
915
je n'en sais rien et comme je n'ai vu la syntaxe que tu utilises, j'ai préféré préciser la syntaxe de la spécification html.

ce n'était qu'une précaution, je ne voulais pas à te contredire juste par le plaisir…

sans rancune j'espère !
-;o)
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
915
je viens de regarder, ta syntaxe est correcte mais s'applique à un cas particulier : un fichier enregistré en local mais dans ce cas je ne pense que cela aurait eu de conséquences.

dans l'écriture d'une url tu peux préciser un 'scheme' qui définit le type de service internet utilisé pour le lien (http, ftp…).

plus d'infos sur le site de la W3 School
Ouep c vrai, il faut rester aux normes et là, j'ai fait cette syntaxe avec un éditeur wysiwyg donc cela me semble normal de n'être pas dans les normes ^^.
Messages postés
4
Date d'inscription
mercredi 25 avril 2007
Statut
Membre
Dernière intervention
29 avril 2007

Merci pour les infos, mais je n'arrive t oujours pas à faire fonctionner..

Voici comment se présente le code:

[img]http://www.denacke.net/felix/Cellule.JPG[/img]

Lorsque je remplace avec celui que vous m'avez donné, il fait que le mettre dedans la cellule, et je n'ai meme plus l'image..
Messages postés
5124
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
5 mai 2021
2 765
Bonjour,

J'entre dans la discussion en cours…

Et je ne comprends pas bien ce qui ne marche pas.
Où, dans ton exemple, est le problème ?
Qu'est-ce qui ne marche pas ? Que veux-tu obtenir ?

Si tu veux simplement laisser la cellule s'adapter au contenu en hauteur, il faut ne pas lui préciser de “height”, de hauteur.


Je reviens sur le centrage de ton conteneur.
Tu peux faire ça assez facilement. Avec un peu de CSS.
Après avoir indiqué, en HTML si tu ne veux pas utiliser de CSS à cet endroit, “align="center"” dans le <body>, tu peux ajouter, en supposant que l'ensemble est dans un tableau initial :
  <table style="margin:0 auto;" etc.>
Le tableau sera collé en haut et restera au centre lors du redimensionnement de la fenêtre.


+ Des images avec des noms explicites faciliteraient les repères (-;
Messages postés
304
Date d'inscription
samedi 10 mars 2007
Statut
Membre
Dernière intervention
28 août 2008
79
Bonjour, et je vous rejoins,

Voilà ce que j'ai trouvé comme solution sur le centrage, le défilement, et cela fonctionne aussi avec une image qui se rétrécit avec la fenêtre. La limite semble être donnée par la machine, seulement ... 5 centimètres de large, et tout le reste défile et reste centré. Comme je l'ai déjà plusieurs fois répété, vive le CSS !!

A noter que cela n'a été possible qu'avec les explications des contributeurs de CCM et une bonne lecture des sites dédiés et éditions spécialisées. Encore merci à eux -;o)

<style type="text/css">

html {
margin: 0;
padding: 0;
}

body {
background: rgb(95%,95%,80%); color: rgb(102,102,102);
font: 80% Verdana, Arial, Helvetica, sans-serif;
margin: 0;
margin-right: 0.66em;
padding: 0;
text-align: justify;
}

h1 {
background: rgb(85%,85%,70%);
font-size: 200%;
letter-spacing: 3px;
margin: 0;
padding: 0.66em 0 0.33em 29%;
text-transform: uppercase;

}

h3 {
border-bottom: 1px solid black;
font-size: 1.33em;
margin: 0; padding: 0;
}

h4 {
color: rgb(50%,50%,35%);
font-size: 1em;
margin: 0;
padding: 0.33em 0 0;
}

h1, h3, h4 {
line-height: 1em;
}

p {
line-height: 1.5;
margin: 0.5em 0 1em;
}

div#text contenu {
margin: 2em 10% 1em 30%;
padding: 0;
}

div#sidebar {
float: left; width: 23%;
margin: 2em 0 0 2%;
text-align: center;
}
#sidebar h4 {
background: rgb(90%,90%,75%);
border: 1px solid rgb(73%,73%,58%);
border-bottom: none;
}

#sidebar ul { list-style: none;
border: 1px solid rgb(73%,73%,58%);
margin: 0;
padding: 0 0 2em;
}

#sidebar h4, #sidebar ul {
margin: 0 6px 0 0;
}

#sidebar li {
border-bottom: 1px solid rgb(84%,84%,69%);
line-height: 1em;
padding: 0.5em 0;
}

#sidebar a {
background: rgb(95%,95%,80%);
border: 1px solid rgb(84%,84%,69%);
padding: 0 0.25em;
position: relative; top: 1em;
text-decoration: none;
}

#sidebar a:link {
color: rgb(20%,40%,0%);
}

#sidebar a:visited {
color: rgb(58%,68%,40%);
}

#sidebar a:hover {
background: #FFF;
color: rgb(10%,20%,0%);
}

</style>

</head>

<body>

<h1><img src="../../../form/log_societe.jpg" alt="" width="50" height="50" /> j-images-j-in conception<br />
le laboratoire couleur </h1>

<div id="sidebar">
<h4>Le tirage couleur </h4>
<ul>
<li><a>L'équipement </a></li>
<li><a href="01.html">L'agrandisseur </a></li>
<li><a href="02.html">L'écairage du lab</a></li>
<li><a href="03.html">Les produits</a></li>
<li><a href="04.html">Les papiers</a></li>
<li><a href="05.html">Le tirage</a></li>
<li><a href="06.html">Entretien du matériel</a></li>
<li><a href="07.html">Votre avis</a></li>
</ul>
</div>

<div id="text contenu">
<h3>L'équipement </h3>
<p>
<!-- texte contenu -------->
<h3>Story Title</h3>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor. </p>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor. </p>
<h3>Story Title</h3>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor. </p>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor. </p>
</div>

</body>
</html>
Messages postés
4
Date d'inscription
mercredi 25 avril 2007
Statut
Membre
Dernière intervention
29 avril 2007

Décidement je ne comprend rien.., on me donne trop de choses..

Déjà j'ai ptet pas été assez précis, et j'en suis désolé.

Voici mes problèmes :

Déjà avant tout sa, impossible d'écrire quoi que ce soit dans cet espace, sa m'écris tout en bas...

Je n'arrive pas à faire en sorte que l'endroit ou je veux écrire soit infini.

Et pour finir, je viens de découvrir, quand je met le site sur mon ftp, et que je rentre l'adresse, aucune image ne s'affiche, seulement les endroits ou il devrait avoir une image..

+ une question : dois-je créer, pour chaque page, un nouveau fichier html dans DW ? ce qui fait que j'aurais :

Acceuil.html
Biography.html
etc.. ?

Désolé de mon imprécision, et sachez que je fait que commencer avec le html, même si j'ai des bases.
Messages postés
304
Date d'inscription
samedi 10 mars 2007
Statut
Membre
Dernière intervention
28 août 2008
79
Re bonsoir Félix1337,

Peux-tu donner l'adresse de ton site ? Cela serait semble t'il assez simple avec du CSS. Evites surtout des dimensions comme celle-ci "width 1000 et height 326" Non seulement les dimensions sont trop grandes, mais je soupçonne que le poids doit être ...bfff... trop lourd!

Gihef te donne une réponse pour ton écriture.

Pour les images, vérifie tes liens, ils doivent liés au document et non à la racine du site. Regardes aussi dans Dream (8 ?)"aide" et tape liens, tu vas avoir toutes infos nécessaires. Tout est dans le logiciel. Si tu ne comprends pas, tu redemandes.

Oui, tu dois faire une page enregistrée dans un dossier (images) et les fichiers qui le concerne (image1, image2,...) Ces fichiers sont placés dans le dossier correspondant, donc ici "images). Evites aussi les majuscules, les espaces, les accents (cépasbon pour certains sserveurs) dans les nom de dossier, fichiersTu suis ? Allez, une bonne nuit et demain tout cela sera plus clair...
Messages postés
5124
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
5 mai 2021
2 765
Oui, il est vrai que si on pouvait accéder à la page, ça serait plus simple.

La structure du site n'a rien à voir avec HTML.
Ça concerne plutôt de l'organisation, ta manière de t'organiser en général et l'organisation de ton site en particulier.
Tu as le choix.

Par exemple, j'ai des habitudes.
1- Dans le dossier racine “/”, je place la page d'index et les autres pages .html.
Dans un dossier “images/” les images qui devront s'afficher dans chaque page.
Sauf, oui sauf, si chaque page doit afficher un grand nombre d'images.
2- Dans ce cas, j'ai un dossier par page avec, dedans, un dossier “images/” qui contient les nombreuses images de chaque page.
Le dossier “images/” du dossier racine ne contient alors que les images qui se répètent sur chaque page (logo…)

Et donc les liens font prennent en compte cette strucure.
Dans le cas 1- les liens vers les autres pages sont donc du genre “href="autre_page.html” et, dans les pages, les liens pour les images, “<img src="images/image1.png">”.

Dans le cas 2- les liens vers les autres pages entre elles sont donc du genre “href="../autre_dossier/autre_page.html” et, dans les pages, les liens pour les images, “<img src="images/image1.png">”.
Les liens vers les images communes doivent alors être “<img src="../images/logo.png">”.

Et, bien-sûr, pour que les images s'affichent, il faut qu'elles aient été transférées sur le serveur. Dans des dossiers qui ont la même structure que sur le disque local.
Et que les liens vers elles respectent la structure du site.


+ La nécessité d'une structure comme tu as “images/images/bg-copy_02.gif” ne me semble pas évidente.
Et, je le répète, des noms évocateurs pour les images utiles à l'apparence de tes pages sont utiles.
Messages postés
304
Date d'inscription
samedi 10 mars 2007
Statut
Membre
Dernière intervention
28 août 2008
79
Bonjour,

En plaçant tout l'ensemble dans un conteneur et en le réglant ainsi,

#conteneur {
background: rgb(92,92,92);
height: 500px;
margin: auto;
width: 600px;
}

j'obtiens le centrage de ma feuille.

Tu vois Gihef, j'ai retenu la leçon de l'intérêt des "conteneur" -;o)