Div met automatische hoogte.

ssck · 9 aug 2009

Hallo allemaal!
Ik weet dat er al veel hierover te vinden is op dit forum, maar ik kom er echt niet uit.
De laatste tijd ben ik aan het knutselen met div en css, dit probeer ik mezelf een beetje aan te leren. Nu heb ik een website gemaakt en wil ik graag dat de hoogte van de div zich aanpast aan de content. Nu heb ik hele witte stukken omdat er maar weinig tekst is. Ik heb ook nog een onderrand waar de adresgegevens in staan, deze onderrand moet dus ook automatisch meegaan. Weet iemand wat ik verkeerd doe? Ik kopieer even een stuk:

Code:

body{
background:#8D0448;
margin:0 0 0 0;
padding:0 0 0 0;
font-family:verdana, sans-serif;
font-size:11px;
color:#111111;
height:100%;
}

html {
height:100%;
}

#container{
width:1024px;
height:100%;
margin-left:-512px;
left:50%;
position:absolute;
}

#header{
background: URL('img/header_goed.jpg');
width:1024px;
height:380px;
}

#menu{
left:135px;
width:889px;
height:30px;
top:330px;
position:absolute;
margin:0 0 0 0;
}

#content{
background: URL('img/bgcontent2.gif') repeat-y;
width:1024px;
position:relative;
height:100%;
padding-bottom:100px;
}

#onderrand{
background: URL('img/onderrand.gif');
left:0px;
width:1024px;
height:27px;
bottom:8px;
position:absolute;
margin:0 0 0 0;
}

#tekst{
width:470px;
height:375px;
left:400px;
position:absolute;
height:100%;
}

Degene die het vindt is mijn held!
Bedankt alvast!

ErikBooy007 · 9 aug 2009

Kun je eens een plaatje of iets dergelijks uploaden waaruit duidelijk wordt, wat het resultaat moet zijn? Dan kunnen we je wellicht de goede kant op wijzen. Nu positioneer je elke div, dat is niet handig. Beter kun je gewoon de flow van het document gebruiken.

Dus als je even een plaatje upload met de structuur van de pagina...

taeser · 9 aug 2009

Hallo,

Hier staat veel info erover

gr leon

ssck · 9 aug 2009

ErikBooy007 zei:
Kun je eens een plaatje of iets dergelijks uploaden waaruit duidelijk wordt, wat het resultaat moet zijn? Dan kunnen we je wellicht de goede kant op wijzen. Nu positioneer je elke div, dat is niet handig. Beter kun je gewoon de flow van het document gebruiken.

Dus als je even een plaatje upload met de structuur van de pagina...

Hier heb ik een plaatje, hij is wat onscherp en onduidelijk hoor, heb het even snel gedaan. Ik hoop dat je kan zien wat de bedoeling is? Boven het menu zit nog een header, dat is gewoon een afbeelding. Onder de tekst, dus helemaal onderaan de pagina zit nog de onderrand (een adresbalk), dat is ook gewoon een afbeelding. Deze zie je niet omdat je dus zo'n groot wit vlak hebt..
Kan je er wat mee?

ErikBooy007 · 9 aug 2009

Waar het ongeveer op neerkomt is dit:

HTML:

<body>

  <div id="container">

    <div id="header"></div>

    <div id="menu"></div

    <div id="content"></div>

    <div id="onderrand"></div>

  </div>

</body>

Code:

#container {
  width: 1024px;
  margin: 0px auto; // gecentreerd
}

#header {
  width: 100%;
  height: 380px;
}

#menu {
  width: 100%;
  height: 30px;
}

#content {
  width: 100%;
}

#onderrand {
  width: 100%;
  height: 27px;
}

Zo komen alle elementen direct onder elkaar. Je moet alleen de content er nog inzetten en styling toepassen.

ssck · 9 aug 2009

Oké dat heb ik geprobeerd, maar het probleem nu is dat de onderrand vlak onder het menu staat en dus niet helemaal onderaan de pagina .. plus het witte vlak waar de tekst en foto's in komen te staan lijnt niet uit met de tekst. Het witte vlak houdt boven de tekst op .. Het lijkt erop dat hij dus niet snapt hoe hoog hij moet zijn ofzo.

ErikBooy007 · 9 aug 2009

Als je het even ergens online zet, kunnen we er even naar kijken. Je verhaal maakt het niet echt duidelijk namelijk.

ssck · 9 aug 2009

ErikBooy007 zei:
Als je het even ergens online zet, kunnen we er even naar kijken. Je verhaal maakt het niet echt duidelijk namelijk.

Haha sorry, de website staat online op www.hondenschool-simonsays.nl (Ik weet niet of ik het linkje hier zomaar neer mag zetten?) Let niet op de buttons, CSS kent geen preloaden I know, daar moet ik nog mee bezig

Ik stap nog maar net in het wereld je van programmeren

ErikBooy007 · 9 aug 2009

Ik bedoelde de code die ik je net gaf. En in zekere zin kun je met CSS wel preloaden.

ssck · 9 aug 2009

ErikBooy007 zei:
Ik bedoelde de code die ik je net gaf. En in zekere zin kun je met CSS wel preloaden.

Ja ik heb al wat dingetjes op Internet gevonden, maar nog niet uitgeprobeerd.
Eh.. volgens mij snap ik er nu officieel helemaal niks meer van :

Code:

#container {
  width: 1024px;
  margin: 0px auto; // gecentreerd
}

#header {
background: URL('img/header_goed.jpg');
  width: 100%;
  height: 380px;
}

#menu {
  left:135px;
  top:330px;
  width: 100%;
  height: 30px;
}

#content {
background: URL('img/bgcontent2.gif') repeat-y;
width: 100%;
}

#tekst{
width:470px;
left:400px;
position:absolute;
}

#onderrand {
background: URL('img/onderrand.gif');
width: 100%;
height: 27px;
}

csshunter · 10 aug 2009

Even terzijde, over het "preloaden" met css: zie NL uitleg Een blokje knoppen en De Patrijspoort Theorie (verdere links aanwezig), en voorbeeldje hier met 1 gif'je voor een hele menubalk die gehoeverd kan worden. Razendsnel, en geen script nodig.

ErikBooy007 · 10 aug 2009

Ook als je wel aparte afbeeldingen hebt, kun je met CSS makkelijk preloaden.

Stel dat je knop normaal als achtergrond plaatje1.png heeft. Bij hover wordt dat plaatje2.png . Zonder preloaden, zie je dan even geen achtergrond, aangezien het andere plaatje nog geladen moet worden. Wat (in mijn ogen) hier de allermakkelijkste oplossing voor is, is de volgende:

Code:

div#preload {
  display: none;
}

Dan zet je in je HTML:

HTML:

<div id="preload">
  <img src="plaatje2.png" alt="Whatever" /> <!-- Dit doe je voor alle afbeeldingen die gepreload moeten worden (alt is om het valid te houden). -->
</div>

Zo worden de plaatjes nog niet weergegeven maar wel vast in de cache geladen.

csshunter · 11 aug 2009

nog even terzijde en dan weer terug

Hoi,
Dat kan inderdaad ook. Ik zou de onzichtbaarheid alleen niet met { display: none; } maken, want ik heb wel eens gehoord dat sommige browsers geen plaatjes van een <div> inladen als die { display: none; } heeft meegekregen. Op zich wel slim, want dat scheelt tijd. - Om dat te vermijden, kan het plaatje buiten beeld gezet worden met:

Code:

#preload {
   position: absolute;
   margin-left: -9999px;
   }

Wat ik het elegante en makkelijke aan een "opschuivend dubbelplaatje" vind, is:

Bij het tekenen zet je ze gewoon link-rechts naast elkaar (of boven-onder).
Je hebt het preload-div'je in de html niet nodig.
Met één regeltje css: a#linknaam:hover { background-position: 100% 0; } is het geregeld; dat regeltje was toch nodig, want anders was het: a#linknaam:hover { background-image: url(plaatje2.png); }.
Het scheelt het opvragen van plaatje2.png bij de server = één http-request minder (= sneller, minder bandbreedte, weer wat minder opgestookte energie/co2 uitstoot).

Maar ssck is er nog niet uit, dus nu weer gauw ontopic!

