beste SD'ers,
ik zit al een tijd met diet css probleem te kijken en meestal loste ik het met een image op maar nu wil ik de oplossing in css weten.
ik heb op mijn website een sidebar en een content naast elkaar en daar onder zit de footer aleen nu is mijn content meestal langer dan mijn sidebar en daardoor loopt de sidebar background niet door to de footer hoe kan ik dit op lossen ?
stukje code wat ik nu heb:
Code:#sidebar{ background:#808080; width:250px; height:auto; float:left; } #content{ background:#e5e5e5; width:750px; height:auto; float:left; } #footer{ width:100%; height:30px; }
- 2 backgrounds gelijk
-
20-06-2012, 22:20 #1gast51529 Guest
2 backgrounds gelijk
-
20-06-2012, 22:39 #2
- Berichten
- 131
- Lid sinds
- 13 Jaar
Re: 2 backgrounds gelijk
Kan je stukje html code geven, aub?
De bedoeling is dus dat je de sidebar wilt laten meevergroten als je content vergroot?
Die height:auto; is eigenlijk overbodig.
-
20-06-2012, 22:57 #3gast51529 Guest
Re: 2 backgrounds gelijk
Code:<div id="sidebar"> <ul> <li><a href="#">sublink</a></li> </ul> </div> <div id="content"> <h1>title</h1> <p> hier komt de tekst </p> </div>
-
21-06-2012, 01:45 #4Particulier
- Berichten
- 802
- Lid sinds
- 18 Jaar
Re: 2 backgrounds gelijk
Dan moet dit hem worden voor je. Toch uurtje mee bezig geweest tijdens het kijken van een film ;)
Je ziet hieronder url("kleur.gif")
Daar kun je een achtergrond in zitten met de kleur die jij wil, grootte 150x8 bijvoorbeeld.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Twee gelijke colommen en footer</title>
<style type="text/css">
/* <![CDATA[ */
body {
margin:0; padding:0;
font:11pt/1.5 sans-serif;
}
#header {
margin:0; padding:0;
background:#e5e5e5;
}
#main {
margin:0; padding:0;
background:#e5e5e5 url("kleur.gif") top left repeat-y;
}
#sidebar {
float:left;
width:150px;
margin:0; padding:0;
background: top right no-repeat;
font-size:80%;
}
#content {
margin:0 150px;
background:#e5e5e5;
font-size:80%;
}
#footer{
width:100%;
height:100px;
background:orange;
}
.column-in {
margin:0; padding:0.5em 1em;
}
.cleaner {
clear:both;
height:1px;
font-size:1px;
border:none;
margin:0; padding:0;
background:transparent;
}
h1,h2,h3,h4 { margin: 0.2em 0 }
p { margin: 0.5em 0 }
a { color:black }
.copy { text-align:center; font-size:80% }
/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
function toggleContent(name,n) {
var i,t='',el = document.getElementById(name);
if (!el.origCont) el.origCont = el.innerHTML;
for (i=0;i<n;i++) t += el.origCont;
el.innerHTML = t;
}
// ]]>
</script>
</head>
<body>
<div id="main">
<div id="sidebar"><div class="column-in">
<h4>Sidebar</h4>
<p id="lccont">
Test1<br />Test1<br />Test1<br />Test1<br />Test1<br />Test1<br />Test1<br />Test1<br />
</p>
</div></div>
<div id="content"><div class="column-in">
<h4>Content</h4>
<p id="mccont">
Test2<br />Test2<br />Test2<br />Test2<br />
</p>
</div></div>
<div class="cleaner"> </div>
</div>
<div id="footer">
Test3<br />Test3<br />
</div></div>
</body>
</html>
Plaats een
- + Advertentie
- + Onderwerp
Marktplaats
Webmasterforum
- Websites algemeen
- Sitechecks
- Marketing
- Domeinen algemeen
- Waardebepaling
- CMS
- Wordpress
- Joomla
- Magento
- Google algemeen
- SEO
- Analytics
- Adsense
- Adwords
- HTML / XHTML
- CSS
- Programmeren
- PHP
- Javascript
- JQuery
- MySQL
- Ondernemen algemeen
- Belastingen
- Juridisch
- Grafisch ontwerp
- Hosting Algemeen
- Hardware Info
- Offtopic