[html, css, js] voor dummies #21

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_106546179
[html, css, js] Voor Dummies

Dit topic is bedoeld voor alle vragen m.b.t. HTML, CSS en javascript, kortom alles wat je nodig hebt om (de frontend van) een website te maken.

HTML: Hyper Text Markup Language is de structuur van een website. Door middel van verschillende html tags geef je aan welke elementen bij elkaar horen (bijv: <div>, <ul>), of wat de betekenis van deze data is (bijv. <p>, <h1>). HTML leent zich ook voor opmaak, maar het is makkelijker en verstandiger om hier CSS voor te gebruiken.
CSS: Cascading StyleSheet is de opmaak van een website. In je CSS specificeer je bijvoorbeeld welke kleur bepaalde elementen moeten hebben, hoe groot ze zijn en hoe je ze wilt rangschikken.
JS: Javascript Javascript (niet te verwarren met programmeertaal Java) is een scripttaal, waarmee het mogelijk is je website dynamisch te maken. Javascript kan bijvoorbeeld HTML-elementen aanpassen, toevoegen of verwijderen. Omdat javascript zeer veelzijdig is, is er voor specifieke JS vragen ook een specaal topic, zie: [Javascript] voor dummies

Vragen over PHP, SQL of andere serverside programmeertalen horen niet in dit topic. Stel deze in [PHP/MySQL] voor dummies of open zelf een topic.
Voor vragen over webhosting, domeinnamen enz. is ook een ander topic: Het grote (betaalde) webhosting topic
En voor Wordpress is er ook een speciaal topic, als het om meer gaat dan de HTML/CSS van een theme: Topicreeks: Algemeen Wordpress topic

Code posten
Het is, als je een vraag stelt, vaak handig om hier een stukje code bij te voegen. Post niet klakkeloos je hele website, maar post alleen het stukje code waar je vraag over gaat. Gebruik bovendien de [code]-tag (code.png), zodat je HTML, CSS of Javascript code goed leesbaar is. Dus niet [quote] of [spoiler] of wat dan ook.

Veel voorkomende problemen
Veel problemen zijn te wijden aan het niet kloppen van HTML of CSS code. Een kleine typfout is snel gemaakt, en de webbrowser kan daar soms erg slecht mee omgaan. Om te controleren of je code technisch in orde is, kun je deze controleren met de W3 validator.
Is je code niet correct? Los dan eerst de fouten op zodat de validator geen foutmeldingen meer geeft. Dit lost niet altijd je probleem op, maar zorgt in ieder geval dat alles werkt zoals het hoort te werken, waardoor overige fouten ook veel makkelijker te achterhalen zijn.
pi_106546188
Foei Mirel, nieuwe openen als je de vorige dichtgooit.

Tevens even het Wordpress topic gelinked, aangezien daar ook best wat vragen over gaan.
  zondag 8 januari 2012 @ 02:05:25 #3
87680 Mirel
Mirel wil een bongophone.
pi_106548892
Is het nou wel of niet zo dat er vanzelf een nieuwe komt? :')

Hier de laatste posts, zet ze eventueel in de OP :)
quote:
0s.gif Op zaterdag 7 januari 2012 22:46 schreef Neraice het volgende:
Ik heb een inspiratieblock: Ik ben bezig met een theme voor telefoons. Nou heb ik een sidebar gemaakt waar plaats is voor een menu, maar ik ben er nog niet uit wat ik erin wil. Ik wil namelijk niet zo'n standaard lijstje maar iets leuks doen met de opmaak. Iemand een idee?

Hier een link: http://dahndesigns.net/theme.png
quote:
0s.gif Op zondag 8 januari 2012 00:07 schreef Mirel het volgende:
Voor telefoonbrowsers? En wat zijn de menu-items? Als het bijv. over aardbeien en sinaasappels gaat, dan kan je die als knoppen doen bijvoorbeeld :P
Ik ben zelf benieuwd wat de beste manier is om deze opstelling te nemen. Een body met een achtergrond (in mijn geval een patroon), met bovenaan een menucontainer, en erin 2 elementen. Dat het menu links margin-left heeft is niet zo belangrijk. Het gaat om die scheiding tussen de 2 elementen, waarbij het 2e element tot over de hele breedte van de pagina moet gaan


Op het moment dat je een 2e element er naast zet die met margin-left gescheiden is vanaf het 1e, gaat 'ie niet tot 100% breedte,.

Zie www.mirelmasic.nl binnen m'n menu div. :P

[ Bericht 3% gewijzigd door Mirel op 08-01-2012 02:35:22 ]
When all else fails, you always have delusion.
pi_106548944
1e element naar links floaten zou genoeg moeten zijn.

