extra hoogte door script??

Status
Niet open voor verdere reacties.
M

motower

Gebruiker
Lid geworden
10 aug 2004
Berichten
472
Hallo,
Ik wordt gek van een paar pixels!
Een van de pagina's van een website bevat een gallery en daarvoor staan er in de head wat verwijzingen (zie onder). Helaas resulteert dit in blijkbaar wat extra hoogte, want bij de rest van de pagina's staat de navigatie net iets lager.
Wie weet hoe dit kan, of beter gezegd: hoe dit op te lossen????


...............

<!-- InstanceBeginEditable name="doctitle" -->
<title>Strongbeads :: Powerful Unique Jewellery</title>
<script type="text/javascript" src="../easyslider1.7/js/jquery.js"></script>
<script type="text/javascript" src="../easyslider1.7/js/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});</script>
<link href="../easyslider1.7/css/screen.css" rel="stylesheet" type="text/css" media="screen" />

<!-- InstanceEndEditable -->

..................
 
Hoi motower,
Wie weet hoe dit kan, of beter gezegd: hoe dit op te lossen????
Klik om te vergroten...
Tja, ik denk dat dat zonder de html, de css en de inhoud van de javascripts erg moeilijk (lees: helemaal niet) te duiden is. ;)

Nu had vroeger iemand hier wel een glazen bol, maar die schijnt kapot gevallen te zijn...
Heb je een link?

Met vriendelijke groet,
CSShunter
 
Oeps!!!! Ja natuurlijk .....
We zijn de site nog aan het maken en hebben 'm voorlopig even hier gezet:

http://mo-vormgeving.nl/strongbeads/Powerful_Unique_Jewellery/gallery_strongbeads.html

Het gaat ook om deze pagina, de andere pagina's zakt de navi dan iets naar beneden.

http://mo-vormgeving.nl/strongbeads/easyslider1.7/css/screen.css
http://mo-vormgeving.nl/strongbeads/easyslider1.7/js/easySlider1.7.js
http://mo-vormgeving.nl/strongbeads/easyslider1.7/js/jquery.js

Hopelijk kun je hier iets mee.
 
Laatst bewerkt:
Da's beter!
Ja, een paar pixels kunnen soms je een kilo uitgetrokken haren bezorgen. Diagnose:
  1. Er is een verticale afwijking.
  2. Oeps. Er is ook een horizontale afwijking: op 1024*768px is alleen de Gallery goed. De andere pagina's hebben wat meer linkermarge, en zijn net te breed: krijgen een hor. scrollbar.
De verticale afwijking zit in de body{line-height:180%;} die alleen in de screen.css van de Gallery zit. :)
Dat is alvast de helft, nu geen tijd meer.

Wordt vervolgd!
Met vriendelijke groet,
CSShunter
_________
PS: ontdekt met Firefox' Firebug; die bij bezichtiging van de html-code de aangewezen elementen een background-markering geeft. Daarin zie je dat binnen de 25px hoogte van de menu <td> de letters hoger of lager staan. In de css-tabel ter rechterzijde kan je analyseren waarom.
 
Laatst bewerkt:
Ah, de horizontale afwijking zit in de body. In de screen.css van de gallery staat:
Code: 
body {
   ...
   margin: 0;
   }
In alles staat in de <head>:
Code: 
body {
   ...
   margin-top: 90px;
   margin-bottom: 30px;
   }
En dan is in de niet-Gallery pagina's de linker- en rechter-margin niet gereset op 0.
(Ongevraagd zit er altijd wat speling in de margin-top en margin-left van de body; daardoor kwam ook die extra L/R scrollbar erbij).
Oplossing is om overal te gebruiken:
Code: 
body {
   ...
   margin: 90px 0 30px 0;
}
Help dat?

Met vriendelijke groet,
CSShunter
__________
PS: Nu mag ik nog even mopperen op de tabellen voor de opmaak. Brr! Die verduisteren nogal ernstig hoe de ene pagina al of niet hetzelfde is als de andere. En er zitten wat achterhaalde (= eigenlijk verboden) eigenschappen in als align="...".
Dat kan veel beter en mooier met css :), en dan is het ook steeds voor elke pagina hetzelfde (en desgewenst in 1 klap voor alles tegelijk te wijzigen).
 
