[CSS] div volledige hoogte browser

[Verwijderd]

hopelijk blijft dit topic wel leven...

ik zit met een probleempje. Ik ben bezig met een site en ik wil graag dat de volledige hoogte van de browser wordt gebruikt zodat er geen rare lege ruimte onder de site ontstaat.

ik heb op dit moment deze code:

code:

body  {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #666666;
    margin: 20px; 
    padding: 0;
    text-align: center; 
    color: #000000;
    height: 100%;
    }
.page #shadow { 
    width: 865px;  
    background-image:url(images/mid.jpg);
    margin: 0 auto; 
    border: 0px;
    align: center;
    min-height:100% !important;
}
.page #container { 
    width: 800px;  
    margin: 0 auto; 
    border: 2px;
    text-align: left; 
    min-height:100% !important;
}

ik heb geprobeerd om min height en height om te wisselen, maar dit leverde ook niks op. enkel height bij de shadow en container werkt ook niet.
Wanneer ik bij body de height op 100% zet, veranderd er niks, als ik hem geheel weghaal maakt het ook niks uit.

eerlijk gezegt alles wat ik probeer werkt niet. Heb ook al op google gekeken, maar deze komen met dezelfde oplossingen aan, die dus om een of andere reden niet werken.

shadow staat om me container heen en zorgt voor de achtergrond met een schaduw alsof de site bovenop de body ligt.

Tevens heb ik het probleem dat als ik de css in een los bestandje van de site zet, de hele lay out verkloot wordt, css werkt dan plots niet meer enzo. Dit heb ik in dreamweaver al, of is dit een bug in het programma? Ik heb nog niet geprobeert deze te bekijken in een browser als ik de css apart heb staan.

hopelijk weet iemand wat voor beide problemen.

groet

[DeluxZ]

Dat je css 'verklooid' wordt zal vast komen omdat je dan je url's naar je images niet aanpast

[RobIII]

Verwijderd schreef op dinsdag 05 januari 2010 @ 11:22:
ik heb op dit moment deze code:

En waar is de bijbehorende HTML

Verwijderd schreef op dinsdag 05 januari 2010 @ 11:22:
eerlijk gezegt alles wat ik probeer werkt niet. Heb ook al op google gekeken, maar deze komen met dezelfde oplossingen aan, die dus om een of andere reden niet werken.

En heb je al gewoon eens hier of hier gekeken? En mogen we dan ook zien wat je hebt geprobeerd zodat we eventueel kunnen aanwijzen waar de fout zit? Roepen dat je vanalles hebt geprobeerd zonder daar de daadwerkelijke code van te (laten) zien is natuurlijk nutteloos; hoe moeten wij ruiken wat je al hebt geprobeerd en waar de fout eventueel zit?

Verwijderd schreef op dinsdag 05 januari 2010 @ 11:22:
shadow staat om me container heen en zorgt voor de achtergrond met een schaduw alsof de site bovenop de body ligt.

Dat is dus nogal lastig zonder HTML erbij...

Verwijderd schreef op dinsdag 05 januari 2010 @ 11:22:
Tevens heb ik het probleem dat als ik de css in een los bestandje van de site zet, de hele lay out verkloot wordt, css werkt dan plots niet meer enzo. Dit heb ik in dreamweaver al, of is dit een bug in het programma?