Of anders beide floaten of display:inline-block geven, de achtergrondkleur + bottom border op de wrapper zetten en het eerste element een border links en rechts geven.
  zondag 8 januari 2012 @ 02:15:11 #5
87680 Mirel
Mirel wil een bongophone.
pi_106549066
Oh om even duidelijk te zijn, dat gedoe eromheen is de wrapper, geen border :P Die scheiding is in mijn geval de kleur van m'n achtergrond :P Even plaatje updaten. Voorlopig lijkt dit de beste manier. De hele container een kleurtje geven werkt niet want die overlapt dan de scheiding, of je die maakt met margins, lege divs of lege borders.

Dit lijkt me nu de beste manier:

1e element float: left; zodat het 2e element er naast komt.

Als je het 2e element 10px vanaf het 1e element wilt, én tot aan het einde van het scherm wilt hebben, dan moet je met margin-left dat doen, MAAR, maar die margin-left heeft als nulpunt het eerste element.

Als je wilt dat het 0 punt rechts van het 1e element is, dan moet je float: left; ook bij het 2e element doen, maar in ruil daarvoor loopt je element niet over de hele breedte van je pagina.

[ Bericht 33% gewijzigd door Mirel op 08-01-2012 02:26:44 ]
When all else fails, you always have delusion.
pi_106549241
Hoe dan ook, een block element spant vanzelf de gehele breedte, behalve als het inline-block is of als hij float. Kortom: als je het tweede element een block laat en de eerste float zou het goed moeten komen.
  zondag 8 januari 2012 @ 02:27:04 #7
87680 Mirel
Mirel wil een bongophone.
pi_106549251
Als je het 2e element display block doet, en ook niet float, dan neemt margin-left als 0 punt het 1e element. Net getest :P
When all else fails, you always have delusion.
pi_106549273
Hmm, en een border-left van 10px ipv een margin?
  zondag 8 januari 2012 @ 02:33:30 #9
87680 Mirel
Mirel wil een bongophone.
pi_106549331
Dat doet ook niks. :P Ik ben benieuwd of het beter kan, maar voorlopig is het dus bij mij margin-left: 430px; ipv 10;. Vanaf element 1 dus :)

Slapen doei :W
When all else fails, you always have delusion.
pi_106549368
Hmm, ik ben bang dat je gelijk hebt. Zolang je zeker weet dat dat eerste item altijd even breed is is dat geen probleem. Het probleem is als die een variabele breedte heeft, daar zou toch een manier voor moeten zijn. Ik kom er alleen niet op.
pi_106549399
Of je geeft natuurlijk het eerste element een border-right van 10px. Dat werkt wel.
http://jsfiddle.net/rBmYa/
  zondag 8 januari 2012 @ 11:31:22 #12
87680 Mirel
Mirel wil een bongophone.
pi_106553612
Ik heb een background patroon voor de gehele body, kan in dat geval niet. En dan weet ik niet wat ik met border-right nog meer moet doen. Kleurtje geven is uit den boze. http://jsfiddle.net/rBmYa/4/ Hij maakt 'em weer dicht :P http://jsfiddle.net/rBmYa/9/ ook niet

[ Bericht 34% gewijzigd door Mirel op 08-01-2012 11:39:12 ]
When all else fails, you always have delusion.
pi_106573879
quote:
14s.gif Op zondag 8 januari 2012 02:36 schreef picodealion het volgende:
Hmm, ik ben bang dat je gelijk hebt. Zolang je zeker weet dat dat eerste item altijd even breed is is dat geen probleem. Het probleem is als die een variabele breedte heeft, daar zou toch een manier voor moeten zijn. Ik kom er alleen niet op.
Dit hele probleem lijkt simpel op te lossen door percentages mee te geven aan de lengte.
De vraag blijft altijd waarom je perse deze opbouw wilt hebben en dat de lengte aangepast wordt?
Hoezeer dit cruciaal is. Vaste lengte's geven meestal betere resultaten dan een variabele percentage.

Maarja mijn opbouw zou zijn

1
2
3
4
5
6
7
8
9
10
11
12
13
14		#left{
float:left;
background-color: #000 //black (short code hex 3 ipv 6)
width: 5%; //of hoeveel percentage
height: 20px;
}

#right{
float: right;
background-color: #000; //black (short code hex 3 ipv 6)
margin-left: 10px;
width: 95%;
height: 20px;
}
Is een mogelijke oplossing. Mogelijke 2e oplossing is float: left geven aan beide Divs
2 divs neer te zetten en deze percentages width mee te geven.


