[Résolu]Texte à alinéa courbe

Question

Deathstar

13 Aug 2007 à 16:05

Bonjour,

je dois faire une mise en page de texte de la même manière que sur l'image.

upload/12708-Sans-titre.jpg

Je n'ai rien trouvé pour le faire par une CSS.

Existe t'il un moyen de le faire, si oui lequel?

En vous remerciant par avance.

Cordialement.
Modifié par Deathstar (18 Aug 2007 - 11:29)

dunjl

13 Aug 2007 à 16:29

Salut,

Voici peut etre une piste sur A List Apart. Avec une image et un peu de PHP ...

Deathstar

13 Aug 2007 à 16:46

Je te remercie pour la piste, je viens de regarder et effectivement ca pourrait marcher.

Le seul souci est que j'ai déjà une image de fond, ce qui exclut donc l'utilisation d'une image pour définir la courbe.

Encore merci pour ta contribution, je continue de chercher.

ghost

15 Aug 2007 à 02:51

Bonjour,

Juste pour le fun, sans image et un peu de php et quelques souvenirs de mon année de terminale (qui est fort loin maintenant Smiley lol

)


<style type="text/css">
*{margin: 0; padding: 0;}

ul{
list-style-type: none;
width: 800px;
margin: auto;
border: 1px solid black;
}

li{
margin-left: 15px;
}
</style>
</head>
<body>

<?php
$decalage = 0.05;//------------ Arrondi ----------------
$padding = 30;//------------ courbure ----------------
$pente = 60;//------------ pente ----------------
?>
<ul>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Quisque a ante. Nunc in turpis et enim sagittis commodo.</li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>> Integer euismod leo. Quisque rhoncus ante.</li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Curabitur a ante quis erat molestie venenatis.</li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Morbi imperdiet nibh at nisl. Vestibulum elementum tempor lorem.</li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Quisque a ante. Nunc in turpis et enim sagittis commodo.</li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>> Integer euismod leo. Quisque rhoncus ante.</li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Curabitur a ante quis erat molestie venenatis.</li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Morbi imperdiet nibh at nisl. Vestibulum elementum tempor lorem.</li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Quisque a ante. Nunc in turpis et enim sagittis commodo.</li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>> Integer euismod leo. Quisque rhoncus ante.</li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Curabitur a ante quis erat molestie venenatis.</li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Morbi imperdiet nibh at nisl. Vestibulum elementum tempor lorem.</li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Quisque a ante. Nunc in turpis et enim sagittis commodo.</li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>> Integer euismod leo. Quisque rhoncus ante.</li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Curabitur a ante quis erat molestie venenatis.</li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Morbi imperdiet nibh at nisl. Vestibulum elementum tempor lorem.</li>
</ul>

page test
Modifié par ghost (15 Aug 2007 - 17:59)

ghost

21 Aug 2007 à 13:50

Bonjour,

Je ne me souviens plus du sens que tu m'avais demandé Smiley biggol

Dans le doute, tu pourras même faire des affichages en rond ...
Le code est un peu long (désolé) et je ne suis pas tout à fait au top, je n'ai pas exactement trouvé l'inverse de la fonction pour la partie supérieure du 0, alors si un matheux passe par là Smiley cligne


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head> 
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title> test_php</title>

<style type="text/css">
*{margin: 0; padding: 0;}
body{
font-weight: bold;
font-size: 12px;
}

#gauche{
list-style-type: none;
width: 400px;
float: left;
}

#gauche li{
margin-left: 15px;
color: #000;
}

#droite{
list-style-type: none;
width: 400px;
overflow: hidden;
}

#droite li{
text-align: right;
color: blue;
}

#bas_gauche{
list-style-type: none;
width: 400px;
float: left;
}

#bas_gauche li{
margin-left: 15px;
text-align:left ;
color: green;
}

#bas_droite{
list-style-type: none;
width: 400px;
overflow: hidden;
}

#bas_droite li{
text-align: right;
color: red;
}
</style>
</head>
<body>

<?php
$decalage = 0.05;//------------ Arrondi ----------------
$padding = 30;//------------ courbure ----------------
$pente = 60;//------------ pente ----------------
?>
<ul id="gauche">
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Lorem ipsum dolor sit </li> 
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Quisque a ante. Nunc .</li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>> Integer euismod leo. </li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Curabitur a ante quis </li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Morbi imperdiet nibh </li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Lorem ipsum dolor sit </li> 
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Quisque a ante. Nunc </li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>> Integer euismod leo. </li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Curabitur a ante quis </li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Morbi imperdiet nibh </li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Lorem ipsum dolor sit </li> 
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Quisque a ante. Nunc </li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>> Integer euismod leo. </li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Curabitur a ante quis </li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Morbi imperdiet nibh </li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Lorem ipsum dolor sit </li> 
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Quisque a ante. Nunc </li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>> Integer euismod leo. </li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Curabitur a ante quis </li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Morbi imperdiet nibh </li>
</ul>

