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.
la communauté d'entraide francophone dédiée au PHP
Mise en page CSS
Puisque pas de réponses, je pose le code :
HTML -->
-----------------------------------------------------------------------------
CSS -->
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 ;
}le php c de la boule, euh de la balle
Modérateur PHPfrance |
6037 Messages
http://www.456bereastreet.com/archive/2 ... d_borders/- un coin avec lequel je n arrive plus à faire d arrondi, l astuce doit etre toute bête, mais je surchauffe là !!
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 -->
HTML -->
- 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.
- 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;
}
Code : Tout sélectionner
<img src="images/coin.gif" alt="logo4" class="logo4" />D'autant qu'en 800*600, c'est affreux aussi !!
Merci.
le php c de la boule, euh de la balle
Modérateur PHPfrance |
6037 Messages
Si ton problème est réglé, peux-tu cliquer sur [Résolu], le petit bouton en haut de ton premier message ?
Merci.
Merci.
Règle n°2 du webmaster : Toujours commencer par le HTML qu'on veut obtenir....toujours ! 
J'aime apprendre de nouvelles choses.
J'aime apprendre de nouvelles choses.
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 ?
Merci
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
le php c de la boule, euh de la balle