quote:
0s.gif Op zondag 8 januari 2012 11:31 schreef Mirel het volgende:
Ik heb een background patroon voor de gehele body, kan in dat geval niet. En dan weet ik niet wat ik met border-right nog meer moet doen. Kleurtje geven is uit den boze. http://jsfiddle.net/rBmYa/4/ Hij maakt 'em weer dicht :P http://jsfiddle.net/rBmYa/9/ ook niet
Border-right werkt ook niet zonder het een kleur mee te geven en een type soort. Hierover meer op: http://www.w3schools.com/css/css_border.asp
Je kan meerdere argumenten combineren bij de border, kortom je wilde een 10px border die eigenlijk niet bestond want er was geen type en kleur meegegeven.
1
2
3
4
5
6
7
8		div {  background: silver; }
body { background: red; }

#left {
    width: 200px;
    float: left;
    border-right: 1px #000 solid;
}


[ Bericht 6% gewijzigd door cablegunmaster op 08-01-2012 20:25:55 ]
Redacted
  dinsdag 10 januari 2012 @ 15:49:12 #14
12221 Tijn
Powered by MS Paint
pi_106644251
Is het mogelijk om de getallen van een ordered list te stylen?

Stel ik heb zoiets:

1
2
3
4
5
6		<ol>
    <li> iets</li>
    <li> iets</li>
    <li> iets</li>
    <li> iets</li>
</ol>

Dan ontstaat daar zo'n soort lijstje uit:

quote:
1. iets
2. iets
3. iets
4. iets
Nu wil ik de opmaak van die getallen veranderen. Kan dat, of moet ik er dan een unordered list van maken en zelf de getallen toevoegen aan de list items?
Verberg de nieuwsticker
  dinsdag 10 januari 2012 @ 15:50:10 #15
56176 Catch22-
Ben je Blind?!
pi_106644291
http://www.handleidinghtm(...)ype/voorbeelden.html

list-style:decimal?
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
  dinsdag 10 januari 2012 @ 15:56:17 #16
87680 Mirel
Mirel wil een bongophone.
pi_106644510
quote:
0s.gif Op zondag 8 januari 2012 20:16 schreef cablegunmaster het volgende:

[..]

Dit hele probleem lijkt simpel op te lossen door percentages mee te geven aan de lengte.
De vraag blijft altijd waarom je perse deze opbouw wilt hebben en dat de lengte aangepast wordt?
Hoezeer dit cruciaal is. Vaste lengte's geven meestal betere resultaten dan een variabele percentage.

Maarja mijn opbouw zou zijn
[ code verwijderd ]

Is een mogelijke oplossing. Mogelijke 2e oplossing is float: left geven aan beide Divs
2 divs neer te zetten en deze percentages width mee te geven.

[..]

Border-right werkt ook niet zonder het een kleur mee te geven en een type soort. Hierover meer op: http://www.w3schools.com/css/css_border.asp
Je kan meerdere argumenten combineren bij de border, kortom je wilde een 10px border die eigenlijk niet bestond want er was geen type en kleur meegegeven.
[ code verwijderd ]

Niet dat het een probleem maar ik heb dus dit: www.mirelmasic.nl Het gedoe bovenaan is net zo lang als de post eronder, en de rest van het menu is dan gescheiden en loopt door tot het einde.
When all else fails, you always have delusion.
  dinsdag 10 januari 2012 @ 15:57:27 #17
12221 Tijn
Powered by MS Paint
pi_106644553
quote:
11s.gif Op dinsdag 10 januari 2012 15:50 schreef Catch22- het volgende:
http://www.handleidinghtm(...)ype/voorbeelden.html

list-style:decimal?
Ja, dat snap ik. Maar ik bedoel: stel ik wil de getallen die ontstaan door list-style-decimal te gebruiken bijvoorbeeld groter maken, of een andere kleur, zonder verder de inhoud van het list item te stylen.

Ik denk niet dat het kan eerlijk gezegd.
Verberg de nieuwsticker
  dinsdag 10 januari 2012 @ 15:58:32 #18
56176 Catch22-
Ben je Blind?!
pi_106644599
Mja, dan moet je bijvoorbeeld die li een font-size geven en de inhoud in een span, die weer een kleinere font-size geven.

De getallen/tekens van de list-style nemen de stijl (kleur/grootte) van je LI over namelijk. Als je in de inhoud in een span zet, kan je die weer apart stylen.
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_106648541
quote:
14s.gif Op dinsdag 10 januari 2012 15:57 schreef Tijn het volgende:

[..]
Ik denk niet dat het kan eerlijk gezegd.
Jawel hoor, kan prima.

1
2
3
4
5
6
7
8		ol {
    counter-reset:li;
}

li:before {
    content:counter(li);
    counter-increment:li;
}

Meer info: http://www.456bereastreet(...)rdered_list_numbers/

