Pagina verspringt op groter/kleiner beeld
Als ik de website op mijn kleinere beeldscherm plaats. Verplaatsen de kopjes. en word het in elkaar gedrukt :/
Kan iemand helpen ?
Rens Koster.
Hier zie je een voorbeeld zeer veel gebruikte layout.
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.
Gewijzigd op 31/05/2015 13:23:22 door Frank Nietbelangrijk
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.
Gewijzigd op 31/05/2015 15:46:05 door Joakim Broden
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.
Toevoeging op 01/06/2015 12:56:17:
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..
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.
Gewijzigd op 01/06/2015 14:52:55 door Joakim Broden
Maar het vervelende is dat de tekst soms ook in elkaar gaat. geen idee of jullie weten hoe dit komt.
anno 2015 is de standaard HTML5.
Je kunt je document volgens deze standaard beginnen met:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
<title>Paginatitel</title>
</head>
<body>
Inhoud pagina
</body>
</html>
<html>
<head>
<title>Paginatitel</title>
</head>
<body>
Inhoud pagina
</body>
</html>
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.
Code (php)
1
<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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<title>Paginatitel</title>
<link rel="stylesheet" type="text/css" href="css/layout.css" />
</head>
<body>
<div class="red-div">
</div>
<div class="red-div">
</div>
<div class="red-div" id="last-red-div">
</div>
</body>
</html>
<html>
<head>
<title>Paginatitel</title>
<link rel="stylesheet" type="text/css" href="css/layout.css" />
</head>
<body>
<div class="red-div">
</div>
<div class="red-div">
</div>
<div class="red-div" id="last-red-div">
</div>
</body>
</html>
css/layout.css:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
.red-div {
width:100px;
height:100px;
background-color:red;
margin:10px;
}
/* toevoegen/overrulen CSS van de laatste div */
#last-red-div {
width:92px; /* 100px - (2 x 4px) */
height:92px;
border:4px solid black;
}
width:100px;
height:100px;
background-color:red;
margin:10px;
}
/* toevoegen/overrulen CSS van de laatste div */
#last-red-div {
width:92px; /* 100px - (2 x 4px) */
height:92px;
border:4px solid black;
}
Dit is natuurlijk slechts een voorbeeldje. Je kunt het beste even googlen en een tutorial HTML5 & CSS3 doorlezen.
Gewijzigd op 01/06/2015 15:48:18 door Frank Nietbelangrijk
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.
Sabaton Joakim op 31/05/2015 15:44:47:
@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.
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.
Tja, lekker vriendelijk zijn we weer. Frontender of niet, resultaat is het belangrijkste. Ik weet mijn weg prima te vinden met HTML & CSS. Heb ik het geduld om uit te plooien hoe deze website op tablets / phones draaien, etc? Nee.
Jouw "werkgever" zal het een worst wezen hoe kwalitatief de website in de achtergrond is. Functioneert het, dat is de vraag. Hoe sneller, hoe beter en dat heeft niets met bezuiniging te maken.
Overrated zooi? Nouw, whoopdiedoo die paar divjes en een beetje CSS code? Als je je daar zo ongerust overmaakt kan je ook gewoon een tooltje tebruiken die alle css code samen voegt en de tags die niet gebruikt worden eruit gooit. Compress die code en voilla.
Ik persoonlijk krijg niets af als ik "alles" perfect wil. Ik maak alleen mijn code goed en "perfect" en die html & css zal me echt een worst wezen. Zolang het maar werkt.