<?php
$decalage = 0.05;//------------ Arrondi ----------------
$padding = 30;//------------ courbure ----------------
$pente = 60;//------------ pente ----------------
?>
<ul id="droite">
<li style="padding-right: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Lorem ipsum dolor sit </li> 
<li style="padding-right: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Quisque a ante. Nunc .</li>
<li style="padding-right: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>> Integer euismod leo. </li>
<li style="padding-right: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Curabitur a ante quis </li>
<li style="padding-right: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Morbi imperdiet nibh </li>
<li style="padding-right: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Lorem ipsum dolor sit </li> 
<li style="padding-right: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Quisque a ante. Nunc </li>
<li style="padding-right: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>> Integer euismod leo. </li>
<li style="padding-right: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Curabitur a ante quis </li>
<li style="padding-right: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Morbi imperdiet nibh </li>
<li style="padding-right: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Lorem ipsum dolor sit </li> 
<li style="padding-right: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Quisque a ante. Nunc </li>
<li style="padding-right: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>> Integer euismod leo. </li>
<li style="padding-right: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Curabitur a ante quis </li>
<li style="padding-right: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Morbi imperdiet nibh </li>
<li style="padding-right: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Lorem ipsum dolor sit </li> 
<li style="padding-right: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Quisque a ante. Nunc </li>
<li style="padding-right: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>> Integer euismod leo. </li>
<li style="padding-right: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Curabitur a ante quis </li>
<li style="padding-right: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Morbi imperdiet nibh </li>
</ul>


<?php
$decalage = 0.05;//------------ Arrondi ----------------
$padding = -60;//------------ courbure ----------------
$pente = 38;//------------ pente ----------------
?>
<ul id="bas_gauche">
<li style="padding-left: <?php echo ($padding+exp($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Lorem ipsum dolor sit </li> 
<li style="padding-left: <?php echo ($padding+exp($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Quisque a ante. Nunc .</li>
<li style="padding-left: <?php echo ($padding+exp($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>> Integer euismod leo. </li>
<li style="padding-left: <?php echo ($padding+exp($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Curabitur a ante quis </li>
<li style="padding-left: <?php echo ($padding+exp($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Morbi imperdiet nibh </li>
<li style="padding-left: <?php echo ($padding+exp($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Lorem ipsum dolor sit </li> 
<li style="padding-left: <?php echo ($padding+exp($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Quisque a ante. Nunc </li>
<li style="padding-left: <?php echo ($padding+exp($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>> Integer euismod leo. </li>
<li style="padding-left: <?php echo ($padding+exp($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Curabitur a ante quis </li>
<li style="padding-left: <?php echo ($padding+exp($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Morbi imperdiet nibh </li>
<li style="padding-left: <?php echo ($padding+exp($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Lorem ipsum dolor sit </li> 
<li style="padding-left: <?php echo ($padding+exp($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Quisque a ante. Nunc </li>
<li style="padding-left: <?php echo ($padding+exp($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>> Integer euismod leo. </li>
<li style="padding-left: <?php echo ($padding+exp($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Curabitur a ante quis </li>
<li style="padding-left: <?php echo ($padding+exp($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Morbi imperdiet nibh </li>
<li style="padding-left: <?php echo ($padding+exp($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Lorem ipsum dolor sit </li> 
<li style="padding-left: <?php echo ($padding+exp($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Quisque a ante. Nunc </li>
<li style="padding-left: <?php echo ($padding+exp($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>> Integer euismod leo. </li>
<li style="padding-left: <?php echo ($padding+exp($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Curabitur a ante quis </li>
<li style="padding-left: <?php echo ($padding+exp($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Morbi imperdiet nibh </li>
</ul>

<?php
$decalage = 0.05;//------------ Arrondi ----------------
$padding = -60;//------------ courbure ----------------
$pente = 38;//------------ pente ----------------
?>
<ul id="bas_droite">
<li style="padding-right: <?php echo ($padding+exp($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Lorem ipsum dolor sit </li> 
<li style="padding-right: <?php echo ($padding+exp($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Quisque a ante. Nunc .</li>
<li style="padding-right: <?php echo ($padding+exp($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>> Integer euismod leo. </li>
<li style="padding-right: <?php echo ($padding+exp($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Curabitur a ante quis </li>
<li style="padding-right: <?php echo ($padding+exp($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Morbi imperdiet nibh </li>
<li style="padding-right: <?php echo ($padding+exp($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Lorem ipsum dolor sit </li> 
<li style="padding-right: <?php echo ($padding+exp($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Quisque a ante. Nunc </li>
<li style="padding-right: <?php echo ($padding+exp($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>> Integer euismod leo. </li>
<li style="padding-right: <?php echo ($padding+exp($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Curabitur a ante quis </li>
<li style="padding-right: <?php echo ($padding+exp($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Morbi imperdiet nibh </li>
<li style="padding-right: <?php echo ($padding+exp($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Lorem ipsum dolor sit </li> 
<li style="padding-right: <?php echo ($padding+exp($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Quisque a ante. Nunc </li>
<li style="padding-right: <?php echo ($padding+exp($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>> Integer euismod leo. </li>
<li style="padding-right: <?php echo ($padding+exp($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Curabitur a ante quis </li>
<li style="padding-right: <?php echo ($padding+exp($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Morbi imperdiet nibh </li>
<li style="padding-right: <?php echo ($padding+exp($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Lorem ipsum dolor sit </li> 
<li style="padding-right: <?php echo ($padding+exp($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Quisque a ante. Nunc </li>
<li style="padding-right: <?php echo ($padding+exp($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>> Integer euismod leo. </li>
<li style="padding-right: <?php echo ($padding+exp($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Curabitur a ante quis </li>
<li style="padding-right: <?php echo ($padding+exp($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Morbi imperdiet nibh </li>
</ul>
</body>
</html>

Sujet clos

CSS et mise en forme, CSS3

[Résolu]Texte à alinéa courbe