28221 sujets

CSS et mise en forme, CSS3

Probleme de positionement de mes blocs!!

bonjour!! alors voila je vien de commencer le css!! et je veu positioner une marge a goche, du texte, puis une marge a goche!! donc pour avoir l'image de la marge puis le texte sur la meme ligne puis apres l'image de bordure goche j'avai utilisé le float!! c'était pratique mais sa pose une probleme car deja il semble y avoir des problemes de compatibilités avec des navigateurs et en plus ce que je veu!! c'est que ma marge (en image repeat) s'agrandisse avec le texte!! pas compri?? alors allez sur ce lien : http://jeremie.pottier.free.fr/site/index2.html
ouvrez de préférence avec internet explorer car le résultat est plus proche de ce que j'attend (contrairement a mozilla!! donc la vous voyez bien ma bordure de gauche, du texte, et ma bordure de droite!!
j'ai mi beaucoup de texte et mon blocs de fond gris clair c'est agrandi avec (dans ie seulement pas sur mozilla)
mais pour pouvoir avoir mes bordures a coté de mon texte et non au dessus j'ai utilisé la balise float pour celle de droite et gauche mais le probleme c'est que meme sans imposer de grandeur au bloc "bordure" il ne s'agrandit pas avec le texte... la vous comprenez j'espere!!


en gros je cherche un autre moyen d'aligner mon image en repeat a gauche puis mon texte, puis mon image a droite (tout sa au meme niveau) et sans utiliser float!!

vous voulez voir mon css, xhtml avec float?? ok :

le xhtml :

<!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>Exemple d'utilisation de CSS externe</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="mep.css" />

</head>
<body>



<div class="ensemble">





<div class="marge1_flot">
</div>

<div class="marge2_flot">
</div>

<div class="texte">

<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla
<br>blablablablablablablablablablablablablabla

</div>





</div>




</body>
</html>


LE CSS :

body
{
width: 771px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-color: #AFAFAF;

}

.ensemble
{
width: 760px;
height: 800px;
background-color: #EAEAEA;


}

.marge1_flot
{
width: 30px;
height: 800px;
background-image: url("bordure_gauche.jpg");
background-repeat: repeat-1;
float: left;


}





.marge2_flot
{
width:30px;
height: 800px;
background-image: url("bordure_droite.jpg");
background-repeat: repeat-1;
float: right;


}
.texte
{
padding: 5px;
width: 500px;
text-align: left;
float: center;
color: #B3B3B3;



}



merci d'avance.. (si vous pouriez me rendre mon code mais avec quelque chose a la place de float pour que ce soit aligné et que donc sa puisse s'agrandir avec mon texte!!)
Bonsoir et bienvenue doz59,

Avant toute chose je te conseille chaudement de lire Aides/Règles pour tous les bons conseils prodigués et en particulier ceux qui concernent le code qui est soumis dans les posts Smiley lol et l'orthographe:

Aide/Règles a écrit :
13- Mise en forme générale des messages
Merci de bien vouloir prendre le temps de présenter correctement vos messages, surtout si ces messages doivent inciter les autres membres à vous dépanner sur un problème. Des boutons de mise en forme sont prévus pour cela (gras, italique, etc.). Merci de systématiquement baliser vos codes HTML ou CSS avec le bouton CODE approprié (éviter également, pour des questions de lisibilité, de présenter des codes HTML et PHP imbriqués). Enfin, n'hésitez pas à toujours fournir une image explicative et une url où les membres auront un aperçu de votre problème.

11- Conventions d'écriture
L'emploi des majuscules est à utiliser avec parcimonie dans les titres de sujet comme dans les messages. En effet, un texte entièrement rédigé en majuscules donne l'impression que la personne crie sur un ton agressif, sur internet. Veuillez donner un titre de sujet évocateur lorsque vous en rédigez un nouveau, et non pas simplement 'Question', 'HELP', 'Problème!' ou 'URGENT!!!!'. Le forum n'étant pas équipé d'un vérificateur d'ortographe, veuillez vous relire afin que votre message soit bien compris par tous et qu'on vous prenne au sérieux. Il est rappelé également que ce forum est... un forum, et non un tchat ou un support SMS. Vous êtes donc priés de respecter un minimum ce langage qu'est le français.


Désolé d'être si brusque, mais si ton soucis devait trouver réponse, c'est avec un minimun de respect de ces règles qu'il aurait le plus de chances. Smiley cligne
Modifié le 02 Feb 2005 - 22:18
Sujet clos
Aller à