28173 sujets

CSS et mise en forme, CSS3

Site web "contractile" (comment faire ?)

Pages :
Bonjour à tous,

Je souhaiterai mettre en place un site web "contractile", j'ai peur de ne pas me faire comprendre donc je préfère donner un exemple : poudlard (désolé pour le temps de chargement). En effet sur ce site on peut remarquer que le logo en haut est composé de trois images distincte, mais qui se contracte au besoin de l'utilisateur lorsqu'il réduit sa fenêtre. J'ai essayé de faire pareil sur mon site : witacity , mais rien y fait, les images restent bloquées, espacées, incontractiles... Alors, emploi du CSS ? Balise HTML particulières ?

Merci d'avance pour votre réponse,
Makushimu
Bonjour.

Une solution - non testée - pourrait être de rajouter un ou deux <div> auxquels on applique une image de fond

<!-- XHTML -->
<div id="header">
   <div><img src="logo.png" alt="L'image avec le titre du site" /></div>
</div>


/* CSS */
#header{
   background: #fff url(image_de_droite.png) no-repeat 100% 0;
   }
#header div{
   background: #fff url(image_de_gauche.png) no-repeat 0 0;
   text-align: center;
  }


Sinon, on parle plutôt de site fluide que de site contractible Smiley cligne
Modifié par Sopo (05 Feb 2006 - 13:48)
Ca progresse : Witacity, mais on ne voit pas l'image de droite... Sinon j'ai l'impression que Photoshop ne VEUT PAS gérer la transparence... Alors la solution pour faire apparaître la-mystérieuse-image-de-droite-qui-se-cache ?

PS : on dit bien contractile et non pas contractible
a écrit :
Alors la solution pour faire apparaître la-mystérieuse-image-de-droite-qui-se-cache ?


Les styles sont appliqués deux fois à #header, ça ne peut pas marcher ...


#header{

   background: #fff url(logo_haut_droite.png) no-repeat 100% 0;

   }

#header [#red]div[/#]{

   background: transparent url(logo_haut_gauche.png) no-repeat 0 0;

   text-align: center;

  }
Ca marche !!! (par contre je trouve pas le C cédille majuscule sur mac...)
Modifié par Makushimucool (05 Feb 2006 - 19:17)
Administrateur
Makushimucool a écrit :
Sa marche !!!

Ouch, ça fait vraiment mal aux yeux de lire ça Smiley sweatdrop

Bref, si le sujet est résolu, merci de bien vouloir le marquer comme tel (voir Règles et FAQ, comme d'hab) Smiley cligne
Non en fait le résultat n'est pas tout à fait fini, j'aimerais juste que cet effet se stop à un moment (en effet quand l'on réduit trop la fenêtre le résultat est disons... inélégant ?). Je pense qu'un petit style CSS devrait pourvoir gérer en inch, px ou autre le blocage de cette réduction, non ?
Je n'arrive pas à faire venir le style grâce à une feuille externe, quand je test, seul la première et la deuxième image sont concernées, la troisième descend en dessous, pourquoi ?
Tout est bon maintenant à l'exception d'une chose : mes trois images ne prennent pas toute la largeur de la page, il y a ces deux petits milimètres qui sont très inélégants... Je fais commment pour les enlever ???
Tu parles des bandes blanches tout autour de ton site ? Un petit 
margin: 0

sur la balise html et/ou sur la balise body devrait les faire disparaître ...
Bien merci pour toutes vos réponses, alllez je sais que j'en ai pas besoin mais... "ÇÇÇÇÇÇÇÇÇÇÇ" ça fait du bien de savoir taper sur son clavier ce que l'on veut voir apparaître à l'écran... Tiens à propos de Ça, le "margin : 0" n'a rien résolu, comme visible sur le site. Sinon dans la construction d'un site fluide, j'ai encore quelques questions :


1) J'ai envie de faire des menus en dessous du logo, à gauche, et à droite, j'utilise :
- des <frameset> (donc emploi de plusieurs pages, c'est un peu lourd je trouve...)
- des <div> personnalisé avec CSS (tout de suite ça sonne mieux...)
- une troisième solution que vous auriez la gentillesse de me conseiller...
Alors ?

2) Je souhaite que ces dits menus soit non-fluide (bloqué, mais ça doit pas être trop dur avec le CSS) pour la gauche et la droite, mais que le centre (là ou je mettrais un système de news par exemple) soit lui extensible à souhait... C'est possible ?

3) Enfin, quand j'utilise dreamweaver et que je veux rentrer des propriétés il m'en propose des dizaines, notamment des non-indiquées dans CCM (Comment Ça Marche), je ne dit pas que c'est la bible en la matière (alsacréations est beaucoup mieux !) mais des propriétés comme "azimut" parraissent un peu exotique alors :
- sale code pour IE
ou
- CCM a pris un train de retard
Alors ?

