28216 sujets

CSS et mise en forme, CSS3

Donc, voila j'avais posté un sujet, mais bon au fur et a mesure ca devenait compliqué pour ceux qui n'avait pas lu depuis le debut. Donc j'ai réussi a trouver d'ou venait mon probleme et je l'ai ramené par rapport a ce que tout le monde connait (du moins je pense): les exemples de alsacreation.

Donc voila, j'utilise l'exemple de site en largeur fixe 750px avec un HRADER/CONTENU/FOOTER. Je veux mettre des images dans mon CONTENU sur la gauche, et sur la droite j'aurai du texte. Le probleme est que comme je met un float: left; a mon image, celle ci se positionne au dessus de mon FOOTER.

voici le code:

/* CSS issu des tutoriels  www.alsacreations.com/articles  */
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#conteneur {
/*position: absolute;*/
width: 750px;
/*left: 50%;*/
/*margin-left: -375px;*/
margin: auto;
}
#header {
height: 100px;
background-color: #99CCCC;
}
#centre {
background-color:#9999CC;
}
#pied {
/*clear: both;*/
height: 30px;
background-color: #99CC99;
}
p {margin: 0;}

img {float: left;}



<!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>
<title>Largeur fixe 750, header/contenu/footer.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
@import url("contenu_fixe.css");
</style>
</head>

<body>
<div id="conteneur">
	  <div id="header">header <a href="http://www.alsacreations.com/articles/modeles">(voir tous les modèles)</a> - <a href="http://www.alsacreations.com/articles/modeles/contenu_fixe.css">(voir
    la feuille de style CSS)</a>
</div>

	  <div id="centre">
  	  <p>partie centrale</p>
  	  <p>partie avec du contenu occupant le reste de la largeur</p>
  	  <p>partie avec du contenu occupant le reste de la largeur</p>
  	  <p>partie avec du contenu occupant le reste de la largeur</p>
  	  <p>partie avec du contenu occupant le reste de la largeur</p>
  	  <p>partie avec du contenu occupant le reste de la largeur</p>
  	  <p>partie avec du contenu occupant le reste de la largeur</p>
  	  <p>partie avec du contenu occupant le reste de la largeur</p>
  	  <p>partie avec du contenu occupant le reste de la largeur</p>
  	  <p>partie avec du contenu occupant le reste de la largeur</p>
  	  <p>partie avec du contenu occupant le reste de la largeur</p>
  	  <p>partie avec du contenu occupant le reste de la largeur</p>
  	  <p>partie avec du contenu occupant le reste de la largeur</p>
	  <img src="action_philanthropique.jpg" height="300"></img>
  	</div>
	  
	  <div id="pied">pied de page</div>
</div>
</body>
</html>

voila ce que ca donne:
upload/703-pb.jpg

Merci de pouvoir m'aider et pourquoi pas de pouvoir aussi m'expliquer Smiley smile
Modifié le 02 Feb 2005 - 13:00
Si je met l'image en premier, mon bloc CONTENU sera aussi grand qu'il y a de texte. Une fois qu'il n'y a plus de texte, mon FOOTER s'affiche. Mais malheureusement si mon image est plus grande qu'il n'y a de texte, elle cachera le FOOTER.

Regarde:
upload/703-pb2.jpg
Dans ce cas impose une hauteur mini au div centre :

#centre
{
height: auto !important;
height: 600px; /* because ie suxxe */
min-height: 550px;;
width: 100%;
background-color: #9999CC;
}
Modifié le 02 Feb 2005 - 10:03
on peut pas faire autrement qu'avec une taille minimale?
Parceque dans le cas ou mon contenu sera plus petit, j'aurais un gros vide dans mon bloque...

Ca fait deja quelques jours que je cherche, je suis en train de dèséspéré... Smiley bawling
Avec une taille mini ça fonctionne très bien, j'ai testé, tu peut la réduire si tu veux Smiley lol upload/860-test-forum2.png
Modifié le 02 Feb 2005 - 10:12
en fait j'ai trouvé une partie de la solution je pense.
Si dans mon CONTENU je met overflow: auto; , ca marche mais que avec Firefox...

edit: j'ai poster trop tard pour te rep. En fait tu as un gros vide mauve et je ne le veux pas (et oui je suis difficile avec ca!)
Modifié le 02 Feb 2005 - 10:20
globe_dk a écrit :

edit: j'ai poster trop tard pour te rep. En fait tu as un gros vide mauve et je ne le veux pas (et oui je suis difficile avec ca!)



Oui j'avais compris! Smiley biggrin mais c'est tout ce que j'ai en stock dans l'imédiat Smiley ohwell c'est pour ça que je te disait de mettre une hauteur mini plus courte comme c'est une hauteur mini le DIV s'allongera en fonction du contenu Smiley lol
Modifié le 02 Feb 2005 - 10:41
Administrateur
Humm, les tailles mini ne fonctionnent pas partout et ça relève du bidouillage à la façon "bouchère" Smiley ohwell

Dans ce cas, il me semble bien plus logique de placer ton image en float (et non en absolu) et de gérer les éléments autour grâce à la propriété "clear" (une recherche sur ce sujet t'apportera plein de pistes)
Je ne comprend pas ce que tu veux dire car mon image est bien en float (float: left;). Et j'ai deja essayer avec un clear: both; mais au lien d'avoir mon fond mauve (comme dans l'exemple), il est blanc.
Raphael a écrit :
Humm, les tailles mini ne fonctionnent pas partout et ça relève du bidouillage à la façon "bouchère" Smiley ohwell

Dans ce cas, il me semble bien plus logique de placer ton image en float (et non en absolu) et de gérer les éléments autour grâce à la propriété "clear" (une recherche sur ce sujet t'apportera plein de pistes)


Regarde les propriété du tag "important!" et tu verra qu'il ne s'agit pas d'un hack de plus Smiley cligne
globe_dk a écrit :
Je ne comprend pas ce que tu veux dire car mon image est bien en float (float: left;). Et j'ai deja essayer avec un clear: both; mais au lien d'avoir mon fond mauve (comme dans l'exemple), il est blanc.

Dans la réponse que je te faisais hier, il y avait une partie commentée pour éviter ce blanc, tout en utilisant un clear sur le pied de page:

#conteneur {

background-color:#9999CC;/*pour être raccord couleur #centre*/


Cela fonctionne parfaitement sans blanc comme dans la capture que j'avais mise: http://forum.alsacreations.com/upload/128-test.png
Modifié le 02 Feb 2005 - 11:34
oui oui mais en fait dans mon site, il y aura une bordure sur la droite. Et donc avec ta solution, elle n'apparaitra pas.

Donc je pense avoir reglé mon probleme en mettant overflow: visible;. Donc pour l'instant il restera comme ca la site (c'est un projet de MASTER informatique). Je m'acheterai un livre sur les CSS.

Est ce que le livre CSS cookbook est bien? J'aime bien qu'il y ai de temps en temps des exemples (mais egalement de la theorie Smiley smile ).

Merci encore a tout ceux qui m'ont aidé.
globe_dk a écrit :

Est ce que le livre CSS cookbook est bien? J'aime bien qu'il y ai de temps en temps des exemples (mais egalement de la theorie Smiley smile ).


Ce post devrait t'intéresser: Livres CSS et Standards

Si tu penses que ton probrème est résolu, il ne reste plus qu'à rajouter un tag résolu en éditant ton premier post et modifier le titre avec le tag résolu.