Uiteraard pas vanaf IE8 ofzo. Maar voor IE7 is normale nummering of een Javascript-fallback natuurlijk zo gemaakt, mocht je dat nog willen supporten.
Nee.
pi_106649568
http://jsfiddle.net/codefuze/HYjEB/1/

Iemand een idee hoe ik dit in het midden krijg met een width van 320px? Het lukt me niet met een wrapper. ;(
"A goal without a plan is just a wish." - Antoine de Saint-Exupery
pi_106651705
quote:
0s.gif Op dinsdag 10 januari 2012 18:11 schreef Neraice het volgende:
http://jsfiddle.net/codefuze/HYjEB/1/

Iemand een idee hoe ik dit in het midden krijg met een width van 320px? Het lukt me niet met een wrapper. ;(
Wat moet in het midden? Alles?
Gewoon een wrapper met
1width: 320px; margin: 0 auto;
pi_106651778
Dat had ik dus ook gedaan, maar er is iets met de position:fixed van die main div vermoed ik. Krijg jij het aan de praat op jsfiddle?

Edit: Niet meer nodig, heb al een beter script.

[ Bericht 18% gewijzigd door Neraice op 10-01-2012 20:16:45 ]
"A goal without a plan is just a wish." - Antoine de Saint-Exupery
pi_106655464
waarom moet dat menu fixed zijn?
Is het sowieso wel de bedoeling dat de content naar rechts schuift?
zcflevo.nl
pi_106655517
Ja de content moest naar rechts schuiven, dat vind ik het juist het gave.

Maar ik heb inmiddels al een beter script gevonden.
"A goal without a plan is just a wish." - Antoine de Saint-Exupery
pi_106657355
Ik had de fixed over het hoofd gezien, dat werkt idd niet.
pi_106661436
Heb morgen toets maar ben in plaats van leren een design aan het maken. :')
"A goal without a plan is just a wish." - Antoine de Saint-Exupery
  dinsdag 10 januari 2012 @ 22:07:52 #27
12221 Tijn
Powered by MS Paint
pi_106662061
quote:
0s.gif Op dinsdag 10 januari 2012 17:45 schreef PimD het volgende:

[..]

Jawel hoor, kan prima.
[ code verwijderd ]

Meer info: http://www.456bereastreet(...)rdered_list_numbers/

Uiteraard pas vanaf IE8 ofzo. Maar voor IE7 is normale nummering of een Javascript-fallback natuurlijk zo gemaakt, mocht je dat nog willen supporten.
Baas! _O_
Verberg de nieuwsticker
pi_106662534
quote:
14s.gif Op dinsdag 10 januari 2012 22:07 schreef Tijn het volgende:

[..]

Baas! _O_
Ik heb het toevallig pas nodig gehad op m'n werk, anders had ik het zo 1-2-3 ook niet geweten en was ik ws. ook gegaan voor het stylen van de li en de tekst in de li in een <span> zetten en die een andere kleur etc. geven :D

CSS *;
Nee.
pi_106677959
Welke breedte en hoogte houden jullie aan als kader voor de belangrijkste informatie van de website?
  woensdag 11 januari 2012 @ 12:57:48 #30
56176 Catch22-
Ben je Blind?!
pi_106678112
960 breedte, hoogte niet vast.

Contentblokken maximaal 600 breed en liever niet meer dan 2-3 alinea's per pagina (contentblokken dus)
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_106678496
quote:
11s.gif Op woensdag 11 januari 2012 12:57 schreef Catch22- het volgende:
960 breedte, hoogte niet vast.

Contentblokken maximaal 600 breed en liever niet meer dan 2-3 alinea's per pagina (contentblokken dus)
Nee, dat heeft te maken met leesbaarheid :Y Dat is me wel bekend.

Echt geen hoogte? Of gewoon de standaard 1024x... 800 is dat toch? Dan zal ik maar 700-800 aanhouden. Ik wil op de homepage een wow-effect meegeven. Dat mag dan niet wegvallen
  woensdag 11 januari 2012 @ 13:14:27 #32
56176 Catch22-
Ben je Blind?!
pi_106678614
Dan zou ik inderdaad voor max. 800 pixels gaan.
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_106678765
De hoogte stuur je dmv de hoeveelheid content op de pagina. Als het te lang wordt staat er gewoon te veel content op.
zcflevo.nl
  woensdag 11 januari 2012 @ 13:23:24 #34
56176 Catch22-
Ben je Blind?!
pi_106678903
Tenzij je plaatjes enzo toevoegt. Maar dat was ook de vraag niet helemaal geloof ik.
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_106679076
quote:
14s.gif Op woensdag 11 januari 2012 13:19 schreef KomtTijd... het volgende:
De hoogte stuur je dmv de hoeveelheid content op de pagina. Als het te lang wordt staat er gewoon te veel content op.
Neee, het gaat me om wat je ziet als je een website opent, dus de bovenste x pixels. Sommige mensen willen niet scrollen, daar moet ik rekening mee houden en moet ik ze dus door de bovenste pixels teasen en de onderste pixels nieuwsgierig maken... Denk ik.
pi_106679475
ahzo.
Ik denk dat je dan iets van 700 pixels aan moet houden, gezien de populariteit van laptopschermen van 768 pixels...
zcflevo.nl
pi_106679592
Oke, zal ik rekening mee houden dan! O+ Dankjewel!
pi_106683521
Ik heb een website met allemaal verouderde pagina's die zijn geindexeerd door google. Nu wil ik die weg hebben en dat die oude links doorlinken naar de index; hiervoor gebruik ik Mod_Rewrite.

Nu linkt hij wel door, maar zijn mijn foto's en css opmaak weg. Hoe moet ik dat goedzetten?

1
2
3
4		RewriteEngine On
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule . index.html [L]
pi_106684417
Deze regel ertussen:

RewriteCond %{REQUEST_FILENAME} !\.(css|jpg|jpeg|gif|png)$

Zelf evt. bestandsextensies toevoegen die je gebruikt.

-edit-
Maar waarom doe je dat alleen als het bestaande mappen en/of bestanden zijn? Want dat is waar -f en -d op checken..
pi_106687433
Ik heb ff een eerste opzetje gemaakt voor een mobiele website, maar het is het toch nog net niet. Wat vinden jullie? Iemand tips?

SPOILER
Om spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.
"A goal without a plan is just a wish." - Antoine de Saint-Exupery
pi_106687723
quote:
0s.gif Op woensdag 11 januari 2012 17:02 schreef Neraice het volgende:
Ik heb ff een eerste opzetje gemaakt voor een mobiele website, maar het is het toch nog net niet. Wat vinden jullie? Iemand tips?

SPOILER
Om spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.
Je middelste vlakken zijn kleiner dan de boven en onder vlakken.

Wie is dat in je avatar eigenlijk?
pi_106687937
Dat is opzettelijk, de bovenste en de onderste zijn header en footer en de grote daaronder is voor een slider.

En de dame in m'n avatar, ik heb geen idee :P.
"A goal without a plan is just a wish." - Antoine de Saint-Exupery
pi_106693057
Lijkt me een aardige layout hoor :).
pi_106694688
Bedankt. :) Nog suggesties?
"A goal without a plan is just a wish." - Antoine de Saint-Exupery
pi_106709053
quote:
14s.gif Op woensdag 11 januari 2012 13:42 schreef KomtTijd... het volgende:
ahzo.
Ik denk dat je dan iets van 700 pixels aan moet houden, gezien de populariteit van laptopschermen van 768 pixels...
Netbooks verkopen ook leuk en hebben een hoogte van 600 pixels... Evengoed is het wel handig om de belangrijkste dingen zo te plaatsen dat ze altijd eerst in beeld passen, in de eerste ca. 700 pixels.
fokstok.nl
pi_106714784
quote:
14s.gif Op woensdag 11 januari 2012 15:49 schreef picodealion het volgende:
Deze regel ertussen:

