PDA

View Full Version : Is there a way to resize only the first <br/>


up4dw
07-15-2009, 05:07 AM
I need to make the first <br/> in each list li small like 5 px and the rest of the text in the list 24. Is there a way to do this?

<ul id="navlist">

<li></li>
<li></span><a href="#" style=""><br/>
Hardy<br />
Diesel<br>
Home</a>
<a href="#"><br>
7-33 kW <br />
Diesel <br />
Generator</a>
<a href="#"><br>
35-115 kW Diesel Generator</a>
<a href="#"><br>
120-250 kW
Diesel Generator</a>
<a href="#"><br>
275 kW up Diesel Generator</a>
<a href="#"><br>
7-33 kW Diesel Generator</a>
<a href="#"><br>
7-33 kW Diesel Generator</a>
<a href="#"><br>
7-33 kW Diesel Generator</a>
<a href="#"><br>
7-33 kW Diesel Generator</a>

</ul>

d a v e
07-15-2009, 05:48 PM
#navlist li {margin-bottom: 24px;}

and you probably find the spacing within a list item is about 5px anyway, if not then you can use line-height on the list like
#navlist li {line-height:1;} and increase the line height by .1 until you reach the desired spacing (note that whereas generally for css you need to define units for most things for line height it can be a simple ratio where 1 is equal to the default line height/spacing (i.e. leading) which is generally around 1-1.4 times the font height. anyway, try it and see ;)

coloeagle
07-16-2009, 08:09 AM
Rather than use a single li and all the line-breaks you might try using a full list and then add a style to the first li with the smaller line height.


<ul id="navlist">
<li style="line-height:5px;">Hardy Diesel Home</a></li>
<li><a href="#">7-33 kW Diesel Generator</a></li>
<li><a href="#">35-115 kW Diesel Generator</a></li>
<li><a href="#">120-250 kW Diesel Generator</a></li>
<li><a href="#">275 kW up Diesel Generator</a></li>
<li><a href="#">7-33 kW Diesel Generator</a></li>
<li><a href="#">7-33 kW Diesel Generator</a></li>
<li><a href="#">7-33 kW Diesel Generator</a></li>
<li><a href="#">7-33 kW Diesel Generator</a></li>
</ul>