28220 sujets

CSS et mise en forme, CSS3

Bonjour je ne me suis pas encore presenté je le ferais apres.
je viens du site du zero.
j'ai fais un design avec ma resolution et en le regardant avec une resolution il a été deformé c'est pourquoi j'ai reposisionné les block en % mais sa na fait que limiter les dégats et donc j'aimerais savoir si il était possible que je base mon positionnement sur le bloc central.sachant qu'il n'est pas son encetre...

merci beaucoup
Balboullodue Smiley cligne
Bonjour et bienvenue balboulloude Smiley biggrin ,

Il faudrait un peu plus d'informations aux membres du forum pour qu'ils puissent esquisser une réponse Smiley cligne , comme un lien vers la page concernée, et/ou le code de ladite page.

ps: si le cœur t'en dit les présentations c'est dans ce topic: [Topic unique] Le sujet des présentations
oki pas de souci alors je m'explique (again)
Il faudrai juste que les bloc de mon design reste là où ils sont et ce quelque soit la resolution du visiteur

alors le lien;
http://mangamers.free.fr/zoneactu/

et le code
alors le html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<HEAD>
<TITLE>Zoneactu</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="index.css" />
</HEAD>
<BODY>


<div id="conteneur">

	  <div id="header"></div>
 
	  <div id="gauche1"><img src="images/compte_header.jpg"/>

	  	<p>Votre Compte ^^
	  	
			<ul class="menugauche">
			<p><li><a href="">  compte</a></li>
			<li><a href=""> compte</a></li>

			<li><a href=""> compte</a></li>

	
			<li><a href="">compte</a></li></p>
			</ul>
			<img src="images/menu_footer.jpg"/>
	  </div>
	  
	  
	  <div id="gauche"><img src="images/menu_header.jpg"/>
	  	
	  	
			<ul class="menugauche">
			<li><a href="">  Menu 1</a></li>

			<li><a href="">  Menu 2</a></li>

			<li><a href="">  Menu 3</a></li>

			<li><a href="">  Menu 4</a></li>
			
			<li><a href="">  Menu 2</a></li>

			<li><a href="">  Menu 3</a></li>

			<li><a href="">  Menu 4</a></li>
			<li><a href="">  Menu 2</a></li>

			<li><a href="">  Menu 3</a></li>

			<li><a href="">  Menu 4</a></li>
			<li><a href="">  Menu 2</a></li>

			<li><a href="">  Menu 3</a></li>

			<li><a href="">  Menu 4</a></li>

			</ul>
			<img src="images/menu_footer.jpg"/>
	  </div>
	  
	  <div id="droite">
	  

	  	<img src="images/pub_header.jpg"/>
			<ul class="menudroit">
			
			<li><a href="">pub</a></li>
			<li><a href="">pub</a></li>

			<li><a href=""/>pub</a></li>
			</ul>
			<img src="images/pub_footer.jpg"/>

		
	  </div>
	  
  	<div id="centre">
	<div id="news_header"><img src="images/news_header.jpg"/> </div><p>
  	 youhou ihihihihihih hahhahahahahhahaha hohoohohohohohooh.<br />

  	  youhou ihihihihihih hahhahahahahhahaha hohoohohohohohooh.<br />
 youhou ihihihihihih hahhahahahahhahaha hohoohohohohohooh.<br />
 youhou ihihihihihih hahhahahahahhahaha hohoohohohohohooh.<br />
 youhou ihihihihihih hahhahahahahhahaha hohoohohohohohooh.<br />
 youhou ihihihihihih hahhahahahahhahaha hohoohohohohohooh.<br />
 youhou ihihihihihih hahhahahahahhahaha hohoohohohohohooh.<br />

 youhou ihihihihihih hahhahahahahhahaha hohoohohohohohooh.<br />
 youhou ihihihihihih hahhahahahahhahaha hohoohohohohohooh.<br />
 youhou ihihihihihih hahhahahahahhahaha hohoohohohohohooh.<br />
 youhou ihihihihihih hahhahahahahhahaha hohoohohohohohooh.<br />
 youhou ihihihihihih hahhahahahahhahaha hohoohohohohohooh.<br />
 youhou ihihihihihih hahhahahahahhahaha hohoohohohohohooh.<br />