RewriteCond %{REQUEST_FILENAME} !\.(css|jpg|jpeg|gif|png)$

Zelf evt. bestandsextensies toevoegen die je gebruikt.

-edit-
Maar waarom doe je dat alleen als het bestaande mappen en/of bestanden zijn? Want dat is waar -f en -d op checken..
I dunno, had zoiets gevonden dus waarom niet uitproberen?
  donderdag 12 januari 2012 @ 10:05:35 #47
56176 Catch22-
Ben je Blind?!
pi_106714933
quote:
0s.gif Op donderdag 12 januari 2012 00:09 schreef Light het volgende:

[..]

Netbooks verkopen ook leuk en hebben een hoogte van 600 pixels... Evengoed is het wel handig om de belangrijkste dingen zo te plaatsen dat ze altijd eerst in beeld passen, in de eerste ca. 700 pixels.
600? denk niet dat die veel in omloop zijn, dan zou het iets van 800/960*800 moeten zijn, daar hou ik persoonlijk geen rekening mee.
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_106715439
quote:
0s.gif Op donderdag 12 januari 2012 09:56 schreef Crientj het volgende:

[..]

I dunno, had zoiets gevonden dus waarom niet uitproberen?
Het lijkt me een beetje een overbodige regel om gewoon wat oude pagina's naar de voorpagina te redirecten.
pi_106724910
Ik wil een background-image toevoegen aan een site.
Het is de bedoeling dat de achtergrond, ongeacht de resolutie, altijd op exact dezelfde plaats blijft staan.
De achtergrond die ik wil toevoegen is 1680px breed, maar deze verspringt telkens als ik de site bekijk op een computer met een lagere resolutie.
Ik heb zelf met % en px zitten werken in background-position, maar dat is ook niet de oplossing die ik zoek omdat de achtergrond dan alsnog mee blijft schuiven.
Onderstaande tekening geeft aan wat ik zoek: een background-image die altijd op dezelfde plaats blijft staan, ongeacht de resolutie waarin de site bekeken wordt.

  donderdag 12 januari 2012 @ 15:40:16 #50
