[TYPO3-UG Dutch] Problemen met centreren en menu

Sat Mar 6 13:30:57 CET 2010

Als je het probleem eigenlijk echt wil oplossen moet je zoeken naar een 
manier om een drop-down menu te maken zonder javascript.  T'is trouwens 
niet echt - good practice - om je hoofdnavigatie enkel en alleen van een 
javascript te laten afhangen.  IE is vervelend, maar er zijn oplossingen 
die puur CSS zijn en dus ook in IE correct werken.

Op 2/03/2010 9:42, Henjo Hoeksma schreef:
> On 2010-03-02 09:29:20 +0100, mahammer said:
>
>> Beste Henk,
>>
>> Deze heeft de al een a:hover, a:visited en een a:. Beiden krijgen de CSS:
>> color: white; Internet Explorer ziet dit als de kleur wit neem ik aan? OF
>> moet dit overal: font-color: #ffffff; Raar dat andere browsers het
>> menu wel
>> goed pakken, maar het blijft helaas IE die moeilijk doet. Ook op
>> Google heb
>> ik actief gezocht op de functie: inherit
>> (http://www.handleidinghtml.nl/css/eigenschappen/legenda/legenda02.html).
>>
>> Ik snap er niets meer van. :( Alvast bedankt voor jullie hulp!
>>
>> Mijn CSS opbouw is als volgt:
>> /** MENU SLIDEMENU **/
>> .jqueryslidemenu{
>> padding-top: 108px;
>> width: 100%;
>> }
>>
>> .jqueryslidemenu ul{
>> font: 14px Arial, Helvetica, sans-serif;
>> font-color: #ffffff;
>> list-style-type: none;
>> margin: 0;
>> padding: 0;
>> float: left;
>> }
>>
>> /*Top level list items*/
>> .jqueryslidemenu ul li{
>> padding-bottom: inherit;
>> position: relative;
>> display: inline;
>> float: left;
>> }
>>
>> /*Top level menu link items style*/
>> .jqueryslidemenu ul li a{
>> display: block;
>> /*background: #333333; /*background of tabs (default state)*/
>> font-color: #ffffff;
>> color: white;
>> float: left;
>> padding: 6px 15px 5px;
>> text-decoration: none;
>> }
>>
>> * html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to
>> behave correctly*/
>> font-color: #ffffff;
>> display: inline-block;
>> }
>>
>> .jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
>> font-color: #ffffff;
>> /*background: #E7E7E7;*/
>> }
>>
>> .jqueryslidemenu ul li a:hover{
>> border: none;
>> color: white;
>> /*background:#245289
>> url('http://www.mediamere.com/content/images/nav-selected-center.png')
>> no-repeat scroll top right;*/
>> background:#b0110c url('../images/nav-selected-center-red.png') no-repeat
>> scroll top right;
>> }
>>
>> /*1st sub level menu*/
>> .jqueryslidemenu ul li ul{
>> position: absolute;
>> z-index: 100;
>> left: 0;
>> top: 0;
>> border: none;
>> background: #333333; /*sub menu background color */
>> display: block;
>> visibility: hidden;
>> }
>>
>> /*Sub level menu list items (undo style from Top level List Items)*/
>> .jqueryslidemenu ul li ul li{
>> display: list-item;
>> float: left;
>> }
>>
>> /*All subsequent sub menu levels vertical offset after 1st level sub menu
>> */
>> .jqueryslidemenu ul li ul li ul{
>> top: 0;
>> }
>>
>> /* Sub level menu links style */
>> .jqueryslidemenu ul li ul li a{
>> font: 13px Arial, Helvetica, sans-serif;
>> width: 190px; /*width of sub menus*/
>> color: white;
>> margin: 0;
>> border: none;
>> padding: 6px;
>> padding-right: 0px;
>> }
>>
>> .jqueryslidemenu ul li ul a:visited{
>> color: white;
>> background-color:#333333;
>> }
>>
>> .jqueryslidemenu ul li ul a:hover{
>> color: white;
>> background:#555555;
>> /*url('http://www.mediamere.com/content/images/nav-selected-center.png')
>> no-repeat scroll top right;*/
>> }
>>
>> .jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
>> background:#555555;
>> }
>>
>>
>>
>>
>> Bericht van Henk:
>>> Hi Martijn,
>>>
>>> check in je CSS even de opbouw van je links en eventuele conflicten in
>>> de inheritence.
>>> a:link
>>> a:visited
>>> a:active
>>> a:hover
>>>
>>> Veel te vinden als je er op googled ;-)
>>>
>>> Succes!
>>
>>
>>
>> On Tue, 2 Mar 2010 08:54:59 +0100, Henjo Hoeksma <hphoeksma at stylence.nl>
>> wrote:
>>> On 2010-02-28 21:21:32 +0100, Martijn de Vries said:
>>>
>>>> Beste TYPO3'ers,
>>>>
>>>> Ondertussen is het gelukt om het goed te centreren! Nu heb ik echter
>>>> noghet
>>>> probleem met het menu.
>>>>
>>>> Ik heb het als volgt opgelost:
>>>> /** wrapper **/
>>>> div#wrapper {
>>>> width:950px;
>>>> margin:0 auto;
>>>> padding:0;
>>>> position: absolute;
>>>> left: 50%;
>>>> width: 950px;
>>>> margin-left: -475px;
>>>> /* height: 0px;*/
>>>> top: 0px;
>>>>
>>>> Het ging voornamelijk om de laatste 6 regels. :)
>>>>
>>>> Zouden jullie willen helpen met het menu?
>>>>
>>>> Alvast bedankt!
>>>>
>>>> Met vriendelijke groet,
>>>>
>>>> Martijn de Vries
>>>>
>>>> -----Oorspronkelijk bericht-----
>>>> Van: typo3-ug-dutch-bounces at srv02.typo3.org
>>>> [mailto:typo3-ug-dutch-bounces at srv02.typo3.org] Namens Martijn de Vries
>>>> Verzonden: zondag 28 februari 2010 20:54
>>>> Aan: marijn.depraetere at telenet.be; 'TYPO3 Usergroup Dutch'
>>>> Onderwerp: Re: [TYPO3-UG Dutch] Problemen met centreren en menu
>>>>
>>>> Beste Marijn,
>>>>
>>>> Dank je wel voor je snelle hulp! Ik heb net inderdaad een CSS
>> styleerbij
>>>> gepakt die van TYPO3 zelf is en deze geeft echter hetzelfde probleem
>>>> methet
>>>> menu weer en wil het niet horizontaal centreren.
>>>>
>>>> Op het internet kwam ik de containing box tegen, maar ik begrijp
>> hetniet
>>>> helemaal hoe dit werkt. Zou je een voorbeeld kunnen plaatsen?
>> JaInternet
>>>> Explorer is zeker vervelend om mee te werken!
>>>>
>>>> Body-wrapper heb ik aangepast. Weet jij nog een optie, naast
>> decontaining
>>>> box?
>>>>
>>>> Alvast bedankt!
>>>>
>>>> Met vriendelijke groet,
>>>>
>>>> Martijn de Vries
>>>>
>>>> -----Oorspronkelijk bericht-----
>>>> Van: typo3-ug-dutch-bounces at srv02.typo3.org
>>>> [mailto:typo3-ug-dutch-bounces at srv02.typo3.org] Namens Marijn
>> Depraetere
>>>> Verzonden: zondag 28 februari 2010 19:51
>>>> Aan: typo3-ug-dutch at srv02.typo3.org
>>>> Onderwerp: Re: [TYPO3-UG Dutch] Problemen met centreren en menu
>>>>
>>>> Dag Martijn,
>>>>
>>>> Blijkbaar zit je probleem ergens in je CSS, niet onmiddellijk in TYPO3
>>>> denk ik. Maak je gebruik van CSS-styles die ook eigen zijn aan TYPO3?
>>>>
>>>> Als ik snel even op je CSS kijk zie ik onder andere dat je de
>>>> horizontale center via margin: 0 auto uitvoert, maar da's nogal
>> moeilijk
>>>> voor IE. Beter werk met een containing box die je dan via text-align:
>>>> center in de body centreert. In de box zelf doe je dan een text-align:
>>>> left. T'is wat primitief, maar dat is IE ook hé. Ook werk je met een
>>>> IE-specifieke hack, wat eigenlijk altijd een slecht idee is.
>>>>
>>>> Ook merk ik ergens de div 'body-wrapper' op, ben het niet zeker, maar
>> ik
>>>> vermoed dat TYPO3 (t'is te zeggen de RTE) hier ook gebruik van maakt.
>>>> Probeer anders eens dit te veranderen in 'container' of 'box' of
>> zoiets.
>>>>
>>>> Ten laatste kan het ook zijn dat je javascript-aangedreven menu een
>>>> aantal dingen verlangt van IE dat hij (nog) niet snapt, en hierdoor je
>>>> content breekt.
>>>>
>>>> T'is allemaal wat gokken, maar ik denk dat, als je website wel goed
>>>> werkt in FF, maar niet in IE, dat het probleem meer bij je template
>> ligt
>>>> dan bij TYPO3 zelf.
>>>>
>>>> Succes,
>>>> Marijn
>>>>
>>>> Op 28/02/2010 19:32, Martijn de Vries schreef:
>>>>> Beste TYPO3’ers,
>>>>>
>>>>>
>>>>>
>>>>> Ik sta voor een merkwaardig probleem met mijn TYPO3 website. Morgenwil
>>>>> ik
>>>>> mijn nieuwe website lanceren, maar echter krijg ik mijn pagina niet
>>>>> inhet
>>>>> midden op Internet Explorer en werkt het menu niet naar behoren.
>>>>>
>>>>>
>>>>>
>>>>> De website is als volgt:
>>>>> http://www.server.mediamere.com/cms/index.php?id=1248
>>>>>
>>>>>
>>>>>
>>>>> Als ik de website los bekijk in Internet Explorer zie ik hem wel op de
>>>>> juiste manier, zie
>> hier:http://www.mediamere.com/content/indexcmsv2.html
>>>>>
>>>>>
>>>>>
>>>>> Weet iemand hoe het kan dat ik mijn website niet in het midden
>> krijg?Ik
>>>> heb
>>>>> al meerdere opties geprobeerd, maar niets blijkt te werken. Ook
>> hetmenu
>>>>> klapt op een vreemde menu uit en hoort verticaal uit te klappen,
>> maarin
>>>>> Internet Explorer denkt hij daar heel anders over en klapt hij
>>>>> 2verticale
>>>>> uit en dan verder horizontaal. Het lijkt een eenvoudige kwestie,
>> maarik
>>>> zit
>>>>> met de handen in mijn haar.
>>>>>
>>>>>
>>>>>
>>>>> Ik voeg de template altijd in bij de optie: TEMPLATES à ConstantEditor
>>>>> en
>>>>> dan template (basic) en de CSS op dezelfde manier, maar dan
>> bijcontent.
>>>>>
>>>>>
>>>>> Hopelijk zouden jullie mij kunnen helpen en de fout ontdekken!
>>>>>
>>>>>
>>>>> Alvast bedankt!
>>>>>
>>>>>
>>>>>
>>>>> Met vriendelijke groet,
>>>>>
>>>>>
>>>>>
>>>>> Martijn de Vries
>>>>>
>>>> _______________________________________________
>>>> TYPO3-UG-Dutch mailing list
>>>> TYPO3-UG-Dutch at lists.typo3.org
>>>> http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-ug-dutch
>>>>
>>>> Geen virus gevonden in het binnenkomende-bericht.
>>>> Gecontroleerd door AVG - www.avg.com
>>>> Versie: 9.0.733 / Virusdatabase: 271.1.1/2714 - datum van
>>>> uitgifte:02/28/10
>>>> 08:34:00
>>>>
>>>> _______________________________________________
>>>> TYPO3-UG-Dutch mailing list
>>>> TYPO3-UG-Dutch at lists.typo3.org
>>>> http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-ug-dutch
>>>>
>>>> Geen virus gevonden in het binnenkomende-bericht.
>>>> Gecontroleerd door AVG - www.avg.com
>>>> Versie: 9.0.733 / Virusdatabase: 271.1.1/2714 - datum van
>>>> uitgifte:02/28/10
>>>> 08:34:00
>>>
>>> Hi Martijn,
>>>
>>> check in je CSS even de opbouw van je links en eventuele conflicten in
>>> de inheritence.
>>> a:link
>>> a:visited
>>> a:active
>>> a:hover
>>>
>>> Veel te vinden als je er op googled ;-)
>>>
>>> Succes!
>
> Wanneer je eenmaal over de links bent geweest in IE, zie ik dat het
> daarna gewoon zichtbaar is. Ik denk dat je moet zoeken in de jQuery.
> Belangrijk is dat je - wanneer je een menu gebruikt dat iemand heeft
> gepost - goed kijkt naar hun CSS. CSS is door middel van JS
> overschrijfbaar, zoals zoveel dingen...
>
> Succes!