Al gekeken naar uppercase/lowercase? Veel webservers zijn case-sensitive. En als je lokaal zit te werken (a-la file://test.html): kloppen de paden wel? En heb je überhaupt een verwijzing in je head staan van de HTML? Again: dat kunnen we nu dus niet zien.

[ Voor 17% gewijzigd door RobIII op 05-01-2010 11:38 ]

[DeluxZ]

Ik heb hier een voorbeeld: http://www.xs4all.nl/~peterned/examples/csslayout1.html

Strip alles wat je niet nodig hebt en probeer je eigen layout erin te verwerken. Of kijk hoe het is gedaan met de CSS

[Barleone]

• hoogte 100%: Ik weet de oplossing zo even niet. Zoek hier op GoT ook eens goed rond. Er zijn zat topics met dit onderwerp.
• Als je je css in een los bestand zet, moet je in je HTML wel een verwijzing naar dat bestand maken. Dat kom je in de meest eenvoudige tutorials voor css tegen.
Ik zou zeggen, zoek eens op http://w3schools.com. Succes!

offtopic:
Overigens, je beide topics van afgelopen week zijn heel erg basic. Neem de tijd om tutorials door te lezen. Ik weet van mezelf dat w3schools een enorm handige website is. Je kunt er heel veel leren over php, html, css, javascript etcetera. Goed zoeken en veel oefenen.
Als het echt niet lukt, pas op GoT een topic openen en je probleem, maar ook je mislukte pogingen vertellen.

[ Voor 35% gewijzigd door Barleone op 05-01-2010 11:46 ]

[Verwijderd]

ik heb toch duidelijk beschreven wat ik heb geprobeerd?

bij zowel body, shadow als container heb ik de volgende codes geprobeert.

code:

height: 100%;

code:

height: 100% !important;

code:

height: auto !important;

code:

min-height: 100% !important;

werkte bij allen niet.

hier de html, althans ik heb de tekst eruit gelaten.

code:

<body class="page">

<div id="shadow">
<div id="container">
<div id="header">
<?php 
$nr = rand(1,9); 
echo '<img src="images/'.$nr.'.jpg">'; 
?></div>
    <div id="header2">menutekst</div>
  <div id="sidebar1">
    <h3>SubMenu/Updates</h3>
    <p>tekst
    </p>
  </div>
  <div id="mainContent">
   <span class="Kop">Home</span>
   <p>tekst</p>
</div>
<br class="clearfloat" />
  <div id="footer">
    <p class="copy"> copyrighttext</p>
</div>
</div>
</div>

probleem met de losse css stylesheet is nog steeds niet opgelost. Ik heb geprobeert dit voor elkaar te krijgen door in de pagina zelf dit te zetten:

code:

<title>Untitled Document</title>
<link href=pob.css" rel="stylesheet" type="text/css" />
</style>
</head>

en een losse css file aangemaakt met naam pob. Dreamweaver ziet de koppeling wel, maar in het browser koppelt ie totaal niks aan die css. Hij laadt gewoonweg niet.

Ook werkt het sinds ik de height heb toegevoegd in de css helemaal niks meer in IE, in firefox werkt het wel.

ben ik nu duidelijk zat?

[Barleone]

DeluxZ schreef op dinsdag 05 januari 2010 @ 11:35:
Ik heb hier een voorbeeld: http://www.xs4all.nl/~peterned/examples/csslayout1.html

Strip alles wat je niet nodig hebt en probeer je eigen layout erin te verwerken. Of kijk hoe het is gedaan met de CSS

Ik heb eens gekeken, maar als ik mijn browser (IE8) op 800*600 zet, dan gaat #content niet scrollen, maar gaat heel de pagina scrollen. Ja, dus op die manier steekt de pagina gewoon nog door de 'bodem' heen.
Ik neem aan dat The_Maxx dat niet zoekt. Het is in jouw voorbeeld meer een kwestie van niet teveel tekst zetten in #content. Het is geen permanente oplossing om de pagina op 100% te houden.

Maar misschien zoekt The_Maxx alleen een oplossing voor pagina's met te weinig tekst, zodat die toch de bodem raken? Dan klopt het voorbeeld van DeluxZ wél.

[HuHu]

Verwijderd schreef op dinsdag 05 januari 2010 @ 11:51:

hier de html, althans ik heb de tekst eruit gelaten.

code:

<body class="page">

<div id="shadow">
<div id="container">
<div id="header">
<?php 
$nr = rand(1,9); 
echo '<img src="images/'.$nr.'.jpg">'; 
?></div>
    <div id="header2">menutekst</div>
  <div id="sidebar1">
    <h3>SubMenu/Updates</h3>
    <p>tekst
    </p>
  </div>
  <div id="mainContent">
   <span class="Kop">Home</span>
   <p>tekst</p>
</div>
<br class="clearfloat" />
  <div id="footer">
    <p class="copy"> copyrighttext</p>
</div>
</div>
</div>

probleem met de losse css stylesheet is nog steeds niet opgelost. Ik heb geprobeert dit voor elkaar te krijgen door in de pagina zelf dit te zetten:

code:

<title>Untitled Document</title>
<link href=pob.css" rel="stylesheet" type="text/css" />
</style>
</head>

en een losse css file aangemaakt met naam pob. Dreamweaver ziet de koppeling wel, maar in het browser koppelt ie totaal niks aan die css. Hij laadt gewoonweg niet.

Ook werkt het sinds ik de height heb toegevoegd in de css helemaal niks meer in IE, in firefox werkt het wel.

ben ik nu duidelijk zat?

Dat is niet je HTML met alleen de tekst eruit gelaten. Ik mis de DOCTYPE, de <html> tag, de <head>, er zit PHP tussendoor, de sluittag van de body mist, enz...

Post eens je daadwerkelijke HTML met de tekst eruit gelaten. En niet een willekeurig stukje.

Verder mist er een " bij je link-tag en staat er een nutteloze </style>.

Ga er eerst eens voor zorgen dat http://validator.w3.org/ je geen foutmeldingen meer geeft.

[ Voor 13% gewijzigd door HuHu op 05-01-2010 11:59 ]

[Verwijderd]

Barleone schreef op dinsdag 05 januari 2010 @ 11:54:
[...]
Ik neem aan dat The_Maxx dat niet zoekt. Het is in jouw voorbeeld meer een kwestie van niet teveel tekst zetten in #content. Het is geen permanente oplossing om de pagina op 100% te houden.

Ik hoop dat hij dat niet bedoelt, als je echt vindt dat dat nodig is voor je site zou ik maar eens nadenken of je wel het goede medium gebruikt voor je doel.

Verwijderd schreef op dinsdag 05 januari 2010 @ 11:51:
ik heb toch duidelijk beschreven wat ik heb geprobeerd?

[...]

ben ik nu duidelijk zat?

Goede houding als je om hulp zoekt. Waarom was het voorbeeld van DeluxZ niet bruikbaar?

[The_Ghost16]

Heb je al geprobeerd om de html tag ook op 100% height te zetten? Meestal is het verstandig om in CSS ipv body de combinatie html, body te gebruiken. Eventueel zou je form daar ook nog bij kunnen zetten.

[Verwijderd]

ik heb op dit moment dit exact in de css code staan (heb geprobeert het voorbeeld van deluz te volgen)

css code en html code zitten nu nog in 1 bestand!

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>untitled page</title>
<style type: "text/css">
body  {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #666666;
    margin: 20px; 
    padding: 0;
    text-align: center; 
    color: #000000;
    height: 100%;
    }
.page #shadow {
    position: relative;
    width: 865px;  
    background-image:url(images/mid.jpg);
    margin: 0 auto; 
    border: 0px;
    align: center;
    min-height:100%;
    height:auto !important; 
    
} 
.page #container { 
    width: 800px;  
    margin: 0 auto; 
    border: 2px;
    text-align: left; 
    min-height:100%;
    height:auto !important; 
} 
.page #header { 
    background: #DDDDDD; 
    padding: 0 10px 0 0px;
} 
.page #header h1 {
    margin: 0; 
    }
