[html, css, js] voor dummies #20

Ik gok dat je die a href's ieder in een <li> ofzo hebt staan?

[ Bericht 10% gewijzigd door boem-dikkie op 10-12-2011 19:40:24 ]

Ho. Verkeerde knopje.

Maar nee, heb ik niet.

Post eens wat meer HTML dan?

Die div staat 5 keer onder elkaar.

En dit is mijn css.

Je hebt dus wel een wrapper om iedere a heen. Dan is iedere a automatisch :first-child.

Als je nou


doet zou het moeten werken. Mits er natuurlijk geen andere elementen in dezelfde wrapper zitten als de 'goup's.

quote:

Op zaterdag 10 december 2011 19:44 schreef PimD het volgende:
Je hebt dus wel een wrapper om iedere a heen. Dan is iedere a automatisch :first-child.

Als je nou
[ code verwijderd ]

doet zou het moeten werken. Mits er natuurlijk geen andere elementen in dezelfde wrapper zitten als de 'goup's.

Het werkt. Wat bedoel je met andere elementen?

Het linkje is het enige wat in de div .goup komt te staan. Het is een divje die naast elke post komt te staan met een linkje die naar bovenaan de pagina gaat. Dat hoeft niet bij de eerste post vandaar.

:first-child gaat om (zoals de selector al zegt) het eerste child van een element. Als er dus bijvoorbeeld nog een <h1> voor de eerste .goup zit gaat de selector '.goup:first-child' niet af en zal je code dus niet werken.

quote:

Op zaterdag 10 december 2011 19:49 schreef PimD het volgende:
:first-child gaat om (zoals de selector al zegt) het eerste child van een element. Als er dus bijvoorbeeld nog een <h1> voor de eerste .goup zit gaat de selector '.goup:first-child' niet af en zal je code dus niet werken.

Maar als je .goup:first-child a doet pakt hij toch het eerste linkelement binnen de div .goup? Zoals ik al zei er zit niks anders in die div op het linkje na.

quote:

Op zaterdag 10 december 2011 19:49 schreef PimD het volgende:
:first-child gaat om (zoals de selector al zegt) het eerste child van een element. Als er dus bijvoorbeeld nog een <h1> voor de eerste .goup zit gaat de selector '.goup:first-child' niet af en zal je code dus niet werken.

In dat geval zou een :first-of-type wel moeten werken als im me niet vergis?

-edit- eh, dat klopt niet, laat maar .

Is het trouwens mogelijk om met codes te detecteren of een browser HTML5 aan kan?

HTML5 bestaat uit zo gigantisch veel onderdelen/modules, er is volgens mij nog geen enkele browser die alles ondersteunt. Het beste kun je feature detection doen, bijvoorbeeld met een library als Modernizr.

quote:

Op zondag 11 december 2011 13:56 schreef PimD het volgende:
HTML5 bestaat uit zo gigantisch veel onderdelen/modules, er is volgens mij nog geen enkele browser die alles ondersteunt. Het beste kun je feature detection doen, bijvoorbeeld met een library als Modernizr.

.. Dat zegt me niets. Het punt is dat ik html5 ga gebruiken, maar nog niet weet wat precies (Waarschijnlijk kleine animaties in een site)(En ik mag nog niet uitwerken wat ik precies ga doen want dan wordt mijn plan afgewezen ). Dus moet ik IE detecteren met codes en daar een workaround voor creëren. Door daar gewoon een statische elementen voor te bouwen die zien dat een website IE is en dan die afbeelding laten zien. Maar dat is dus niet mogelijk?

Waarom überhaupt zo veel moeite doen voor een workaround om iets te laten werken dat nog niet eens officieel af is?

quote:

Op zondag 11 december 2011 14:01 schreef boem-dikkie het volgende:
Waarom überhaupt zo veel moeite doen voor een workaround om iets te laten werken dat nog niet eens officieel af is?

Het bestaat officieel nog niet, maar ik moet het in mijn plan verwerken anders wordt hij waarschijnlijk afgewezen. Het hoeft niet al helemaal een uitgebreid uitgewerkte workaround te zijn, als het maar wel mogelijk is IE te detecteren en dan iets als een andere code te laten zien aan IE gebruikers. Of zoiets. Ik verwar mezelf ook, ik hoop dat ik een beetje duidelijk uitleg wat het probleem is (en of het mogelijk is)

Je gaat html5 gebruiken voor animaties? Good luck want dat lukt je niet.

Ik zou het persoonlijk met CSS3 proberen.

quote:

Op zondag 11 december 2011 14:05 schreef RenRen- het volgende:

[..]

Het bestaat officieel nog niet, maar ik moet het in mijn plan verwerken anders wordt hij waarschijnlijk afgewezen. Het hoeft niet al helemaal een uitgebreid uitgewerkte workaround te zijn, als het maar wel mogelijk is IE te detecteren en dan iets als een andere code te laten zien aan IE gebruikers. Of zoiets. Ik verwar mezelf ook, ik hoop dat ik een beetje duidelijk uitleg wat het probleem is (en of het mogelijk is)

Nee, echt totaal niet .

