Create a table for sonnet with css in dreamweaver

HTML & CSS
1

Hi
I want to create a table like this in dreamweaver and put sonnets ordered.
In " word" is ordered but when I copy it in dreamweaver isn’t.
Can I create such table in dreamweaver without “word” with css .
What is your solution.
thanks

2

Hi, Welcome to Sitepoint :slight_smile:

I’m not sure I’m clear on what you are asking here?

The page you linked to shows 1 sonnet starting with the first line on the left and with the second line on the right and so on. It looks like 2 poems rather than one poem that reads from right to far left.

Is that what you want? (i.e.even lines of the poem are on the right with a gap between the first line).

You could hard code it like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
p.sonnet{
	width:680px;
	margin:2em auto;
	text-align:justify;
}
p.sonnet span{
	float:left;
	width:310px;
	line-height:1;
	text-align:justify;
	clear:both;	
}
p.sonnet span:after{
	content:" .";
	visibility:hidden;
	margin-right:100%;	
}
p.sonnet span.even{
	padding-left:50px;
	clear:none;
}

</style>
</head>

<body>
<p class="sonnet">
 <span>If I should think of love</span><span class="even">I'd think of you, your arms uplifted,</span>
 <span>Tying your hair in plaits above,</span><span class="even">The lyre shape of your arms and shoulders,</span>
 <span>The soft curve of your winding head.</span><span class="even">No melody is sweeter, nor could Orpheus</span>
 <span>So have bewitched. I think of this,</span><span class="even">And all my universe becomes perfection.</span>
 <span>But were you in my arms, dear love,</span><span class="even">The happiness would take my breath away,</span>
 <span>No thought could match that ecstasy,</span><span class="even">No song encompass it, no other worlds.</span>
 <span>If I should think of love,</span><span class="even">I'd think of you.</span>
</p>
</body>
</html>

But you’d have to be careful that a line didn’t wrap or it would spoil the effect a bit.

3

Hi
your solution is right and i get my reply.
thank you, thank you, thank you