.page #header2 { 
    padding: 10px 10px 10px 20px;
    text-align: center;
     font-style:italic;
} 
.page #sidebar1 {
    float: left; 
    width: 150px; 
    height: auto;
    background: #EBEBEB; 
    margin: 0 0 0 20px;
}
.page #mainContent {
    margin: 0 0 0 200px;
    padding: 0 20px;
    font-size: x-small; 
    height: auto;
    } 
.page #footer { 
    padding: 0 10px 0 20px; 
} 
.page #footer p {
    margin: 0;
    padding: 10px 0;
    text-align: center;
}
.fltrt { 
    float: right;
    margin-left: 8px;
}
.fltlft {
    float: left;
    margin-right: 8px;
}
.clearfloat { 
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
.Kop {
    font-weight: bold;
    font-size: x-large;
}
.page #container #sidebar1 {
    font-size: small;
}
.page #container #sidebar1 {
    font-size: x-small;
}
.copy {
    font-size: x-small;
    font-style: italic;
}
</style>
</head>

<body class="page">

<div id="shadow">
<div id="container">
<div id="header">
<?php 
$nr = rand(1,9); 
echo '<img src="images/'.$nr.'.jpg">'; 
?></div>
    <div id="header2">menutext</div>
  <div id="sidebar1">
    <h3>SubMenu/Updates</h3>
    <p>text
    </p>
  </div>
  <div id="mainContent">
   <span class="Kop">Home</span>
   <p>text</p>
</div>
<br class="clearfloat" />
  <div id="footer">
    <p class="copy"> &copy; text</p>
</div>
</div>
</div>
</body>
</html>

op dit moment krijg ik het nog steeds niet weergegeven

ik heb voor de veiligheid maar de css code erin gelaten, er staan wat dingen in die niet worden gebruikt, maar ik moet eerst kijken of ik dat kan weglaten, dit is automatisch gegenereerd door dreamweaver en ik heb een aantal dingen aangepast.

ik wil dus wanneer de container div korter is dan de volledige hoogte van het browser, zorgen dat de complete shadow toch doorloopt, zodat er enkel bovenaan de site een kleine open ruimte blijft. en onderaan de pagina het wel doorloopt.

[ Voor 0% gewijzigd door MueR op 05-01-2010 12:10 ]

[HuHu]

En nu je code nog eens door de W3C validator heen gooien, alle errors fixen en dan weer terug komen.

Wat denk je dat dit doet:

HTML:

<style type: "text/css">

???

[MueR]

Ik heb even je code tag gewijzigd in [code=html] zodat je ook syntax errors te zien krijgt

edit:
* MueR mept HuHu.
Lief doen en niet zo snel typen

[ Voor 27% gewijzigd door MueR op 05-01-2010 12:12 ]

[Verwijderd]

MueR schreef op dinsdag 05 januari 2010 @ 12:11:
Ik heb even je code tag gewijzigd in [code=html] zodat je ook syntax errors te zien krijgt

edit:
* MueR mept HuHu.
Lief doen en niet zo snel typen

danku

@ HuHu: ik zou niet weten wat dat stukje moet doen, dit stond er standaard in. heb het zo gelaten omdat wat ik eerst had werkte.

ik krijg inmiddels de pagina weer te zien in IE, zat m in een typfoutje