Sur ce je continu à trvailler tout en attendant vos réponses.
Maxime
Modifié par Makushimucool (06 Feb 2006 - 18:54)
Bonsoir,
Si tu supprimes 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

qui se trouve en haut de la feuille de style (le fichier css), ça marchera sûrement mieux Smiley biggrin
Bon j'ai essayé de regrouper tous mes styles en un seul fichier dont le code est le suivant :
body		{background-attachment: scroll;
			background-color: #FFFFFF;
			color: #0b18b7;
			font-family: LondonBetween, Arial;
			font-size: 20px;
			margin: 0;			
}

DIV.menu_gauche	{font: Arial, Verdana, normal 8px;
				color: "#0178ff";
				text-align: left ;
				text-decoration : overline
}

#header		{
			background: #fff url(logo_haut_droite.png) no-repeat 100% 0;
}

#header div {
			background: transparent url(logo_haut_gauche.png) no-repeat 0 0;
			text-align: center;
}

Mais rien y fait j'ai bien le même style d'appliquer aux deux phrases différentes... Par contre j'ai réussi à "exterioriser le style du logo pour le cas où je voudrais le changer rapidement pour tout le site...
Voila le code de ma page : 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Page d'accueil Witacity</title>

<!-- Début du favicon -->
<LINK REL="SHORTCUT ICON" href="http://www.witacity.com/favicon.ico">
<!-- Fin du favicon -->

<!-- Début des feuilles de style -->
<link rel="stylesheet" type="text/css" href="/WITACITY.css" />
<!-- Fin des feuilles de style -->

</head>

<body>


<!-- Début du Logo -->
<div id="header">
<div><img src="logo_haut_centre.png" alt="Witacity : créer, participer, évoluer !" /></div>
</div>
<!-- Fin du Logo -->


<!-- Début menu gauche -->
<div align="left" class"menu_gauche">
Coucou c'est un test
<!-- Fin menu gauche -->

<!-- Début du centre de la page -->
<div align="center">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>Witacity est en construction, merci de votre visite.
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
<!-- Fin du centre de la page -->

</body>
</html>

Allez, à ceux qui savent résoudre le problème, je laisse la parole :
Modifié par Makushimucool (06 Feb 2006 - 21:10)
Tu n'échapperas pas à quelques balises <div> pour réaliser une mise en page correcte. Et étant donné qu'il s'agit d'une balise générique, elle est toujours à la fois appropriée & inappropriée Smiley murf

D'autre part, le choix du doctype n'est pas du tout anodin, il vaudrait mieux utiliser le bon directement (sous peine, entre autres, de basculer IE en mode de rendu pourri... heu quirks, pardon).

Pour mettre un menu à gauche, ou à droite, en conservant une autre colonne fluide, il "suffit" de mettre tout le contenu du menu dans un div, de lui donner une largeur (fixe, donc en px dans ce cas-ci), puis de positionner ce div en flottant à l'aide de la propriété CSS 'float'. On donne ensuite une marge de la taille qui va bien & du bon côté à la colonne fluide, et le tour est joué.

A noter que le div flottant doit être placé avant l'autre colonne dans le flux de la page, sinon il se place en-dessous.
Sopo a écrit :

A noter que le div flottant doit être placé avant l'autre colonne dans le flux de la page, sinon il se place en-dessous.


ah bon il faut déduire le html du css maintenant ? C'est curieux non ?
clb56> Non, c'est vrai, ce n'est pas bien ...

Mais comme on parle de placer un menu de navigation avant ou après un contenu, je ne pense pas que ce soit choquant, si ?

Et je ne connais pas d'autre moyen de mettre le menu au bon endroit, à moins de passer par un positionnement absolu.
Cher Sopo, j'ai essayé de te comprendre mais c'est vriament dur. Comme je vais avoir plusieurs <div> je vais devoir faire appel aux classes pour les différencier, non ? Sinon je ne vois pas l'intérêt de mettre une colonne bloquée en px et de lui mettre une propriété "float" qui veut dire étendable à souhait (ou alors je traduit comme une m...). Alors deux solutions: ou je n'ai pas compris le principe de la propriété "float" ou nous nous sommes mutuellement mal compris sur les menus fixe et ceux fluide (float ?).

Bien à toi,
Maxime
Pages :
Sujet clos
Aller à