[CSS] Hoe Div height=100% werkend krijgen?? - Softwareontwikkeling

donderdag 19 september 2002 09:27

Acties:

« - _ - »

Topicstarter

Ben momenteel even met CSS aan het stoeien nadat ddc er een leuk stukje over heeft geschreven...

Nu wil ik graag het volgende realiseren. Ik wil een logon maken als volgt (klik hier voor online versie):

HTML:

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
<html>
 <head>
  <title>Removed company name | Log On</title>
  <link rel='stylesheet' href='logon-company.css' type='text/css'>
 </head>
 
 <body onload='document.forms[0].user.focus()'>

 <div class='content'>
  <form name='logon' method='post' action='logon'>
  <h1>Removed Company name - Admin Logon</h1>
  <p>User name: 
  <input type='text' name='user'> - 
  Password: 
  <input type='password' name='password'></p>
  <p class='submit'><input type='submit' value='Log on' style='width:auto'></p>
  </form>
 </div>
 
 </body>
</html>

Deze logon maakt gebruik van het volgende stukje CSS:

HTML:

body {
 margin: 0 0 0 0;
 font-family: Verdana, sans-serif;
}

 div.content {
  height:100%;
  color:white;
  background:#028eca;
  margin : 0px 0px 0px 0px;
 }

  div.content form {
   margin:10%;
   padding:5%;
   border:solid 1px #ccc;
  }

  div.content H1 {
   font-weight:normal;
   font-size:200%;
   padding:0;
   margin: 40px  0;
  }

  div.content p {
   margin-bottom:20px;
  }

  div.content input {
   width:125px; 
  }

Het probleem wat ik nu heb ik dat het bij mij op IE6 het stukje met height : 100% niet werkt??

Ik kan natuurlijk ook gewoon aan de body dezelfde background meegeven, maar ik zoek eigenlijk naar een mogelijkheid om dit te implementeren voor het DIV element. Iemand een idee/suggestie...

* Woudloper zal het css gebeuren nog wel niet helemaal begrijpen...

[ Voor 15% gewijzigd door Woudloper op 18-09-2005 23:15 ]

donderdag 19 september 2002 09:29

Acties:

oZy

Je zit in het verkeerde forum he.. >> W&G

Trouwens, waarom een DIV en geen TABLE ? HTML 101 als je het mij vraagt.

donderdag 19 september 2002 09:30

Acties:

Verwijderd

Het werkt niet in IE omdat de body standaard geen height heeft, maak maar eens een lege pagina met alleen een border rond de body.
Geef de body dus height: 100%; mee.

donderdag 19 september 2002 09:34

Acties:

D2k

goh zeg
waar zou dit topic voor zijn?
<h3>Welkom in P&W -> Quickstart om snel aan de slag te kunnen</h3>

P&W -> W&G

Doet iets met Cloud (MS/IBM)

donderdag 19 september 2002 09:35

Acties:

Janoz

Moderator Devschuur®

!litemod

psst D2k, moet je 'm wel moven natuurlijk.

Ken Thompson's famous line from V6 UNIX is equaly applicable to this post:
'You are not expected to understand this'

donderdag 19 september 2002 09:40

Acties:

Verwijderd

oZy schreef op 19 september 2002 @ 09:29:
Je zit in het verkeerde forum he.. >> W&G

Trouwens, waarom een DIV en geen TABLE ? HTML 101 als je het mij vraagt.

Omdat je geen tables moet gebruiken voor layout of positionering. Tables gebruik je voor het weergeven van data, die in rijen en kolommen weergegeven moet worden.

Tabellen voor dit soort dingen gebruiken is vreselijk verkeerd, aangezien je een deel van het uiterlijk al vastlegt in de HTML code. Nu denken sommigen dat dit juist de bedoeling is, maar daar ben ik het niet mee eens.

Met HTML geef je aan of iets een link, een paragraaf, een lijst of een quote is, en met CSS positioneer je dat, en geef je het andere uiterlijke kenmerken. Ik heb weleens een voorbeeld laten zien van een menu met links die mét een stylesheet boven elkaar staan, en zonder stylesheet naast elkaar. Zulke dingen krijg je niet voor elkaar als je met tabellen aan de slag bent geweest.

donderdag 19 september 2002 09:52

Acties:

Woudloper

« - _ - »

Topicstarter

Verwijderd schreef op 19 september 2002 @ 09:40:
Omdat je geen tables moet gebruiken voor layout of positionering. Tables gebruik je voor het weergeven van data, die in rijen en kolommen weergegeven moet worden.

Dat was mijn punt ook. Ik wil het trachten dus wel op de juiste manier te gebruiken

Met HTML geef je aan of iets een link, een paragraaf, een lijst of een quote is, en met CSS positioneer je dat, en geef je het andere uiterlijke kenmerken. Ik heb weleens een voorbeeld laten zien van een menu met links die mét een stylesheet boven elkaar staan, en zonder stylesheet naast elkaar. Zulke dingen krijg je niet voor elkaar als je met tabellen aan de slag bent geweest.

Je bedoelt zeker in dit topic daar had je een mooi voorbeeld gegeven ja

Maar om nog even terug te komen op:

Cheatah:
Het werkt niet in IE omdat de body standaard geen height heeft, maak maar eens een lege pagina met alleen een border rond de body.
Geef de body dus height: 100%; mee.

Als ik nu een pagina maakt zoals jij zegt met:

HTML:

<html>
 <head>
  <title>testing...</title>
  <style type="text/css">
 body {
  border:solid 1px #fc0;
 }
  </style>
 </head>

 <body>

 </body>
</html>

Staat er dus wel heel netjes een border om de complete pagina in IE6 (SP1). Zelfs om de standaard scrollbar staat dan een border heen...

donderdag 19 september 2002 09:56

Acties:

Verwijderd

Aha, dan is er in die Service Pack blijkbaar een fout verbeterd, dat zou erg prettig zijn.

donderdag 19 september 2002 10:01

Acties:

Woudloper

« - _ - »

Topicstarter

Verwijderd schreef op 19 september 2002 @ 09:56:
Aha, dan is er in die Service Pack blijkbaar een fout verbeterd, dat zou erg prettig zijn.

Maar als ik dus bovenstaand stukje code even bekijk met Mozilla krijg ik alleen maar één lijn te zien, dus daar werkt het dan waarschijnlijk nog niet...

Maar ehm... bovenstaand stukje werkt wel, helaas moet ik dus nog wel voor mijn logon pagina wel gebruik maken van body height: 100 %... Zal wel te maken hebben met het feit dat daar wel een DOCTYPE staat vermeld