Dag, ik heb een probleem. ik heb een website gemaakt. ik heb 2 beeldschermen.
Als ik de website op mijn kleinere beeldscherm plaats. Verplaatsen de kopjes. en word het in elkaar gedrukt :/
Kan iemand helpen ?
Wil je een flinke stap verder gaan en een responsive design gebruiken dan zou ik me eens verdiepen in Bootstrap. Een responsive design past zich aan aan de breedte van het beeldscherm en is touch vriendelijk waardoor deze op telefoons ook goed bruikbaar is.
@Frank, sorry hoor maar dat voorbeeld van jou vind ik echt als frontender waardeloos. Waar ik me vooral dood aan erger is een leeg element zoals de "clear-div".. Lege elementen not done en vaak overbodig. Waarom een extra div maken als je de footer ook clear:both; mee kunt geven... En alles in 1 div zetten is ook onhandig, stel dat de header een full width achtergrond kleur heeft?
Ik zou gewoon voor zoiets als dit gaan:
<header>
<div>
<div content> (eventueel nog section van maken)
<div sidebar>
</div>
<footer>
En bootstrap? Waardeloze zooi ja, je krijgt er een hele boel extra divs mee. Wat je normaal met 1 f 2 divs doet moet je bij Bootstrap l opeens met 3 of 4 divs doen. Gewoon waardeloos. Ook laad je extra css in waar je hooguit 10% van gebruikt (de columns worden eigenlijk alleen gebruikt, wat ik overrated zooi vind). De enige mensen die Bootstrap gebruiken zijn mensen die niet zelf met HTML/CSS overweg kunnen, of bedrijven die willen 'bezuinigen' en snel dingen in elkaar willen zetten zonder echt over kwaliteit na te denken en toch een hoofdprijs voor hun product vragen.
Erg Negatief van je Sabaton. Jammer weer :-(
Veel mensen zijn heel erg weg van Bootstrap en dat weet jij maar al te goed als frontender. Er zijn php frameworks die bezig zijn om helemaal bootstrap-ready te worden. En een leeg element... ja echt heel erg NOT. Is gewoon een voorkeur van jouw kant lijkt me. En dat mag maar ga niet zeggen dat het waardeloos is want als je reëel bent dan kan het voor een beginner een enorme hulp zijn.
Semantische elementen zijn inderdaad betekenisvoller maar ik had zelf in het verleden wat problemen met de CSS er aan vast te koppelen. Het kan zijn dat dat komt omdat het nieuw/onbekend was voor me.
Bedankt! maar ik heb ook een side bar en een nav bar. die verspringen altijd. de content en de header blijven wel staan. maar de nav bar en de sidebar verspringen.
[size=xsmall]Toevoeging op 01/06/2015 12:56:17:[/size]
Rens Koster op 01/06/2015 11:23:12
Bedankt! maar ik heb ook een side bar en een nav bar. die verspringen altijd. de content en de header blijven wel staan. maar de nav bar en de sidebar verspringen.
test.adbouwservice.nl kun je op kijken voor wat ik bedoel..
@Frank, er zijn misschien veel mensen erg weg van Bootstrap, en dat zijn de mensen de mensen die zelf niet goed met HTML/CSS overweg kunnen of bedrijven die willen 'bezuinigen' en snel dingen in elkaar willen zetten zonder echt over kwaliteit na denken en toch de hoofdprijs vragen voor hun product zoals ik al eerder zei. Jij raad mensen aan om bootstrap te gebruiken, hierdoor leren ze een verkeerde aanpak en leren ze alleen een beetje bootstrap te gebruiken waardoor ze zelf nooit normaal een website kunnen bouwen in HTML/CSS, net zoals jij tegen 'semantische' HTML aan liep.
En paar voorbeelden van lege elementen:
- Langere en slechtere broncode -> Bots meer moeite met crawlen, kan slecht zijn voor je SEO
- Meer KB's -> Meer laadtijd en vooral op mobiel en slechte 3G
Ja je kunt de bovenstaande dingen als verwaarloosbaar beschouwen, de ene frontender houd er rekening, andere frontender niet. Waarom ga je je CSS en JavaScript minifien, om KB's/Bytes te besparen voor snelheid en dergelijke, doe dit dan ook met je HTML. Waarom dan Bootstrap in laden waar je eigenlijk alleen de columns grid van gebruikt?
@Rens, ik zou helemaal overnieuw beginnen met je HTML, er gaan namelijk heel veel dingen mis.
- Een container div om je <head> en <body>? Zet de container in je <body>
- Je background op de body word niet afgesloten met een " waardoor je al veel errors krijgt (waarom doe je dit eigenlijk niet in je CSS).
- Je sluit een </head> ergens in de fucking middle of no where?
- ID moet uniek zijn, dus gebruik maar 1 keer een id="container"
- <center> is achterhaald, waarom centreer je het niet met CSS?
Omdat er veel elementen zijn die niet of verkeerd worden afgesloten verspringen er elementen. Fatsoeneer eerst je HTML (ik zou gewoon overnieuw beginnen), daarna kunnen we verder kijken.
Gebruik GEEN wysiwyg editor maar wel een editor die HTML markup heeft. (die dus HTML herkent en er kleurtjes aan geeft).
Zet de opmaak van je pagina (dus de kleurtjes, achtergrond, margin etc) in een apart CSS bestand.
Om een HTML element aan je CSS te koppelen kun je een id attribuut en/of een class attribuut gebruiken.
<p id="warning" class="red-text">U heeft geen naam ingevoerd</p>
Het grote verschil tussen id en class is dat een id slechts één keer mag voorkomen in het hele document en class mag meerdere keren voorkomen. In de css notatie begin je een id met een # en een class met een punt (.)
Verder natuurlijk zorgen dat je HTML kloppend is. Dit betekend dat je HTML elementen altijd netjes moet afsluiten en dat je geen " of een > moet vergeten. Doe je dat niet dan krijg je dus "onvoorspelbaar" gedrag.
Tot slot dan een voorbeeldje met een drietal divs:
Iemand ook verstand van comment system? iets in die geest.
ik moet een pagina hebben waar mensen een referentie achter kunnen laten hoe ze het werk hebben ervaren van de des betreffende bedrijf.