56176 Catch22-
Ben je Blind?!
pi_106724981
background-attachment:fixed

:)
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_106728109
Zie screen: http://gyazo.com/7336cb916cdd517c53828674e3548771

Hoe kan ik ervoor zorgen dat er ruimte tussen de tekst en het plaatje zit, want dit ziet er niet mooi uit.
If not now, then when.
  donderdag 12 januari 2012 @ 17:12:01 #52
56176 Catch22-
Ben je Blind?!
pi_106728337
1img { margin:0 10px 10px 0; }
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_106729735
quote:
11s.gif Op donderdag 12 januari 2012 17:12 schreef Catch22- het volgende:

[ code verwijderd ]

Sorry maar ben nog heel erg noob, ik wil dat het permanent goed staat, niet dat ik het elke keer moet aanpassen. Waar moet ik dit neerzetten?

Toch bedankt.
If not now, then when.
  donderdag 12 januari 2012 @ 17:58:38 #54
220026 Treces
Hier had uw tekst kunnen staan
pi_106729772
quote:
0s.gif Op donderdag 12 januari 2012 17:57 schreef Yuri_Boyka het volgende:

[..]

Sorry maar ben nog heel erg noob, ik wil dat het permanent goed staat, niet dat ik het elke keer moet aanpassen. Waar moet ik dit neerzetten?

Toch bedankt.
In je css bestand. Waarschijnlijk hee het iets als style.css
pi_106730021
Gelukt. _O_

Edit: Hoe kan het eigenlijk dat die ruimte daartussen ontstaat?

http://gyazo.com/106485d6de5d00c75a2d7aee8e2f804b
If not now, then when.
  donderdag 12 januari 2012 @ 18:17:43 #56
87680 Mirel
Mirel wil een bongophone.
pi_106730330
Door die margin die je net erin zet toch? :P Of bedoel je nu iets anders? Is dat trouwens een oefensite ofzo? Want het ziet er heeel chaotisch uit, beter zoek je iets anders. :P
When all else fails, you always have delusion.
pi_106730930
quote:
0s.gif Op donderdag 12 januari 2012 18:17 schreef Mirel het volgende:
Door die margin die je net erin zet toch? :P Of bedoel je nu iets anders? Is dat trouwens een oefensite ofzo? Want het ziet er heeel chaotisch uit, beter zoek je iets anders. :P
Die margin was zodat er ruimte tussen de tekst en het plaatje zit.
If not now, then when.
  vrijdag 13 januari 2012 @ 13:11:52 #58
56176 Catch22-
Ben je Blind?!
pi_106758507
quote:
0s.gif Op donderdag 12 januari 2012 18:06 schreef Yuri_Boyka het volgende:
Gelukt. _O_

Edit: Hoe kan het eigenlijk dat die ruimte daartussen ontstaat?

http://gyazo.com/106485d6de5d00c75a2d7aee8e2f804b
ergens staat text-align:justify

maar ga je ajb inlezen voor je hier dingen gaat vragen. Het topic is wel voor dummies, maar een klein beetje basiskennis is wel wenselijk.
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_106818994
quote:
11s.gif Op donderdag 12 januari 2012 15:40 schreef Catch22- het volgende:
background-attachment:fixed

:)
Ik heb nog niet helemaal bereikt wat ik zoek.
Momenteel heb ik:
1
2
3
4
5
6
7
8
9
10
11
12
13
14		html {
          background-image:url(../images/siteachtergrond.png);
    background-attachment:fixed;
    background-position:center center;
}

#wrapper {
    margin-left: auto;
    margin-right:auto;
    margin-top: 20px;
    height: 650px;
    width: 870px;
    background-color: none;
}
Als ik het venster smaller maak schuift de achtergrond met de site mee. De achtergrond blijft op dezelfde positie tov de site staan als bij een gemaxed. venster. (wat ik ook wil).
Maak ik het venster lager dan schuift de site sneller dan de achtergrond.
Ik wil dus dat ongeacht de grootte van het venster en/of resolutie de achtergrond altijd op dezelfde positie blijft staan tov de site.
pi_106819283
Dan wil je hem dus niet fixed?
zcflevo.nl
pi_106821961
quote:
5s.gif Op zaterdag 14 januari 2012 23:47 schreef KomtTijd... het volgende:
Dan wil je hem dus niet fixed?
Fixed geeft toch aan dat de achtergrond blijft staan als je door een lange site naar beneden scrolled?
Dat heeft toch niks te maken met de positie van de site tov de achtergrond als de resolutie/venstergrootte verandert volgens mij.
pi_106822560
Met fixed positioneer je de achtergrond t.o.v. het browser window.
Ik neem aan dat jij met "de site" gewoon je wrapper bedoelt. Dan moet je 'm dus niet fixed zetten.
zcflevo.nl
pi_106832778
quote:
14s.gif Op zondag 15 januari 2012 01:26 schreef KomtTijd... het volgende:
Met fixed positioneer je de achtergrond t.o.v. het browser window.
Ik neem aan dat jij met "de site" gewoon je wrapper bedoelt. Dan moet je 'm dus niet fixed zetten.
"de site" is inderdaad de wrapper.
Ik heb geen idee hoe het voor elkaar kan krijgen.
Heb zitten experimenteren zonder de fixed maar dat levert ook niks op. Heb een speciale div gemaakt voor de achtergrond afbeelding maar dat helpt ook niet. In html de image een class gegeven en die in css bewerkt; geen resultaat.
Laatste hoop oplossing die ik nu kan bedenken is het samenvoegen van het websiteontwerp en de websiteachtergrond in 1 afbeelding, wat een rommeloplossing lijkt te zijn.
Of er moet iemand zijn die kan uitleggen hoe ik ervoor kan zorgen dat de site (aka: #wrapper) altijd opdezelfde positie tov de achtergrond blijft staan.
  dinsdag 17 januari 2012 @ 11:13:08 #64
267443 Cue_
Cuecumbergirl
pi_106904787
Even weer een kort vraagje:

ik heb een form waarin ik een vlootnr opgeef.
1
2
3
4		<tr>
    <td>Vlootnummer</td>
    <td><input style="text" name="vlootnr" id="vlootnr" onchange="go_vlootnr(this.form)" />  </td>
</tr>
wanneer ik deze vlootnr ingeef wil ik dat hij op een onchange actie mijn url veranderd
(go_vlootnr vult momenteel een 4tal andere velden in aan de hand van database gegevens die ik ophaal).

van: http:sitenaam/pagina.php
naar: http:sitenaam/pagina/php?vl=(vlootnr)

waarbij (vlootnr) dus net het opgegeven vlootnr is. Maar ik wil geen refresh ofzo van de pagina.
Hoe kan ik dit het beste doen?
  dinsdag 17 januari 2012 @ 11:16:48 #65
56176 Catch22-
Ben je Blind?!
pi_106904886
1
2
3		<?php
window.location.href = window.location.href + "#vlootnr=" + $("#vlootnr").val()
?>
Ofzo. Maar waarom zou je dit willen? Denk namelijk dat je ergens een denkfout maakt.
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
  dinsdag 17 januari 2012 @ 11:21:04 #66
267443 Cue_
Cuecumbergirl
pi_106905017
quote:
11s.gif Op dinsdag 17 januari 2012 11:16 schreef Catch22- het volgende:

[ code verwijderd ]

Ofzo. Maar waarom zou je dit willen? Denk namelijk dat je ergens een denkfout maakt.
Dat zou natuurlijk ook kunnen. De situatie.
Op het formulier vult men een vlootnr in. Vervolgens moet er een hele geschiedenislog worden weergegeven van dat betreffende vlootnr. En er zit een knop 'nieuw' bij, om dat geschiedenislog aan te vullen met nieuwe gegevens.
Ik heb dus in dat form dat de knop 'nieuw' opent wel het vlootnr dat net is ingegeven nodig.

Nu kan ik twee dingen doen volgens mij. Of er een submit button van maken waardoor het in een POST meegaat. Of het gewoon een button laten en het in de url meegeven, zodat ik hem eruit kan halen met een GET actie.

Ik weet niet welke hierin netter is.. of dat er nog andere opties zijn.
pi_106907742
quote:
0s.gif Op dinsdag 17 januari 2012 11:21 schreef Cue_ het volgende:

[..]

Dat zou natuurlijk ook kunnen. De situatie.
Op het formulier vult men een vlootnr in. Vervolgens moet er een hele geschiedenislog worden weergegeven van dat betreffende vlootnr. En er zit een knop 'nieuw' bij, om dat geschiedenislog aan te vullen met nieuwe gegevens.
Ik heb dus in dat form dat de knop 'nieuw' opent wel het vlootnr dat net is ingegeven nodig.

Nu kan ik twee dingen doen volgens mij. Of er een submit button van maken waardoor het in een POST meegaat. Of het gewoon een button laten en het in de url meegeven, zodat ik hem eruit kan halen met een GET actie.

Ik weet niet welke hierin netter is.. of dat er nog andere opties zijn.
Dan zou ik er inderdaad een POST van maken, of alles via AJAX.
pi_106932801
quote:
5s.gif Op zondag 15 januari 2012 14:57 schreef karton2 het volgende:

[..]

"de site" is inderdaad de wrapper.
Ik heb geen idee hoe het voor elkaar kan krijgen.
Heb zitten experimenteren zonder de fixed maar dat levert ook niks op. Heb een speciale div gemaakt voor de achtergrond afbeelding maar dat helpt ook niet. In html de image een class gegeven en die in css bewerkt; geen resultaat.
Laatste hoop oplossing die ik nu kan bedenken is het samenvoegen van het websiteontwerp en de websiteachtergrond in 1 afbeelding, wat een rommeloplossing lijkt te zijn.
Of er moet iemand zijn die kan uitleggen hoe ik ervoor kan zorgen dat de site (aka: #wrapper) altijd opdezelfde positie tov de achtergrond blijft staan.
Ik denk dat de vraag eerder is wat je in hemelsnaam gedaan hebt dat dat níét meer het geval is want dat is gewoon standaard gedrag. (als je geen position:fixed gebruikt dus)
zcflevo.nl
pi_106955289
quote:
14s.gif Op dinsdag 17 januari 2012 22:39 schreef KomtTijd... het volgende:

[..]

Ik denk dat de vraag eerder is wat je in hemelsnaam gedaan hebt dat dat níét meer het geval is want dat is gewoon standaard gedrag. (als je geen position:fixed gebruikt dus)
Heb het probleem opgelost.
Door het geexperimenteer met divs e.d. ben ik vergeten de code verderop in de CSS aan te passen aan de nieuwe situatie.. Volgende keer verder kijken dan m'n neus lang is.
  woensdag 18 januari 2012 @ 16:52:40 #70
56176 Catch22-
Ben je Blind?!
pi_106955316
CSS in een aparte file en de styles altijd inspecten met je webinspector.
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_106959946
Hoe kun je een iframe plaatsen zodat het bovenste gedeelte van de geframde website iets naar boven gaat? Zodat je bijvoorbeeld het bovenste menu van de geframde website niet meer ziet. :) ?
pi_106971726
scroll position.
zcflevo.nl
  donderdag 19 januari 2012 @ 04:02:34 #73
230788 n8n
Pragmatisch
pi_106978377
Ben een tijdje met een lay-out bezig waar ik even geen oplossing voor weet te vinden. De bedoeling is dat de header en footer fixed zijn en het scrollen horizontaal gaat. Punt is dat de content 100% van de hoogte moet gebruiken minus de hoogte van de header en footer. Dit laatste is waar het mis gaat.

Illustratie van de gewenste situatie:


De content mag nooit hoger zijn dan de viewfinder. Hartelijk dank voor uw inzichten :s)
“Specialization is for insects”.—Robert Heinlein
  donderdag 19 januari 2012 @ 09:17:30 #74
