login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Simpele layout in DIV ipv. TABLES

Offline staic - 11/06/2009 08:21 (laatste wijziging 11/06/2009 08:25)
Avatar van staicNieuw lid Beste,

Ik heb mij wat zitten verdiepen in het maken van layouts dmv. DIV ipv. TABLES. In het verleden heb ik altijd gewerkt met tables een aangezien dit verouderd is zou ik hier graag van af stappen.

Ik heb alvast een test gemaakt waar ik tevreden over ben en waarvan ik denken dat deze correct werd gemaakt.

Echter heb ik 1 probleem, het kader 'middenmain' zou ik in de hoogte altijd op 100% willen, dus met andere woorden dit kader moet steeds open gaan tot aan de onderkant van de browser en dit voor alle resoluties. Zoals je op onderstaande URL kunt zien is dit kader in de hoogte nog groter dan de browser. Hoe los ik dit op? Kader moet dus altijd in de hoogte tot aan de onderkant van de browser komen te staan.

Ik heb dus 2 vragen:

- Is mijn layout correct? Doe ik alles juist?
- Hoe lost ik dit probleem op zodat 'middenmain' in de hoogte altijd tot de onderkant van de browser komt en dit voor alle resoluties.

URL (voorbeeld): http://www.raam...t/div.html

HTML
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <link href="div.css" rel="stylesheet" type="text/css" />
  7. </head>
  8.  
  9. <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bottommargin="0" rightmargin="0">
  10. <div class="big-main" align="center">
  11.  
  12.  <div class="topmain" align="left">HEADER</div>
  13.  <div class="legeruimte"></div>
  14.  <div class="menu">Home - Menu - Enz.. - Contact</div>
  15.  <div class="legeruimte"></div>
  16.  <div class="middenmain" align="left">
  17.  CONTENT<br /><br />
  18.  
  19.  	<div class="test1">kaart van belgie</div>
  20.  
  21.     <div class="test2">formulier</div>
  22.  
  23.  
  24.  </div>
  25.  
  26. </div>
  27.  
  28. </body>
  29. </html>


CSS
css code - Bekijk de code zonder highlighting - Klap code in 
  1. @charset "utf-8";
  2. .big-main {
  3. 	position: absolute;
  4. 	background-image: url(bg.jpg);
  5. 	background-repeat:repeat-x;
  6. 	height: 100%;
  7. 	width: 100%;
  8. }
  9.  
  10. .topmain {
  11.  
  12. position:relative;
  13.  
  14. height:150px;
  15. width:820px;
  16. background-color:#0033FF;
  17. }
  18.  
  19. .menu {
  20.  
  21. position:relative;
  22.  
  23. height:25px;
  24. width:820px;
  25. background-color:#FFFFFF;
  26. }
  27.  
  28. .legeruimte {
  29.  
  30. position:relative;
  31.  
  32. height:2px;
  33. width:820px;
  34. }
  35.  
  36. .middenmain {
  37.  
  38. position:relative;
  39. width:800px;
  40. height:100%;
  41. border:thin #CCCCCC solid;
  42. border-top:none;
  43. background-color:#FFFFFF;
  44. padding:10px;
  45. }
  46.  
  47. .test1 {
  48.  
  49. position:absolute;
  50. height: 300px;
  51. width:400px;
  52. border:thin #CCCCCC solid;
  53. left:5px;
  54. padding:10px;
  55. background-color:#FFFFFF;
  56. }
  57.  
  58. .test2 {
  59.  
  60. position:relative;
  61. height: 300px;
  62. width:200px;
  63. border:thin #CCCCCC solid;
  64. left:430px;
  65. padding:10px;
  66. background-color:#FFFFFF;
  67. }

4 antwoorden

Gesponsorde links
Offline yolk - 11/06/2009 11:01 (laatste wijziging 11/06/2009 11:01)
Avatar van yolk HTML interesse Antwoord 1: zet de opmaak van de body in het css-bestand. Dus
css code - Bekijk de code zonder highlighting - Klap code in 
  1. body {
  2.    margin: 0 auto;
  3. }

Let erop dat voor "body" geen punt hoort!

Antwoord 2: daar is geen html-oplossing voor. Je zou het met Javascript kunnen oplossen. Hier staat een uitleg hoe je de schermhoogte opvraagt: http://www.howt...wserwindow
Als je de hoogte weet kun je er een X aantal pixels aftrekken en die als hoogte van je div instellen.
Maar ook dit is geen goede oplossing, want je weet niet hoeveel werkbalken je gebruiker heeft.
Offline Martijn - 11/06/2009 11:10 (laatste wijziging 11/06/2009 12:52)
Avatar van Martijn Crew PHP wat ook een optie is, is een div maken en die 100% heigth maken. Dan zet je dáárin je headertje, en dan gaat de rest automatisch eronder en is je site nogsteeds 100% 

@hieronder: Correct, stom foutje
Offline Ontani - 11/06/2009 11:27 (laatste wijziging 11/06/2009 11:28)
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 @DeviourSoul bedoelt natuurlijk 100% height maken
Offline yolk - 11/06/2009 11:38
Avatar van yolk HTML interesse Die manier werkt niet in alle browsers volgens mij.
In elk geval zijn er al veel vragen over geweest op diverse fora en creatievelingen hebben verschillende manieren om het op te lossen:
http://www.goog...p;oq=div+h
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.176s