Css en crossbrowser=

[CrankyGamerOG]

Laat ik voorop zeggen dat ik op het absolute nulpunt begin mbt css en html.Maar omdat ik het toch wil leren ben ik ermee aan de slag gegaan.Flink wat tutorials gevold etc, overal word netjes uitgelegd hoe ik kan positioneren etc met float e.d. (subvraag : Waarom is er geen float:center ? )
Maar wat ik (en dat zal zeker aan mij liggen) nergens tegenkom is hoe ik de verschillende gedeelten positioneer op "de totale index".
Met een float right zal ik hem aan de rechterkant duwen, zover kom ik nog mee, vice versa voor float:left.
Maar hoe geef ik aan dat bijv het ene element boven het andere moet staan?

Stel ik heb een ul menu bovenin die dmv css op float left hangt.
Als ik dan de regel eronder een image plaats komt deze rechts langs het ul menu te staan...
Is het zo dat dat dus gebeurt omdat hij de ruimte eerst horizontaal gaat vullen?

Iemand toevallig een url die dit duidelijk uitlegd?

En waarom rendert het bovengenoemde voorbeeld anders in FF dan in chrome?
En daarnaast weer, waarom werkt het ul menu dat dmv jquery mooi uitklapt niet in IE8 maar dan weer wel in FF en Chrome?
Hoe maken jullie in vredesnaam sites die crossbrowser zijn?

[ Voor 31% gewijzigd door CrankyGamerOG op 09-09-2011 18:56 ]

[F.West98]

CrankyGamerOG schreef op vrijdag 09 september 2011 @ 18:49:
Laat ik voorop zeggen dat ik op het absolute nulpunt begint mbt css en html.Maar omdat ik het toch wil leren ben ik ermee aan de slag gegaan.Flink wat tutorials gevold etc, overal word netjes uitgelegd hoe ik kan positioneren etc met float e.d. (subvraag : Waarom is er geen float:center ? )
Maar wat ik (en dat zal zeker aan mij liggen) nergens tegenkom is hoe ik de verschillende gedeelten positioneer op "de totale index".
Met een float right zal ik hem aan de rechterkant duwen, zover kom ik nog mee, vice versa voor float:left.
Maar hoe geef ik aan dat bijv het ene element boven het andere moet staan?

Stel ik heb een ul menu bovenin die dmv css op float left hangt.
Als ik dan de regel eronder een image plaats komt deze rechts langs het ul menu te staan...
Is het zo dat dat dus gebeurt omdat hij de ruimte eerst horizontaal gaat vullen?

Iemand toevallig een url die dit duidelijk uitlegd?

je maakt een div, je maakt een andere div, die komt ernaast. Zolang div1 te breed is dat div2 niet meer past zal div2 lager komen. En altijd van boven naar beneden:

code:

div content
|-> div header breedte 100% (niet zo, maar aantal px)
|   |-> div icon breedte x px, niet absoluut positioneren, maar relatief (vanuit randen parentdiv gezien)
|   |-> div navigation breedte x px, ook hetzelfde
|
|-> div tracker breedte x px (ong. 20%)
|   |-> ul items komt er vanzelf in, breedte 100% (letterlijk) benut alle ruimte in de x px van de parent div
| 
|-> div tekst breedte x px (rest - ruimte tussen tracker, daarvoor dus margin-left en margin-top)
|   |-> Titel
|   |-> Tekst
|
|-> div footer komt er vanzelf onder, zolang tekst breed genoeg is vastgesteld, (x px) en deze breder is dan wat overblijft

tip: proberen!

[ Voor 14% gewijzigd door F.West98 op 09-09-2011 19:01 ]

[8088]

F.West98 schreef op vrijdag 09 september 2011 @ 18:57:
je maakt een div, je maakt een andere div, die komt ernaast. Zolang div1 te breed is dat div2 niet meer past zal div2 lager komen.

Onwaar. Block-level elementen, zoals divs, worden standaard onder elkaar geplaatst. Inline elementen komen standaard naast elkaar te staan.

CrankyGamerOG schreef op vrijdag 09 september 2011 @ 18:49:
En waarom rendert het bovengenoemde voorbeeld anders in FF dan in chrome?

De ene browser(engine) is de andere niet. Helaas. Tip: koop een goed boek en experimenteer.

[krvabo]

CrankyGamerOG schreef op vrijdag 09 september 2011 @ 18:49:

Stel ik heb een ul menu bovenin die dmv css op float left hangt.
Als ik dan de regel eronder een image plaats komt deze rechts langs het ul menu te staan...
Is het zo dat dat dus gebeurt omdat hij de ruimte eerst horizontaal gaat vullen?

Vergeet niet dat 'float' blijft totdat het gereset wordt door middel van 'clear'. Met bijvoorbeeld 'clear: both' op een <br> kun je dus de float weer stoppen.

[F.West98]

8088 schreef op vrijdag 09 september 2011 @ 19:12:
[...]

Onwaar. Block-level elementen, zoals divs, worden standaard onder elkaar geplaatst. Inline elementen komen standaard naast elkaar te staan.

[...]

De ene browser(engine) is de andere niet. Helaas. Tip: koop een goed boek en experimenteer.

hmmm... dan toch vaag dat als ik mijn header te smal maak er tekst naast komt staan...

[8088]

Dan vermoed ik dat je toch een float hebt toegepast. Of je gebruikt een browser die de richtlijn (en mocht je een div bedoelen: richtlijn) niet respecteert.

edit: voorbeeld

[ Voor 11% gewijzigd door 8088 op 09-09-2011 21:36 ]

[CrankyGamerOG]

Ok bedankt alllemaal voor de reacties.
Even een opvolgende vraag, ik heb dus een pagina gebouwd die goed rendert in zowel Firefox alsin Chrome.Maar in IE (8.0 en 10 test drive) is de rendering zoek en werkt het jquery menu niet meer.
Ligt dit aan IE of aan mij?
<sub>En in Safari is de rendering een klein beetje off

het zal vast aan mij liggen</sub>

[ Voor 18% gewijzigd door CrankyGamerOG op 09-09-2011 23:42 ]

[8088]

CrankyGamerOG schreef op vrijdag 09 september 2011 @ 23:33:
Ligt dit aan IE of aan mij?

Beide.

[RobIII]

CrankyGamerOG schreef op vrijdag 09 september 2011 @ 23:33:
Ligt dit aan IE of aan mij?

Mijn glazen bol zegt dat 't aan jou ligt. En die zit er maar zelden langs. De koffiebonen echter zeggen dat 't aan je gebrekkige CSS ligt, maar die spreken de stand van de maan weer tegen die zegt dat je Quircks mode gebruikt. Helaas zeggen de tarot kaarten dat je een JS fout hebt en tot slot zegt je horoscoop dat 't morgen vanzelf opgelost zal zijn.

CrankyGamerOG schreef op vrijdag 09 september 2011 @ 23:33:
_{En in Safari is de rendering een klein beetje off}

Oh, "een klein beetje off" maar! Dat is duidelijke taal! Dan ligt het gewoon allemaal aan !@$!@#%#$*^...

<connection lost>
Sorry Dave, I can't let you do that.

[ Voor 4% gewijzigd door RobIII op 09-09-2011 23:43 ]

[CrankyGamerOG]

lol, of ja eigenlijk niet ....

Het komt meer door het jquery menu script, als ik die eruit haal is mijn alignment in alle browsers recht
Maar ik weet nu wel waar ik het moet zoeken.
_{ik wil perse een jquery uitklap menu, horizontaal nog wel, naja de menu list horizontaal, maar het uitklap effect verticaal}

het gaat hierom

HTML:

<div class="menu">
<ul id="topnav">
    <li><a href="index.html"><img src="images/home.png" alt="home" class="center"><br />&nbsp;&nbsp;Home</a></li>
    <li>
        <a href="#"><img src="images/settings.png" class="center"><br />Settings</a>
        <!--Subnav Starts Here-->
        <span>
            <a href="#">Sub 1</a> | 
            <a href="#">Sub 2</a> |
            <a href="#">Sub 3</a> |
            <a href="#">Sub 4</a> |
            <a href="#">Sub 5</a>
        </span>
        <!--Subnav Ends Here-->
    </li>
    <li><a href="#"><img src="images/users.png" class="center"><br />Menu 3</a></li>
    <li><a href="#"><img src="images/question_mark.png" class="center"><br />Menu 4</a></li>
    <li><a href="#"><img src="images/mail.png" class="center"><br />Contact</a>
     <!--Subnav Starts Here-->
        <span>
            <a href="#">Contact</a> |
            <a href="#">Adress</a> |
            <a href="#">Route</a>
        </span>
         <!--Subnav Ends Here-->
    </li>  
    
<li><a href="#"><img src="images/info.png" class="center"><br />About</a></li>
<li><a href="#"><img src="images/comments.png" class="center"><br />Blog</a></li>
<li><a href="#"><img src="images/network.png" class="center"><br />Networking</a></li>
</ul>
</div>

Cascading Stylesheet:

ul#topnav {
        margin-left: auto;
        margin-right: auto;
        padding: 0;
    width: 1200px;
    list-style: none;
    position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/
    font-size: 1.1em;}

ul#topnav li {
    float: left;
    text-align:center;
    margin: 0; padding: 0;
    border-right: 0px solid #efefef; /*--Divider for each parent level links--*/
        
}
ul#topnav li a {
    padding: 10px 37px;
    display: block;
    color: #fff; /*menu text kleur */
    position:relative;
    
    text-decoration: none;
}



ul#topnav li:hover { 

background: #bc0000 url(images/topnav_active.gif) repeat-x;

}
/*--Notice the hover color is on the list item itself, not on the link. This is so it can stay highlighted even when hovering over the subnav--*/

ul#topnav li span {
    margin-left: auto;
        margin-right: auto;
    padding: 15px 0;
    position: absolute;
    left: 0; top:100px;
    display: none; /*--Hide by default--*/
    width: 1200px;
    background: #bc0000; /* Achtergrond submenu */
    color: #000;
    /*--Bottom right rounded corner--*/
    -moz-border-radius-bottomright: 5px;
    -khtml-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    /*--Bottom left rounded corner--*/
    -moz-border-radius-bottomleft: 5px;
    -khtml-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; } /*--Show subnav on hover--*/
ul#topnav li span a { display: inline; } /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/
ul#topnav li span a:hover {text-decoration: underline;}

center { 
    display: block; 
    margin-left: auto; 
    margin-right: auto;
}

[ Voor 255% gewijzigd door CrankyGamerOG op 09-09-2011 23:54 ]

[RobIII]

Het waren de tarot kaarten!

En nu serieus: Wat moeten we met deze code? Wat werkt er niet? Wat is "off"? Wat rendert er hoe verkeerd en wat heb je zelf al geprobeerd? Je beseft dat dit is wat wij zien?

[ Voor 88% gewijzigd door RobIII op 10-09-2011 00:07 ]

[CrankyGamerOG]

OK je hebt gelijk, maar wellicht dat je wel verder op weg kan helpen.
Bij zowat elk jquery menu script wat ik tegenkom ( horizontale ),
(Zo ook bij deze : http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm ) zitten de li op float:left. Kan dat niet op een andere manier?

Dus dat de li centered staan maar wel horizontaal?

[RobIII]

CrankyGamerOG schreef op zaterdag 10 september 2011 @ 00:59:
(Zo ook bij deze : http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm ) zitten de li op float:left. Kan dat niet op een andere manier?

quote: http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm

Nov 12th, 08

Enig idee hoe oud dat is in internettijd?

CrankyGamerOG schreef op zaterdag 10 september 2011 @ 00:59:
Kan dat niet op een andere manier?

Dus dat de li centered staan maar wel horizontaal?

Ik wou dat ik wist wat je bedoelde... Wil je de menuopties gecentreerd hebben? (en t.o.v. wat?) Of wil je de tekst in de li's gecentreerd hebben? Of...?

[ Voor 36% gewijzigd door RobIII op 10-09-2011 01:08 ]

[C0rnelis]

CrankyGamerOG schreef op zaterdag 10 september 2011 @ 00:59:
OK je hebt gelijk, maar wellicht dat je wel verder op weg kan helpen.
Bij zowat elk jquery menu script wat ik tegenkom ( horizontale ),
(Zo ook bij deze : http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm ) zitten de li op float:left. Kan dat niet op een andere manier?

Dus dat de li centered staan maar wel horizontaal?

Ja dat kan met display: inline(-block)
http://jsfiddle.net/Be6wM/

[ Voor 30% gewijzigd door C0rnelis op 10-09-2011 01:09 ]

[CrankyGamerOG]

@ Rob III

Het eerste is wat ik bedoel. ( en het tweede is ook wel handig haha )
ik wil de menu cat's horizontaal hebben en dat de submenu opties vertikaal eruit klappen.
Elk voorbeeld wat ik zie doet dit dmv een float:left.
Maar C0rnelis heeft me op het goede pad geholpen met display:inline-block, nu krijg ik hem mooi gecentreerd (ondertussen wel een iets meer up to date voorbeeld genomen haha ), en belangrijker nog, crossbrowser !

Je centreerd het nu toch dmv. :

Cascading Stylesheet:

 margin: 0 auto;

?

Even kijken of ik het snap haha

[ Voor 24% gewijzigd door CrankyGamerOG op 11-09-2011 11:15 ]

[geert1]

Ik wil niet lullig doen, maar dit is weer een typisch gevalletje van basiskennis-gebrek. Als we nu specifiek dingetjes gaan uitleggen, zo van: zo los je probleem a op, en zo probleem b, dan heb je daar heel erg weinig aan. probleem c zal je dan alsnog vanzelf om de oren slaan omdat je geen breedte-kennis hebt. Vooral de omgang met floats en het boxmodel is gewoon keihard noodzakelijk voordat je ook maar iets doet qua front-end. HTML en CSS zijn verraderlijk makkelijke taaltjes, waar toch behoorlijk wat kennis voor nodig is om het echt goed te doen.

Het eerste dat je moet onthouden is dat zodra het er redelijk uitziet in alle browsers, dat dat niet wil zeggen dat je het goed hebt gedaan. Als je met front-end werkt, dien je tegelijkertijd rekening te houden met semantiek, accessibility, usability, validatie, flexibiliteit, design en nog een aantal factoren. Het werkt het beste als je de html-specificatie en het rendergedrag van de browsers dusdanig goed kent, dat je het effect snapt van elke regel code die je tikt. Alles met trial & error doen leidt daarentegen tot houtje-touwtje oplossingen en symptoombestrijding. Met meer kennis kom je er ook achter dat de moderne browsers lang niet altijd met elkaar in conflict hoeven te zijn; je kunt dat voor 95% voorkomen.

Dus doe zoals hierboven gezegd is en lees er eens een goed (en vrij nieuw) boek over. Daar kun je meer aan hebben dan aan losse tutorials. Leer in elk geval in detail hoe float-theorie werkt, de position-eigenschap, het opzetten van een goede html-structuur en de werking van het box-model. Succes!

[ Voor 15% gewijzigd door geert1 op 12-09-2011 20:10 ]

[CrankyGamerOG]

Geert1, dat is precies wat ik nu aan het doen ben het LEREN van de opbouw, floats, positions, etc.
Ik heb me te lang afzijdig gehouden van html/css en teveel vertrouwd op cms systemen.

[ Voor 30% gewijzigd door CrankyGamerOG op 12-09-2011 15:18 ]

[prutsger]

ik wil perse een jquery uitklap menu

We kunnen hier wel nog een keer de discussies voeren over javascript vs. css menu's... maar die is al zo vaak gevoerd dat ik er moe van wordt...

[JS] Uitklapmenu werkt niet in I.E.

Sowieso, searchengine (google,bing) bots gebruiken geen javascript waardoor je subpagina's niet door zoekmachines geïndexeerd zullen worden... mag je daar ook nog weer een workaround voor bouwen.

Wat mij betreft is een js-menu een no-go.

[CrankyGamerOG]

grappig dat je naar een topic linkt waar de algemene conclusie is dat een css dropdown menu ook niet goed werkt

[MueR]

Dat werkt prima, mits de persoon die het menu maakt weet wat hij aan het doen is.

[Bosmonster]

Een js/css menu is geen enkel probleem, als je volledige data maar semantisch in je html staat. (gewoon een hierarchische UL dus)

Voordeel van de CSS-versie is dat je geen JS nodig hebt, nadeel is dat je weinig invloed hebt op de interactie (timers e.d.). Je kunt een CSS-versie maken en die weer overrulen met JS, maar dan wordt het wel weer wat extra werk

[ Voor 4% gewijzigd door Bosmonster op 15-09-2011 07:29 ]