jag håller på att göra om min portfoliosida och hittade http://www.456bereastreet.com/lab/transparent-custom-corners-borders-v2/ sättet som gör att man kan ha transperanta borders på divar. Samtidigt vill jag ha så att sidan sträcker sig på hela höjden oberoende av upplösning. Jag kikade på http://www.xs4all.nl/~peterned/examples/csslayout1.html sidan. Det verkade ju väldigt smidigt tänkte jag men det blev det så klart inte. Problemet är att jag inte kan få content-diven att sträcka ut sig 100% på höjden, den stannar där höjden på dom två contentdivarna slutar.
Jag skulle vara väldigt tacksam om någon tog sig tid och kollade igenom problemet för jag sitter verkligen fast... :(
Bifogar relevant kod och en länk till sidan: http://www.mattiasbrage.se/upload/mattiasbrage.se2.0
html{height: 100%;}
body{
margin: 0px;
padding: 0px;
font-family: Arial,Verdana, sans-serif;
font-size:0.8em;
text-align:center;
background: url(images/bodybg.jpg) top center no-repeat;
height: 100%;
}
/****************************************Layout elementen****************************************/
div#wrap{
margin: 0 auto;
width: 966px;
margin-top: 20px;
text-align:center;
}
div#header{
float:left;
width: 960px;
height: 222px;
background: url(images/headerbg.jpg) top center no-repeat;
}
div#contentcontainer{
display:inline;
float:left;
text-align: left;
width: 885px;
margin-left: 37px !important; margin-left: 71px;
}
/**************************************************FIXAR GENOMSKINLIGA BORDERS******************************************/
/* Basic styling, used when JavaScript is unsupported */
.cbb {
margin: 0 auto;
padding:0 10px;
border:1px solid #666;
background:#fff;
}
/* Bottom corners and border */
/*.bb {
height:26px;
background:url(images/bottomborder.png) no-repeat 100% 100%;
}*/
/* Left border */
.i1 {
padding:0 0px 0 20px;
background:url(images/borders.png) repeat-y 0 100%;
}
/* Right border */
.i2 {
padding:0 20px 0 0;
background:url(images/borders.png) repeat-y 100% 0;
}
/* Wrapper for the content. Use it to set the background colour and insert some padding between the borders and the content. */
.i3 {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
display:block;
margin:0;
padding:0px 0px;
background:#fff;
}
/* Make the content wrapper auto clearing so it will contain floats (see http://positioniseverything.net/easyclearing.html). */
.i3:after {
content:".";
display:block;
clear:both;
height: 0;
visibility:hidden;
}
.i3 {display:inline-block;}
.i3 {display:block;}
/* Default CSS ends here */
/******************************************************************END GENOMSKINLIGA BORDERS***************************/
div#content1{
float:left;
width:386px;
padding-left: 20px;
background-color: #fff;
}
div#content2{
float: left;
width: 366px;
margin-left:30px;
background-color: #fff;
}
/*sidfot*/
div#footer{
position: absolute;
bottom:0;
clear:both;
width: 885px;
font-size: 0.9em;
color: #636363;
text-align:center;
}
<html>
<head>
<title>Mattias Brage</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="cb.js"></script>
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="iestyle.css" />
<![endif]-->
<!--[if lt IE 8]>
<style type="text/css">
/* Required IE fixes
================================================*/
/* Serve gif images to IE/Win pre version 7 */
* html .i1,
* html .i2 {background-image:url(images/borders.gif);}
/* Set a height to fix up some rendering issues. */
* html .i1,
* html .i3 {height:1px;}
</style>
<![endif]-->
</head>
<body id="pageHome">
<div id="wrap">
<div id="menucontainer">
<ul id="menu">
<li id="menuHome"><a href="index.php">START</a></li>
<li id="menuPortfolio"><a href="portfolio.html">PORTFOLIO</a></li>
<li id="menuBlog"><a href="http://www.mattiasbrage.se/blogg">BLOGG</a></li>
<li id="menuContact"><a href="kontakt.php">KONTAKTA</a></li>
</ul>
</div>
<div id="header"></div>
<div id="contentcontainer">
<div class="cbb"> <!--Innehåller custom borders-->
<div id="content1">
<h1>Mattias portfolio och blogg</h1>
<p>Du har trillat in på min portfolio/blogg. Här kommer du hitta ett urval av
mina fotografiska alster, i framtiden kanske även några andra grafiska
produktioner. Jag har nu även en blogg där jag kommer skriva mina tankar om allt möjligt men kanske främst om foto och grafisk design. </p>
<p>Jag läser nu sista terminen på Medie- & kommunikationsprogrammet vid Linköpings universitet. Det jag har kvar är exjobbet som gör jag på ett företag som var i desperat behov av en webbplats. Till sommaren är jag förhoppningsvis klar och på jakt efter jobb! Anledningen till att den här sidan är i formatet som den är beror på en kurs där jag skulle "tillverka och underhålla en webbpublicering". Jag tänkte att varför inte göra något man har nytta av, så här är den! </p><p>Jag hoppas att du hittar något du gillar och att du inte tvekar på att
<a href="kontakt.html">höra av dig</a> om det är något!</p>
</div>
<div id="content2">
<h1>Senaste webbsidor</h1>
<h1>Senaste foton</h1>
</div>
<div id="footer">
Copyright © 2007 <a href="mailto:contact@mattiasbrage.se">Mattias Brage</a>. Alla rättigheter förbehålles. | <a href="http://validator.w3.org/check?uri=referer">XHTML</a> | <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.mattiasbrage.se/style4.css">CSS</a> |
<p><a href="http://www.mattiasbrage.se/rss.xml"><img src="bilder/feedicon.gif" title="rss" alt="rssfeed" /> RSS-flöde</a></p>
</div>
</div><!--end custom borders-->
</div>
</div>
</div>
</body>
</html>