Menu
How can I make the anchor tag expand to the bottom of the list item? I know I could put the anchor round the list item tag, but that breaks XHTML 1.0 Strict compliance, so I cannot do it.
<html>
<head>
<style>
#listWrapper { text-align:center;}
#list { margin-left: 0px auto; margin-right: 0px auto; width: 100%; min-height: 100%; height:100%; margin-bottom: 10px; margin-top: 0px;}
#list ul { padding: 5px 10px 10px 10px; margin: 0; min-height: 100%;}
#list li { clear:both; font-weight:bolder; height:auto; border-bottom: 1px solid Silver; border-left: 1px solid Silver; font-size:x-small; border-right: 1px solid Silver; list-style-type: none;}
#list a:hover { background-color: red;}
#list a { display:block; cursor:pointer; text-decoration: none; text-align:left; vertical-align:top; }
#list h3 { background-color:Silver; vertical-align:top; font-size:larger; }
#list img { height:auto; margin: 8px; float:left; vertical-align:top; border:solid 1px Silver;}
</style>
</head>
<body>
<div id="listWrapper">
<div id="list">
<ul>
<li>
<h3>title</h3>
<a href="#">
<img src="/images/x.jpg" alt="" />
Lorem ipsun........
</a>
<div style="clear:both;" />
</li>
<li>
<h3>title</h3>
<a href="#">
<img src="/images/x.jpg" alt="" />
Lorem ipsun........
</a>
<div style="clear:both;" />
</li>
</ul>
</div>
</div>
</body>
</html>
478
To change the font size in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <p> tag, with the CSS property font-size. HTML5 do not support the <font> tag, so the CSS style is used to add font size.
You can fill a whole div or other parent element container in HTML with a link tag inside the div using some positioning attributes in CSS. The link tag is absolutely positioned to its parent which is relatively positioned, and will now fill the whole parent tag.
A combination of your answers fixed it. Many thank....
#list ul { display: block; }
#list li { display: block;}
#list a { display:block; height:100%; }
use this css:
#list ul li a { display: block }
Put the
<br style="clear: both;"/>
inside the Anchor tag.
EDIT: changed div to br
2
To fill the bottom, you need to fix the image margins - right now the image is taking up too much space with it's 8px margin. To fill the top, you need to remove the bottom margin of h3.
#list h3 { margin-bottom: 0; }
#list img { margin: 5px 8px; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
