bamme
Senior Member
hi everyone
im having a bit of trouble with this page:
StephenBailey.co.uk | Designer and Maker of Bespoke Wooden Furniture in Alton
The li's are styled weirdly here because it needs to accommodate a certain CMS - the image in there is actually very large, and the way the css is written, means it will give the illusion of a cropped image.
html for one portfolio item:
css:
The site owner will in time add more portfolio sections (list items), so, the list items will get longer and longer down the page.
My problem is that the outer content box does not accommodate this - it stays the same height. This is because the list items are floated left.
I've done a demo of the incorrect looking page with more <li>'s:
StephenBailey.co.uk | Designer and Maker of Bespoke Wooden Furniture in Alton
Without the floating, I can't see how I can keep all those little style rules in there for the CMS.
Can anyone suggest anything? :/
Thanks!
Emma
im having a bit of trouble with this page:
StephenBailey.co.uk | Designer and Maker of Bespoke Wooden Furniture in Alton
The li's are styled weirdly here because it needs to accommodate a certain CMS - the image in there is actually very large, and the way the css is written, means it will give the illusion of a cropped image.
html for one portfolio item:
HTML:
<ul id="port-items">
<li><span><img src="../img/gal/other-4.jpg" width="100" /></span></li>
<li class="port-item-text"><a href="chairs.php">Chairs</a></li>
...
</ul>
Code:
body#portfoliopage ul#port-items {margin-top:20px;width:400px;}body#portfoliopage ul#port-items li {line-height:77px;display:inline;text-indent:0px;float:left;width: 77px; height: 77px; border: 1px solid #fff; margin: 0; padding: 2px; list-style:none; margin-right:20px; margin-bottom:20px; background:none;}body#portfoliopage ul#port-items li span { display:block; width: 73px; height: 73px; overflow: hidden; border: 2px solid #fff; background: #fff; }body#portfoliopage ul#port-items li.port-item-text {border:0px; width:70px;}
The site owner will in time add more portfolio sections (list items), so, the list items will get longer and longer down the page.
My problem is that the outer content box does not accommodate this - it stays the same height. This is because the list items are floated left.
I've done a demo of the incorrect looking page with more <li>'s:
StephenBailey.co.uk | Designer and Maker of Bespoke Wooden Furniture in Alton
Without the floating, I can't see how I can keep all those little style rules in there for the CMS.
Can anyone suggest anything? :/
Thanks!
Emma