http___www.ucionica.net_trikovi_div-100-posto-visine-1280__1.xml
1.1 1.2 1.3 2.1 2.2 2.3 2.4 3.1 4.1 5.1 5.2 5.3 5.4 5.5 5.6 5.7 5.8 5.9 5.10 5.11 5.12 5.13 5.14 5.15 5.16 5.17 5.18 5.19 5.20 5.21 5.22 5.23 6.1
This article explains how you can create callouts using CSS and without using a single image. This will use the CSS thick border technique for creating slant area. Look at the callouts below: This callout is created only using CSS. The arrow shown in the callout is basically a DIV with thick up border and transparent left and right border. And its height and width are 0. You only see the border or the DIV which will create the arrow like effect. Here is the complete CSS and html code of this: .calloutUp { height: 0; width: 0; border-bottom: 12px solid #ffffff; border-left: 12px dotted transparent; border-right: 12px dotted transparent; left: 0px; top: 0px; margin-left: 20px; z-index: 10; } .calloutUp2 { position: relative; left: -10px; top: 2px; height: 0; width: 0; border-bottom: 10px solid #9999ff; border-left: 10px dotted transparent; border-right: 10px dotted transparent; z-index: 11; } .calloutDown { height: 0; width: 0; border-top: 12px solid #ffffff; border-left: 12px dotted transparent; border-right: 12px dotted transparent; left: 0px; top: 0px; margin-left: 20px; z-index: 11; } .calloutDown2 { position: relative; left: -10px; top: -12px; height: 0; width: 0; border-top: 10px solid #9999ff; border-left: 10px dotted transparent; border-right: 10px dotted transparent; z-index: 10; } .divContainerUp { background-color: #9999ff; border: solid 1px #ffffff; position: relative; top: -1px; z-index: 9; width: 500px; padding: 4px; } .divContainerDown { background-color: #9999ff; border: solid 1px #ffffff; position: relative; top: 1px; z-index: 3; width: 500px; padding: 4px; } .divContainerMain { background-color: #ccccff; padding: 8px; } Up Side Callout     Ramesh Soni  Said            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dignissim tincidunt turpis. Mauris pede. Vestibulum gravida magna id nibh. In nec urna. Sed ut purus. Duis sit amet lacus ornare massa mattis consequat. Donec nec tellus. Nam quis nulla viverra diam faucibus dictum. Nulla facilisi. Donec sit amet dolor at sapien accumsan consectetuer. Down Side Callout    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dignissim tincidunt turpis. Mauris pede. Vestibulum gravida magna id nibh. In nec urna. Sed ut purus. Duis sit amet lacus ornare massa mattis consequat. Donec nec tellus. Nam quis nulla viverra diam faucibus dictum. Nulla facilisi. Donec sit amet dolor at sapien accumsan consectetuer. Ramesh Soni  Said Here is a full example and up side and down side callouts.
1.1 1.2 2.1 3.1 8.1 9.1 9.2 10.1 11.1 12.1 13.1 14.1 14.2 15.1 16.1 17.1 18.1
U ovom kratkom CSS i (x)HTML vodiču otkriti ćemo kako postaviti div na 100% visine browsera isključivo korištenjem CSS-a. S ovim problemom vjerojatno ste se imali prilike susresti ukoliko se bavite izradom web stranica. (x)HTML (x)HTML kôd unutar body taga izgleda ovako: CSS Recimo da div sa id-om wrap treba razvući na 100% visine vidljivog dijela browsera. U tom slučaju CSS kôd treba izgledati ovako: * { margin: 0; padding: 0; } #wrap { position: fixed; top: 0; right: 0; bottom: 0; left: 0; } #container { position: relative; } Kratko objašnjenje Div element sa id-om wrap razvući će se na 100% širine i visine vidljivog dijela browsera zbog top, right, bottom i left property-a. Potrebno je postaviti i position: fixed; za slučaj kada div sa id-om container ima veću visinu od vidljivog dijela prozora. CSS position property na selektoru #container postavili smo kako div sa id-om wrap ne bi prešao preko sadržaja diva sa id-om container. Ovaj trik često je primjenjiv kod izrade overlaya preko cijelog sadržaja. Napomena: Trik ne funkcionira u Internet Exploreru 6. Nadamo se da Vam je vodič koristio.