Aantal pixels vanaf kantlijn?

Status
Niet open voor verdere reacties.
V

van.beurten

Gebruiker
Lid geworden
8 sep 2000
Berichten
530
Ik ben bezig een website te bouwen met AP-div's en heb de site 200 px van de kantlijn laten beginnen..Nu denk ik dat die 200 px teveel is om de ws op allerlei schermen goed over te laten komen..Graag uw advies.
Vriendelijke groeten.
(Ik heb de site tijdelijk online: http://www.ufoto.nl )
 
je wil de site in het midden hebben? margin: auto 10px; zou hem in het midden moeten zetten voor alle browsers behalve ie8 ;)
 
Ja, die 200px vanaf links is inderdaad te veel. Die kom je precies tekort aan de rechterkant als je de site op 1024x768px bekijkt.
Wat je zou kunnen doen:
Code: 
body {
   ... (wat er al aan eigenschappen staat)
   width: 996px;
   margin: 0 auto;
   position: relative;
   }
Je zou het niet zeggen, maar deze relatieve body-positie is relatief voor wat binnen de body zit!
En ook voor de apDivs binnen de body (dat zijn ze dus allemaal).

Vervolgens kan je dan ook bij alle apDiv's 200px aftrekken van de left: ..px waarde.
Nu staat de site bij 1024x768px in volle glorie beeldvullend op scherm, en bij hogere resoluties gecentreerd.

Met vriendelijke groet,
CSShunter

Edit
Ah, kruispost!
@royb3: moet het niet {margin: 10px auto;} zijn wat je bedoelt? ;)
Vraag: waarom zou IE8 dat niet oppikken (bij een opgegeven breedte)? In de loop der jaren veel vreemde IE-verschijnselen gezien, maar niet zo'n superbug in IE8. - O, ook tikfoutje, en IE6 bedoeld? Dat komt meer in de richting! Maar IE6 was net de eerste IE die het wel kon dacht ik; t/m IE5.5 moest je rare toeren uithalen met <center> en text-align:center en wrappers met weer text-align:left voor de compenstatie.
/Edit
 
Laatst bewerkt:
weet ik niet, ie8 doen het gewoon niet, voor ie8 moet je in de body text-align:center; en dan in de container text-align:left;
veel gepruts mee gehad op mijn ehbo-site ;)
voorzover ik wist was het auto 10, ik zal even kijken...
edit:
wat ik heb, jij had dus gelijk ;)
Code: 
@charset "utf-8";
*{
	padding:0px;
	margin:0px;
}
body{
	background:url(pat.png);
	text-align: center;
}
#container{
text-align: left;
background-color:#FFFFFF;
width:900px;
position:relative;
height:1200px;
margin: 20px auto;
overflow-x: scroll;
padding:10px 10px;
}
 
Laatst bewerkt:
Oeps! :shocked: Stop de persen!
Nu zie ik dat Dreamweaver met z'n apDiv's ook een andere kool gestoofd heeft.
Op de vervolgpagina's lopen de teksten bij het minste geringste uit de vakjes. *)

Dat zou je kunnen oplossen door bij al die apDiv's een {overflow:auto;} te zetten, maar dan krijg je van die lelijke en onhandige extra scrollbalkjes.

Tijd voor algehele reorganisatie vrees ik: weg met de apDiv's! Niets meer absoluut, en de vakken er in zetten met floats. Deze kunnen keurig (vanzelf) in de hoogte meerekken als de tekst dat nodig heeft.

Zie ook de twee voorbeelden in deze reactie bij een andere post: apDiv's zijn niet te vertrouwen.

Met vriendelijke groet,
CSShunter
__________
*) Bv. als de bezoeker de kleine lettertjes in z'n browser vergroot om te kunnen lezen wat er staat.
 
apsolute divs zijn wel handig hoor, maar dan wel in een relative div
 
Terzijde
@royb3:
Moet je voor de grap eens deze uitproberen op IE8:
Code: 
@charset "utf-8";
*{
	padding:0px;
	margin:0px;
}
html {
	background:url(images/pat.png);
}
body{
	width: 900px;
	margin: 20px auto;
	padding: 10px;
	background: #FFFFFF;
	height: 1200px;
	position: relative;
	overflow-x: scroll;
}
Als ik dat doe, krijg ik deze:
En daar heeft IE8 geen problemen mee ... "maar ik heb Windows".
Gaat het soms mis op een ander OS?
 
op school werkte het anders niet :D
als je ehbo-hvh.nl test op ie8? de eerste druk werkt niet op ie8.
edit:
hier op ie9 ook niet
 
@royb3:

Ja-ha, en de ehbo-hvh.nl doet het hier ook niet op IE7.
Maar IE wil wel héél graag een geldig Doctype zien! :p
Daarna kan de #wrapper uitgezwaaid worden en in de css gerust overgegaan worden tot centreren via de <body>-tag:
Code: 
html {
	background: #99CCFF;
}

body {
	margin:5px auto;
	width:900px;
	height:1200px;
	background:#ffffff;
	position:relative;
}
Einde terzijde!
==============

@van.beurten:
We zijn de originele vraag niet vergeten hoor! :)
Daar staat hierboven al het een en ander over opgemerkt, met als mijn conclusie: afstappen van de apDiv's en overgaan tot drijvende elementen is de beste garantie voor cross-browser en lettergrootte-onafhankelijke werking.

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
zie door de bomen...

aii, ik zie nu door de bomen het bos.........
wat kan ik nu het beste doen??
 
Oeps, daar is van.beurten: hallo!
M'n vorige "Mmm" was een kruispost, die sloeg op nr. #10.

Mijn conclusie, zoals onderaan in nr. #9: het beste is om i.p.v. apDiv's gefloate div's te gaan gebruiken.
Ik zal kijken of ik vanavond een beginnetje kan maken ter illustratie.

Met vriendelijke groet,
CSShunter
 
@royb3 als je nog verder wilt discussiëren over je eigen site, maak dan even een nieuw topic aan. De manier waarop het nu gaat komt het overzicht in dit topic niet ten goede.

Met vriendelijke groet,

Erik Booij
Moderator Helpmij.nl
 
Haha, maar dat was te laten zien dat de manier ik beschreef de site wel centreert ;)
 
Dat begrijp ik en ik neem het je verder niet kwalijk, maar het werd een flinke discussie.

Ook hier gaan we niet verder op in. Dit topic is voor het probleem van van.beurten.
 
En daar komt ie dan, gecentreerd en schaalbaar qua lettergrootte, zonder die vermaledijde apDiv's:
Alle css staat in de broncode. NB: de link naar het stylesheet van het Sprymenu moet het eerst, daarna de nieuwe styles, anders gaat het niet goed!
Het hoveren over de figuren is nu met een css-hover gedaan: daarmee kan het hele javascript voor het preloaden en die MM_swapImgRestore-bende richting prullenbak. :D

Met vriendelijke groet,
CSShunter
 
dankjewel!

dankjewel voor alle moeite en de oplossing 'csshunter'! Nog even de vraag hoe ik dit nu in mijn dreamweaver krijg...
 
Ja, goeie vraag! Omdat ik niet met Dreamweaver werk, weet ik niet precies hoe het ingevoegd moet worden via het DW-scherm/systeem.
Wat ik gedaan heb, is even alle styles (die nog in de <head> stonden) losgekoppeld, en in een apart stylesheet gezet.
Het principe gaat nu als volgt:
Nu heb ik ook een aantal images wat aangepast, om binnen de goede maten van de blokjes te passen. Dat zijn allemaal background-images (in de html-code zitten nu geen images meer).
  • De plaats daarvan bij mij is te vinden in het stylesheet, en die kan je ook downloaden.
  • De images zet je in je eigen images-mapje, zodat DW ze kan uploaden.
  • Vervolgens open je het bvanb-styles.css stylesheet, en kan je de verwijzingen naar de images (die nu naar mijn site gaan) aanpassen naar jouw images-mapje.
  • En dan kan ook het stylesheet geupload worden naar je server.
Er resteert nog de nieuwe html-pagina met het begin van de homepage (waar nu de styles uit de <head> verdwenen zijn).
Om die in Dreamweaver te krijgen is het denk ik het makkelijkste:
  • In DW een nieuwe pagina aanmaken.
  • Daarin naar de code-weergave gaan, en wat er al aan code in staat, helemaal wissen.
  • Vervolgens daarvoor in de plaats de code van de pagina bvanb-nw-2.htm inplakken.
In deze verse pagina moeten nu nog een paar dingen aangepast worden:
  • De regels 6, 7 en 8 kunnen er uit. Op die plek kan er nog in: een <meta>tag met de "description", en een <meta>-tag met de "keywords" (hoewel zoekmachines met de laatste niet of niet erg veel rekening houden).
  • De titel natuurlijk.
  • In regel 12 moet de vindplaats van het stylesheet in jouw betreffende mapje opgegeven worden.
  • En tenslotte kan je de pagina aanvullen met wat je er in wilt hebben.
Daarna de pagina uploaden en kijken of ie werkt! :)

Voor vervolg-pagina's kan je deze pagina kopiëren om de structuur alvast te hebben.
Bij andere kleuren voor de vakjes kan het bg-img bigLeftWhite_MediumRightRed.gif anders ingekleurd worden, enz.

Zou het zo lukken?

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

Nieuwste berichten

Terug
Bovenaan Onderaan