helaas werkt het nog niet zoals ik wil.

[Barleone]

Verwijderd schreef op dinsdag 05 januari 2010 @ 11:59:
[...]
Ik hoop dat hij dat niet bedoelt, als je echt vindt dat dat nodig is voor je site zou ik maar eens nadenken of je wel het goede medium gebruikt voor je doel.

Daar moet ik je gelijk in geven. Technisch zou dus minimaal 100% de gewenste situatie zijn.

Verwijderd schreef op dinsdag 05 januari 2010 @ 11:51:
hier de html, althans ik heb de tekst eruit gelaten.

code:

[...]
<br class="clearfloat" />

Ik vind je keuze van de klassenaam een beetje raar. Aan een klassenaam moet je niet kunnen zien welke css-functionaliteit daar aan verbonden is. Verder heb ik nog nooit css toegepast op een BR-element .

probleem met de losse css stylesheet is nog steeds niet opgelost. Ik heb geprobeert dit voor elkaar te krijgen door in de pagina zelf dit te zetten:

code:

<title>Untitled Document</title>
<link href=pob.css" rel="stylesheet" type="text/css" />
</style>
</head>

Waarom staat hier </style>?

en een losse css file aangemaakt met naam pob. Dreamweaver ziet de koppeling wel, maar in het browser koppelt ie totaal niks aan die css. Hij laadt gewoonweg niet.

Ga eens naar http://localhost/ en typ het pad van je .css bestand. Klopt het pad wel, staat de .css op de goede plaats? Klopt ook het pad in je html? of staat daar een slash teveel of te weinig?

[RM-rf]

The_Ghost16 schreef op dinsdag 05 januari 2010 @ 11:59:
Heb je al geprobeerd om de html tag ook op 100% height te zetten? Meestal is het verstandig om in CSS ipv body de combinatie html, body te gebruiken. Eventueel zou je form daar ook nog bij kunnen zetten.

dit kan wel eens de oplossing zijn:

code:

html, body {
   width: 100%; height: 100%;
   margin: 0; padding: 0;
}

[Verwijderd]

Barleone schreef op dinsdag 05 januari 2010 @ 12:16:
[...]

Daar moet ik je gelijk in geven. Technisch zou dus minimaal 100% de gewenste situatie zijn.


[...]

Ik vind je keuze van de klassenaam een beetje raar. Aan een klassenaam moet je niet kunnen zien welke css-functionaliteit daar aan verbonden is. Verder heb ik nog nooit css toegepast op een BR-element .

[...]

Waarom staat hier </style>?

[...]

Ga eens naar http://localhost/ en typ het pad van je .css bestand. Klopt het pad wel, staat de .css op de goede plaats? Klopt ook het pad in je html? of staat daar een slash teveel of te weinig?

probleem met losse css bestand is eindelijk opgelost, dit werkt nu!

clearfloat is weer zo'n stomme toevoeging van dreamweaver, ik weet niet wat en waarom precies, maar ik zou dit dus uit de code en de css kunnen schrapppen?

hoogte probleem is ook opgelost. Past het nu wel aan, maar ik krijg ineens een schuifbalk en daarbij heb ik nog steeds onderaan een stuk leegte. bovenaan ook, maar die had ik zelf ingesteld (lijkt erop dat deze afstanden gelijk zijn?)

[ Voor 11% gewijzigd door Verwijderd op 05-01-2010 12:32 ]

[Barleone]

Verwijderd schreef op dinsdag 05 januari 2010 @ 12:26:
clearfloat is weer zo'n stomme toevoeging van dreamweaver, ik weet niet wat en waarom precies, maar ik zou dit dus uit de code en de css kunnen schrapppen?

Schrappen kan altijd, maar ik weet natuurlijk niet wat dat doet. Ik kan je niet meer tips geven dan 'zoek het uit', lol.

[macciez]

<link href=pob.css" rel="stylesheet" type="text/css" />

Je mist ook een " hier, daarom wordt je stylesheet waarschijnlijk niet weergegeven.

[Verwijderd]

inmiddels de rotzooi eruit gehaald (onnodige css enzovoorts) maar voor ik dat deed was plotseling de uitlijning van de schadow div weg, deze staat nu geheel aan de linker kant, dit krijg ik niet terug goed gedraait (midden) terwijl de align wel op center staat.

edit: hoogte klopt nu wel netjes, margin was niet aangegeven. De align klopt wel in compatitibaliteitsmodus van IE, maar dan klopt het lettertype van het submenu niet meer (te groot)

de css en php/html zijn nu 2 aparte bestanden en de css sheet wordt gelezen door de html en werkt ook.

ik zie dat er een syntaxfout met de > bij de meta en link tag geeft. ik vind dit vreemd, die moet je toch ook afsluiten?

de css:

Cascading Stylesheet:

html, body  {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #666666;
    padding: 0;
    text-align: center; 
    color: #000000;
    height: 100%;
        }
.page #shadow {
    width: 865px;  
    background-image:url(images/mid.jpg);
    border: 0px;
    align: center;
    min-height:100%;
    height:auto !important;
} 
.page #container { 
    width: 800px;  
    margin: 0 auto; 
    border: 2px;
    text-align: left; 
} 
.page #header { 
    background: #DDDDDD; 
    padding: 0 10px 0 0px;
} 
.page #header h1 {
    margin: 0; 
    }
.page #header2 { 
    padding: 10px 10px 10px 20px;
    text-align: center;
     font-style:italic;
} 
.page #sidebar1 {
    float: left; 
    width: 150px; 
    height: auto;
    background: #EBEBEB; 
    margin: 0 0 0 20px;
}
.page #mainContent {
    margin: 0 0 0 200px;
    padding: 0 20px;
    font-size: x-small; 
    height: auto;
    } 
.page #footer { 
    padding: 0 10px 0 20px; 
} 
.page #footer p {
    margin: 0;
    padding: 10px 0;
    text-align: left;
}
.Kop {
    font-weight: bold;
    font-size: x-large;
}
.page #container #sidebar1 {
    font-size: small;
}
.page #container #sidebar1 {
    font-size: x-small;
}
.copy {
    font-size: x-small;
    font-style: italic;
}

XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>unknown</title>
<link href= "pob.css" rel="stylesheet" type="text/css" />
</head>

<body class="page">

<div id="shadow">
<div id="container">
<div id="header">
<?php 
$nr = rand(1,9); 
echo '<img src="images/'.$nr.'.jpg">'; 
?></div>
    <div id="header2">menutext</div>
  <div id="sidebar1">
    <h3>SubMenu/Updates</h3>
    <p>text </p>
  </div>
  <div id="mainContent">
   <span class="Kop">Home</span>
   <p>text!</p>
</div>
  <div id="footer">
    <p class="copy"> &copy; text</p>
</div>
</div>
</div>
</body>
</html>

[ Voor 4% gewijzigd door NMe op 05-01-2010 13:12 ]

[macciez]

Kijk eens in de broncode van deze website, dan zie je of ze wel of niet afgesloten worden

[RobIII]

macciez schreef op dinsdag 05 januari 2010 @ 13:04:
Kijk eens in de broncode van deze website, dan zie je of ze wel of niet afgesloten worden

Hou dan wel even rekening met het verschil in Doctypes; m.a.w. dit slaat als een tang op een varken

Verwijderd schreef op dinsdag 05 januari 2010 @ 12:50:
ik zie dat er een syntaxfout met de > bij de meta en link tag geeft. ik vind dit vreemd, die moet je toch ook afsluiten?

Er is geen syntaxfout; je hebt code=html gebruikt wat HTML syntaxhighlighting zal gebruiken. Maar je plaatst XHTML.

edit:
Ik zie dat NMe de code=html naar code=xhtml veranderd heeft inmiddels.

Met alle respect, maar ga nou eens leren waar je mee bezig bent in plaats van met een honkbalknuppel in 't donker om je heen te slaan in de hoop iets te raken. Je copy/paste vanalles blind, vergeet quotes, gebruikt verkeerde syntax (het "type" attribuut waar je een dubbele punt achter gebruikte i.p.v. een = teken) etc. maar je mist gewoon de basiskennis. Dat is niet erg, we zijn allemaal ooit bij 0 begonnen. Maar als je je die basiskennis niet eigen maakt dan blijf je aanrommelen en komt het gewoon niet goed.

[ Voor 68% gewijzigd door RobIII op 05-01-2010 13:14 ]

[macciez]

RobIII schreef op dinsdag 05 januari 2010 @ 13:10:

Hou dan wel even rekening met het verschil in Doctypes; m.a.w. dit slaat als een tang op een varken

Ow sorry, daar was ik niet eens van op de hoogte! Dat krijg je wanneer je ooit 1 doctype voorgeschoteld krijgt en nooit in die anderen verdiept. My bad.

[Verwijderd]

macciez schreef op dinsdag 05 januari 2010 @ 13:29:
[...]


Ow sorry, daar was ik niet eens van op de hoogte! Dat krijg je wanneer je ooit 1 doctype voorgeschoteld krijgt en nooit in die anderen verdiept. My bad.

ik heb inmiddels alle problemen opgelost, dit is de huidige stand van zaken en dus de oplossing:

allen dank!

de css:

code:

@charset "utf-8";
html, body  {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #666666;
    color: #000000;
    height: 100%;
    margin: 0;
    text-align: center;
}

