Hej det er en svært opgave du er kommet på, så jeg vil råde dig til at bruge noget javascript, og ellers lade det vises "foldet sammen" til dem uden, det er meget få i dag.
Sådan her ville jeg bakse et semantisk ark op, jeg linker til nogle apis rundt omkring, det er disse der letter arbejdet og bør endten downloades eller erstatts med egenkode.
<!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>
<title>Test</title>
<style type="text/css">
@import 'http://yui.yahooapis.com/2.7.0/build/reset/reset-min.css';
html
{
height: 100%;
}
body
{
height: 100%;
}
#Wrapper
{
width: 700px;
border: 1px solid red;
border-width: 0px 1px;
margin: 0 auto;
height: auto !important;
height: 100%;
min-height: 100%;
padding: 0px 10px;
}
#Content, #LeftContent
{
float: left;
width: 200px;
border: 1px solid red;
min-height: 400px;
}
#Content
{
width: 400px;
height: 100%;
}
#LeftContent
{
float: right;
height: 100%;
}
.Page
{
border: 1px solid blue;
border-width: 0px 1px 1px;
height: 100%;
margin: 0px 10px;
padding: 20px 20px;
}
p
{
font-family: Tahoma;
font-size: 1.5em;
margin: 1em;
}
.clearfix:after
{
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix
{
display: inline-block;
}
html[xmlns] .clearfix
{
display: block;
}
* html .clearfix
{
height: 1%;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
//http://www.cssnewbie.com/equalheights-jquery-plugi/n
(function($) {
$.fn.equalHeights = function(minHeight, maxHeight) {
tallest = (minHeight) ? minHeight : 0;
this.each(function() {
if ($(this).height() > tallest) {
tallest = $(this).height();
}
});
if ((maxHeight) && tallest > maxHeight) tallest = maxHeight;
return this.each(function() {
$(this).height(tallest).css("overflow", "auto");
});
}
})(jQuery);
$(document).ready(function() {
//$("p").text(" Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempor, odioquis lacinia dapibus, eros tellus sagittis erat, at gravida sem arcu in ante. Nunceget nisl at felis molestie pulvinar. Curabitur eu velit eu leo placerat sollicitudin. Suspendisse justo metus, sagittis ullamcorper, ultrices vel, auctor eget, purus.Sed eu risus. Duis sollicitudin metus. Curabitur fermentum condimentum mauris. Duistempus ante a ligula. Aliquam urna neque, consectetur eget, hendrerit et, mattisuctus, justo. Vivamus massa. Sed mi libero, consectetur nec, rutrum nec, temporut, arcu. Vivamus sed felis in urna vestibulum tempor. Nam metus elit, sagittis id, rutrum sed, condimentum nec, justo. Integer tincidunt, nulla eget sollicitudin elementum, erat risus ullamcorper risus, facilisis tempor metus dolor ut neque.");
if ($("#LeftContent").height() > $("body").height()) {
$("#LeftContent, #Content").equalHeights();
} else {
$("#LeftContent, #Content").height($("body").height() - 50); //minus padding
}
});
</script>
</head>
<body>
<div id="Wrapper">
<div class="FrontPage Page clearfix">
<div id="Content">
<p>
</p>
</div>
<div id="LeftContent">
<p>
</p>
<p>
</p>
<p>
</p>
</div>
</div>
</div>
</body>
</html>
/J
Indlæg senest redigeret d. 04.03.2009 19:11 af Bruger #5789