Ja, IE is te detecteren. Ja, specifieke onderdelen/functies van HTML5 zijn te detecteren. En dan?

quote:

Op zondag 11 december 2011 14:13 schreef Catch22- het volgende:
Je gaat html5 gebruiken voor animaties? Good luck want dat lukt je niet.

Ik zou het persoonlijk met CSS3 proberen.

Serieus niet? Oh. Ik ha namelijk een site gezien waarbij er veel geanimeerd is, wat gebruik maakt van html5 en jquery.

quote:

Op zondag 11 december 2011 14:18 schreef picodealion het volgende:

[..]

Nee, echt totaal niet .

Ja, IE is te detecteren. Ja, specifieke onderdelen/functies van HTML5 zijn te detecteren. En dan?

Was ik al bang voor Nou ja, dan een workaround maken voor wat ik dan bouw. Ik heb wat op papier gezet, hoop dat het dan wordt goedgekeurd, dan kan ik eindelijk onderzoek gaan doen

quote:

Op zondag 11 december 2011 15:01 schreef RenRen- het volgende:
Serieus niet? Oh. Ik ha namelijk een site gezien waarbij er veel geanimeerd is, wat gebruik maakt van html5 en jquery.

Dat heeft niks met HTML5 te maken, alleen met Javascript die inline CSS manipuleert

quote:

Op zondag 11 december 2011 15:02 schreef PimD het volgende:

[..]

Dat heeft niks met HTML5 te maken, alleen met Javascript die inline CSS manipuleert

"DHTML".

Dat waren nog eens tijden.

quote:

Op zondag 11 december 2011 15:16 schreef Tijn het volgende:

[..]

Dat hele verhaal leg ik aan m'n klanten niet eens meer uit als ze weer eens komen vragen of ik geen HTML5 site voor ze kan bouwen

Als klanten je überhaupt al benaderen met de vraag of je een HTML5 website kunt bouwen voor ze weet je al dat het project sowieso veel gezeur gaat veroorzaken vanwege onkennis.

HTML5 wordt vaak gezien als een soort synoniem voor hyperdynamische moderne websites. Het grootste probleem daarbij is eigenlijk, dat HTML5 dat helemaal niet is.

HTML5 (alhoewel het '5' ondertussen ook al nergens meer op slaat, aangezien de versienummering losgelaten wordt vanaf nu) is niets meer of minder dan een extra set tags en attributen, die toegevoegd zijn aan de HTML-specificatie. Een paar ouderwetste elementen zijn er definitief uitgehaald. Alhoewel de specificatie nog niet volledig af is, is het overgrote deel ervan al gewoon te gebruiken. Zeker de 'semantische tags', zoals nav, article, section, etc. kan je zonder problemen al gebruiken. Voor support in IE8 en lager, kan je een klein javascriptje schrijven, of gewoon htmlshiv.js googlen en downloden (net zo makkelijk), die deze tags on-the-fly aanmaakt, zodat je ze gewoon kan CSS'en.

Er is op dit moment eigenlijk geen enkele reden meer om nog XHTML te gebruiken.

CSS3 is een ander verhaal. Hierbij zijn veel eigenschappen nog maar half geïmplementeerd, of verschilt de implementatie tussen browsers (vandaar de vendor-prefixes). Als je hier veel gebruik van gaat maken (wat best kan overigens), moet je ervoor zorgen dat je pagina zonder alle typische CSS3-shit er nog steeds normaal uit ziet. Met conditional comments kan je bvb aan de HTML-tag in je document een speciale IE-class toevoegen, zodat je bepaalde zaken die niet ondersteund worden in IE8 <, kan overriden obv die class.

het jQuery-framework is zo ontworpen, dat deze in elke browser hetzelfde resultaat geeft. Voor animaties en dergelijke, is dit nog altijd de meest veilige oplossing.

quote:

(En ik mag nog niet uitwerken wat ik precies ga doen want dan wordt mijn plan afgewezen ).

Wel raar, dat je plan bij voorbaat afgewezen gaat worden, als je verteld wát je precies van plan bent.. Komt een beetje raar en dubieus over

Ik wil mbv CSS een afbeelding verticaal centreren in een div.

Mijn div opbouw ziet er zo uit:
<div id="container">
<div id="content">
<div id="producten"></div>
</div>
<div>

Bijbehorende CSS:
#container {
margin-left: auto;
margin-right: auto;
height: 750px;
width: 870px;
background-color: #d4d4d4;
}


#content {
width: 858px;
height: 610px;
margin-top: auto;
margin-left: auto;
text-align: center;
background-image: url(images/content_achtergrond.png);
position: relative;
}

#producten {
background-image: url(images/producten.png);
width: 472px;
height: 324px;
margin-left: 280px;
margin-top: 50px;
text-align:center;
}

In <div id="producten"></div> zit de afbeelding die ik vertikaal wil centeren in de div Content.

Op internet is er veel te vinden over dat het lastig is een afbeelding vertikaal te centeren in een div, maar ik begrijp niet wat het beste voor mijn code is gezien ik nogal een beginner ben met css/html.