(((((j'ai abreger)))))

	  </p>
<img src="images/news_footer.jpg"/>
  	</div>

	
	  
	  <div id="pied">
	  
	  pied de page</div>

</div>
</BODY>
</HTML>


et mon css

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
background-color:#082D57;
}
#header {
     margin-left: auto;
     margin-right: auto;
width:800px;
height: 181px;
background-image: url("images/header.jpg");
}




#centre {
float:center;
     margin-left: auto;
     margin-right: auto;
background-image: url("images/news_bg.jpg");
width: 511px;
height: 100%;
background-repeat:repeat-y;
margin-bottom: 20px;
}
#news_header {
     margin-left: auto;
     margin-right: auto;
background-image: url("images/news_header.jpg");
width: 511px;
height: 41 px;
background-repeat:no-repeat;
}


#gauche1 {
float:left;

width: 144;
position: absolute;
background-repeat:repeat-y;
left:0;
width: 150px;
margin-left: 235px;
background-image:url("images/menu_bg.jpg");
padding:0px;

}



#gauche {
margin-left: auto;
margin-right: auto;
width: 144;
position: absolute;
background-repeat:repeat-y;
left:0;
width: 150px;
margin-left: 235px;
background-image:url("images/menu_bg.jpg");
padding:0px;
margin-top: 220px;
}
#droite {
background-repeat:repeat-y;
margin-right:228px;
position: absolute;
right:0;
width: 150px;
background-image:url("images/pub_bg.jpg");
padding:0px;
}
#pied {
margin-left: auto;
margin-right: auto;
width:779px;
height: 41px;
background-image: url("images/footer.jpg");
}

.menugauche {
text-align: center;
list-style-type: none;
margin: 0;
padding:0;
}
.menugauche li {
margin-bottom: 0px;
}
.menugauche a {
margin: 17px;
color: #000000;
text-decoration: underline;
}
.menugauche a:hover {
text-decoration: none;
}
.menudroit {
text-align: center;
list-style-type: none;
margin: 0;
padding:0;
}
.menudroit li {
margin-bottom: 0px;
}
.menudroit a {
margin: 0px;
color: #000000;
text-decoration: underline;
}
.menudroit a:hover {
text-decoration: none;
}
p {margin: 17px;}
.pied p {margin: 7px;}



merci

Mon code fait à l'arache ne vous moquez pas Smiley lol
salut,
je ne te cache ps que c'est un peu le bordel Smiley lol comme tu le dis si bien.

Premièrement je remarque que tu utilises des floats en meme tps que des postions absolues, si tu pouvais enlever les floats qui ne servent à rien et surtout ce float:center Smiley cligne qui est tout simplement incorrecte, je crois que ca sera deja plus clair.
Modifié par Vlili30 (22 Jul 2005 - 22:32)
Pas de moquerie mais c'est vrai que c'est un petit peu le bordel Smiley biggrin , d'abord dans ton code html avant de parler du positionnement par css Smiley cligne . Sans un code correctement rédigé tu risques de rencontrer des difficultés pour mettre en page correctement et aisément ta page. Voici quelques remarques.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >


xhtml 1.1 n'est peut-être pas le doctype le plus approprié. Je t'invites à lire cette entrée de la faq pour les explications: Comment bien déclarer XHTML1.1 ?
xhtml 1.0 ou html 4.01 serait bien suffisant il me semble. Cependant si tu choisi xhtml 1.0 il y a quelques règles syntaxiques à respecter dont ne pas utiliser de majuscules pour les balises et attributs, uniquement des minuscules, à la différence de cet exemple de ton head:
<HEAD>
<TITLE>Zoneactu</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="index.css" />
</HEAD>
<BODY>

Il faut également que tout élément comporte une balise de fermeture, même celles qui étaient omises, donc tous les éléments tels que img, br, hr etc. doivent être fermées. Il faut rajouter espace/ avant le chevron fermant. Il y en a qui manquent, par exemple:

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
[... ]
 <p>Votre Compte ^^
[... ]
<img src="images/compte_header.jpg"/>
[... ]

Un autre point important est la correcte imbrication des éléments et la nature des éléments que tu imbriques, les inlines et blocks. Par exemple dans cette partie:
 <div id="gauche1"><img src="images/compte_header.jpg"/>

<p>Votre Compte ^^

<ul class="menugauche">
<p><li><a href=""> compte</a></li>
<li><a href=""> compte</a></li>

<li><a href=""> compte</a></li>


<li><a href="">compte</a></li></p>
</ul>
<img src="images/menu_footer.jpg"/>
</div>

où tu ouvres un paragraphe que tu ne fermes pas. p est un élément de type block qui ne peut contenir que des éléments inline donc pas directement d'autres blocks comme les listes ul. Il faudrait au minimum fermer ce paragraphe avant la liste.
Ensuite après la balise ouvrante de ta liste ul tu places un p qui n'a pas sa place ici, ul ne peut contenir que des éléments de liste li et pas autre chose.

Voilà vite vu quelques petites choses préalables à règler, à mon sens, avant d'aborder la partie css et la mise en page proprement dite qui t'amène ici. Smiley cligne