Nou, tot zo ver echt HARTSTIKKE BEDANKT!!!!! :d
Ik heb de linker en rechtermarge op 0 gezet en een beetje zitten "frutten" met die lijnhoogte. Misschien dat we nog rollovers maken in de navi, maar voorlopig is ie bij mij zo goed (in verschillende browsers bekeken en overal o.k.). Ik kijk 1680x1050, maar heb de buitenste tabel op 1000 p. gezet zodat ie op 1024x768 ook goed te zien is (tenminste dat is de bedoeling).

Weet jij trouwens waarom je soms, als je op de pagina van die gallery komt, alleen maar een cm. foto of zo ziet. De gallery wordt dan helemaal niet goed weergegeven?

Tja, die tabellen, daar zou ik me eens in moeten verdiepen, ik doe nu alleen alle teksten in css. In dit geval verschillen de tabellen allemaal wel per opmaak van de pagina. Maar dat is natuurlijk niet altijd zo.
 
Kijk-kijk, het frutten met de line-height is bijna gelukt, maar net niet helemaal: bij mij verspringt de menu-regel nog net 1px. :p
Dat komt omdat die {line-height: 80%;} wel in de screen.css (eigenlijk: slider.css) staat, maar niet in de gewone stijl.css (of de embedded style in de <head>).
Je kunt twee dingen doen:
  • ofwel schrappen uit de screen.css,
  • ofwel toevoegen aan de stijl.css (dan kan ie óók uit de screen.css, want de stijl.css geldt voor alle pagina's).
Dan komt het menu altijd exact op de 1/10 pixel precies op dezelfde hoogte. :D
Ik zou voor de schrappen-optie kiezen, want je weet nooit of die (te kleine) line-height van 80% op een gewone pagina zou kunnen gaan opspelen in de teksten. Dan moet je je daar weer ongans voor gaan zitten zoeken.
In één moeite door zou ik ook de embedded styles even opnemen in de stijl.css, dan ben je daar ook van af.

Weet jij trouwens waarom je soms, als je op de pagina van die gallery komt, alleen maar een cm. foto of zo ziet. De gallery wordt dan helemaal niet goed weergegeven?
Klik om te vergroten...
'ns even kijken ....
(terug van weggeweest)
Hm, bij mij heeft alleen Chrome kuren; Firefox, Safari, Opera en (jawel!) IE7 doen het prima. In Chrome gaat het goed vanaf collection.html komende; maar bij een refresh wordt alleen de bovenste halve cm van een slide getoond, en gaat de afstand van het sliden ook mis.
De demo-pagina van Easyslider (http://cssglobe.com/lab/easyslider1.7/03.html) heeft er echter in Chrome geen last van.
Misschien is Chrome zo overijverig om heel snel een pagina te tonen, dat de javascript-variabelen van de vorige pagina nog een beetje blijven hangen. Want als ik in het Chrome-menu: Extra > Hulpprogramma voor ontwikkelaars ga kijken, zie ik dat er toch echt door het script een hoogte van 20px aan de <div id="slider"> is toegekend, en een breedte van 880px:

slider1.gif

terwijl het bij de eerste keer volledig vertonen gaat zoals het hoort:

slider2.gif

Tja... :rolleyes:

Met vriendelijke groet,
CSShunter
 
Hé csshunter, top weer!!
Ik heb die lineheight eruit gegooid (en nog wat h's), dat is inderdaad beter, want voor de teksten vind ik het juist mooier als ie wat ruimer staat en wil natuurlijk niet nog meer conflicten en ....... voila alle pagina's staan nu gelijk. Pfffffff.

Nu heb ik nog even zitten staren in alle codes of ik wellicht ergens iets kon vinden met de afmetingen 800 en 20 waardoor dat andere misschien veroorzaakt zou kunnen worden, maar vooralsnog kan ik niets vinden en is het mij dus (uberhaupt!!) een raadsel. Ik probeer natuurlijk nog of ik ergens iets "zie", maar als je op een zeker moment ineens een heldere inval krijgt dan houd ik me aanbevolen.

Tot zover heel erg bedankt en ik heb weer iets geleerd!:d:d:d
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan