Webdevelopment topic

[Rallim]

oh oke. dan sla ik ze gewoon lekker op zonder hash
bedankt!

[Emo]

Loop vast op een stom klein dingetje. Ik heb eindelijk CSS3 ontdekt en heb een dingie gemaakt voor mijn website (moet het wiel altijd zelf opnieuw uitvinden :3). Het gaat om de zoekknop rechtsboven, die uitschuift wanneer je hovert. In principe bestaat het ding uit twee delen: #search met achtergrondicoon die van 100px naar 400px breed gaat @ een hover (met transition) en een input veld in #search dat van 0px breed naar 250px breed gaat zodra je #search hovert (ook met transition).

http://h1d3.com

#search wil bij hover gewoon mooi uitschuiven en weer terug inschuiven, terwijl de input box na mooi uitgeschoven te zijn niet mooi terugschuift maar ineens verdwijnt. Weet iemand waar 't probleem ligt? Als ik werk met een negatieve right (zodat het blok in zijn geheel letterlijk binnenschuift) dan werkt de transition van de input wel naar behoren, maar een negatieve right is verder gewoon heel erg kut in gebruik...

Code: Selecteer alles

#search {
width: 100px;
height: 100px;
background-image: url(search.png);
background-repeat: no-repeat;
background-color: #001718;
background-position: left center;
position: absolute;
right: 0px;
top: 0px;
transition-property: width;
transition-duration: .3s;
}
#search:hover {
width: 400px;
}
#search input {
width: 0px;
height: 0px;
margin-top: 0px;
margin-left: 0px;
padding-left: 0px;
padding-right: 0px;
border: none;
transition-property: width;
transition-duration: .3s;
}
#search:hover > input {
width: 250px;
height: 30px;
margin-top: 35px;
margin-left: 100px;
padding-left: 10px;
padding-right: 10px;
float: left;
}

Code: Selecteer alles

<form role="search" method="get" id="search" action="<?php echo home_url( '/' ); ?>">
	<input type="text" placeholder="Zoekterm + enter" name="s" />
</form>

[Mikal]

Het eerste probleem is dat bij je #search input de height 0 is. Alleen hij komt dan weer boven de icon te staan.

En dat komt weer door de plotselinge margin en padding die je er aan geeft.

EDIT:

Code: Selecteer alles

#search input {
    border: medium none;
    float: left;
    height: 30px;
    margin-left: 100px;
    margin-top: 35px;
    padding-left: 10px;
    padding-right: 10px;
    transition-duration: 0.3s;
    transition-property: width;
    width: 0;
}
#search:hover > input {
    float: left;
    height: 30px;
    margin-left: 100px;
    margin-top: 35px;
    padding-left: 10px;
    padding-right: 10px;
    width: 250px;
}

Dit fixed het voor je, getest in Firefox
Die Float: Left ziet er voor mij ook wel redelijk nutteloos uit om te gaan gebruiken. Voegt niks toe namelijk!

[Emo]

Oh natuurlijk, wat stom dat ik dat niet opgemerkt heb. Zit me er ook zolang al op kapot te staren :p

Echt enorm bedankt

[Mikal]

Heb ik ook heel vaak, dan is het soms zo simpel

[Ruthless]

Wat is bij een responsive site nu de meest gebruikelijke manier van werken?
Beginnen met desktop versies en steeds uitzonderingen maken naarmate de website kleiner word, of juist vanaf de mobile versie beginnen en dus andersom werken?

M'n stagebegeleider zegt van mobile > desktop, terwijl mij lijkt dat desktop > mobile makkelijker is.

[Mikal]

Als je al genoeg ervaring hebt kan mobile =/= desktop ook. Maar als je echt al meteen een idee hebt van een werkende responsive site is denk ik mobile > desktop toch het best inderdaad.

[Superheat]

:D

[eenteddybeer]

Wat is eigenlijk een goed boek/goede website voor een beginneling om HTML 5 en CSS te leren? En maakt het ook uit welke versie van CSS in het boek/op de website gebruikt wordt?

[Rallim]

Wat is eigenlijk een goed boek/goede website voor een beginneling om HTML 5 en CSS te leren? En maakt het ook uit welke versie van CSS in het boek/op de website gebruikt wordt?

De meeste boeken bevatten nog xhtml wat je eigenlijk niet meer hoort te gebruiken maar die boeken zijn over het algemeen wel erg goed. wat ik je aanraad is een combinatie van 2 boeken die ik hier ook heb liggen.
de eerste voor de basis en de tweede is puur wat html5 en css3 om up-to-date te komen
1. (X)HTML, CSS & JavaScript door Peter Kassenaar. ISBN: 9789059404144
2. Basiscursus HTML5 (inclusief CSS3) door Victor Peters. ISBN: 9789012581783

[Bighead]

Feitelijk kan je de XHTML syntax prima toepassen op HTML5. XHTML is meer een nette manier van werken toegepast op HTML 4 dan een eigen standaard.

[Ruthless]

Wat is eigenlijk een goed boek/goede website voor een beginneling om HTML 5 en CSS te leren? En maakt het ook uit welke versie van CSS in het boek/op de website gebruikt wordt?

w3schools.com

[Superheat]

Wat is eigenlijk een goed boek/goede website voor een beginneling om HTML 5 en CSS te leren? En maakt het ook uit welke versie van CSS in het boek/op de website gebruikt wordt?

https://m.bol.com/nl/p/html-css/1001004 ... ss/sf/true

[eenteddybeer]

Bedankt, eens kijken of ik die boeken ook goedkoop kan krijgen bij de Bruna, want daar heb ik nog steeds een tegoedbon voor.

Toegevoegd na 15 minuten:

Wat is eigenlijk een goed boek/goede website voor een beginneling om HTML 5 en CSS te leren? En maakt het ook uit welke versie van CSS in het boek/op de website gebruikt wordt?

De meeste boeken bevatten nog xhtml wat je eigenlijk niet meer hoort te gebruiken maar die boeken zijn over het algemeen wel erg goed. wat ik je aanraad is een combinatie van 2 boeken die ik hier ook heb liggen.
de eerste voor de basis en de tweede is puur wat html5 en css3 om up-to-date te komen
1. (X)HTML, CSS & JavaScript door Peter Kassenaar. ISBN: 9789059404144
2. Basiscursus HTML5 (inclusief CSS3) door Victor Peters. ISBN: 9789012581783

Bij de reviews op bol.com staat trouwens wel dat er wat fouten in de codes zitten en dat de site van het 2de boek het niet meer doet. Zijn er nog andere boeken, of maakt dit niet zoveel uit?

[De Jonathan]

Wat is eigenlijk een goed boek/goede website voor een beginneling om HTML 5 en CSS te leren? En maakt het ook uit welke versie van CSS in het boek/op de website gebruikt wordt?

w3schools.com

Neeeee, staat vol met fouten! Ook de certificaten zijn níks waard!

Ik zweer bij Codecademy! Daar kan de grootste randdebiel nog leren programmeren

[Ruthless]

Ik heb alles geleerd met w3schools.
Atm jQuery aan 't leren, maar ik vind het een chille website, hoor.

Certificaten kan ik niet op beoordelen.

[Rallim]

w3schools is prima voor tags opzoeken en dergelijke zaken
verder zou ik geen idee hebben wat die certificaten enzo waard zijn

Toegevoegd na 7 minuten:

Bedankt, eens kijken of ik die boeken ook goedkoop kan krijgen bij de Bruna, want daar heb ik nog steeds een tegoedbon voor.

Toegevoegd na 15 minuten:

Wat is eigenlijk een goed boek/goede website voor een beginneling om HTML 5 en CSS te leren? En maakt het ook uit welke versie van CSS in het boek/op de website gebruikt wordt?

De meeste boeken bevatten nog xhtml wat je eigenlijk niet meer hoort te gebruiken maar die boeken zijn over het algemeen wel erg goed. wat ik je aanraad is een combinatie van 2 boeken die ik hier ook heb liggen.
de eerste voor de basis en de tweede is puur wat html5 en css3 om up-to-date te komen
1. (X)HTML, CSS & JavaScript door Peter Kassenaar. ISBN: 9789059404144
2. Basiscursus HTML5 (inclusief CSS3) door Victor Peters. ISBN: 9789012581783

Bij de reviews op bol.com staat trouwens wel dat er wat fouten in de codes zitten en dat de site van het 2de boek het niet meer doet. Zijn er nog andere boeken, of maakt dit niet zoveel uit?

Ik denk dat ik (wel met enige voorzichtigheid) kan zeggen dat in eigenlijk ieder boek wel fouten zitten
Hangt ook van de druk af want in een volgende druk zijn er vaak al fouten uitgehaald

Wat de website betreft: Je kan er alle voorbeeldcode downloaden die in het boek staat. Heb het eigenlijk niet nodig gehad omdat ik html en ccs al goed beheerste en ik het boek puur gekocht heb voor wat html5 voorbeelden
Het kan dus wel handig zijn als je gewoon kant-en-klare voorbeelden wilt pakken en daar aan gaat sleutelen maar dan kan je net zo goed elders op het internet code downloaden want die is er genoeg

Ik heb nu ook al een paar andere boeken staan van Peter Kassenaar en ik ben er over het algemeen erg tevreden over

[Nilsie]

Lekker boeie dat ze zich niet houden aan bepaalde dingen, je kunt er terecht voor informatie en de werking van dingen, klaar.

[Mikal]

Certificaten van W3Schools worden liever niet gezien op je CV bij bedrijven, gezien deze van erg lage kwaliteit zijn (aldus mijn vorige 2 stage bedrijven & broer)

[Emo]

Als ik met lichtgrijs werk, valt dit op sommige (oudere/goedkopere) beeldschermen niet meer te onderscheiden van wit. Nu is de lichtste webveilige grijstint #ccc (uit die lijst met 256 webveilige kleuren), maar deze is al behoorlijk donker. Is er inmiddels niet een vernieuwde, langere lijst met semi-webveilige kleuren waardoor ik toch nog relatief veilig met een lichtere tint grijs dan #ccc kan werken? Ik kan me namelijk best voorstellen dat zelfs het laagste segment beeldschermen inmiddels wel een stuk meer dan 256 kleuren kan gebruiken, al kan ik niks vinden als ik Google :'(