Help

  • Onderwerp starter Onderwerp starter Verwijderd lid 141197
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.
V

Verwijderd lid 141197

Ik ben bezig met een website daarvoor heb ik een aardig grote achtergrond gemaakt die belangrijk is voor het ontwerp.

deze achter grond is geloof ik 2000 x 750 px

nu ga ik met javascript/jquery een content load systeem maken waarbij je ipv. van pagina wisselt naar links en recht "scrolld"

dus het ik ook een plaatje voor deze delen van de achter grond(dit zit in een ander plaatje omdat deze niet bij pageload geladen moeten worden maar pas als er op geklikt wordt)

nu het gene waar ik niet uitkom:

ik wil dat als iemand de resolutie van 1024 X 768 heeft dat de achtergrond in het midden gecentreerd wordt(zoals altijd) en dat er geen scroll balken te zien zijn.

Maar ook dat als iemand een resolutie heeft van bijv. 1440 X 900 dat de achtergrond in het midden gecentreerd wordt(zoals altijd) en dat de afbeelding boven wordt aangevuld met blauw, onder met bruin, en rechts en links met een opvult plaatje dat ik al heb gemaakt.

is dit mogelijk met css?:confused:

Ps. er is vast een makkelijke oplossing maar ik kreeg er al snel hoofd pijn van:(
 
Hoi A Search,
Ja, volgens mij kan met css (bijna) alles! :D
Ik zit aan het volgende te denken:
  • Je maakt eerst een pagina aan met hoe de "eerste pagina" er uit moet komen te zien.
  • Daarbij geef je niet aan de body het background-img (en eventuele andere pagina-eigenschappen) mee, maar aan een "wrapper div" die alles omvat wat op die pagina moet komen (zoals div's met kolommetjes links en rechts van de content-op-een-bepaalde-breedte).
HTML: 
<body>
<div id="wrapper-blad1">

   ... de hele pagina, met css geschikt gemaakt voor verschillende resoluties.

</div>
</body>
  • Als dit klaar is, maak je de versie voor de "tweede pagina" aan, eerst nog even als aparte pagina om makkelijk te kunnen werken.
  • Ook hier geef je niet de body het background-img mee, maar een "wrapper div" die alles omvat wat op die andere pagina moet komen.
  • Gebruik niet dezelfde ID's voor de verschillende div's, zodat de css voor de "nieuwe pagina" mooi gescheiden kan blijven.
HTML: 
<body>
<div id="wrapper-blad2">

   ... de hele pagina, met css geschikt gemaakt voor verschillende resoluties.

</div>
</body>
  • Als beide aparte pagina's op smaak zijn gebracht, ga je ze in elkaar timmeren in een combi-pagina:
HTML: 
<body>
<div id="wrapper-blad1">

   ... hele blad 1, met css geschikt gemaakt voor verschillende resoluties.

</div>

<div id="wrapper-blad2">

   ... hele blad 2, met css geschikt gemaakt voor verschillende resoluties.

</div>
</body>
Nu alleen nog even de css aanpassen, met een style-ingreep om blad 2 te verbergen als je de pagina opent:
Code: 
#wrapper-blad2 {
   position: absolute;
   left: 0;
   margin-left: -9999px;
   }
Een stukje javascript voor de "pagina-wissel", zoiets als:
[JS]function wisselBlad(){
if ( blad2.style.position == 'absolute'){ // als blad 1 voor staat
blad1.style.position = 'absolute';
blad1.style.left = '0';
blad1.style.marginLeft = '-9999px'; // buiten zicht zetten

blad2.style.position = 'relative';
blad2.style.left = ' ';
blad2.style.marginLeft = 'auto'; // voor het centreren
}
else { // als blad 2 voor staat
blad2.style.position = 'absolute';
blad2.style.left = '0';
blad2.style.marginLeft = '-9999px'; // buiten zicht zetten

blad1.style.position = 'relative';
blad1.style.left = ' ';
blad1.style.marginLeft = 'auto'; // voor het centreren
}
}[/JS]
  • En dan hoef je alleen in de html als links naar het andere deel van je combi pagina te zetten:
HTML: 
<!-- ergens in #wrapper-blad1 -->
<p><a href="#" onclick="wisselBlad()">Ga u maar naar het vervolg</a>.</p>
...
<!-- ergens in #wrapper-blad2 -->
<p><a href="#" onclick="wisselBlad()">Ga u maar naar waar u vandaan kwam</a>.</p>

Op deze manier kun je er desgewenst ook nog tig "nieuwe pagina's" bij maken (met iets aangepast javascript).

Het tragische is alleen, dat mensen met uitgeschakeld javascript nooit-en-te-nooit op je Blad2 kunnen komen. :confused:
Vandaar mijn vraag: waarom zou je het op deze manier willen, en waarom maak je er niet gewoon twee losse pagina's van?

Met vriendelijke groet,
CSShunter

PS:
Bovenstaande gaat er van uit dat je op de pagina's denkt dat het om een andere bladzij gaat als je doorklikt (dus zonder links-rechts scrollbar onderaan).

Als je wel een scrollbar beneden neemt (dus Blad1 en Blad2 allebei naast elkaar aan zet) om altijd naar de andere kant te switchen, zou het waarschijnlijk ook kunnen als je met javascript een "resolutie-sniffer" inbouwt, die dan voor op de breedte aangepaste css zorgt. Maar alles is afhankelijk van het ontwerp van de pagina!
 
Laatst bewerkt:
je hebt perfecte code gemaakt van wat ik al heb of ging maken: maar aan mijn probleem heb je geen woord vuil gemaakt:o

maar dat maakt niet uit want ik had het toch al opgelost:thumb:(op een hele andere manier dan ik eerst probeerde)

over de javascript/jquery pagina wissel:

ik wil het omdat: het mooier is:D

ik heb een systeem gemaakt waarbij het werkt met en zonder js:

met jquery op het a element een click functie gezet daar in de wissel functie en aan het einde van de functie: return false
waardoor hij dan niet door link. In de a's staan de pagina's waar hij heen moet als js uit staat:thumb:

verder om te zorgen de de url's er het zelfde uit zien gebruik ik .htacces en document.location.hash ;)
 
Je hebt perfecte code gemaakt van wat ik al heb of ging maken: maar aan mijn probleem heb je geen woord vuil gemaakt :o
Klik om te vergroten...
Uit je vraagstelling maakte ik op dat het ging om de complicatie door de dubbele pagina. Als het alleen ging om de bg-positionering bij verschillende resoluties, was het melden van de dubbele pagina geen relevante info.
In het dwaalspoor getrapt! :p

...maakt niet uit want ik had het toch al opgelost :thumb:
Klik om te vergroten...
Dat is prachtig :), en nog prachtiger zou een Edit "Intussen zelf al opgelost" en een direct vinkje "vraag opgelost" zijn geweest - had mij een ruim halfuur aan bedenken en mooi noteren van m'n reactie gescheeld. :)

ik wil het omdat: het mooier is
ik heb een systeem gemaakt waarbij het werkt met en zonder js: ...
Klik om te vergroten...
Kijk, dat wist ik niet, maar zo wil ik het graag zien: toegankelijk voor iedereen: toppie! :thumb:

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan