[TYPO3-UG Dutch] Problemen met centreren en menu

Henjo Hoeksma hphoeksma at stylence.nl
Tue Mar 2 09:42:39 CET 2010 

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!
-- 
Met vriendelijke groet,

Henjo Hoeksma

Stylence | webdevelopment in style
www.stylence.nl

More information about the TYPO3-UG-Dutch mailing list