login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Hoe 2 (achtergrond)div hoogte instellen over volledige inhoud pagina?

Offline Jorisvh - 26/12/2016 22:37 (laatste wijziging 26/12/2016 22:38)
Avatar van JorisvhLid Zie: http://www.welenhoeck.byethost14.com/jml/

Ik heb 2 div ingesteld voor de achtergrond.
Bedoeling is een schaduwrand tot heel beneden de pagina (onderaan inhoud) en nog 1 met een achtergrondkleur.
Bedoeling is zo kaders in te stellen (linker- en rechterkant) . Maar blijkbaar is dit nog maar voor een gedeelte van de paginalengte. Hoe kan dit over de volledige paginalente?

6 antwoorden

Gesponsorde links
Offline Thomas - 28/12/2016 15:45
Avatar van Thomas Moderator Dit is het derde topic wat je opent over dezelfde site. Hoe staat het met de andere vraagstukken?

Al heb ik dit niet zo duidelijk verwoord in de andere topics doe ik hier nogmaals een poging. Allereerst een algemene opmerking: je template bevat teveel overbodige containers èn stijlregels. Dit alles bij elkaar zorgt ervoor dat je steeds verder in de modder vast komt te staan. Zoals eerder aangegeven: vereenvoudig dit eerst eens? Position: absolute is meestal niet het beste idee omdat dit elementen uit de "flow" van de pagina haalt en daarmee kan het berekenen van afmetingen (zoals de hoogte van een pagina) problematisch worden. Absolute positionering is daarom mogelijk iets wat je zou moeten vermijden in je pagina-opbouw.

Specifiek advies: je hebt maar één echte content-container nodig. Deze geef je een vaste breedte en centreer je horizontaal met margin: 0 auto;. Zorg dat je alle andere absolute positioneringen, marges en overbodige divs kwijtraakt.

Vervolgens kun je de volgende truuk toepassen voor een doorgetrokken kantlijn: maak een afbeelding van 1 pixel hoog en (breedte content div + 2 * de breedte van de schaduwkantlijn) breed. Stel deze afbeelding vervolgens als background-image van je body in, en zorg ervoor dat deze ook gecentreerd is en verticaal wordt herhaald. Zoiets dus:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. body { background: #4f421f url("/pad/naar/achtergrond.gif") repeat-y 50% 0; }

Op deze manier valt deze kantlijn dus precies over/achter de gecentreerde div. Mogelijk moet je de body nog height: 100% meegeven en ontdoen van de standaard marges/padding.

Graag hoor ik wel wat terugkoppeling over wat je hebt geprobeerd en een update over de status van je andere topics voordat je een volgend topic (met in wezen hetzelfde onderwerp) opent... Thanks.
Offline Jorisvh - 28/12/2016 21:38 (laatste wijziging 28/12/2016 21:54)
Avatar van Jorisvh Lid Position: absolute heb ik weggelaten.
Ik heb dan bij:
div#achtergrond1 {
padding-left: 38px;
padding-right: 48px;
}
ingesteld. Nu worden mijn kaders links en rechts goed weergegeven.
Maar heb nog een paar problemen:
Ik wil dat die kaders nog verder naar onder doorlopen volgens de lengte van de inhoud!
Bij het verkleinen van mijn venster wordt de achtergrondafbeelding niet goed weergegeven. Bedoeling is dat <div id="achtergrond2"> steeds volledig gevuld blijft met die achtergrondsafbeelding.
Offline Thomas - 29/12/2016 01:12
Avatar van Thomas Moderator Je #left menu heeft nog steeds een absolute positionering. Deze hoeft dan niet gefloat te worden.
Vervolgens hoeft #inhoud dus ook niet gefloat te worden.

Wanneer je floats gebruikt zul je deze divs na afloop moeten "clearen" anders worden dimensies/hoogtes/achtergronden niet doorgetrokken. Maar nog beter is wellicht het vermijden van floats.

Verder kun je volgens mij nog steeds een aantal divs schrappen omdat ze effectief niets doen.

En verder zou je eens kunnen kijken naar wat W3C van je HTML denkt.
Offline Jorisvh - 29/12/2016 21:52 (laatste wijziging 29/12/2016 22:03)
Avatar van Jorisvh Lid Ik heb 1 div kunnen schrappen: container

Maar het lukt mij niet om floats te mijden. Dan wordt de div inhoud gewoon geplaatst onder de left div, dus onder het menu.

Ik heb bij de divs achtergrond1, achtergrond2, top, main, inhoud het volgende ingesteld:
width: auto;

Op mijn smartphone word het logo niet volledig weergegeven en het menu + inhoud worden te groot weergegeven.
Hoe kan ik het nog beter instellen?

Let wel: ik gebruik Joomla voor deze website en pas de template in joomla zelf aan!
Offline Thomas - 30/12/2016 14:46
Avatar van Thomas Moderator Je verandert nu wéér het onderwerp. Hebben we het nu ineens over mobiele weergave / responsive design? Dit is een apart vraagstuk en hoort hier niet thuis.

Je kunt floats op de volgende manier vermijden:
Positioneer het menu absoluut ten opzichte van de container.
Geef de content een linker marge ter breedte van je menu.

Een mobiel design zou ik anders in elkaar zetten mede omdat je op een smartphone gewoon minder plek hebt om dingen weer te geven.
Offline Jorisvh - 05/01/2017 21:20 (laatste wijziging 07/01/2017 09:38)
Avatar van Jorisvh Lid
Thomas schreef:
Een mobiel design zou ik anders in elkaar zetten mede omdat je op een smartphone gewoon minder plek hebt om dingen weer te geven.



Het antwoord op dit forum heb ik zelf gevonden!! Het kan met javascript.

function getDocHeight() {
var D = document;
return Math.max(
D.body.scrollHeight, D.documentElement.scrollHeight,
D.body.offsetHeight, D.documentElement.offsetHeight,
D.body.clientHeight, D.documentElement.clientHeight
);
}

function myFunction() {
d = getDocHeight();
document.getElementById("achtergrond1").style.height=d+"px";
}


en in index.php:
<body onload="myFunction()" onresize="myFunction()" >
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.169s