28172 sujets

CSS et mise en forme, CSS3

Problème de définition de taille

Tout d'abord, bonsoir!

J'ai un problème en css.
Je vous explique, je dois faire 3 colonnes une à gauche, une au milieux et une à droite.

J'ai donc utilise ce tuto http://www.alsacreations.com/astuce/lire/77-aligner-des-lments-sans-tableaux.html

Ce qui fonctionne très bien mais le problème est que je voudrais maintenant position ces block et leur définir une taille ce qui ne marche pas Smiley decu

Pourriez vous m'aider?? 

HTML
<p><span class="gauche">partie à gauche</span><span class="droite">partie à droite</span>partie au centre</p>

CSS
p {
  text-align: center;
}
p span.gauche {
  float: left;
}
p span.droite {
  float: right;
}

Voici une image de ou je dois mettre les bocks
upload/19733-avantfoote.png

Merci d'avance pour votre aide Smiley biggrin
Elles sont les deux dans une balise regarde.


<p>
[#orange]<span class="gauche">[/#]partie à gauche[#orange]</span>[/#]
[#orange]<span class="droite">[/#]partie à droite[#orange]</span>[/#]
partie au centre</p>


Sinon je viens de remarquer que je vous ai donné seulement le code du tutoriel. Donc voisi celui que j'ai mis.



HTML

<p>
<span class="gauche">
    Aujourd'hui:999999<br />
        En ligne:999999<br />
        Total:999999<br />
    <!--Ici les statistiques-->
</span>
<span class="droite">
<img src="skin/img/sortis/op.png" />
</span>
Lorem ipsum dolor sit amet... 
Cras justo felis, suscipit a, suscipit sed, placerat eu, nisl. 
</p>



CSS
 p {
  text-align: center;  width:210; height:70; overflow:auto; font-size:9px; color:#fff;
}
p span.gauche {
  float: left;  width:210; height:70; font-size:9px; color:#fff; text-align:left;
}
p span.droite {
  float: right; width:280; height:70; overflow:auto; font-size:9px; color:#fff;
}
Moi j'ais testé avec plusieurs navigateurs une compilation sans images,
j'avais écris cela
<html><body>
<style>
 p {
  text-align: center;
  font-size:19px;
  color:#000000;
}
p span.gauche {
  float: left;
  font-size:19px;
  color:#000000;
  text-align:left;
}
p span.droite {
  float: right;
  font-size:19px; color:#000000;
}
</style>

<p>
<span class="gauche">
    Aujourd'hui:999999<br />
        En ligne:999999<br />
        Total:999999<br />
</span>
<span class="droite">
sssssssssssssss<br />
aaaaaaaaaaaaaa
</span>
Lorem ipsum dolor sit amet... 
Cras justo felis, suscipit a, suscipit sed, placerat eu, nisl. 
</p></body></html>
Hello Adamys et bienvenue sur le forum, Smiley smile

SPAN étant un élément de type 'en-ligne' (cf. Comprendre la structure HTML et le rendu CSS des balises : bloc et en-ligne) on ne peut pas lui affecter directement les propriétés width et height. Le plus simple est encore d'utiliser 3 paragraphes :
<!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>Test</title>
<style type="text/css" media="screen">
body {
	background-color: #000;
}
p {
	text-align: center;  
	width:210; 
	height:70; 
	overflow:auto; 
	font-size: 1em;
	color:#fff;
}

p.gauche {
	float: left;  
	text-align:left;
}

p.droite {
	float: right; 
	width:280; 
	height:70; 
}
</style>
</head>
<body>
<p class="gauche">
    Aujourd'hui:999999<br />
        En ligne:999999<br />
        Total:999999<br />
    <!--Ici les statistiques-->
</p>
<p class="droite">
	<img src="skin/img/sortis/op.png" alt="mon image" />
</p>
<p>Lorem ipsum dolor sit amet... 
Cras justo felis, suscipit a, suscipit sed, placerat eu, nisl. </p>
</body>
</html>
Quelques remarques en passant :

* ne pas utiliser px pour fixer la taille (cf. Typographie web : gérer la taille du texte avec les « em »).

* il y a des redondances dans tes déclarations (cf. Comprendre l'héritage et la parenté des styles CSS.)

* penser à renseigner l'attribut alt des images au cas où elles seraient désactivées ou non accessibles (lecteurs d'écrans, etc...)
Hello Heyoan et merci pour ton message et ton accueil.

Je viens de tester le code et ça ne joue toujours pas... Smiley bawling

Si jamais j'ai uploader ce que ça donne avec le design au total peut-être que l'erreur est ailleurs.

Lien
Modifié par Adamys (23 Feb 2009 - 18:37)
Ah OK : en voyant la page je viens de comprendre ce que tu voulais faire. Smiley murf

Alors la première chose c'est que lorsqu'une image contient des informations (avant_footer.png) elle ne devrait pas être en background css mais dans le code html (pour rappel contenu = html et présentation = css).

La seconde chose est que tout cela ressemble très fortement à un tableau... et donc l'utilisation d'un élément TABLE me semble tout à fait appropriée. Smiley langue (cf. http://openweb.eu.org/articles/tableaux_css et http://www.pompage.net/pompe/autableau/ )
Toujours le même problème les tailles ne veulent pas être interprétée...

Si jamais j'ai uploader la version avec le tableau.

Lien
Heu... je parlais de tableau parce que ton image actuelle correspond aux libellés de colonnes (utilisation de TH) sinon ça n'apporte rien.

En gros quelque chose comme :
<table>
  <tr>
    <th><img src="image_stats" alt="Stats" /></th>
    <th><img src="image_topsite" alt="Topsite" /></th>
    <th><img src="image_allies" alt="Alliés" /></th>
  </tr>
  <tr>
    <td>des stats </td>
    <td>du texte </td>
    <td>une image </td>
  </tr>
</table>
Bonsoir!

Merci pour ta réponse Heyoan Smiley biggrin

Mais en fait je viens de me rendre compte qu'il faut que mes blocks soient étirable.(je sais pas très malin de le constater maintenant désolé... Smiley lol )

J'ai donc du refaire toute ma structure... et là encore un problème Smiley confus
Mon fond de block ne veut pas s'étirer.

Alors comme précédément si vous pouviez m'aider Smiley confused

Par ici le code.
Plop,

inutile d'aller plus loin tant que tu n'as pas tenu compte de ça :
Heyoan a écrit :
Alors la première chose c'est que lorsqu'une image contient des informations (avant_footer.png) elle ne devrait pas être en background css mais dans le code html (pour rappel contenu = html et présentation = css).

et de ça :
Heyoan a écrit :
Heu... je parlais de tableau parce que ton image actuelle correspond aux libellés de colonnes (utilisation de TH) sinon ça n'apporte rien.


Plus globalement ton site est en grande partie inaccessible. Je t'invite à installer l'extension web developer pour Firefox puis à tenter l'expérience suivante :
1) désactiver les images.
2) désactiver les css
Tu comprendras alors de quoi je te parle. Smiley langue
Je suis pas certain d'avoir compris, car j'ai l'impression que les solutions proposées sont compliquées ... et pas vraiment des réponses

HTML : tu évoque des colonnes, pour moi au départ ça me semble plutôt être une liste de 3 éléments. ça va de soit soit qu'ensuite tu peux changer les balises HTML, pour d'autres si besoin ... suffit d'accorder les CSS.


<ul class="bloc">
    <li class="un"><span>Un</span></li>
    <li class="deux"><span>Deux</span></li>
    <li class="trois"><span>Trois</span></li>
</ul>


CSS : on "aligne" les éléments :


ul.bloc {
    margin:0;
    padding:0;
    width:600px;
    height:30px;
    background:grey;
    }
ul.bloc li {
    margin:0;
    padding:0;
    float:left;
    width:200px;
    height:30px;
    list-style:none;
    }


CSS : on peux personnaliser chaque "colonne", si besoin. On dit surcharger Smiley smile 


ul.bloc li.un {
    width:140px;
    background:red;
    }
ul.bloc li.deux {
    width:260px;
    background:blue;
    }
ul.bloc li.trois {
    background:yellow;
    }
ul li span {
    display:block;
    padding:5px;
    }


j'ai bon ?
Modifié par titeuf (26 Jun 2009 - 14:41)
Sujet clos
Aller à