Ik denk dat in het model-Erik van hierboven de <div id="content"></div> nog even opgesplitst moet worden in een linkerkolom (voor de foto's) en een rechterkolom (voor de tekst). Dat kan er zo uitzien:

HTML:

<div id="content">
   <div id="linkerkolom">
      ... alles van de linkerkolom ...
   </div>
   <div id="rechterkolom">
      ... alles van de tekst ...
   </div>
</div>

De linkerkolom en de rechterkolom kun je allebei naar links laten drijven {float: left}, dan zitten ze mooi naast elkaar. Belangrijk is om vervolgens bij de onderrand (de footer) de hoogte van de floats "op te schonen" door een { clear: left; } te geven, dan komt de footer er altijd onder, welke van de twee kolommen ook de grootste is. De css wordt dan ongeveer:

Code:

#linkerkolom { 
   float: left;
   width: 280px;
   }
#rechterkolom {
   float: left;
   width: 500px;
   }
#onderrand {
   clear: left;
   width: 100%;
   height: 27px;
   }

Komt dat in de richting?
Voor een voorbeeld: zie hier.

Voor wie het ingewikkelder wil maken, met een gekleurde achtergrond voor de kolommen die ook meerekt met de hoogte van de kolom, is er hier een voorbeeld. Dat is een aangepaste versie van een basistype layout uit het italiaanse LayOutGala; daar zijn er ook 39 andere leerzame modellen te vinden.

Succes!
CSS-hunter

Poppoll · 11 aug 2009

Als ik het goed heb begrepen wil je dat de onderrand div direct volgt op wat voorafgaat.
Ziehier uw code die ik heb aangepast, u maakte nogal wat gebruik van position:absolute, wat hier totaal zinloos is.
Uit de html heb ik alle w3c fouten verwijderd zodat uw code valideert!
Meest voorkomende fout het niet invoegen van de alt tag bij img.

Aangepaste CSS

Code:

body{
background:#8D0448;
margin:0 0 0 0;
padding:0 0 0 0;
font-family:verdana, sans-serif;
font-size:11px;
color:#111111;
	
}

html {
height:100%;
}

p{
font-family:arial, helvetica, sans-serif;
font-size:15px;
font-weight:bold;
color:#7A043E;

}

a:link, a:visited{
font-family:arial, helvetiva, sans-serif;
font-size:14px;
color: #000;
text-decoration: none;
font-weight: bold;
}

img {
border:0;
}

#container{
width:1024px;
margin:0 auto
}

#header{
background: #fff URL('img/header_goed.jpg');
width:1024px;
height:380px;
}

aangepaste HTML

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="description"content="Hondenschool SimonSays in Elsloo, een gezellige hondenschool waar honden op een positieve manier getraind worden!">
    <meta name="keywords"content="Hondenschool, Hondenschool Elsloo, leuke hondenschool, SimonSays, Simone Otter, Puppycursus, Hondenschool Friesland,
	puppycursus Friesland, Probleemhonden, Probleemgedrag honden, Gedragstherapie honden, Probleemhonden Friesland, opvoeding honden">

<title>Hondenschool SimonSays, de leukste hondenschool van Friesland!</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
<!--
function roll_over(img_name, img_src)
   {
   document[img_name].src = img_src;
   }

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>


</head>

