28221 sujets

CSS et mise en forme, CSS3

[résolu] Cadre arrondi contenant une image -> pas de resize

Pages :
(reprise du message précédent)

Autant j'adore les dessins autant le design me semble... euh... soyons diplomate... euh... fade ? Je préférais l'ancien. Avec un site qui utilise un hamster géant comme logo on s'attends à truc pétillant, plein de couleurs et de dynamisme.

Sinon pour ton problème de cadre étirable à part multiplier les divs j'avoue que je ne vois pas trop... voir même pas du tout. Mais personellement je préfère encore des divs vides en trop qu'un tableau pour arriver au résultat.

Bon courage !
Le problème c'est que j'ai eu pas mal de plaintes par rapport à l'ancien design comme quoi c'était illisible. (foncé sur foncé)

(zont qu'à avoir des écrans calibrés d'abord è__é )

Sinon, je cherche juste comment bidouiller le tuto (ou n'importe quelle autre méthode) pour pouvoir faire en largeur ce qui est déjà fait en hauteur.

Avec un tableau, c'est relativement simple, 9 cases et hop, c'est fait.
Mais avec les divs, euuuh, bein je vois pas trop. Soit le cadre prend toute la largeur, soit le on lui fixe une largeur bien définie.

Au pire j'essaierai la solution "brutale" qui consiste à récupérer la taille de l'image en php et la rebalancer dans la feuille de style, mais c'est pas très propre...
Je vais jetter un oeil en détail ce soir, là j'ai pas de quoi faire sous la main mais je pense que c'est fesable avec un peu de bidouille et de divs dans des divs. Je te tiens au courant :3
Bon aprèm 40 minutes de bataille je dois avoure que c'est pas si facile que ça... J'ai une solution mais elle empèche le centrage du bloc par la suite, c'est grâve ?
J'ai testé sous IE et FF mais sous safari je ne sais absolument pas ce que ça va donner...

Les images (taille max 500px et bordure 10px) sont (l*h) :
- topleft (500*500px)
- topright (10*500px)
- bottomleft (500*10px)
- bottomright (10*10px)
Et le code :

<html>
 <head>
  <title></title>
  <style>
.all {
 width: auto !important;
 width: 10px;
 display: table-cell;
 background: url(topleft.gif) top left no-repeat;
}
.pict {
 padding: 10px;
 background: url(bottomright.gif) bottom right no-repeat;
}
.topright {
 background: url(topright.gif) top right no-repeat;
}
.bottomleft {
 background: url(bottomleft.gif) bottom left no-repeat;
}
  </style>
 </head>
 <body>
  <div class="all">
   <div class="topright">
    <div class="bottomleft">
     <div class="pict"><img src="truc.png" alt="" /></div>
    </div>
   </div>
  </div>
 </body>
</html>


PS: mlle ^^
Modifié le 18 Jan 2005 - 19:40
Bon, j'ai testé, ca marche plutôt bien Smiley smile

(Y compris avec mon layout "bâtard" )

L'interface en elle même est assez légère du coup (3 images de 2-3ko, et une de 6 que je peux certainement optimiser en jouant avec la transparence)

Il me reste plus qu'à faire une image map sur le coin haut droit et bas droit, et ca devrait aller. (si c'est possible)

Merci beaucoup ^^

Edit : je vais souffrir avec cette image map =___=
Merci ie qui fait n'importe quoi et ne gère pas "auto" correctement.
Modifié le 19 Jan 2005 - 13:19
Pages :
Sujet clos
Aller à