28220 sujets

CSS et mise en forme, CSS3

Bonjour, a tous

Une fois de plus je fais appel a votre aide sur le css (j'éspére que se sera mon derniers ennui avec le css pour ce site:)

Alors voila comme vous pouvez le voir ici : www.cutedesign.fr

Le texte de mes news sort du fond de ma page...normalement ce fond rose devrait s'adapter a la taille de ce que je met dedans (exemple : mon forum) ? non ? Mais la c'est pas le cas Smiley sweatdrop

Je comprends vraiment pas et pire je vois pas d'ou vient le probléme, j'ai essayé de changer l'ordre des balises <div> etc mais je bloque...

Merci beaucoup pour votre aide

ah j'oubliais voici ma feuille de style : http://cutedesign.org/general.css
Modifié par shantee (01 Aug 2006 - 23:36)
Bonsoir Smiley smile

J'ai tenté un affichage de ton code source mais il est tout vide donc je n'ai pas pu en tirer grand chose Smiley smile

Le seul truc qui pourra t'être un peu utile, c'est que pour que ton bloc en fond s'étire avec ton texte, il faut qu'il inclue le bloc de droite.

Sinon, ce que tu peux faire, c'est mettre une height : 100% dans le CSS de ton bloc conteneur (celui en fond, en rose), il prendra automatiquement la taille de toute la page, et s'allongera en fonction du bloc de tes news Smiley smile

Hope this helps Smiley smile
Bonjour shantee Smiley smile

Je vais être franc et probablement décourageant Smiley sweatdrop . Il faudrait tout refaire.

Pour l'instant ta page me fait penser à un assemblage hétéroclite de morceaux de code piochés ici ou là.

Pourquoi utiliser ce frameset qui affiche une autre page ?
Une fois affichée la page en question sans le frameset, la structure html est totalement à revoir, le plus sûr serait de reprendre à la base html et ses principes. Je te propose de lire cette introduction et le tutoriel qui l'accompagne: Écrire une page Web.

Mpop t'avais mis sur la piste du html lors de ton précédent message Smiley cligne .

Dans l'état tenter de donner l'apparence que tu souhaites avec css sur une structure html si fragile est vouée à l'échec.

Désolé j'avais prévenu, mais c'est pour t'encourager à revoir ta méthode de conception Smiley biggrin .
Modifié par Igor (02 Aug 2006 - 00:44)
Salut a tous et merci pour vos réponses.

J'ai testé ta soution Sinner hélas sans résultats, je ne comprends pas quand tu me dis que mon code source reste vide quand tu tente de l'afficher (normalement en faisant click droit sur ma page puis "afficher source" ça marche?).

Sinner je ne comprends pas ta réponse Smiley confused
Je suis prét refaire toutes mes pages si il le faut , car mon but en faisant ce site c'est d'apprendre la mise en page en CSS et de faire des sites HTMLement corrects (enfin le plus possible) Smiley cligne .

Je suis allé voir ton site qui explique comment créer une page web. Le problème c'est que je vois pas ou est mon erreur , moi aussi j'ai déja tout ça un doctype, un <titlte> (aprés lecture de ce site je les ai remis dans le bon ordre Smiley langue ) ..bref il me semble que j'ai déja fais tout ça ?

De plus j'ai testé mon site avec plusieurs navigateurs (Maxthon, Opera, firefox, Ie) et ça marche nikel sur tous (c'est ça aussi le but) y'a juste ce petit probléme de debordement


Pourrrais tu me dire plus en détail ce qui ne va pas ?

Merci a vous deux Smiley biggrin
shantee a écrit :

Je suis allé voir ton site qui explique comment créer une page web. Le problème c'est que je vois pas ou est mon erreur , moi aussi j'ai déja tout ça un doctype, un <titlte> (aprés lecture de ce site je les ai remis dans le bon ordre Smiley langue ) ..bref il me semble que j'ai déja fais tout ça ?

[... ]

Pourrrais tu me dire plus en détail ce qui ne va pas ?


1- Supprimer ce frameset qui entoure ton site qui ne sert à rien. Si c'est pour des raisons de redirections entre plusieurs domaines. Privilégies une redirection côté serveur (voir avec ton hébergeur comment le faire).

2- Désolé mais ce n'est pas encore dans l'ordre Smiley cligne .
Tout d'abord tu dois choisir un DOCTYPE adapté à tes besoins et XHTML 1.1 semble un mauvais choix: lire
Les DTD HTML4.01 et XHTML1.0 : comment choisir ?. Le DOCTYPE doit débuter le code de ta page alors que toi tu fais:

<html>
<head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


là où une page devrait schématiquement ressemblée à:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Titre de la page</title>
		<meta name="" content="" />
		<link rel="stylesheet" type="text/css" href="" />
  </head>
  <body>
	Contenu
  </body>
</html>

3- Si tu choisi un DOCTYPE XHTML, toutes les balises doivent être saisies en minuscules, elles doivent toutes êtres fermées même celles sans balise de fermeture comme br (que tu adores Smiley cligne ), img, hr:
<br />
<img />
<hr />


4- Utiliser correctement html, là où tu as un titre, utilises un niveau de titre <hn>, si c'est un paragraphe utilises <p>, une liste une liste complète avec <ul> et <li> etc. sans te préoccuper du rendu par défaut de ces éléments et ne pas les utiliser pour cela. Ne pas utiliser <br /> pour caler tes éléments mais les marges des divers éléments avec CSS.

Ne pas utiliser les tableaux imbriqués aux fins de mise en page.

