Forum Moderators: not2easy
he has the text following a spinal curve image in the left navigation..
i.e. the background of the left-nav is a spine shape... with a curve... the text in the right-col is aligned to flow with this spinal curve..
obviously in Adobe Illustrator its easy to manipulate text this way... but is there an easy way to do this with CSS...
im thinking each line of text will have to have a different padding-left set to it?
Try this as an example of what I try to explain above (and do resize it all and change a bit in the text to see it flow.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#spine1, #spine2, #spine3, #spine4, #spine5 {
float: left;
clear: left;
height: 30px;
}
#spine1 {
background-color: red;
width: 20px;
}
#spine2 {
background-color: green;
width: 10px;
}
#spine3 {
background-color: blue;
width: 20px;
}
#spine4 {
background-color: orange;
width: 30px;
}
#spine5 {
background-color: black;
width: 10px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="spine1"></div>
<div id="spine2"></div>
<div id="spine3"></div>
<div id="spine4"></div>
<div id="spine5"></div>
Insert some long text here.
</div>
</body>
</html>
I just did 5 blocks as an example to get the idea. You can make them as tall as you need.
Works well in FF3, safari and opera. Note that FF3 and safari allow the text to intrude a little on the boxes if they are extending longer than the one at the beginning of the line. Opera prevents this.
IE6 and IE7: They have the same problem as FF3 and Opera with allowing the text to intrude a little. But they go on and cover the text with the background of the floated blocks. Once you remove the positioning background colors it works. If it bothers you, you could try to fix it with a conditional comment.