.page #shadow {
    width: 865px;  
    background-image:url(images/mid.jpg);
    border: 0px;
    min-height:100%;
    height:auto !important;
    margin: auto;
} 
.page #container { 
    width: 800px;  
    margin: 0 auto; 
    border: 2px;
    text-align: left; 
} 
.page #header { 
    background: #DDDDDD; 
    padding: 0 10px 0 0px;
    background: #000000;
} 
.page #header2{
    text-align: center;
    margin-top: 10px;
    margin-bottum: 10px;
}
.page #sidebar1 {
    float: left; 
    width: 150px; 
    height: auto;
    background: #EBEBEB; 
    margin: 0 0 0 20px;
}
.page #mainContent {
    margin: 0 0 0 200px;
    padding: 0 20px;
    font-size: x-small; 
    height: auto;
    } 
.page #footer { 
    padding: 0 10px 0 20px;
    font-size: x-small;
    font-style: italic;
} 
.page #footer p {
    margin: 0;
    padding: 10px 0;
    text-align: left;
}
.Kop {
    font-weight: bold;
    font-size: x-large;
}
.page #container #sidebar1 {
    font-size: small;
}
.page #container #sidebar1 {
    font-size: x-small;
}

de xhtml:

XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>unknown</title>
<link href= "pob.css" rel="stylesheet" type="text/css" />
</head>

<body class="page">

<div id="shadow">
<div id="container">
<div id="header">
<?php 
$nr = rand(1,9); 
echo '<img src="images/'.$nr.'.jpg">'; 
?></div>
    <div id="header2">menutext</div>
  <div id="sidebar1">
    <h3>SubMenu/Updates</h3>
    <p>text </p>
  </div>
  <div id="mainContent">
   <span class="Kop">Home</span>
   <p>textp>
</div>
  <div id="footer">
    <p> &copy; text</p>
</div>
</div>
</div>
</body>
</html>

[pieturp]

Als je site nu valideert, wil je dan alleen voor mijn gemoedstoestand je doctype nog even omzetten in STRICT ipv TRANSITIONAL. Pretty please?

[Verwijderd]

pieturp schreef op dinsdag 05 januari 2010 @ 22:50:
Als je site nu valideert, wil je dan alleen voor mijn gemoedstoestand je doctype nog even omzetten in STRICT ipv TRANSITIONAL. Pretty please?

wat is het verschil hierin?

[Barleone]

Verwijderd schreef op woensdag 06 januari 2010 @ 01:50:
wat is het verschil hierin?

Aye, dat weet Google wel hoor! Het is wel 2 uur, maar dit is wel een erg luie vraag. W3school FTW, zoals ik al eerder zei! Goeienacht overigens.

[pieturp]

http://webprocafe.com/blo...al-doctype-differences-3/ (bijvoorbeeld)

[Verwijderd]

Ik hou de doctype zoals ie is, omdat ik eerst een oplossing moet verzinnen om toch een target tag toe te voegen bij een link. Dit schijnt bij strict dus niet te mogen en ik heb graag dat alle links naar buiten de website om, laden in een nieuw venster.

Ik loop helaas nog tegen een probleem aan.

ik heb de maincontent eens als test een heleboel extra tekstregels toegevoegd. Helaasloopt deze gewoon vrolijk door achter de footer en dan gewoon tot einde pagina.

de shadow div doet overigens wel goed zijn werk, deze loopt netjes mee naar beneden.

Weet iemand hoe ik dit kan oplossen?

Ik wil eigenlijk een overflow erop zetten.
ik heb deze geprobeert erin gezetten dmv

code:

overflow: auto;

toe te voegen in de css van de maincontent.
Helaas werkt dit alleen met een aangegeven hoogte. Bijvoorbeeld

code:

height: 400px;

Maar dan veranderd die niet meer mee als de pagina in een hogere resolutie wordt weergegeve

Ik heb geprobeert door de footer div niet in de container maar in de shadow div te zetten. Dit helpt helaas niets.

code is ongewijzigd ten opzichte van de laatste die ik gegeven heb. Want ik heb alle aanpassingen weer ongedaan gemaakt wegens niet werken.

op google vind ik er niks over. Ik heb gezocht op: div even groot als omliggende div, ook engelse vertaling daarvan levert niet het gewenste resultaat op.

[ Voor 15% gewijzigd door Verwijderd op 07-01-2010 15:46 ]

[Spinal]

Verwijderd schreef op donderdag 07 januari 2010 @ 15:43:
Ik hou de doctype zoals ie is, omdat ik eerst een oplossing moet verzinnen om toch een target tag toe te voegen bij een link. Dit schijnt bij strict dus niet te mogen en ik heb graag dat alle links naar buiten de website om, laden in een nieuw venster.

Het valideert niet, het werkt wel

[pieturp]

^^ Met ZanderZ. Als je perse wilt dat links zich zo gedragen, kan je beter je site nèt niet laten valideren. Eventueel kun je dat trouwens ook met JavaScript oplossen, btw.

Over je probleem: Kan je die footer niet gewoon in je mainContent plaatsen?

[Verwijderd]