Par exemple ceci:
<h1>Les News de CuteDesign <br>
  </h1>
  <br />
  <div id="partiedroite">
    <div class="infodroite">
      <table width="520" border="0" cellspacing="1" cellpadding="0">
    <tr>

      <td><style>
 .newstable {  }
 .newsheader { background-image: url('http://1lien.biz/cellpic3.gif'); padding:3px; }
 .newscontent { background-image: url('http://1lien.biz/pixel01.gif'); padding:3px; }
 .newslinks {  }
 .newslinks:hover {  }
</style><table width="520px" align = 'left' class="newstable">				<tr>
				 <td class="newsheader"><span class="newstitre">Partant pour faire bouger CuteDesign ?</span><span class="petit"> 08/01/06, 11:13  par shantee</span></td>
				</tr>
				<tr>
				 <td class="newscontent">Salut a tous,
<br />
<br />Voila techniquement je crois que le site  est maintenant pas mal avancé. Il reste évidemment encore quelques petites choses a améliorer comme par exemple le système de gallerie ou la partie téléchargement. Cela ne devrait pas prendre beaucoup de temps étant donné que le plus gros morceau du travail a été achevé.

<br />
<br />Maintenant ce que je recherche pour qu'enfin ce site bouge un peu, se serait des gens motivés pour, par exemple animer le forum, remplir un peu les différentes parties du site, ou bien méme en créer de nouvelles. Bref si vos étes intéressé pour monter ce genre de projet n'hésitez pas a me contacter par courriel : <b>shai</b>-arobase-<b>shantee</b>-point-<b>net</b>. ou bien depuis le <a href="http://cutedesign.fr/scripts/forum/" target="_blank">forum</a>
<br />
<br />Je suis ouvert a toute proposition et tout changement [smile]</td>
				</tr>				<tr>
				 <td class="newsheader"><span class="newstitre">Des dizaines de bannières vierges</span><span class="petit"> 06/05/06, 00:58  par shantee</span></td>

				</tr>
				<tr>
				 <td class="newscontent">J'ai ajouté une pages remplie de bannières vierges...Ce sont des fonds pour vos futurs bannières. Les graphismes sont de qualité et les dimensions sont celles d'une bannière standart.
<br />Vous pouvez acceder a cette page par le menu :<b>ressources > bannières vierges </b>
<br />
<br /><a href="http://1lien.biz/bannieres_vierges.php" target="_blank">http://1lien.biz/bannieres_vierges.php</a></td>
				</tr>

pourrait devenir:
<h2>
      Les News de CuteDesign
    </h2>
    <h3>
      Partant pour faire bouger CuteDesign ?
    </h3>
    <p>
      08/01/06, 11:13 par shantee
    </p>
    <p>
      Salut a tous,
    </p>
    <p>
      Voila techniquement je crois que le site est maintenant pas
      mal avancé. Il reste évidemment encore
      quelques petites choses a améliorer comme par
      exemple le système de gallerie ou la partie
      téléchargement. Cela ne devrait pas prendre
      beaucoup de temps étant donné que le plus
      gros morceau du travail a été achevé.
    </p>
    <p>
      Maintenant ce que je recherche pour qu'enfin ce site bouge
      un peu, se serait des gens motivés pour, par exemple
      animer le forum, remplir un peu les différentes
      parties du site, ou bien méme en créer de
      nouvelles. Bref si vos étes intéressé
      pour monter ce genre de projet n'hésitez pas a me
      contacter par courriel : shai-arobase-shantee-point-net. ou
      bien depuis le forum
    </p>
    <p>
      Je suis ouvert a toute proposition et tout changement [smile]
    </p>


Il faut refaire ainsi toute la structure html qui en sera plus solide avec ou sans mise en écran, plus simple à organiser et à maintenir avant de se lancer dans l'habillage avec CSS.

Enfin abandonner ce menu tout javascript.

Voilà pour l'instant. Smiley smile
Merci Igor pour tes précisions,

bon je vais donc regarder ça car en effet mon html est un peu fouilli Smiley smile

Au fait ...Quand tu parle de "frameset"

a écrit :
1- Supprimer ce frameset qui entoure ton site qui ne sert à rien.


C'est le doctype en fait ? Smiley sweatdrop
shantee a écrit :
Au fait ...Quand tu parle de "frameset"

1- Supprimer ce frameset qui entoure ton site qui ne sert à rien.


C'est le doctype en fait ? Smiley sweatdrop

Non mais la page de ton premier lien qui renvoie ceci:

<HTML><HEAD>
<META NAME="description" content="LE Site dédié a photoshop au graphisme ...exposez vos créations, téléchargez et affrontez vous !! [smile]">
<META NAME="keywords" content="">
<TITLE>Forum Design - Photoshop - Duels Graphiques ...Et + encore</TITLE>

</HEAD>
<FRAMESET ROWS="100%,*" BORDER="0" FRAMEBORDER="0">
<FRAME SRC="http://cutedesign.org/" SCROLLING="AUTO" NAME="bannerframe" NORESIZE>
</FRAMESET>
<NOFRAMES>
Forum Design - Photoshop - Duels Graphiques ...Et + encore
<P>
<DIV ALIGN="CENTER"><A HREF="http://cutedesign.org/">http://cutedesign.fr/</A></DIV>
</NOFRAMES>
</HTML>

Cette page qui répond à ton nom de domaine en ".fr" alors que le contenu véritable est accessible par ton domaine en ".org".

Ce que je te conseillais dans mon premier point c'est de ne pas mettre dans une frame répondant à l'adresse en ".fr" ton site en ".org" par l'intermédiaire de cette frame, mais peut-être ton hébergeur est-il responsable. Mais de réaliser ton site sur un des domaines qui t'appartient et de faire une redirection vers les autres domaines.
Ah oui bien vu ...ce .fr ! ca vient en effet de la redirection que j'ai faite depuis mon registrar. Merci Igor Smiley cligne