Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

twee plaatjes horizontaal naast elkaar in css

23 antwoorden
  • Wil twee plaatjes op een bepaalde afstand horizontaal naast elkaar plaatsen met css. En dat in een container waarin alleen die twee plaatjes staan. Heb al veel geprobeerd maar als ik het ene plaatje in de container rechts heb geplaatst via float right en verder heb gepositioneerd lukt het me niet het andere plaatje er fatsoenlijk aan de linkerkant bij te plaatsen. Met dit andere plaatje kan ik dan niets beginnen. Moet toch niet moeilijk zijn. Jan
  • [code:1:8ea2200d19] <p> <img class="links" src="jaggle.jpg" width="50" height="60" /> <img class="rechts" src="jaggle.jpg" width="50" height="60" /> </p> [/code:1:8ea2200d19] CSS [code:1:8ea2200d19] .links { margin-right: 50px; } .rechts { margin-left: 50px; } [/code:1:8ea2200d19] Nu heb je de afbeeldingen 100px uit elkaar staan.
  • Bedankt voor je reactie. Heb zelf eerst twee div's in html aangemaakt...Div..id Die gebruik jij in je reactie niet. Waarom maak je gebruik van een class? Is dat hetzelfde als een div..id? Bovendien zet je de html tussen p.../p. Misschien een rare vraag maar waarom? Ik heb hetvolgende gemaakt: <div id="logo"><img src="images/logo.gif" alt="balance logo" /></div> <div id="foto links"><img src="rondehoek1.gif" alt=" balance 1" /></div> Heb daarna in een uitwendig style.css een en ander proberen voor elkaar te krijgen; heb er nu dit staan (overigens al vele andere varianten geprobeerd op deze wijze. Maar steeds als ik het ene plaatje heb gepositioneerd via float left of right en zo, kan ik het andere plaatje niet meer positioneren) #container #logo { float: right; margin-top: 50px; } #container #foto links { float: left; height: 215px; width: 115px; margin-top: 50px; } #container { height: 300px; width: 900px; margin-left: auto; margin-right: auto; } En dit werkt dus bij mij niet.Vreemd!
  • Je geeft een element een class mee als je meerdere elementen de eigenschappen wil geven. Het verschill tussen id en class is dat je een id naam maar 1 keer per pagina mag gebruiken en een class zo vaak als je wilt. De meeste browsers zullen het wel de juiste eigenschappen toekennen als je vaker de zelfde id gebruikt maar het zal niet correct valideren, en is ook geen goede html. Dus als je bv meerdere plaatjes in je pagina hebt die je op de zelfde manier wil stylen is het handiger om ze een bepaalde class mee te geven ipv een id. Verder, als je twee plaatjes naast elkaar in een div wil zetten kan je ze alletwee links of rechts laten floaten en dan met marge de spacing regelen. De 1 links en de ander rechts laten floaten kan natuurlijk ook. Maar geef de plaatjes een class en niet persee de div. En is er een reden dat beiden plaatjes in een eigen div staan? [code:1:17470d8c6f]<div> <img class="left" src="iets.jpg" /> <img class="right" src="ietsanders.jpg" /> </div>[/code:1:17470d8c6f] en in de CSS [code:1:17470d8c6f].left { float: left; margin: 0 0 0 20px;} .right { float: right; margin: 0 20px 0 0;}[/code:1:17470d8c6f] Omdat plaatjes inline elementen zijn kunnen ze ook zonder float naast elkaar worden gezet (alleen niet als ze elk in een ander div staan) met float gaat het positioneren iets makkelijker. Daarnaast mogen er [b:17470d8c6f]geen![/b:17470d8c6f] spaties staan in id of class namen, gebruik een "-" of een "_". Probeer ook zo [i:17470d8c6f]niet[/i:17470d8c6f] specifiek mogelijk te zijn. Dus niet "#container #logo" maar alleen "#logo" tenzij het problemen opleverd met [url=http://www.htmldog.com/guides/cssadvanced/specificity/]specificity[/url]. [i:17470d8c6f]edit: wat foutjes[/i:17470d8c6f]
  • Het is me nu gelukt. Gelukkig maar ben er dagen mee bezig geweest. Bedankt voor jullie reacties. Heb nu twee classes aangemaakt. Voor elke afbeelding er 1 aangemaakt. En daarbij elk de css gedefinieerd. Maar heb nog wel een vraag over die class. Deze afbeeldingen positioneer ik maar een keer op de pagina. Zou ik dus ook een id kunnen gebruiken. Zo heb ik voor de footer ook een div id gemaakt. Betekent jouw verhaal drewster dat ik eigenlijk beter overal een class van kan maken? Of begrijp ik het verkeerd. En het #container#fotolinks ontstaat doordat ik in dreamweaver 8 werk. Die geeft die naam dan als voorbeeld aan.
  • class gebruik je: Als het obect waarop je het wil toepassen meerdere keren gebruikt id gebruik je: Als het obect maar een keer gebruikt Je gebruik maakt van JS (id's zijn aan te 'roepen' met JS) Op zich kun je altijd een class gebruiken, ligt puur aan hoe jij het fijner vind werken. Het MAG, het MOET niet.
  • [quote:ddc1f1bbed="Jan2000"]Betekent jouw verhaal drewster dat ik eigenlijk beter overal een class van kan maken? Of begrijp ik het verkeerd. En het #container#fotolinks ontstaat doordat ik in dreamweaver 8 werk. Die geeft die naam dan als voorbeeld aan.[/quote:ddc1f1bbed] Soms, niet zo vaak, kan je problemen met specificiteit krijgen. Dus dat in je CSS meerdere selectors naar een zelfde element wijzen. De regels worden uitgevoerd die de meest specifieke selector hebben. Om dit soort selectors: div#container div ul.links li a { ....} te vermijden (beetje overdreven) is het handig om een zo in-specifieke selector te gebruiken tenzij een meer specifieke selector vereist is... conflicten in specificiteit kunnen soms moeilijk te herkennen en te vinden zijn. Hier komt nog een verschil tussen een id en een class boven. Een id is per difinitie selectiever dan een class, daar is een punten systeem voor maar dat is verder niet zo interessant. BV; [code:1:ddc1f1bbed]<style> #main p {color:blue} .red p {color:red} </style> .... <div id="main"> <div class="red"><p>tekst</p> </div></div>[/code:1:ddc1f1bbed] De kleur van de tekst hier zal blauw zijn en niet rood omdat de id specifieker is, ook al komt de class later en is de p het eerste kind van die div...dit is verder niet van heel groot belang maar wel handig om in je achterhoofd te houden. Je zou alles een class kunnen geven en dat zou op zich prima werken, zoals johnny zegt is het een beetje afhankelijk van je voorkeur. Ik gebruik eigenlijk alleen id, tenzij ik weet dat ik een bepaald element vaker in mijn pagina op dezelfde manier wil stylen, zoals een plaatje, een paragraaf of een header. gr Drew
  • Bedankt voor jullie reacties. Heb nu nog wel een probleen waar ik niet direct uitkom. Het betreft de positionering ten opzichte van elkaar. Heb het volgende gemaakt nu: Een container met daarin: Bovenin gecentreerd een div met tekst dan daaronder twee div's voor elk een plaatje en daaronder gecentreerd op de bodem van de container een soort footer met tekst. Nou ja op de bodem, probeer het vast op de bodem te krijgen maar dit lukt nog niet zo.! ( hoe?) Heb een en ander nu wat gepositioneerd maar als ik het venster verklein, blijkt een en ander in elkaar te schuiven en niet meer zijn plaats te behouden. Zo verschuift de tekst op een bepaald moment bij het kleiner worden van het venster of de plaatjes verschuiven over elkaar heen. Heb de container nu de position van relative gegeven. Is dit juist? Hoe moet ik nu de anderen postioneren om ze vast aan hun plaats te houden bij veranderde venstergrootte. Heb al op internet gekeken naar absolute en relative maar kom er nu nog niet uit. gr. Jan
  • [quote:135c4d9451="Jan2000"]Heb een en ander nu wat gepositioneerd maar als ik het venster verklein, blijkt een en ander in elkaar te schuiven en niet meer zijn plaats te behouden. Zo verschuift de tekst op een bepaald moment bij het kleiner worden van het venster of de plaatjes verschuiven over elkaar heen. Heb de container nu de position van relative gegeven. Is dit juist? Hoe moet ik nu de anderen postioneren om ze vast aan hun plaats te houden bij veranderde venstergrootte. Heb al op internet gekeken naar absolute en relative maar kom er nu nog niet uit. gr. Jan[/quote:135c4d9451] Probeer absolute en relatieve positinering te vermijden, dit veroorzaakt vaak problemen doordat het in verschillende browsers verschillend positioneerd. Verder is het heel moeilijk te zeggen wat je fout doet zonder de code te zien, als je al iets [i:135c4d9451]persee[/i:135c4d9451] fout doet.
  • Ok, ik ga nog eens wat uitproberen, Jan]
  • De code die ik nu gebruik is: tekstwit is de tekst die gecentreerd bovenaan de container moet staan. Daaronder fotolinks en daarnaast het logo. Beiden respectievelijk links en rechts op enige afstand gecentreerd van het midden Tekstbottom is de tekst gecentreerd op de bodem van de container. Zoals ik het nu heb floept het alle kanten uit als ik het venster verklein. #container { height: 230px; width: auto; margin-left: auto; margin-right: auto; background-image: url(images/footer.jpg); background-repeat: repeat-x; margin-top: 70px; background-color: #BBBBFF; position: relative; } .tekstwit { font-size: small; color: #FFFFFF; text-align: center; margin-top: 7px; position: relative; } .fotolinks { float: left; margin-left: 150px; height: 160px; width: 118px; margin-bottom: 0px; margin-top: 20px; } .logo { margin-top: 20px; margin-right: 150px; margin-bottom: 40px; position: absolute; margin-left: 100px; } .tekstbottom { font-size: small; margin-left: auto; width: auto; text-align: center; background-image: url(images/footerdown.png); background-repeat: repeat-x; margin-right: auto; height: 25px; color: #FFFFFF; margin-bottom: 0px; margin-top: 200px; } gr. Jan
  • [quote:6bb186dacc="Jan2000"]De code die ik nu gebruik is: ... gr. Jan[/quote:6bb186dacc]De HTML erbij is ook redelijk essentieel. Daarnaast; ergens alleen "posistion: relative" te geven heeft geen zin, het enige wat dit doet is zeggen dat het element gepositioneerd moet worden relatief aan zijn natuurlijke positie in de flow van de pagina. Als je er niet bij zegt hoeveel die moet afwijken van zijn natuurlijke positie dan verranderd er niets. Vergelijkbare geld voor absolute positionering. [url=http://www.w3schools.com/css/pr_class_position.asp]Link[/url] Ook ff voor de vorm, dit: [i:6bb186dacc]margin-top: 200px; margin-right: auto; margin-bottom: 0px; margin-left: auto;[/i:6bb186dacc] kan je ook schrijven als: [i:6bb186dacc]margin: 200px auto 0;[/i:6bb186dacc] het werkt zo, de margins moet je in deze volgoorde neerzetten: [i:6bb186dacc]margin: top right bottom left;[/i:6bb186dacc] en als de top en bottom of right en left hetzelfde zijn hoef je maar 1 van de 2 neer te zetten, als [i:6bb186dacc]alle[/i:6bb186dacc] margins hetzelfde zijn zet je er maar 1 neer. Dit kan je CSS een stuk verkleinen, wat het sneller laden van de pagina tot gevolg heeft. Dit kan je niet alleen voor margin doen maar ook voor padding, deze manier van noteren heet "[url=http://www.webcredible.co.uk/user-friendly-resources/css/css-shorthand-properties.shtml]shorthand[/url]" en je kan voor meerdere eigenschappen een "shorthand" notatie gebruiken, zoal background, font, border, outline en list-style. Je CSS wordt dan:[code:1:6bb186dacc] #container { height: 230px; width: auto; margin: 70px auto 0; background-image: #BBBBFF url(images/footer.jpg) repeat-x; } .tekstwit { font-size: small; color: #FFFFFF; text-align: center; margin-top: 7px; } .fotolinks { float: left; margin: 20px 0 0 150px; height: 160px; width: 118px; } .logo { margin: 20px 150px 40px 100px; } .tekstbottom { width: auto; height: 25px; margin: 200px auto 0; font-size: small; color: #FFFFFF; text-align: center; background: url(images/footerdown.png) repeat-x; }[/code:1:6bb186dacc]Zolang ik geen foutjes heb gemaakt :wink:
  • De Html-code voor de container en inhoud: <div id="container"> <div class="tekstwit"> tekst gecentreerd boven aan de container</div> <div class="fotolinks"><img src="images/fotolinks1.png" alt="fotolinks in de container" width="118" height="160" /></div> <div class="logo"><img src="images/logo6.png" alt="logo rechts van fotolinks in de container" width="320" height="160" /></div> <div class="tekstbottom">tekst gecentreerd op de bodem van de container</div> </div> Mijn eerste probleem is dat ik deze onderdelen zo moet plaatsen dat zij op hun plaats blijven als ik het browservenster verklein. Nu is het zo dat een en ander dan in elkaar overloopt en niet meer ten opzichte van elkaar gepositioneerd blijft. De witte tekst breekt dan op een gegeven moment af en een gedeelte verschijnt op een andere regel. Wat moet ik in css aanpassen? Ik kom daar totnutoe niet uit. Ten tweede begrijp ik de begrippen absoluut en relatief niet. Heb al op internet gekeken en enkele artikelen doorgelezen maar de essentie begijp ik niet. Kan iemand mij dat eenvoudig uitleggen. Ik heb het gevoel dat ik in die container daar misschien gebruik van moet maken. gr. Jan
  • [quote:e5a89ad3c7="Jan2000"]Ten tweede begrijp ik de begrippen absoluut en relatief niet. Heb al op internet gekeken en enkele artikelen doorgelezen maar de essentie begijp ik niet. Kan iemand mij dat eenvoudig uitleggen. Ik heb het gevoel dat ik in die container daar misschien gebruik van moet maken. gr. Jan[/quote:e5a89ad3c7] Eerst ff hier over dan maar; Als je even er van uitgaat dat je geen style in je pagina hebt dan komen bepaalde elementen in een bepaalde volgoorde en plaats in je html voor en dus ook in de browser (zonder style). Dit is zeg maar de natuurlijk positie van een element. Als je een element relatief gaat positioneren dan verplaats je het element dus ten opzichte van de [i:e5a89ad3c7]natuurlijke[/i:e5a89ad3c7] positie. Je verplaats het element dus relatief hiervan. Je gebruikt het zo; [i:e5a89ad3c7]element { position:relative; left: 10px top: 15px}[/i:e5a89ad3c7] hier verplaats ik dus het element 10 pixels naar rechts en 15 pixels naar beneden ten opzichte van de [i:e5a89ad3c7]natuurlijke[/i:e5a89ad3c7] positie. Bij absolute positionering, positioneer je het element ten opzichte van het element waarbinnen het zich bevind, dus; [i:e5a89ad3c7]element { position:absolute; left: 10px top: 15px}[/i:e5a89ad3c7] even ervan uitgaande dat het element zich in een div bevindt; dit betekend dat je het element 10 pixels rechts van de rechter rand en 15 pixels onder de top van de div waarbinnen het zich bevindt plaatst, onafhankelijk van de [i:e5a89ad3c7]natuurlijke[/i:e5a89ad3c7] positie van het element. Zo duidelijker...?
  • Drewster bedankt voor je heldere uitleg. Het is me nu een stuk duidelijker. Heb dit artikel ook nog eens doorgelezen: http://www.sceneone.nl/positionering/relatief.php Maar nu blijft mijn vraag nog hoe ik een en ander postioneer in die container zonder dat het vervormt wanneer ik het browservenster steeds kleiner maak. Begrijp wel uit de verhalen dat het vaak veiliger is geen 'position' toe te passen. maar heb dat al geprobeerd in de genoemde container maar dan blijf ik de vervelende vervorming houden! Vraag me af hoe de css er daarvoor dan moet uitzien. Jan
  • Wil nu ipv twee plaatjes dire plaatjes op enige afstand hozizontaal naast elkaar hebben. Johny321 schreef: <p> <img class="links" src="jaggle.jpg" width="50" height="60" /> <img class="rechts" src="jaggle.jpg" width="50" height="60" /> </p> Bedoelt hij met img class: div class?? Ik werk in dreamweaver en kon dit nergens vinden. Wil dus nu drie div's maken. Voor elk plaatje een en deze dan positie in css. Maar ja hoe in het totaal van de container! Met daarbij de boven en onder tekst.
  • [quote:ef73390562="Jan2000"]Wil nu ipv twee plaatjes dire plaatjes op enige afstand hozizontaal naast elkaar hebben. Johny321 schreef: <p> <img class="links" src="jaggle.jpg" width="50" height="60" /> <img class="rechts" src="jaggle.jpg" width="50" height="60" /> </p> Bedoelt hij met img class: div class?? Ik werk in dreamweaver en kon dit nergens vinden. Wil dus nu drie div's maken. Voor elk plaatje een en deze dan positie in css. Maar ja hoe in het totaal van de container! Met daarbij de boven en onder tekst.[/quote:ef73390562]Even hier over een snel antwoord, ik bekijk morgen je html wel ff wat beter. Je kan elk element dat je maar wilt een class of een id geven, dat hoeft niet persee een div te zijn. Een div heeft geen (nou ja, weinig) inherente eigenschappen, het is gewoon een methode om een onderdeel van je website te partitioneren. Maar je moet het niet over doen, als je geen div hoeft te gebruiken kan je dat ook beter niet doen daar wordt je html alleen maar onnodig gecompliceerd van. Drie plaatjes naast elkaar plaatsen kan ook best als je ze allemaal in 1 div zet. Ik gaf een voorbeeld in het eerste [url=http://forum.computertotaal.nl/phpBB2/viewtopic.php?p=1184380#1184380]antwoord [/url] dat ik gaf in deze thread alleen dan met 2 plaatjes. Dus het korte antwoord is nee, hij bedoeld niet div class. [i:ef73390562]PS: ik kan onderdehand een HTML/CSS zelfhelp site beginnen :wink: :P[/i:ef73390562]
  • Heb nu de plaatjes in een enkele div gestopt. Het ziet er nu zo uit: In de container: Bovenaan in de container gecentreerd 'tekstwit': een regel met tekst gecentreerd. Daaronder drie horizontaal naast elkaar gelegen afbeeldingen op enige afstand van elkaar met de middelste gecentreerd: fotolinks, logo en fotorechts. Daaronder op de bodem van de container gecentreerd 'tekstbottum': een regel met tekst onderaan de container Html: <div id="container"> <div class="tekstwit">een regel met tekst bovenaan de container</div> <div class="images"><img src="images/fotolinks.png" alt="foto links" class="fotolinks" /> <img src="images/logo7.png" alt="logo in het midden" class="logo" /><img src="images/fotorechts.png" alt="foto rechts" width="199" height="160" class="fotorechts" /></div> <div class="tekstbottom">een regel tekst op de bodem van de container gecentreerd </div> </div> css: #container { margin-left: auto; margin-right: auto; background-image: url(images/footer.jpg); background-repeat: repeat-x; margin-top: 70px; background-color: #BBBBFF; height: 275px; width: auto; } .tekstwit { font-size: small; color: #FFFFFF; text-align: center; margin-top: 5px; margin-left: auto; margin-right: auto; } .fotolinks { margin-right: 50px; margin-left: 150px; margin-top: 20px; margin-bottom: 15px; } .logo { margin-right: 75px; margin-left: 0px; margin-top: 0px; margin-bottom: 50px; } .fotorechts { margin-top: 10px; margin-left: 25px; margin-bottom: 50px; margin-right: auto; } .tekstbottom { font-size: small; width: auto; text-align: center; background-image: url(images/footerdown.png); background-repeat: repeat-x; height: 25px; color: #FFFFFF; margin-bottom: 0px; } Zowel in firefox als IE ziet het er redelijk uit maar ik blijf het verschijnsel houden dat als ik het browservenster verklein vanuit bijvoorbeeld rechtsonder dat bv de afbeeldingen na enige tijd onder elkaar komen te staan en de tekstregels ook afbreken een een gedeelte onder elkaar komt te staan. Wat moet ik veranderen? Waarschijnlijk iets in css? Jan
  • Hoorde van iemand dat dit probleem alleen is op te lossen door elk plaatje apart in een div te zetten en elk plaatje links te floaten! Kent iemand dit verschijnsel? Jan
  • De container van de plaatjes een absolute breedte geven. Dan blijven de plaatjes naast elkaar staan, ook als het scherm kleiner is dan de width van die container. Er ontstaat uiteraard een hortizontale scrollbalk... Dat dan weer wel. In het volgende voorbeeld ga ik er vanuit dat de plaatjes inclusief alle witruimte die je links en rechts erbij wilt hebben 630 pixels nodig hebben...[code:1:271fddacd1]<style type="text/css"> #container { width: 630px; } .plaatje { float: left; } </style>[/code:1:271fddacd1] [code:1:271fddacd1] <div id="container"> <img src="plaatje1.jpg" class="left"> <img src="plaatje2.jpg" class="left"> <img src="plaatje3.jpg" class="left"> </div>[/code:1:271fddacd1]

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.