bonsoir a toutes et a tous,
tout d'abord, j'espere que le titre est assez précis.
si ce n'est pas le cas, faites le moi savoir ainsi je l'éditerais. ^^
pour ce qui est du pb, je suis en train de m'exercer a la creation d'une page web html/css.
et je me heurte à un soucis de cohabitation entre 3 blocs de texte.
en fait, je tente d'obtenir ceci approximativement
http://luap.nomis.free.fr/ex.jpg
en fait 3 blocs de texte. qui s'adaptent au contenu (verticalement)
après de vaines tentatives, j'arrive a obtenir ce que je veux mais un des blocs au lieu de pousser un bloc plus bas....fini par chevaucher ce dernier etc....
ou bien meme chevaucher ma barre noire en pied de page.
ou sinon je n'arrive pas a obtenir le positionnement souhaité comme sur l'image.
si j'ai un texte plus long dans un bloc, cela fait descendre le bloc a sa droite par ex.
En fait, j'ai beau retourné le pb dans tous les sens, et retoucher le code...
je n'arrive pas a voir mon erreur...
ainsi, j'ose demander votre aide pour m'aiguiller car je crois avoir atteint mes limites
voici un des resultats que j'obtiens http://luap.nomis.free.fr/modele.html et le code de la page
Modifié par waik (09 Dec 2008 - 01:47)
tout d'abord, j'espere que le titre est assez précis.
si ce n'est pas le cas, faites le moi savoir ainsi je l'éditerais. ^^
pour ce qui est du pb, je suis en train de m'exercer a la creation d'une page web html/css.
et je me heurte à un soucis de cohabitation entre 3 blocs de texte.
en fait, je tente d'obtenir ceci approximativement
http://luap.nomis.free.fr/ex.jpg
en fait 3 blocs de texte. qui s'adaptent au contenu (verticalement)
après de vaines tentatives, j'arrive a obtenir ce que je veux mais un des blocs au lieu de pousser un bloc plus bas....fini par chevaucher ce dernier etc....
ou bien meme chevaucher ma barre noire en pied de page.
ou sinon je n'arrive pas a obtenir le positionnement souhaité comme sur l'image.
si j'ai un texte plus long dans un bloc, cela fait descendre le bloc a sa droite par ex.En fait, j'ai beau retourné le pb dans tous les sens, et retoucher le code...
je n'arrive pas a voir mon erreur...
ainsi, j'ose demander votre aide pour m'aiguiller car je crois avoir atteint mes limites
voici un des resultats que j'obtiens http://luap.nomis.free.fr/modele.html et le code de la page
<style type="text/css" media="screen">
body
{
background-image:url(texture.jpg);
background-repeat: repeat-x-y;
}
#conteneur
{
position:static;
width:1000px;
margin-left:10%;
margin-right:0%;
background-color:;
}
#hautdepage
{
position:relative
width:100%;
background-color:white;
}
#corps
{
position:relative;
width:100%;
background-color:white;
}
#basdepage
{
position:relative;
height:60px;
border-top:0px solid white;
background-color:white;
}
#header1 /* recherche date heure*/
{
position:relative;
width:100%;
margin-left:%;
height:50px;
background-color:white;
}
#header2 /* titre site*/
{
position:relative;
padding-left:2%;
width:%;
height:px;
background-color:white;
}
#barreh1 /* petite barre noire*/
{
position:relative;
width:100%;
height:2px;
background-color:#000000;
}
#barreh2 /* petite barre blanche*/
{
position:relative;
width:100%;
height:2px;
background-color:white;
}
#barreh3 /* grosse barre noire*/
{
position:relative;
width:;
height:50px;
margin-left: 2%;
margin-right:2%;
background-color:black;
}
#barreh4 /* titre site*/
{
position:relative;
width:100%;
background-color:#000000;
}
#barreh5 /* petite barre grise*/
{
position:relative;
width:100%;
height:2px;
background-color:#c0c0c0;
}
#barremenu1 /* menu haut*/
{
position:relative;
margin-top:0px;
margin-left:0S%;
width:50%;
height:40px;
background-color:white;
}
#edito1 /* edito*/
{
position:relative;
left:2%;
width:20%;
}
#titre
{
position:relative;
width:60%;
left:25%;
}
#titre2
{
position:relative;
width:20%;
left:50%;
}
TITRE {font-size:70px;font-family:times new roman ;color:#990000;margin-left:20px;Font-Weight:Bold;}
TITRE2 {font-size:50px;font-family:times new roman ;color:#990000;}
menu1 {font-size:20px;font-family:times new roman;color:#000000;Word-Spacing:5pt;text-align:middle;}
edit {font-size:50px;font-family:times new roman ;color:#000000;Font-Weight: Bold;}
edit2 {font-size:25px;font-family:times new roman ;color:#000000;}
corpseditotexte {font-size:17px;font-family:times new roman ;color:#808080;Font-Weight:Normal;Text-Align: Justify;}
lien {font-size:15px;font-family:times new roman;color:#990000;}
menu2 {font-size:20px;font-family:times new roman;color:white;Word-Spacing:5pt;Font-Weight:Bold;text-align:center;}
</style>
</head>
<body>
<div id="body">
<div id="conteneur">
<div id="hautdepage">
<div id="header1">barre de recherche-heure/date</div>
<div id="header2"><img src="autremonde.png"/></div>
<div id="barreh1"></div>
<div id="barreh2"></div>
<div id="barreh3"></div>
<div id="barreh2"></div>
<div id="barreh1"></div>
<div id="barremenu1"><menu1>accueil articles liens barre de navigation du site</menu1></div>
<div id="barreh5"></div>
</div>
<div id="corps">
<div id="edito1"><edit>E</edit><edit2>dito</edit2><p><corpseditotexte>bonjour comment fait on pour faire cuire un oeuf <p>sur le crane d'un yogi sur le feu bonjour comment fait on pour<p> faire cuire un oeuf sur le crane bonjour comment fait on pour faire cuire un <p>oeuf<p> sur le crane bonjour comment fait on pour faire cuire un oeuf <p>sur le crane bonjour comment fait on pour faire cuire un oeuf sur le <p>crane d'un yogi sur le feu bonjour comment fait on pour faire cuire un oeuf sur le cranebonjour comment faiteretze bonjour commentcomment<p> fait on pour faire cuire un oeuf sur le </corpseditotexte> <lien>suite...</lien></p>
</div>
<div id="titre2"><edit>T</edit><edit2>itre 2</edit2><p><corpseditotexte>bonjour comment fait on pour faire cuire un oeuf sur le crane d'un yogi sur lonjour comment fait on pour faire cuire un oeuf sur le cranebonjour comment faiteretze bonjour comment fait on pour faire cuire un oeuf sur le crane d'un yogi sur lonjour comment fait on pour faire cuire un oeuf sur le cranebonjour comment faiteretzebonjour comment fait on pour faire oeuf sur le cranebonjour comment faiteretzebonjour comment fait on pour faire cuire un oeuf sur le crane d'un yogi sur lonjour commen lonjoupour faire cuire un oeuflonjour comment fait on pour faire cuire un oeuf sur le cranebonjour comment faiteretze bonjour comment fait on </corpseditotexte> <lien>suite...</lien></p>
</div>
<div id="titre"><edit>T</edit><edit2>itre</edit2><p><corpseditotexte>bonjour comment fait on pour faire cuire un oeuf sur le crane d'un yogi sur lonjour comment fait on pour faire cuire un oeuf sur le cranebonjour comment faiteretze bonjour comment fait on pour faire cuire un oeuf sur le crane d'un yogi sur lonjour comment fait on pour faire cuire un oeuf sur le cranebonjour comment faiteretzebonjour comment fait on pour faire oeuf sur le cranebonjour comment faiteretzebonjour comment fait on pour faire cuire un oeuf sur le crane d'un yogi sur lonjour commen lonjoupour faire cuire un oeuflonjour comment fait on pour faire cuire un oeuf sur le cranebonjour comment faiteretze bonjour comment fait on pour faire cuire un oeuf nt fait on pour faire cuire un oeuf sur le cranebonjour comment faiteretze bonjour comment fait on pour faire cuire un oeuf sur le crane d'un yogi sur lonjour comment fait on pour faire cuire un oeuf sur le cranebonjour comment faiteretzebonjour comment fait on pour faire oeuf sur le cranebonjour comment faiteretzebonjour comment fait on pour faire cuire un oeuf sur le crane d'un yogi sur lonjour commen lonjoupour faire cuire un oeuflonjour commentnt fait on pour faire cuire un oeuf sur le cranebonjour comment faiteretze bonjour comment fait on pour faire cuire un oeuf sur le crane d'un yogi sur lonjour comment fait on pour faire cuire un oeuf sur le cranebonjour comment faiteretzebonjour comment fait on pour faire oeuf sur le cranebonjour comment faiteretzebonjour comment fait on pour faire cuire un oeuf sur le crane d'un yogi sur lonjour commen lonjoupour faire cuire un oeuflonjour commentsur le crane d'un yogi sur lonjour comment fait on pour faire cuire un oeuf</corpseditotexte> <lien>suite...</lien></p>
</div>
</div>
<div id="basdepage"><div id="barreh3"><menu2>contact informations</menu2>
</div>
</div>
</div>
</div>
</body>
</html>Modifié par waik (09 Dec 2008 - 01:47)