<body onLoad="MM_preloadImages('img/voorstellen2.gif','img/home2.gif','img/cursussen2.gif','img/tarieven2.gif','img/therapie2.gif','img/links2.gif','img/contact2.gif')">
<div id="container">
<div id="header"></div>
  <div id="menu"> 
  	<a href="index.html"><img src="img/home2.gif" alt=""></a><img src="img/slash.gif" alt=""> 
    <a href="voorstellen.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Voorstellen','','img/voorstellen2.gif',1)"><img src="img/voorstellen.gif" name="Voorstellen" width="127" height="30" alt=""></a><img src="img/slash.gif"  alt=""> 
	<a href="cursus.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Cursus','','img/cursussen2.gif',1)"><img src="img/cursussen.gif" name="Cursus" width="77" height="30"  alt=""></a><img src="img/slash.gif" alt=""> 
    <a href="tarieven.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Tarieven','','img/tarieven2.gif',1)"><img src="img/tarieven.gif" name="Tarieven" width="66" height="30"  alt=""></a><img src="img/slash.gif" alt=""> 
    <a href="therapie.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Therapie','','img/therapie2.gif',1)"><img src="img/therapie.gif" name="Therapie" width="129" height="30"  alt=""></a><img src="img/slash.gif" alt=""> 
    <a href="links.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Links','','img/links2.gif',1)"><img src="img/links.gif" name="Links" width="39" height="30"  alt=""></a><img src="img/slash.gif" alt=""> 
    <a href="contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Contact','','img/contact2.gif',1)"><img src="img/contact.gif" name="Contact" width="61" height="30"  alt=""></a> 
   </div>


  <div id="content"> 
    <div id="foto"> <img src="img/2klein.jpg" alt=""> <br>
      <img src="img/7klein.jpg" alt=""> </div>
    <div id="tekst"> 
      <p>DE HONDENSCHOOL</p>
      De relatie tussen baas en hond is een heel bijzondere. U als baas moet aan 
      de ene kant vertrouwen en veiligheid uitstralen en aan de andere kant moet 
      u duidelijk zijn, eerlijk en consequent. Voor een optimale relatie tussen 
      baas en hond is het belangrijk dat u uw hond kunt 'lezen'. Dat u weet waarom 
      hij doet wat hij doet en wat hij daarmee bedoelt. SimonSays laat u naar 
      uw hond kijken op een hondse manier! <br>
      <br>
      Ik vind het belangrijk dat een hond uitgroeit tot een evenwichtige vriendelijke 
      viervoeter die gewend is aan alledaagse dingen, dieren en kinderen. Een 
      hond die goed luistert naar de baas, en niet trekt aan de riem. Minder belangrijk 
      vind ik hoe recht de hond naast de baas zit, of hoe snel hij gaat liggen 
      op het commando af. Aan welke kant de hond 'behoort' te lopen en of hij 
      met zijn neus omhoog of omlaag loopt. Een hond moet vooral hond kunnen zijn 
      in mijn lessen, en natuurlijk daarbuiten. <br>
      <br>
      We trainen met de honden op een positieve manier. Dat wil zeggen dat we 
      gewenst gedrag belonen, en ongewenst gedrag zo veel mogelijk negeren. Hierbij 
      kijk ik naar de rasspecifieke kenmerken van de verschillende honden zodat 
      ieder op zijn eigen niveau en eigen manier kan trainen. Dit betekent dus 
      dat er geen goed of fout is, maar wel goed en beter. <br>
      <br>
      Wilt u ook het beste voor uw hond? Dan heet ik u graag van harte welkom 
      op mijn hondenschool! <br>
      <br>
      <p>WAAROM EEN CURUS BIJ SIMONSAYS?</p>
      <img src="img/pootje.gif" alt="">Kleine groepjes (3 tot 5 honden).<br>
      <img src="img/pootje.gif" alt="">Positieve trainingsmethode!<br>
      <img src="img/pootje.gif" alt="">U mag per les betalen, als u een les mist hoeft 
      u deze ook niet te betalen.<br>
      <img src="img/pootje.gif" alt="">We maken eens per 4 weken een leuk, leerzaam uitstapje.<br>
      <img src="img/pootje.gif" alt="">U kunt doorlopend instromen.<br>
      <img src="img/pootje.gif" alt="">Het hele gezin mag mee!<br>
      <img src="img/pootje.gif" alt="">Niets hoeft, alles mag.<br>
      <img src="img/pootje.gif" alt="">Er is ruimte voor eigen inbreng.<br>
      <img src="img/pootje.gif" alt="">Enthousiaste, gediplomeerd instructrice, tevens 
      gedragstherapeut<br>
      <img src="img/pootje.gif" alt="">Geen vaste lestijden, maar lessen op afspraak.<br>
      <img src="img/pootje.gif" alt="">Trainen op je eigen niveau.<br>
      <img src="img/pootje.gif" alt="">Ook voor oudere honden heb ik plaats (je bent 
      nooit te oud om te leren!!) </div>
	  <div class="clear"></div> 
    <div id="onderrand"></div>
  </div>
 </div>
  <script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-10141656-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>

BTW Als dit uw eerste site is, proficiat ziet er goed uit!
PP

Div met automatische hoogte.

ssck

Gebruiker

ErikBooy007

Terugkerende gebruiker

taeser

Gebruiker

ssck

Gebruiker

ErikBooy007

Terugkerende gebruiker

ssck

Gebruiker

ErikBooy007

Terugkerende gebruiker

ssck

Gebruiker

ErikBooy007

Terugkerende gebruiker

ssck

Gebruiker

csshunter

Meubilair

ErikBooy007

Terugkerende gebruiker

csshunter

Meubilair

Poppoll

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy