Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Boogvormige 'venstertjes'

12 antwoorden
  • Hier was ik weer met een vraagje. Als je op de site [url]http://www.nodoubt.com[/url] kijkt, zie je daar 'witte venstertjes' met een grijzige titelbalk erboven. Hier heb ik twee vragen over. 1. Hoe is het mogelijk om boogvormige randen te geven aan die venstertjes. 2. Hoe is het mogelijk om tekst over deze afbeeldingen heen te typen?
  • 1) ja, ze bestaan uit een achtergrond afbeelding (http://www.nodoubt.com/images/bg_titlehome.gif) 2) over achtergrond afbeeldingen kan je gewoon tekst typen hoor ;): [code:1:b1c3236ec0] <div style="background: url(background.gif)"> WHAHA!</div>[/code:1:b1c3236ec0] dat geeft aan achtergrond afbeelding, met text er over heen.
  • Ik heb het ook wel eens zien doen mbv. uitsluitend css. Waarbij het wel de vraag is of het in alle browsers werkt natuurlijk.
  • ik heb ook nog een manier met javascript, maar dit vergt een hele aparte denkwijze: http://www.html.it/articoli/nifty/index.html
  • Die eerste manier van s.Mighty is toch puur CSS? Is alleen inline, niet extern. Die tweede manier is voor ronde hoeken zonder vaste breedte. Op de No Doubtsite is de box van een vaste breedte, dus kun je volstaan met één background-image waar de ronde hoeken al in verwerkt zitten. Dat kun je goed zien als je Firefox gebruikt en de pagina-info opvraagt. Anywayz, die ronde hoeken zijn dus een beetje een illusie, het is een rechthoekig plaatje waar ronde hoeken in zijn 'getekend'. Overigens zijn er [url=http://www.smileycat.com/miaow/archives/000044.html]diverse manieren voor boxjes met ronde hoeken zonder vaste breedte en hoogte[/url]. Die zijn ingewikkelder dan de No Doubtmanier.
  • [quote:38fcbb4766="gerben"]Ik heb het ook wel eens zien doen mbv. uitsluitend css. Waarbij het wel de vraag is of het in alle browsers werkt natuurlijk.[/quote:38fcbb4766]In de CSS-3-specificaties staat een property border-radius: http://www.w3.org/TR/css3-background/#the-border-radius Maar ik denk niet dat er browsers zijn die het ondersteunen, Mozilla kent wel -moz-border-radius [code:1:38fcbb4766]-moz-border-radius: 5%[/code:1:38fcbb4766]
  • Ik ben er mee bezig gegaan, maar stuit op enkele problemekes. Een 'boogvormige' div die ik heb aangemaakt kan ik niet breder maken dan een voorgaande. Terwijl ik dit wel ingegeven heb. Verder kan ik de div ook niet rechts uitlijnen, hoewel mijn P dit wel aangeeft. Hoe los ik dit op? Bvd. Mijn div. [code:1:a5a139095c] <BR><BR><BR><BR> <P align="right"> <div class="menuupdate" align="left"> <div class="topupdate"> </div> <P class="tekst"> Home<BR> Nieuws<BR> Agenda<BR> Schoolclub<BR> Foto's<BR> Contact<BR> Links<BR> Forum</P> <div class="bottomupdate"> </div></div></P> [/code:1:a5a139095c] En mijn stylesheet: [code:1:a5a139095c].menuupdate { width: 80px; background-color: #F90; color: #fff;} .menuupdate p { margin: 0 10px;} .topupdate { background: url(bg_titlehome.gif) no-repeat top left; } .bottomupdate { background: url(bg_bothome.gif) no-repeat top left; padding: 1px; margin: 1px;}[/code:1:a5a139095c]
  • Ik heb eerlijk gezegd geen idee wat je probeert te bereiken, het helpt wellicht om een [i:967a2e3d20]werkend[/i:967a2e3d20] voorbeeld als uitgangspunt te nemen (bijv. bij andere sites spieken in de source). Aan de hand van welk voorbeeld heb je gewerkt? Voor mensen op het forum helpt het als je een voorbeeld geeft van hoe het eruit moet zien. Een div kan niet in een p en een p kan ook niet in een p. Verder gebruik je CSS, maar zet je wel 'align=left' in je markup. Waarom dat ook niet in je CSS? Verder zie ik dat je een hoop breaks gebruikt. Om ruimte te creëren aan de buitenzijden van een element, gebruik je margins. Voor het opmaken van een [i:967a2e3d20]lijst[/i:967a2e3d20] met opties gebruik je list-elementen, zie het [url=http://css.maxdesign.com.au/listutorial/]Listutorial[/url].
  • 1. Het is overgenomen van [url]http://kalsey.com/2003/07/rounded_corners_in_css[/url]. Ik heb echter de bovenste rondingen en de onderste rondingen als twee aparte images gemaakt, niet losse hoekjes. 2. Die <BR>'s zijn niet als margin bedoeld, maar t.o.v. een vorige div. Hoe doe ik dat dan? 3. dat ik het niet in de stylesheet heb gedaan, is omdat ik eerst even wilde proberen, dan pas overhevelen. 4. Die voorgaande div (punt 2) heb ik links uitgelijnd, door in de TD "align=left" neer te zetten. De tweede moet dus rechts, dit kan niet met een P om die div heen dus. Hoe dan? 5. Hoe verander ik de groote dan? 6. Die list zal ik bekijken. Dank. /edit Mijn breedte probleem is al opgelost. Maar de rest...
  • In die lijst die ik gaf, staat onderaan ook aangegeven welke methoden te prefereren zijn, nl. die ene die s.Mighty al gaf, en de methoden van 456 Berea Street. Bij de eerste staat uitgebreide uitleg, bij de tweede is het vooral spieken in de source. Let bij die laatste alleen op alle .teaser-classes. Probeer een div t.o.v. een andere div te positioneren m.b.v. margin (bijv. margin-top). Stop de zaken die in een box moeten, in een box (d.w.z. in een div). De tekst in de box stop je de meeste gevallen in een heading (h1, h2, etc.), een alinea (p) en/of een list (ol of ul).
  • dat je in je td align="left" hebt staan, maak ik uit op dat je nog tabellen gebruikt, dat kan wel eens het grote probleem zijn, omdat je dan een div gaat inperken, tot de breedte van de td, en dat kan tot problemen zorgen ;) ps. [url=http://trekgate.scifispace.net/v2/]hier nog[/url] een werken voorbeeld met nifty corners
  • Ik heb zo'n javascriptje die mn hoeken afrondt, ergens van een site gehaald. Heb een grasplaatje als achtergrond, dus hij klopt niet helemaal, echter is het camogroen dus valt bijna niet op dat het stukje rond de hoeken egaal is :lol:

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.