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 ;
}

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.

Mise en page CSS

Répondre

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

Mise en page CSS