Menu
Hi,
I am not struggling with the concept of curving the text its actually a problem when the text is enlarged or shrunk.
I have the image in the background of the main div.
I then float divs left and then under all the divs put the <p>.
My code is below but what i think but cannot figure out is, can i not somehow get the line-height to be the same as the <p> as it is to the div.
[CODE]
<!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>
<style type=”text/css”>
/* MAIN
——————————————————————– */
#main, #mainCurve {
font-size:12px;
text-align:left;
color:#666666;
}
#main h2 {
margin:0 0 0 0;
padding:0;
text-align:right;
/*color:#FF9900;
color:#006600;*/
color:#006600;
}
#main hr {
margin:5px 0 0 0;
padding:0;
margin:10px 0 10px 0;
}
#main p, #mainCurve p {
line-height:16px;
}
#main a, #main a:visited {
text-decoration:none;
color:#0066CC;
font-weight:bold;
}
#main a:hover {
text-decoration:underline;
}
/* Breadcrumb
——————————————————————– */
#breadcrumb {
position:relative;
float:left;
width:460px;
margin:-10px 0 22px 20px;
padding:0 0 0 5px;
text-align:left;
}
/* MAIN
——————————————————————– */
#main {
position:relative;
float:left;
width:680px;
padding:10px;
background:url(../images/mainbg_about.png) top left no-repeat;
}
#mainCurve {
float:left;
clear:left;
border-right:1px solid #000;
}
/* Breadcrumb – after main due to font-weight:bold
——————————————————————– */
#breadcrumb a, #breadcrumb a:visited {
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
color:#0066CC;
text-decoration:none;
font-weight:normal;
}
#breadcrumb a:hover {
text-decoration:underline;
}
#breadcrumb p {
margin:10px 0 0 0;
padding:0;
}
#breadcrumb span {
font-size:10px;
color:#FF9900;
}
</style>
</head>
<body>
<!– START Main –>
<div id=”main”>
<div style=”width:187px; height:85px; float:left; position:relative; margin:-10px -10px 0 -10px; clear:left;”>
</div>
<!– START Breadcrumb –>
<div id=”breadcrumb”>
<p>
<a href=”?m=0″>xx</a>
</p>
</div>
<!– END Breadcrumb –>
<div style=”width:166px;” id=”mainCurve”> </div>
<div style=”width:150px;” id=”mainCurve”> </div>
<div style=”width:133px;” id=”mainCurve”> </div>
<div style=”width:108px;” id=”mainCurve”> </div>
<div style=”width:80px;” id=”mainCurve”> </div>
<div style=”width:50px;” id=”mainCurve”> </div>
<div style=”width:5px;” id=”mainCurve”> </div>
<h2>House Group test</h2>
<hr>
<p>This is test text. This is test text. This is test text. This is test text. This is test text. </p>
<p>This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text.</p>
<p>This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. </p>
<p>This is test text. This is test text. This is test text. </p>
</div>
<!– END Main –>
</body>
</html>
It just appears that the divs are always out of sync with the <p>
Thanks
k0r54