56176 Catch22-
Ben je Blind?!
pi_106979838
quote:
7s.gif Op donderdag 19 januari 2012 04:02 schreef n8n het volgende:
Ben een tijdje met een lay-out bezig waar ik even geen oplossing voor weet te vinden. De bedoeling is dat de header en footer fixed zijn en het scrollen horizontaal gaat. Punt is dat de content 100% van de hoogte moet gebruiken minus de hoogte van de header en footer. Dit laatste is waar het mis gaat.

Illustratie van de gewenste situatie:
[ afbeelding ]

De content mag nooit hoger zijn dan de viewfinder. Hartelijk dank voor uw inzichten :s)
fixed in de viewport?

En wat bedoel je met viewfinder? de viewport?

Je kan die content wrapper en die laten scrollen. Dit is wel een lastige case, hier moet je gewoon goed over nadenken en kijken hoe je het op kan lossen. Het is mij net even teveel werk om het voor te kauwen.
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_106982647
Je content moet dus horizontaal met de content meegroeien?

Dat is niet mogelijk met CSS, dat wordt javascripten. Maar ik denk dat je je nog eens achter de oren moet krabben of je dat echt wilt.
Bedenk ook eens hoe je layout er uitziet op een netbook met een viewport van 450px hoog ofzo.
zcflevo.nl
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[html, css, js] voor dummies #21
Index

» digital corner

» development

Forum Opties
Forumhop:
Hop naar:
(afkorting, bv 'KLB')