pieturp schreef op donderdag 07 januari 2010 @ 20:21:
^^ Met ZanderZ. Als je perse wilt dat links zich zo gedragen, kan je beter je site nèt niet laten valideren. Eventueel kun je dat trouwens ook met JavaScript oplossen, btw.

Over je probleem: Kan je die footer niet gewoon in je mainContent plaatsen?

de maincontent is niet zo breed als de container, omdat er ook nog die sidebar (update/submenu zegmaar) naast zit. De footer is net zo breed als de shadow.

maar ik zal eens een poging wagen

[Verwijderd]

aangezien als ik mijn vorige post zou editten, ik toch geen reactie meer krijg, post ik maar gewoon erachteraan.

ik heb het probleem nog steeds niet opgelost.
ik krijg met het veranderen van de position van de footer in relative het voor elkaar gekregen dat deze mooi mee gaat met de lengte van de maincontent. Helaas is het zo dat wanneer de maincontent niet lang genoeg is om het browser te vullen. Dat de footer dus gewoon vlak onder de maincontent staat en niet onderaan de website.
de shadow div blijft wel gewoon de lengte van het browser volgen.

[MueR]

Misschien een clear:both op je footer?

[R4gnax]

pieturp schreef op donderdag 07 januari 2010 @ 20:21:
^^ Met ZanderZ. Als je perse wilt dat links zich zo gedragen, kan je beter je site nèt niet laten valideren. Eventueel kun je dat trouwens ook met JavaScript oplossen, btw.

Of je breidt je XHTML doctype uit met de juiste module en dan valideert het 'target' attribuut wel gewoon.

[Verwijderd]

MueR schreef op zaterdag 09 januari 2010 @ 15:31:
Misschien een clear:both op je footer?

in de css? Dit levert het niet op. zowel op position relative als absolute. Resultaat blijft hetzelfde bij relative zet ie dus de footer direct onder de maincontent. bij absolute zet ie m mooi onderaan de pagina, maar zodra de tekst te lang is loopt die erdoorheen en onder de footer loopt deze gewoon door.

[Verwijderd]

heb even de boel online gezet:

http://pobresh.com/Pobreshphp/
ik heb de situatie geschetst die ik dus wil voorkomen. De footer staat nu op position: absolute; maar wanneer ik deze op relative zet, zal deze netjes onderaan de pagina staan. Probleem is dat deze wanneer er geen lange text staat, gewoon direct onder de maincontent wordt gezet.

de spaties moet je dus even als text zien.

css file vind je hier: http://pobresh.com/Pobreshphp/pob.css

ik heb google er nog eens op nagezocht. Wanneer ik de position van de maincontent op absolute zet, krijg ik het zo dat de hele shadow inc container en footer niet meer onderaan de pagina komt te staan, de maincontent loopt dan wel helemaal door tot deze vol zit.

height van de maincontent op 100% werkt niet, zorgt alleen ervoor dat de overflow wordt geactiveert, maar het is nog steeds veel te groot.

ik heb dus vanalles geprobeert, maar het lijkt erop alsof dat wat ik wil, gewoon onmogelijk is.

weet er echt niemand wat op?

[macciez]

als je container en footer beide eens float naar links? dan zouden ze in principe altijd na elkaar moeten komen

edit: ow en als tekst onder een footer doorloopt, kan het ook wel eens zijn dat je een div teveel/teweinig afsluit, maar ik heb je code niet doorgekeken dus kan ik je niet zeggen. (gebeurt mij wel eens )

[ Voor 48% gewijzigd door macciez op 09-01-2010 20:09 ]

[MueR]

Ik snap eigenlijk nog altijd niet goed wat je nou wil. De footer moet dus altijd onderaan de content staan, behalve wanneer er minder hoogte is als mijn scherm groot is, dan moet deze op bottom:0; staan? Dat gaat lastig worden en het nut ontgaat me totaal. De footer gewoon altijd onder de content is geen probleem, of altijd bottom:0 ook niet, maar beiden zul je denk ik javascript voor moeten gebruiken.

[ Voor 22% gewijzigd door MueR op 09-01-2010 20:37 ]

[Verwijderd]

macciez schreef op zaterdag 09 januari 2010 @ 20:08:
als je container en footer beide eens float naar links? dan zouden ze in principe altijd na elkaar moeten komen

edit: ow en als tekst onder een footer doorloopt, kan het ook wel eens zijn dat je een div teveel/teweinig afsluit, maar ik heb je code niet doorgekeken dus kan ik je niet zeggen. (gebeurt mij wel eens )

de sidebar staat al float: left;
dus dan komt de maincontent en footer daar weer onder te staan. En hij blijft er doorheen lopen
Heb alle divs nagelopen, zijn allemaal goed afgesloten. Ik vind het zo raar dat ie de footer er niet onder zet.

[macciez]

Maar ik heb het niet over je sidebar.
Als ik met firebug kijk, zie ik dat je een div "shadow" als algemene container gebruikt met daarin de div's "container" en "footer". De div "container" krijgt geen position of float mee en je div "footer" een position:absolute. Als je die beide divs, "container" en "footer", nu eens beide float:left meegeeft, wat gebeurt er dan?

note: mocht dit je "footer onder content"-probleem oplossen, is het natuurlijk geen oplossing om je footer _altijd_ onderaan je pagina te hebben. Wat ik trouwens ook niet kan aanbevelen, net als MueR. Stel je voor je hebt 10 regels content en ik kijk op mn 27inch iMac. Dan wordt daar 30cm beeld niet gebruikt voordat ik je footer zie.

[Verwijderd]

macciez schreef op zaterdag 09 januari 2010 @ 21:13:
Maar ik heb het niet over je sidebar.
Als ik met firebug kijk, zie ik dat je een div "shadow" als algemene container gebruikt met daarin de div's "container" en "footer". De div "container" krijgt geen position of float mee en je div "footer" een position:absolute. Als je die beide divs, "container" en "footer", nu eens beide float:left meegeeft, wat gebeurt er dan?

note: mocht dit je "footer onder content"-probleem oplossen, is het natuurlijk geen oplossing om je footer _altijd_ onderaan je pagina te hebben. Wat ik trouwens ook niet kan aanbevelen, net als MueR. Stel je voor je hebt 10 regels content en ik kijk op mn 27inch iMac. Dan wordt daar 30cm beeld niet gebruikt voordat ik je footer zie.

ik wil dus zowel de footer onder de content als onderaan de pagina
en eigenlijk als de tekst te lang is voor in het browser te zetten (er komen straks sql tabellen in zichtbaar) dat de content dan een schuifbalkje krijgt.

ik ga eens kijken met dat float. In eerste instantie is het resultaat wat ik begreep dat wat ik beschreef. ik dacht dus de maincontent en de footer float left.

[macciez]

Voor de goede orde; je wilt dat je hele pagina te scrollen is of alleen het midden "content" gedeelte?
Voor scrollen van alleen je content wil je overflow:scroll wellicht gebruiken. Maar een echt mooie oplossing is dat niet.
Verder raad ik je aan om eens helemaal overnieuw te beginnen met je opgedane kennis van de laatste dagen, maar eerst goed nadenken wat je nou precies wil.

Tips om eens naar te kijken:
http://www.w3schools.com/Css/pr_pos_overflow.asp
http://www.html-site.nl/forum/3_11771_0.html
http://www.xs4all.nl/~peterned/examples/csslayout1.html

[Verwijderd]

macciez schreef op zaterdag 09 januari 2010 @ 22:04:
Voor de goede orde; je wilt dat je hele pagina te scrollen is of alleen het midden "content" gedeelte?
Voor scrollen van alleen je content wil je overflow:scroll wellicht gebruiken. Maar een echt mooie oplossing is dat niet.
Verder raad ik je aan om eens helemaal overnieuw te beginnen met je opgedane kennis van de laatste dagen, maar eerst goed nadenken wat je nou precies wil.

Tips om eens naar te kijken:
http://www.w3schools.com/Css/pr_pos_overflow.asp
http://www.html-site.nl/forum/3_11771_0.html
http://www.xs4all.nl/~peterned/examples/csslayout1.html

enkel content, maar omdat ik deze geen vaste hoogte kan geven, werkt dit dus niet.
content blijft nog steeds vrolijk achter de footer doorlopen die netjes onderaan de browser staan, maar dus niet onder de content staat. Zolang de tekst niet langer is dan de pagina, staat de footer waar ie moet staan: onderaan.

maar ik zal eens gaan proberen om alles opnieuw in elkaar te zetten en het proberen werkend te krijgen.

[Verwijderd]

helaas is het nog steeds niet gelukt

ik heb eindelijk een voorbeeld gevonden van wat ik wel ongeveer wil:
http://limpid.nl/lab/css/fixed/header-and-footer

maar als ik die css letterlijk in mijn css zet en mijn oude css even als commentaar maak, en alles omschrijf naar mijn eigen div namen (mainContent ipv content bijvoorbeeld)
doet ie toch niet wat op de link te zien is.

iemand die weet hoe dat kan?

[MueR]

Vat dit niet verkeerd op hoor, maar als je dat voorbeeld letterlijk overneemt en het werkt niet, ben je aan het prutsen.

[macciez]

position:fixed is het magische woord in die layout

[Verwijderd]

Inmiddels was ik daar al achter. probleem alleen is dat firefox die pagina niet zo interpeteert als IE. En dan bedoel ik dat in negatieve zin. Schuifbalk zit in de hele pagina en niet enkel in de content. Hierdoor krijg je dus nog het gevoel dat de hele site mee zal gaan schuiven.

maarja, ik heb het inmiddels dus gedeeltelijk opgelost. Je moet dus persee en achtergrond voor de header en footer hebben om de fixed optie goed te kunnen gebruiken.

bedankt voor de hulp

groet