Mise en page CSS

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : Mise en page CSS

par paillou » 26 oct. 2005, 17:51

Re Moi :

Un problème est encore présent : c'est l'image du haut que j'ai défini à
817 * 79 pixels qui se décale quand on navigue entre :

800*600 & 1024*768 & ...

Y a-t-il moyen de lui attribuer une valeur 100% , l'image peut-elle se redimensioner ?

Code : Tout sélectionner

.head1 { background-color: #E2E8EA; margin-left: 0px; height: 90px ; background: url(images/fond.gif) no-repeat right top ; }

Merci

par mere-teresa » 26 oct. 2005, 10:28

Si ton problème est réglé, peux-tu cliquer sur [Résolu], le petit bouton en haut de ton premier message ?

Merci.

par paillou » 26 oct. 2005, 10:05

Re Bonjour,

- J'ai résolu mon problème de coin (merci maman teresa pour le lien). Je n ai pas fait exactement comme ca, mais bon c po grave : il suffit d 'insérer une image d'un arrondi avec des marges qui empiettent sur les borders...

CSS -->

Code : Tout sélectionner

.logo4 { float: left; /* alignement du logo */ margin-left: -3px; margin-top: -3px; border: 0; }
HTML -->

Code : Tout sélectionner

<img src="images/coin.gif" alt="logo4" class="logo4" />
- En ce qui concerne les problèmes de CSS, personne n'a d'idées ??
D'autant qu'en 800*600, c'est affreux aussi !!

Merci.

par mere-teresa » 25 oct. 2005, 15:28

- un coin avec lequel je n arrive plus à faire d arrondi, l astuce doit etre toute bête, mais je surchauffe là !!
http://www.456bereastreet.com/archive/2 ... d_borders/

par paillou » 25 oct. 2005, 14:35

Puisque pas de réponses, je pose le code :

HTML -->

Code : Tout sélectionner

<html> <head> <title>test</title> <link href="moi.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="first"> <img src="images/croix2.gif" alt="img" class="img" /></div> <div class="second"> <ul id="menu"> <li><a href="#">bla bla </a></li> <li><a href="#">bla bla </a></li> <li><a href="#">bla bla </a></li> <li><a href="#">bla bla </a></li> <li><a href="#">bla bla </a></li> </ul> </div> <div class="third"> <ul class="menu"> <img src="images/coin.gif" alt="img2" class="img2" /> <li> <h3>bla bla</h3> <h4>- bla bla <br/>- bla bla </h4> </li> <li> <h3>bla bla bla bla </h3> <h4>- bla bla <br/>- bla bla <br/>- bla bla <br/>- bla bla </h4> </li> <li> <h3>bla bla </h3> <h4>- bla bla <br/>- bla bla </h4> </li> <li> <h3>bla bla </h3> </li> <li> <h3>bla bla </h3> </li> </ul> </div> <div class="four"> <img src="images/coin2.gif" alt="img3" class="img3" /> <h1>bla bla</h1> <p>1er probleme : l'alignement de mes différents cadres : <br /> en effet je souhaite que mes 3 cadres - first - third et four soient parfaitement positionnés <br /> . sous mozilla je vois un décalage du menu de gauche par rapport au bloc centre (four)<br /> . sous IE : ce décalages est inexistant, mais c est le bloc du haut (first) qui est trop à gauche !! Il devrait être aligné par rapport au bloc centre (four) </p> <p>2ème problème (+ important) : mon arrondi du bloc centre (four) : <br /> je n'arrive pas à le faire avec les memes techniques que j ai employées pour le menu de gauche et le bloc du haut ainsi que le menu du haut aussi. <br /> <br /> Si qqn peut me donner une ptite astuce, ca m aiderai ... </p> </div> <div class="footer"> bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p> </div> </body> </html>
-----------------------------------------------------------------------------

CSS -->

Code : Tout sélectionner

body { margin: 0; font: 0.8em arial, helvetica, sans-serif ; background-color:#E2E8EA; } .first { background-color: #fff; margin-left: 0px; height: 130px ; background: url(images/fond.gif) no-repeat right top ; } .img { float: left; margin-right: 10px; margin-top: 3px; border: 0; } .img2 { float: right; margin-right: 0px; margin-top: 0px; border: 0; } .img 3{ float: left; margin-right: 0px; margin-top: 0px; border: 0; } .second { margin-left: 181px; height: 30px ; background-color:#E2E8EA; } .third { background-color:#E2E8EA; position: absolute; left:0; width: 180px; height: 504px; } .four { background-color:#fff; /*background: url(images/truc.gif) no-repeat left top ;*/ margin-left: 181px; border-left: 2px solid #2a9f59; border-top: 2px solid #2a9f59; } .menu { margin-top: 0px; width: 160px; background-color: #305f73; color:#FFFFFF; text-align: left; } ul#menu { background-color: #305f73; margin-left: 50px; list-style-type: none ; } ul#menu li { float: left ; text-align: center ; } ul#menu li a { display: block ; width: 142px ; font-size:1.1em; font-weight:bold; letter-spacing: 1.3px; line-height: 30px ; color: #fff ; background: url(images/menu.gif) no-repeat 0 0 ; text-decoration: none ; border-right: 2px solid #E2E8EA ; } ul#menu li a:hover { background: url(images/menu.gif) no-repeat 0 -30px ; } h1 { padding-left: 25px ; line-height: 25px ; font-size: 1.4em ; background: url(images/croix.gif) no-repeat left bottom ; color: #305f73 ; border-bottom: 1px solid #305f73 ; } h3 { font-size: 1em ; margin-left: 5px ; padding-left: 5px ; color: #ffffff ; } h4 { font-weight:400; font-size: 0.85em ; margin-left: 13px ; padding-left: 5px ; color: #ffffff ; } ul,li { list-style-type: none; margin: 0; padding:0; line-height: 30px; } p { text-align: justify ; text-indent: 2em ; line-height: 1.7em ; } a { color: #305f73 ; } a:hover { color: #9b2 ; } .footer { background-color:#E2E8EA; margin: 0 ; padding-right: 10px ; line-height: 30px ; text-align: right ; color: #305f73 ; } pre { overflow: auto ; background: #dea ; border: 2px solid #305f73 ; padding: 5px 0 0 5px ; font-size: 1.2em ; } * html pre { width: 636px ; } pre span { color: #560 ; } pre span.comment { color: #b30000 ; }

Mise en page CSS

par paillou » 25 oct. 2005, 11:28

Bonjour, j ai un probleme avec :

- ma mise en page et mes différents blocs de page qui ne veulent pas se mettre ou je leur dis !!

- un coin avec lequel je n arrive plus à faire d arrondi, l astuce doit etre toute bête, mais je surchauffe là !!

Source : http://xthost.info/clinique/test/

(je n ai pas voulu faire de message trop long (vace code html et css), donc j'ai tout mis sur un ptit ftp libre)

Merci de votre aide, chère communauté PHP France.